Xamarin Forms Center Collection查看内容答案

【问题标题】：Xamarin Forms Center CollectionView contentXamarin Forms Center Collection查看内容
【发布时间】：2020-09-21 05:01:26
【问题描述】：

我有问题。我创建了一个如下所示的页面：

现在我希望 CollectionView 的内容居中。我已经尝试在 HorizontalOptions=Center 上进行设置，但没有成功！

这是该部分的代码：

<StackLayout HorizontalOptions="CenterAndExpand">
    <CollectionView ItemsSource="{Binding coinDataList}" ItemsLayout="HorizontalList" Margin="0" HorizontalOptions="CenterAndExpand" BackgroundColor="Red">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Grid RowSpacing="0" Margin="20,0,20,0" HorizontalOptions="CenterAndExpand" Padding="0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="20" />
                        <RowDefinition Height="5" />
                        <RowDefinition Height="20" />
                        <RowDefinition Height="10" />
                        <RowDefinition Height="20" />
                    </Grid.RowDefinitions>

                    <Label Grid.Row="0" VerticalOptions="CenterAndExpand" HorizontalOptions="Center" Text="{Binding Coin}" FontAttributes="Bold" TextColor="#00D8FF" FontSize="18"/>
                    <Label Grid.Row="2" VerticalOptions="CenterAndExpand" HorizontalOptions="Center" Text="{Binding Price, StringFormat='{0:F2}'}" TextColor="White" FontSize="18"/>
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</StackLayout>

我该怎么做？

【问题讨论】：

随着项目数量的增加会发生什么？它应该如何居中？
没想到xD....你有什么建议吗？
从概念上讲，我认为您不能在滚动容器中将内容居中 - 就像您不能将垂直列表垂直居中一样
好的，我正在寻找一个 CarouselView，但我有一个简单的问题。是否可以同时显示例如 3 个项目？
我不知道您为什么不使用具有 2 列的垂直列表/集合？

标签： xaml xamarin xamarin.forms xamarin.android xamarin.ios

【解决方案1】：

您可以通过将BindableLayout 与水平方向的StackLayout 结合使用来实现此目的。这不会像CollectionView 那样高效，但是从您的 UI 来看，您的 ItemSource 集合中似乎不会有很多项目，但是您需要 UI 是动态的，并且在较少时均匀分布和居中项目。随着项目列表的增长，UI 看起来更像水平列表视图。

这里是最小的工作 XAML，您可以对其进行修改以适应您的项目。为简单起见，我在 XAML 中添加了所有内容（没有隐藏代码），因此您可以将此 XAML 直接插入内容页面并进行测试！

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:generic="clr-namespace:System.Collections.Generic;assembly=netstandard"
             mc:Ignorable="d"
             x:Class="Playground.MainPage">
    <ContentPage.Resources>
        <ResourceDictionary>
            <generic:List x:Key="SymbolNames" x:TypeArguments="x:String">
                <x:String>BTC</x:String>
                <x:String>LTC</x:String>
                <x:String>ETH</x:String>
                <x:String>OT1</x:String>
                <x:String>OT2</x:String>
                <x:String>OT3</x:String>
                <x:String>OT4</x:String>
                <x:String>OT5</x:String>
                <x:String>OT6</x:String>
            </generic:List>
        </ResourceDictionary>
    </ContentPage.Resources>

    <ScrollView Orientation="Horizontal" HeightRequest="60" VerticalOptions="Start">
        <StackLayout BindableLayout.ItemsSource="{Binding Source={StaticResource SymbolNames}}" Orientation="Horizontal">
            <BindableLayout.ItemTemplate>
                <DataTemplate>
                    <Label Text="{Binding}" HorizontalOptions="CenterAndExpand" VerticalOptions="Center" Margin="10"/>
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </StackLayout>
    </ScrollView>
</ContentPage>

3 项时的 UI：

UI 当多个溢出项时：

【讨论】：