Как центрировать список изображений в CollectionView / Xamarin

Question

У меня есть простой CollectionView для показа картинок по вертикали. CollectionView привязан к списку строк. Я хочу показать картинки в середине экрана. Но они всегда идут вверху экрана. Вот мой xaml:

<CollectionView ItemsSource="{Binding Pictures}" HorizontalOptions="Center" VerticalOptions="Center">
     <CollectionView.ItemTemplate>
         <DataTemplate>
             <StackLayout Padding="10" HorizontalOptions="Center" VerticalOptions="Center">
                 <Image Source="{Binding .}"/> 
             </StackLayout> 
         </DataTemplate>
     </CollectionView.ItemTemplate>
</CollectionView>

Важно: количество изображений не всегда одинаково.

Изображение

Экран Выстрел

Answer 1

Возможность отображения всего ColletionView в середине экрана определяется его родительским экраном. Если ваш родительский экран представляет собой StackLayout, взгляните на это изображение:

По умолчанию для стека выложено значение Orientation = "Vertical", поэтому все ваши усилия по настройке вертикальные положения детей будут игнорироваться.

Соответственно, если вы установите Ориентация = "Горизонтально", вы не сможете регулировать горизонтальные положения детей, но затем вы можете расположить их по центру экрана вертикально.

Итак, чтобы поместить метку в середину экрана, вы можете сделать это:

<StackLayout>
    <Button Text="Delete"/>
    <StackLayout Orientation="Horizontal">
        <Label HorizontalOptions="StartAndExpand" />
        <CollectionView WidthRequest="100">
            <CollectionView.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                    <x:String>Baboon</x:String>
                    <x:String>Capuchin Monkey</x:String>
                    <x:String>Blue Monkey</x:String>
                    <x:String>Squirrel Monkey</x:String>
                    <x:String>Golden Lion Tamarin</x:String>
                    <x:String>Howler Monkey</x:String>
                    <x:String>Japanese Macaque</x:String>
                </x:Array>
            </CollectionView.ItemsSource>
        </CollectionView>
        <Label HorizontalOptions="EndAndExpand" />
    </StackLayout>
</StackLayout>

и вот результат:

Надеюсь, это поможет.

Answer 2

Дайте всем видам максимальное количество пространства, которое они могут иметь, затем просто отцентрируйте изображение по вертикали и горизонтали.

<CollectionView ItemsSource="{Binding Pictures}">
     <CollectionView.ItemTemplate>
         <DataTemplate>
             <Grid Padding="10">
                 <Grid.RowDefinitions>
                     <RowDefinition Height="*"/>
                 </Grid.RowDefinitions>
                 <Grid.ColumnDefintions>
                     <ColumnDefinition Width="*"/>
                 </Grid.ColumnDefinitions>
                 <Image Grid.Row="0" Grid.Column="0" Source="{Binding .}" HorizontalOptions="Center" VerticalOptions="Center"/> 
             </Grid> 
         </DataTemplate>
     </CollectionView.ItemTemplate>
</CollectionView>

Answer 3

     <DataTemplate>
         <StackLayout Padding="10" HorizontalOptions="FillAndExpand">
             <Image Source="{Binding .}"  Aspect="AspectFit"  HorizontalOptions="CenterAndExpand" /> 
         </StackLayout> 
     </DataTemplate>

попробуйте добавить Aspect Aspect="AspectFit" Свойство на вашем изображении

Answer 4

Будет работать представление коллекции Height согласно счетчику списка.!

Xaml:

 <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
        <CollectionView
            x:Name="imageList"
            HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout
                        HorizontalOptions="FillAndExpand"
                        Spacing="10"
                        VerticalOptions="FillAndExpand">
                        <BoxView
                            Margin="10"
                            BackgroundColor="Yellow"
                            HeightRequest="30"
                            HorizontalOptions="Center"
                            WidthRequest="30" />
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>

.CS File :

 public MainPage()
        {
            InitializeComponent();
            var Imagelist = new List<string>();
            Imagelist.Add("a");
            Imagelist.Add("a");
            Imagelist.Add("a");
            Imagelist.Add("a");
            imageList.ItemsSource = Imagelist;
            imageList.HeightRequest = Imagelist.Count * 40;
        }

Снимок экрана: