如何在Xamarin Forms中扩展Grid中的StackLayout？

Question

我有一个Xamarin Forms应用程序。我的页面底部应该长成这样：

目前它看起来像这样：

问题是StackLayout不能扩展以填充空间。这是我的XAML代码：

<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="End" Spacing="0" >
  <Grid ColumnSpacing="0" RowSpacing="0" HorizontalOptions="FillAndExpand">
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="40" />
    </Grid.RowDefinitions>

    <StackLayout HorizontalOptions="CenterAndExpand" Grid.Column="0" Grid.Row="1" BackgroundColor="Blue" >
      <Label Text="First" TextColor="#FFFFFF" HorizontalOptions="CenterAndExpand" />
    </StackLayout>
    <StackLayout HorizontalOptions="CenterAndExpand" Grid.Column="1" Grid.Row="1" BackgroundColor="Red" >
      <Label Text="Second" TextColor="#FFFFFF" HorizontalOptions="CenterAndExpand" />
    </StackLayout>

  </Grid>
</StackLayout>

我该如何在Grid中扩展StackLayout？我希望蓝色和红色背景可以在中间相遇。

- Uros

---

你尝试过在列定义中设置33.3*作为宽度吗？对于两列，可以设置为50*。 - Alberto Méndez

是的，它会给出相同的结果。 - Uros

从元素中移除CenterAndExpand？ - Alberto Méndez

是的，它也会给出相同的结果。 - Uros

Answer 1

您将StackLayouts设置为CenterAndExpand，这意味着它们只会占用所需的空间。您应该使用FillAndExpand来扩展它们:

<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="End" Spacing="0" >
  <Grid ColumnSpacing="0" RowSpacing="0" HorizontalOptions="FillAndExpand">
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="40" />
    </Grid.RowDefinitions>
    <StackLayout HorizontalOptions="FillAndExpand" Grid.Column="0" Grid.Row="1" BackgroundColor="Blue" >
      <Label Text="First" TextColor="#FFFFFF" HorizontalOptions="CenterAndExpand" />
    </StackLayout>
    <StackLayout HorizontalOptions="FillAndExpand" Grid.Column="1" Grid.Row="1" BackgroundColor="Red" >
      <Label Text="Second" TextColor="#FFFFFF" HorizontalOptions="CenterAndExpand" />
    </StackLayout>
  </Grid>
</StackLayout>

- Steven Thewissen

Answer 2

我知道这是一个老帖子 - 只是在尝试解决同样的问题时偶然发现了这个。 但是，“FillAndExpand”不是万能的解决方案。您可以在此代码中看到，包括Grid在内的每个嵌套元素都设置为FillAndExpand，但没有任何扩展发生。

    <ScrollView
        x:Name="rightScroll"
        Grid.Row="0"
        Grid.RowSpan="2"
        Grid.Column="1"
        Margin="0"
        HorizontalOptions="FillAndExpand"
        VerticalOptions="FillAndExpand"
        BackgroundColor="Yellow">
        <FlexLayout
            Margin="0"
            Padding="0"
            AlignContent="Start"
            AlignItems="Start"
            BindableLayout.ItemsSource="{Binding CurrentIncidentReport.Photos}"
            Direction="Column"
            HorizontalOptions="FillAndExpand"
            JustifyContent="SpaceBetween"
            VerticalOptions="FillAndExpand">
            <BindableLayout.ItemTemplate>
                <DataTemplate>
                    <Grid HorizontalOptions="FillAndExpand" BackgroundColor="DarkOrange">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="80"/>
                            <ColumnDefinition x:Name="textColumn"/>
                        </Grid.ColumnDefinitions>
                        <Image
                            Grid.Column="0"
                            Aspect="Fill"
                            HeightRequest="{StaticResource IconSize}"
                            Source="{Binding Photo.Source}"
                            VerticalOptions="CenterAndExpand"
                            WidthRequest="{StaticResource IconSize}" />
                        <!--  The editor sizes in jumps matching text size. Have to size the image to the editor not the other way around  -->
                        <Frame
                            Grid.Column="1"
                            Margin="0"
                            Padding="3"
                            BorderColor="Red"
                            HeightRequest="{StaticResource IconSize}"
                            HorizontalOptions="FillAndExpand">
                            <Frame.Triggers>
                                <DataTrigger
                                    Binding="{Binding HasValidDescription}"
                                    TargetType="Frame"
                                    Value="True">
                                    <Setter Property="BorderColor" Value="Transparent" />
                                </DataTrigger>
                            </Frame.Triggers>
                            <controls:CustomEditor
                                x:Name="descEditor"
                                Margin="0,4,0,4"
                                BackgroundColor="White"
                                HorizontalOptions="FillAndExpand"
                                Keyboard="Chat"
                                Placeholder="Enter description of photo"
                                PlaceholderColor="Gray"
                                Text="{Binding Description, Mode=TwoWay}"
                                TextColor="Black"
                                Unfocused="CustomEditor_Unfocused" />

                        </Frame>
                    </Grid>
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </FlexLayout>
    </ScrollView>

- Clint StLaurent