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

【问题标题】：How to expand StackLayout inside Grid in Xamarin Forms?如何在 Xamarin Forms 的 Grid 中扩展 StackLayout？
【发布时间】：2017-04-26 07:52:41
【问题描述】：

我有 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？我希望蓝色和红色的背景在中间接触。

【问题讨论】：

您是否尝试在列定义中将33.3* 设置为宽度？ 50* 两列？
是的。它给出了相同的结果。
并从元素中删除CenterAndExpand？
是的。它也给出了相同的结果。

标签： xamarin xamarin.forms

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：