CollectionView Xamarin 网格视图大小调整答案

【问题标题】：CollectionView Xamarin grid view sizingCollectionView Xamarin 网格视图大小调整
【发布时间】：2021-08-04 03:45:02
【问题描述】：

我正在使用 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 似乎是我想要的布局和项目源的最佳选择。

【问题讨论】：

请贴出相关代码/xaml
你试过设置图片的 VerticalAignment 吗？
是的，没有任何反应。图像仍然不同步。我认为这是因为单击网格内的图像不是问题。问题在于它周围的人。 Ideally when the TVN (card) is selected the entire row would be lifted not just the individual item.只是不知道如何做到这一点。 @杰森
不确定这是否有帮助，试试 ExpanderView docs.microsoft.com/en-us/xamarin/community-toolkit/views/…
“是的，什么都没有发生。” - 您是否在每个项目的顶部布局（我认为这里是网格）和图像本身上都设置了 VerticalAlignment=Start ?在所有项目上（不仅仅是扩展项目）。顺便说一句，要查看每个项目区域内发生的情况，请在项目的每个级别设置不同的背景颜色 - 这将向您显示层次结构的哪个级别未能到达顶部（垂直开始）。

标签： xamarin xamarin.forms

【解决方案1】：

在 GitHub 论坛上挖掘了 Xamarin 的错误和更新后，有人提到只使用 SyncFusion 的 sfListview 会员资格并没有那么糟糕，如果它使使用 Xamarin 更容易，我的公司愿意为此付费。这不是我希望的解决方案，但它有效，而且他们的客户支持很棒。下面是参考 https://help.syncfusion.com/xamarin/listview/working-with-sflistview

【讨论】：