CollectionView Xamarin 网格视图调整大小
CollectionView Xamarin grid view sizing
我正在使用 GridItemsLayout
orientation=“Vertical” Span=“2”
处理集合视图。
当我单击展开网格项目下部的按钮时。目前只能通过使用 ItemSizingStrategy.MeasureAllItems
我才能使下部展开。我想知道是否有一种方法可以控制项目在图像上的定位,以便图像始终对齐并且只有下半部分均匀展开。
我知道每个项目都有自己的布局,但这看起来很乱。我读过文档提到这种类型的尺寸。
<StackLayout>
<CollectionView x:Name="CollectionList"
VerticalOptions="FillAndExpand"
ItemsSource="{Binding Shares}"
IsGrouped="True"
ItemSizingStrategy="MeasureAllItems">
<!--HEADER-->
<CollectionView.GroupHeaderTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal"
Padding="5"
BackgroundColor="#f7f7fb">
<Label x:Name="labelname"
Text="{Binding GroupKey}"
/>
<Button Text=" More"
FontSize="16"
Clicked="OpenButton_Clicked"/>
</StackLayout>
</DataTemplate>
</CollectionView.GroupHeaderTemplate>
<!--TEMPLATING-->
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical" Span="2" />
</CollectionView.ItemsLayout>
<!--BODY-->
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="viewmodels:ShareViewModel">
<Grid Padding="5" Margin="1,0,1,0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ImageButton x:Name="image"
Source="{Binding ImageLink}"
WidthRequest="150"
Clicked="FullImageView"
Grid.ColumnSpan="2"
Aspect="AspectFill"
Grid.Row="0"
Grid.Column="0"/>
<Label FontSize="16"
Text="{Binding Name}"
Grid.Row="1"
Grid.Column="0"/>
<Label x:Name="label_more"
Text="More"
Grid.Row="1"
Grid.Column="1"
HorizontalTextAlignment="End"/>
<Label
Text="{Binding CreateDate}"
Grid.Row="2"
Grid.Column="0"/>
<ImageButton IsVisible="{Binding TVNImageSet}"
Command="{Binding BindingContext.ToggleTVNCommand, Source={x:Reference Name=sharepage}}"
CommandParameter="{Binding .}"
Source="addresscard.png"
Grid.Row="2"
Grid.Column="1">
</ImageButton>
<!--Lower Section if the card is tapped (EXPAND)-->
<StackLayout
IsVisible="{Binding TVNVisible}"
Grid.Row="3"
Grid.ColumnSpan="2">
<StackLayout Orientation="Horizontal"
IsVisible="{Binding PhoneVisible}"
ClassId="{Binding Phone}">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"
NumberOfTapsRequired="1"
/>
</StackLayout.GestureRecognizers>
<Image Source="call.png"
WidthRequest="15"/>
<Label
FontSize="12"
Text="{Binding Phone}" />
</StackLayout>
<Label
FontSize="12"
Text="{Binding Address}"
IsVisible="{Binding AddressVisible}">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_1" NumberOfTapsRequired="1"/>
</Label.GestureRecognizers>
</Label>
</StackLayout>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
所有 BindingContext.ToggleTVNCommand
所做的就是将 TVNVisible
设置为 true,这会显示“膨胀药水”的下半部分。如果有更简单的方法来显示此数据,我不需要使用集合视图,但 CollectionVView 似乎是我想要的布局和项目源的最佳选择。
在 GitHub 论坛上挖掘关于 Xamarin 的错误和更新后,有人提到只使用 SyncFusion 的 sfListview,会员资格还不错,如果我的公司能够使用 Xamarin,愿意为此付费更轻松。
这不是我所希望的解决方案,但它确实有效,而且他们的客户支持也很棒。
以下是参考
https://help.syncfusion.com/xamarin/listview/working-with-sflistview
我正在使用 GridItemsLayout
orientation=“Vertical” Span=“2”
处理集合视图。
当我单击展开网格项目下部的按钮时。目前只能通过使用 ItemSizingStrategy.MeasureAllItems
我才能使下部展开。我想知道是否有一种方法可以控制项目在图像上的定位,以便图像始终对齐并且只有下半部分均匀展开。
我知道每个项目都有自己的布局,但这看起来很乱。我读过文档提到这种类型的尺寸。
<StackLayout>
<CollectionView x:Name="CollectionList"
VerticalOptions="FillAndExpand"
ItemsSource="{Binding Shares}"
IsGrouped="True"
ItemSizingStrategy="MeasureAllItems">
<!--HEADER-->
<CollectionView.GroupHeaderTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal"
Padding="5"
BackgroundColor="#f7f7fb">
<Label x:Name="labelname"
Text="{Binding GroupKey}"
/>
<Button Text=" More"
FontSize="16"
Clicked="OpenButton_Clicked"/>
</StackLayout>
</DataTemplate>
</CollectionView.GroupHeaderTemplate>
<!--TEMPLATING-->
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical" Span="2" />
</CollectionView.ItemsLayout>
<!--BODY-->
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="viewmodels:ShareViewModel">
<Grid Padding="5" Margin="1,0,1,0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ImageButton x:Name="image"
Source="{Binding ImageLink}"
WidthRequest="150"
Clicked="FullImageView"
Grid.ColumnSpan="2"
Aspect="AspectFill"
Grid.Row="0"
Grid.Column="0"/>
<Label FontSize="16"
Text="{Binding Name}"
Grid.Row="1"
Grid.Column="0"/>
<Label x:Name="label_more"
Text="More"
Grid.Row="1"
Grid.Column="1"
HorizontalTextAlignment="End"/>
<Label
Text="{Binding CreateDate}"
Grid.Row="2"
Grid.Column="0"/>
<ImageButton IsVisible="{Binding TVNImageSet}"
Command="{Binding BindingContext.ToggleTVNCommand, Source={x:Reference Name=sharepage}}"
CommandParameter="{Binding .}"
Source="addresscard.png"
Grid.Row="2"
Grid.Column="1">
</ImageButton>
<!--Lower Section if the card is tapped (EXPAND)-->
<StackLayout
IsVisible="{Binding TVNVisible}"
Grid.Row="3"
Grid.ColumnSpan="2">
<StackLayout Orientation="Horizontal"
IsVisible="{Binding PhoneVisible}"
ClassId="{Binding Phone}">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"
NumberOfTapsRequired="1"
/>
</StackLayout.GestureRecognizers>
<Image Source="call.png"
WidthRequest="15"/>
<Label
FontSize="12"
Text="{Binding Phone}" />
</StackLayout>
<Label
FontSize="12"
Text="{Binding Address}"
IsVisible="{Binding AddressVisible}">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_1" NumberOfTapsRequired="1"/>
</Label.GestureRecognizers>
</Label>
</StackLayout>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
所有 BindingContext.ToggleTVNCommand
所做的就是将 TVNVisible
设置为 true,这会显示“膨胀药水”的下半部分。如果有更简单的方法来显示此数据,我不需要使用集合视图,但 CollectionVView 似乎是我想要的布局和项目源的最佳选择。
在 GitHub 论坛上挖掘关于 Xamarin 的错误和更新后,有人提到只使用 SyncFusion 的 sfListview,会员资格还不错,如果我的公司能够使用 Xamarin,愿意为此付费更轻松。 这不是我所希望的解决方案,但它确实有效,而且他们的客户支持也很棒。 以下是参考 https://help.syncfusion.com/xamarin/listview/working-with-sflistview