XAML中实现CollectionView图标垂直水平居中及自动适配大小

我想在矩形区域（截图中绿色框内）同时实现图标的垂直和水平居中，但目前只能通过GridItemsLayout的方向实现单轴居中。手动设置图标尺寸虽然能让它适配容器，但这种方法不规范，在不同设备上显示效果也不一致。希望能实现图标居中且自动适配大小。

问题截图：

对应代码（问题中的CollectionView为最后一个控件）：

<Grid
    Padding="3"
    BackgroundColor="{StaticResource Primary}"
    ColumnDefinitions="*,*,*,*,*">
    <Image Source="{Binding DisplayIcon}" />
    <Grid RowDefinitions="auto,auto,*" 
          Grid.Column="1" 
          Grid.ColumnSpan="3"
          HorizontalOptions="FillAndExpand"
          VerticalOptions="CenterAndExpand">
        <Label
            Grid.Row="0"
            FontAttributes="Bold"
            FontSize="Medium"
            Text="{Binding Name}"
            VerticalOptions="Start"/>
        <ProgressBar
            Grid.Row="2"
            Progress="{Binding Progress}"
            ProgressColor="{StaticResource Secondary}"
            VerticalOptions="EndAndExpand" />
    </Grid>
    <CollectionView
        VerticalOptions="CenterAndExpand"
        Grid.Column="4"
        BackgroundColor="Green"
        ItemsSource="{Binding ProgressIcons}">
        <CollectionView.ItemsLayout>
            <GridItemsLayout Orientation="Horizontal" Span="3"/>
        </CollectionView.ItemsLayout>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Image BackgroundColor="Transparent" Source="{Binding Image}" HorizontalOptions="CenterAndExpand"/>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</Grid>

1. 让CollectionView内部内容完全居中 #

给CollectionView添加HorizontalOptions="CenterAndExpand"，同时调整GridItemsLayout的间距属性，确保布局容器占满可用空间且内部元素居中：

<CollectionView
    VerticalOptions="CenterAndExpand"
    HorizontalOptions="CenterAndExpand"
    Grid.Column="4"
    BackgroundColor="Green"
    ItemsSource="{Binding ProgressIcons}">
    <CollectionView.ItemsLayout>
        <GridItemsLayout 
            Orientation="Horizontal" 
            Span="3"
            HorizontalItemSpacing="0"
            VerticalItemSpacing="0"
            />
    </CollectionView.ItemsLayout>
    <!-- 模板修改见下文 -->
</CollectionView>

2. 让图标自动适配容器大小 #

在Image控件中设置Aspect="AspectFit"保证图标比例不变，同时添加居中属性，可选限制最大尺寸防止图标过大：

<CollectionView.ItemTemplate>
    <DataTemplate>
        <Image 
            BackgroundColor="Transparent" 
            Source="{Binding Image}" 
            HorizontalOptions="Center"
            VerticalOptions="Center"
            Aspect="AspectFit"
            MaxWidth="40"
            MaxHeight="40"/>
    </DataTemplate>
</CollectionView.ItemTemplate>

3. 替代方案：用FlexLayout实现更灵活的居中 #

如果GridItemsLayout的效果不符合预期，可以换成FlexLayoutItemsLayout，它的居中控制更直观：

<CollectionView.ItemsLayout>
    <FlexLayoutItemsLayout 
        Direction="Row"
        Wrap="Wrap"
        JustifyContent="Center"
        AlignItems="Center"
        AlignContent="Center"/>
</CollectionView.ItemsLayout>

修改后，图标会在绿色框内同时实现水平和垂直居中，且通过AspectFit自动适配大小，无需手动固定尺寸，在不同设备上的显示效果更一致。

内容的提问来源于stack exchange，提问作者RonnieG