XAML MAUI -使用可用宽度计算集合视图网格列

mrzz3bfm 于 2023-03-27 发布在其他

关注(0)|答案(1)|浏览(143)

我，我正在探索.NET MAUI，并试图采样一些东西，我遇到的一件事是，我如何计算集合视图网格列数，以适应可用空间。
我设法让它以某种方式工作，但只发现如何获得de设备屏幕宽度，但我的主要目标是在桌面上使用应用程序太，并在桌面上并不总是要在全屏使用，所以计算不工作得很好.
到目前为止，我得到了这个，使用绑定到视图模型上的计算，使用设备屏幕宽度，到GridItemsLayout Span：
XAML：

<StackLayout>
        <CollectionView ItemsSource="{Binding MenuItems}"
                        x:Name="clvMenuItems">
            <CollectionView.ItemsLayout>
                <GridItemsLayout 
                    Orientation="Vertical"
                    Span="{Binding NumHorizontalViewMenuItems}"
                    VerticalItemSpacing="4"
                    HorizontalItemSpacing="4" />
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid RowDefinitions="Auto, *" BackgroundColor="Orange">
                        <ImageButton Grid.Row="0"
                           HorizontalOptions="Start"
                           AbsoluteLayout.LayoutBounds="25,12,39,39"
                           Margin="16,16,0,8"
                            MaximumHeightRequest="50"
                           Source="{Binding Icon}"/>

                        <Label VerticalOptions="Start"
                           HorizontalOptions="End"
                           IsVisible="{Binding ShowBadge}"
                           WidthRequest="38"
                           Margin="16"
                           FontAttributes="Bold"
                           FontSize="16"
                           Text="NEW"
                           TextColor="{DynamicResource BadgeThemeColor}"/>
                        <Label Grid.Row="1"
                           VerticalTextAlignment="End"
                           Margin="16,0,10,16"
                           HorizontalTextAlignment="Start"
                           Text="{Binding Name}"
                           FontSize="16"
                           FontFamily="Roboto"
                           MaxLines="2"
                           LineHeight="1"
                           LineBreakMode="WordWrap"
                           TextColor="{DynamicResource TextThemeColor}"
                           BackgroundColor="Transparent" />
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>

视图模型：

public int NumHorizontalViewMenuItems => CalcHorizontalViewMenuItems();

        static int MenuItemMaxWidth = 120;

        private int CalcHorizontalViewMenuItems()
        {
            return (int)Math.Floor(DeviceDisplay.Current.MainDisplayInfo.Width / MenuItemMaxWidth);
        }

任何帮助将不胜感激！谢谢

xaml

来源：https://stackoverflow.com/questions/75750313/maui-calculate-collection-view-grid-columns-using-available-width

1条答案

按热度按时间

xv8emn3q1#

有@ewerspej建议，我使用了FlexLayout和BindableLayout而不是CollectionView，因为它的设计更符合我想要达到的目标，某种风格的菜单，更适合大屏幕或小屏幕。
我在这里留下我所做的一个样本：

<ScrollView VerticalOptions="Start">
    <FlexLayout VerticalOptions="Start"
                HorizontalOptions="Fill"
                Direction="Row"
                Wrap="Wrap"
                AlignContent="Start"
                AlignItems="Start"
                JustifyContent="Start"
                Margin="5"
                Padding="0"
                BindableLayout.ItemsSource="{Binding MenuItems}">
        <BindableLayout.ItemTemplate>
            <DataTemplate>
                <Grid RowDefinitions="Auto, *" BackgroundColor="Transparent" Margin="2">
                    <Grid.GestureRecognizers>
                        <TapGestureRecognizer 
                            Command="{Binding Source={RelativeSource AncestorType={x:Type viewModels:MainViewModel}}, Path=OpenMenuCommand}"
                            CommandParameter="{Binding .}"/>
                    </Grid.GestureRecognizers>

                    <Image Grid.Row="0"
                       HorizontalOptions="Center"
                       AbsoluteLayout.LayoutBounds="25,12,39,39"
                       Margin="5"
                       MaximumHeightRequest="50"
                       MaximumWidthRequest="50"
                       Source="{Binding Icon}"/>

                    <Label VerticalOptions="Start"
                       HorizontalOptions="End"
                       IsVisible="{Binding ShowBadge}"
                       WidthRequest="38"
                       Margin="5"
                       FontAttributes="Bold"
                       FontSize="14"
                       Text="NEW"
                       TextColor="{DynamicResource BadgeThemeColor}"/>
                    
                    <Label Grid.Row="1"
                       VerticalTextAlignment="End"
                       Margin="5,0,5,5"
                       HorizontalTextAlignment="Center"
                       Text="{Binding Name}"
                       FontSize="16"
                       FontFamily="Roboto"
                       WidthRequest="90"
                       MaximumWidthRequest="90"
                       MaxLines="3"
                       LineHeight="1"
                       LineBreakMode="WordWrap"
                       TextColor="{DynamicResource TextThemeColor}"
                       BackgroundColor="Transparent" />

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

谢谢你的帮助。

赞(0）回复(0）举报 2023-03-27

我来回答

XAML MAUI -使用可用宽度计算集合视图网格列

1条答案

相关问题

热门标签

最新问答