Square pictures in grid layout

[Pawel]

Hello,

I'm having an issue with showing pictures in SfListView using grid layout. I uploaded current and desired result.

Code that I'm using:

            <pullToRefresh:SfPullToRefresh x:Name="pullToRefresh" Grid.Row="1"

                                           RefreshCommand="{Binding RefreshCommand}"

                                           ProgressBackgroundColor="{StaticResource Gray-White}"

                                           ProgressStrokeColor="{StaticResource PrimaryColor}"

                                           RefreshContentHeight="50"

                                           RefreshContentWidth="50"

                                           TransitionMode="SlideOnTop"

                                           IsRefreshing="{Binding IsBusy}">

                <pullToRefresh:SfPullToRefresh.PullableContent>

                    <listView:SfListView

                                     SelectionMode="None"

                                     IsScrollBarVisible="False"

                                     IsScrollingEnabled="False"

                                     ItemsSource="{Binding Images}"

                                     AutoFitMode="DynamicHeight"

                                     VerticalOptions="StartAndExpand"

                                     ItemSpacing="2"

                                     ItemSize="{Binding ItemSize}">

                        <listView:SfListView.HeaderTemplate>

                            <DataTemplate>

                                <Grid RowDefinitions="Auto, Auto" RowSpacing="0">

                                    <!--ALBUM RECEIVER-->

                                    <RelativeLayout Grid.Row="1" BackgroundColor="{StaticResource PrimaryLightColor}">

                                        <template:AlbumReceiverTemplate x:Name="albumReceiver" Grid.Row="1"/>

                                        <border:SfBorder BorderColor="{StaticResource PrimaryLightColor}"

                                                         BackgroundColor="White"

                                                         HorizontalOptions="Center"

                                                         CornerRadius="12"

                                                         VerticalOptions="Center"

                                                         HasShadow="True"

                                                         BorderWidth="3"

                                                         RelativeLayout.XConstraint= "{ConstraintExpression Type=RelativeToView, ElementName=albumReceiver, Property=Width, Factor=0.58}"

                                                         RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=albumReceiver, Property=Height, Factor=0.79}">

                                            <buttons:SfButton

                                                         Style="{StaticResource IconButtonStyle}"

                                                         Text="{StaticResource PersonAdd}"

                                                         FontSize="27"

                                                         HeightRequest="45"

                                                         WidthRequest="45"

                                                         CornerRadius="10"

                                                         BackgroundColor="{StaticResource Salmon}" />

                                        </border:SfBorder>

                                    </RelativeLayout>

                                    <!--GROUP MEMBERS-->

                                    <panCake:PancakeView Grid.Row="2"

                                                         CornerRadius="0,0,20,20"

                                                         VerticalOptions="Start"

                                                         HeightRequest="120"

                                                         BackgroundColor="{StaticResource PrimaryLightColor}">

                                    </panCake:PancakeView>

                                    <StackLayout VerticalOptions="Start" Grid.Row="2" Spacing="0">

                                        <Label Text="Członkowie" Style="{StaticResource TitleLabelStyle}" HorizontalOptions="Start" Margin="15,-15,0,0" />

                                        <listView:SfListView SelectionMode="None"

                                                             Orientation="Horizontal"

                                                             IsScrollBarVisible="False"

                                                             HeightRequest="150"

                                                             ItemsSource="{Binding GroupMembers}"

                                                             VerticalOptions="Start"

                                                             ItemSpacing="5"

                                                             ItemSize="100">

                                            <listView:SfListView.ItemTemplate>

                                                <DataTemplate>

                                                    <border:SfBorder BackgroundColor="{DynamicResource Gray-100}"

                                                                     BorderColor="White"

                                                                     BorderWidth="1"

                                                                     CornerRadius="13"

                                                                     HasShadow="True">

                                                        <panCake:PancakeView Grid.Row="2" CornerRadius="20" Padding="10" BackgroundColor="{StaticResource Gray-100}">

                                                            <Grid RowDefinitions="70, Auto, Auto" RowSpacing="2">

                                                                <border:SfBorder Grid.Row="0"

                                                                     BackgroundColor="{DynamicResource Gray-100}"

                                                                     BorderColor="White"

                                                                     BorderWidth="1"

                                                                     CornerRadius="13"

                                                                     HasShadow="False">

                                                                    <ffimageloading:CachedImage Source="{Binding ProfilePictureUrl}"

                                                                    BackgroundColor="{DynamicResource Gray-200}"

                                                                    CacheDuration= "50"

                                                                    RetryCount= "3"

                                                                    RetryDelay= "500"

                                                                    DownsampleToViewSize = "true"

                                                                    Aspect="AspectFill" />

                                                                </border:SfBorder>

                                                                <Label Grid.Row="1"

                                                                       HorizontalOptions="Center"

                                                                       Style="{StaticResource SimpleLabelStyle}"

                                                                       Text="{Binding FirstName}"/>

                                                                <Label Grid.Row="2"

                                                                       HorizontalOptions="Center"

                                                                       Style="{StaticResource SimpleLabelStyle}"

                                                                       Text="{Binding LastName}"/>

                                                            </Grid>

                                                        </panCake:PancakeView>

                                                    </border:SfBorder>

                                                </DataTemplate>

                                            </listView:SfListView.ItemTemplate>

                                        </listView:SfListView>

                                        <Label Text="Zdjęcia" Style="{StaticResource TitleLabelStyle}" HorizontalOptions="Start" Margin="15,0,0,0" />

                                    </StackLayout>

                                </Grid>

                            </DataTemplate>

                        </listView:SfListView.HeaderTemplate>

                        <listView:SfListView.LayoutManager>

                            <listView:GridLayout SpanCount="3" />

                        </listView:SfListView.LayoutManager>

                        <listView:SfListView.ItemTemplate>

                            <DataTemplate>

                                <border:SfBorder

                                             BackgroundColor="{DynamicResource Gray-100}"

                                             BorderColor="White"

                                             BorderWidth="1"

                                             HeightRequest="{Binding ItemSize}"

                                             CornerRadius="13"

                                             HasShadow="False">

                                    <ffimageloading:CachedImage Source="{Binding PictureUrl}"

                                                                    BackgroundColor="{DynamicResource Gray-200}"

                                                                    CacheDuration= "50"

                                                                    RetryCount= "3"

                                                                    RetryDelay= "500"

                                                                    DownsampleToViewSize = "true"

                                                                    Aspect="AspectFill" />

                                </border:SfBorder>

                            </DataTemplate>

                        </listView:SfListView.ItemTemplate>

                        <listView:SfListView.LoadMoreTemplate>

                            <DataTemplate>

                                <listView:LoadMoreIndicator

                                        IsRunning="{Binding IsBusy, Source={x:Reference Name=listView}}"

                                        IsVisible="{Binding IsBusy, Source={x:Reference Name=listView}}"

                                        Color="{StaticResource PrimaryColor}"

                                        VerticalOptions="Center"

                                        Margin="0,0,0,15"

                                        HeightRequest="30"

                                        WidthRequest="30"/>

                            </DataTemplate>

                        </listView:SfListView.LoadMoreTemplate>

                    </listView:SfListView>

                </pullToRefresh:SfPullToRefresh.PullableContent>

            </pullToRefresh:SfPullToRefresh>

