Question

我希望将一个子级集合绑定到一个视图，以便子级展开以（垂直）填充该视图，并平等地共享垂直空间。

我可以使用StackLayout来完成此操作，但是不能绑定子级集合。

<StackLayout VerticalOptions="FillAndExpand">
    <Label VerticalOptions="FillAndExpand">One</Label>
    <Label VerticalOptions="FillAndExpand">Two</Label>
    <Label VerticalOptions="FillAndExpand">Three</Label>
</StackLayout>

我可以使用ListView来做到这一点，但子级会堆叠在顶部，并且不能均匀展开以填充ListView。

<ContentView.Resources>
    <ResourceDictionary>
        <DataTemplate x:Key="ChildTemplate">
            <ViewCell>
                <Label Text="{Binding}" VerticalOptions="FillAndExpand" />
            </ViewCell>
        </DataTemplate>
    </ResourceDictionary>
</ContentView.Resources>
<ListView 
    VerticalOptions="FillAndExpand" 
    ItemsSource="{Binding Children}" 
    ItemTemplate="{StaticResource ChildTemplate}" />

我正在俯视某些东西，对吧？

Answer 1

如何使用网格？

  <Grid VerticalOptions="FillAndExpand">
     <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
     </Grid.RowDefinitions>
      <Label Grid.Row="0" VerticalOptions="FillAndExpand">One</Label>
      <Label Grid.Row="1" VerticalOptions="FillAndExpand">Two</Label>
      <Label Grid.Row="2" VerticalOptions="FillAndExpand">Three</Label> 
  </Grid>

Answer 2

我希望将一个子级集合绑定到一个视图，以便子级展开以（垂直）填充该视图。

一种解决方案：如果在 ListView 中，可以使用 Grid 布局，如下所示：

<ListView ItemsSource="{Binding Monkeys}" VerticalOptions="FillAndExpand" RowHeight="{Binding RowHeight}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid Padding="5" WidthRequest="240" HeightRequest="120">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="25" />
                        <RowDefinition Height="25" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="240" />
                    </Grid.ColumnDefinitions>
                    <Label Grid.Row="0" 
                    Text="{Binding Name}" 
                    FontAttributes="Bold"
                    LineBreakMode="TailTruncation" />
                    <Label Grid.Row="1" 
                    Text="{Binding Location}"
                    LineBreakMode="TailTruncation"
                    FontAttributes="Italic" 
                    VerticalOptions="End" />
                    <Label Grid.Row="2" 
                    Text="{Binding Details}"
                    LineBreakMode="TailTruncation"
                    FontAttributes="Italic" 
                    VerticalOptions="End" />
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

将网格添加到ListView.ItemTemplate，这里是Creating an Inline DataTemplate 。

两种解决方案：在 Xamarin.Forms 4.0-pre1 中，您还可以使用 CollectionView 处理网格：< / p>

<CollectionView ItemsSource="{Binding Monkeys}" >
            <CollectionView.ItemsLayout>
                <GridItemsLayout Orientation="Vertical"
                            Span="1" />
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout Padding="10">
                        <Frame BackgroundColor="LightGray"
                        OutlineColor="Black"
                        CornerRadius="10">
                            <Grid Padding="5" WidthRequest="240" HeightRequest="{Binding RowHeight}">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="25" />
                                    <RowDefinition Height="25" />
                                    <RowDefinition Height="25" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="240" />
                                </Grid.ColumnDefinitions>
                                <Label Grid.Row="0" 
                            Text="{Binding Name}" 
                            FontAttributes="Bold"
                            LineBreakMode="TailTruncation" />
                                <Label Grid.Row="1" 
                            Text="{Binding Location}"
                            LineBreakMode="TailTruncation"
                            FontAttributes="Italic" 
                            VerticalOptions="End" />
                                <Label Grid.Row="2" 
                            Text="{Binding Details}"
                            LineBreakMode="TailTruncation"
                            FontAttributes="Italic" 
                            VerticalOptions="End" />
                            </Grid>
                        </Frame>
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

更新：如果不想特殊的高度，可以将RowHeight从Modle绑定到Control，我已经更新了answer.Modle代码，如下所示：

 public double RowHeight { set; get; }
 RowHeight = (Application.Current.MainPage.Width -BarHeight - StatusBarHeight) / ItemsCount;
 // example RowHeight = (Application.Current.MainPage.Height - 44 - 20 ) /2

如何用相等大小的绑定子项填充Xamarin.Forms视图

2 个答案: