How to center the picture list in CollectionView / Xamarin

0
votes

I have simple CollectionView to show vertically pictures. The CollectionView is binded to string list. I want to show the pictures in the middle of the screen. But they come always at the top of the screen. Here is my 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>

Important: the count of the pictures is not always the same.

Image

Screen Shot

4
xamarinxamarin.forms
Can you use Grid instead of StackLayout in your DataTemplate and Check. StackLayout does not mind VerticalOptions – Nikhileshwar
Can you show me what are you exactly trying to achieve so i can quickly give you a solution? – FreakyAli
Hello @Nikhileshwar I cannot use Grid instead of Stacklayout because the count of the images is not always the same. – Salah Aldien Alsaleh
Hello @FreakyAli . I added a screen shot for what i want to do. I have a list of images and delete button. when i click the button an image will be deleted. I want to keep the images in the center of the screen. – Salah Aldien Alsaleh

4 Answers

2
votes

Whether the whole ColletionView is able to show in the middle of the screen is decided by it's parent screen. If your parent screen is a StackLayout, take a look at this picture: enter image description here

By default, your stacklayout is set to Orientation="Vertical", so all your effort to adjust children's vertical positions will be ignored.

Correspondingly, if you set Orientation="Horizontal", you won't be able to adjust children's horizontal positions, but you can then make them center in the screen vertically.

so, to put a Label in the middle of the screen you can do this:

<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>

and here is the result:

enter image description here

Hope it helps.

0
votes

Give all the views the maximum amount of space they can have, then just center the image both vertically and horizontally.

<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>
0
votes

Giving a collection view Height as per the count of the list would work.!

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;
        }

Screenshot:

enter image description here

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

try to add Aspect Aspect="AspectFit" Property on your image