The problem is that I'm setting HeightRequest="{Binding ItemSize}" . When I set it like  HeightRequest="120" there is no issue.

What is the best way to show square pictures using grid layout?

Attachment: recordings_13324eab.zip

[Lakshmi Natarajan]

Hi Pawel, 

 

Thank you for using Syncfusion products. 

 

We would like to inform you that when we load images in the SfListView.ItemTemplate, we need to define the size of the Image . By default, the image is not loaded with the actual size in AutoFitMode, as it measures the size before the layout. Hence, we suggest you to define HeightRequest for the image as mentioned below.  

 

<syncfusion:SfListView x:Name="listView"  

                    ItemSpacing="2" 

                    ItemsSource="{Binding Gallerynfo}"     

                    ItemSize="{Binding ImageSize}" 

                    AutoFitMode="DynamicHeight"> 

 

    <syncfusion:SfListView.LayoutManager> 

        <syncfusion:GridLayout SpanCount="3"/> 

    </syncfusion:SfListView.LayoutManager> 

 

    <syncfusion:SfListView.ItemTemplate> 

        <DataTemplate> 

            <border:SfBorder 

            HeightRequest="{Binding Path=BindingContext.ImageSize, Source={x:Reference listView}}" 

            BackgroundColor="{DynamicResource Gray-100}" 

            BorderColor="White" 

            BorderWidth="1" 

            CornerRadius="13" 

            HasShadow="False"> 

 

                <Image Source="{Binding Image}" 

                    HeightRequest="{Binding Path=BindingContext.ImageSize, Source={x:Reference listView}}" 

                    BackgroundColor="{DynamicResource Gray-200}" 

                    Aspect="AspectFill" /> 

            </border:SfBorder> 

        </DataTemplate> 

    </syncfusion:SfListView.ItemTemplate> 

</syncfusion:SfListView> 

 

Screenshot 

 

 

Please refer to our user guidance document to load image in the ItemTemplate, 

UG links: 

https://help.syncfusion.com/xamarin/listview/item-size-customization#load-images-with-autofit-mode 

https://help.syncfusion.com/xamarin/listview/item-size-customization#limitations 

 

You can also refer to our image gallery documentation and sample from the following link, 

UG link: https://help.syncfusion.com/xamarin/listview/layouts#grid-layout 

Sample: https://github.com/SyncfusionExamples/GridLayout-with-xamarin.forms-listview 

 

Please let us know if you need further assistance. 

 

Regards, 

Lakshmi Natarajan