Look for a function to programmatically set the ItemSize for each item.

[Steven]

I need this function to set manually for each item the ItemSize.

i thought something like that:

if (e.AddedItems.Count > 0)

{

 

    foreach (var item in KontrollList.SelectedItems)

    {

        item.ItemSize = 140;

    }

}

or this

KontrollList.Item[0].ItemSize = 140;

i want to display a construction drawing after click on it.

[Suthi Yuvaraj]

Hi Steven ,

We would like to let you know that , SfListView allows to  set the size of each item by
SfListView.QueryItemSize event. Please refer the below code snippet adding the QueryItemSize event
, where you can specify the size of each item.

Code snippet:

listView.QueryItemSize += ListView_QueryItemSize;

 

private void ListView_QueryItemSize(object sender, Syncfusion.Maui.ListView.QueryItemSizeEventArgs e)

{

    if (e.ItemIndex == 2)

    {

        e.ItemSize = 200;

    }

    else

    {

        e.ItemSize = 50;

    }

 

}

Please refer the below documentation for QuerySizeItem event,

UG Link: https://help.syncfusion.com/maui/listview/item-size-customization#customize-item-size-of-a-particular-item-on-demand

Also we would like to know that where you want to display the construction diagram after clicking on an item, which would be helpful for us to provide the solution as soon as possible.

Regards,

Suthi Yuvaraj.

[Steven]

Hey thanks for reply.

This function does nothing.

After procedure ItemSize reset automatically to 48 without to show me the size 200 for a while, it just dont change the size, which makes no sense because my itemsize is default 40 and if i remove the xaml code itemsize=40, then there also cannot be a default from 48.

Here my XAML

<syncfusion:SfListView x:Name="KontrollList"

                       Loaded="KontrollList_Loaded"

                       SelectionBackground="Blue"

                       Background="Gainsboro"

                       SelectionMode="Single"

                       QueryItemSize="KontrollList_QueryItemSize"

                       SelectionChanged="KontrollList_SelectionChanged"

                       ItemSpacing="5,10,5,0"

                       ItemsSource="{Binding Kontrollpunkte}">

    <syncfusion:SfListView.ItemTemplate>

        <DataTemplate>

            <Grid BackgroundColor="Transparent"

                  Padding="2.5,-2,2.5,-2"

                  ColumnSpacing="2.5"

                  ColumnDefinitions="40,*">

                <Border StrokeThickness="0"

                        StrokeShape="RoundRectangle 8,8,8,8"

                      >

                    <Image Source="{Binding Path=kontrollCheck}"

                           HorizontalOptions="Center"

                           HeightRequest="30"

                           VerticalOptions="Center"

                           Aspect="Fill" />

                </Border>

                <Border Grid.Column="1"

                        StrokeThickness="0"

                        StrokeShape="RoundRectangle 8,0,8,0">

                    <Grid RowDefinitions="*">

                        <Label   Text="{Binding Path=beschreibung}"

                                 VerticalOptions="Center"

                                 Margin="10,0,0,0"

                                 LineBreakMode="WordWrap"

                                 TextColor="#4B39EF"

                                 FontFamily="Roboto-Medium"

                                 FontSize="15"

                                 FontAttributes="Bold" />                

                    </Grid>                  

                </Border>

            </Grid>

        </DataTemplate>

    </syncfusion:SfListView.ItemTemplate>

</syncfusion:SfListView>

C#

private void KontrollList_SelectionChanged(object sender, ItemSelectionChangedEventArgs e)

{

   

    try

    {

        //if (e.AddedItems.Count > 0)

        //{

         

        //    foreach (var item in KontrollList.SelectedItems)

        //    {

        //        //  item.ItemSize = 140;

        //    }

        //}

     

        //if (e.RemovedItems.Count > 0)

        //{

        //    var item = e.RemovedItems;

        //    foreach (var it in item)

        //    {

        //        //  item.ItemSize = 40;

        //    }

        //}

    }

    catch (Exception ex)

    {

        DisplayAlert("Fehler", ex.Message, "OK");

    }

}

private void KontrollList_QueryItemSize(object sender, QueryItemSizeEventArgs e)

{

    if (e.ItemIndex == 2)

    {

        e.ItemSize = 200;

    }

    else

    {

        e.ItemSize = 20;

    }

}

Test "without" Debug VIDEO:

https://gyazo.com/19d05031f2b8e439da9996e94a7fcc22

Test "with" Debug VIDEO:

https://shiiikk.tixte.co/Test_with_Debug.mp4

please watch last video carefully to understand what is going on there, after itemsize set, it sets auto back to 48.

[Steven]

PS. i use the latest Version 

20.2.48 (sfListView)

Visual Studio 17.4.0 Preview 1

[Lakshmi Natarajan]

Hi Steven,

Sorry for the inconvenience caused.

We need to set the e.Handled property to True to update specified size to the item. When this property is not set, the decided size will not be set to the item.

Please refer to our user guidance document and code snippets to use the event below,

private void listView_QueryItemSize(object sender, Syncfusion.Maui.ListView.QueryItemSizeEventArgs e)

{

    if (e.ItemIndex == 2)

    {

        e.ItemSize = 200;

    }

    else

    {

        e.ItemSize = 60;

    }

    

    e.Handled = true;

}

UG link: https://help.syncfusion.com/maui/listview/item-size-customization#customize-item-size-of-a-particular-item-on-demand

Also, based on the given details, if you want to update the ItemSize when selecting the item, then you can achieve it either of the following approaches.

Approach 1:

We suggest you bind the height for item in the ItemTemplate and use SfListView.AutoFitMode as DynamicHeight.

Please refer to our user guidance document regarding the same,

UG link: https://help.syncfusion.com/maui/listview/item-size-customization#autofit-the-items-based-on-the-content

Step 1: Define property in the model class to set size.

public class BookInfo : INotifyPropertyChanged

{

    private string bookName;

    private string bookDesc;

    private double itemHeight = 50;

 

    public double ItemHeight

    {

        get { return itemHeight; }

        set

        {

            itemHeight = value;

            OnPropertyChanged("ItemHeight");

        }

    }

 

    ...

}

 

Step 2: Bind the property to the HeightRequest of the element in the ItemTemplate. Also set AutoFitMode as DynamicHeight.

<syncfusion:SfListView x:Name="KontrollList"

                        ItemsSource="{Binding BookInfo}"

                        AutoFitMode="DynamicHeight"

                        SelectionChanged="listView_SelectionChanged">

 

    <syncfusion:SfListView.ItemTemplate>

        <DataTemplate>

            <Grid Padding="10" RowDefinitions="*,*" HeightRequest="{Binding ItemHeight}">

                <Label Text="{Binding BookName}" FontAttributes="Bold" TextColor="Teal" FontSize="17" />

                <Label Grid.Row="1" Text="{Binding BookDescription}" TextColor="Teal" FontSize="15"/>

            </Grid>

        </DataTemplate>

    </syncfusion:SfListView.ItemTemplate>

...

Step 3: In the SelectionChanged event, update the height for the items.

private void listView_SelectionChanged(object sender, Syncfusion.Maui.ListView.ItemSelectionChangedEventArgs e)

{

    if (e.AddedItems.Count > 0)

    {

        foreach (var item in e.AddedItems)

        {

            (item as BookInfo).ItemHeight = 140;

        }

    }

 

    if (e.RemovedItems.Count > 0)

    {

        foreach (var item in e.RemovedItems)

        {

            (item as BookInfo).ItemHeight = 50;

        }

    }

}

Approach 2: The SfListView allows you to customize the SelectionItem using the SelectedItemTemplate. You can achieve your requirement by defining the SelectedItemTemplate with specified size. This will update the selected item with the specified height defined in the SelectedItemTemplate.

<syncfusion:SfListView x:Name="KontrollList"

                    ItemsSource="{Binding BookInfo}"

                    AutoFitMode="DynamicHeight">

 

    <syncfusion:SfListView.ItemTemplate>

        <DataTemplate>

            <Grid RowDefinitions="*,*" HeightRequest="70">

                <Label Text="{Binding BookName}" FontAttributes="Bold" TextColor="Teal" />

                <Label Grid.Row="1" Text="{Binding BookDescription}" TextColor="Teal" LineBreakMode="WordWrap"/>

            </Grid>

        </DataTemplate>

    </syncfusion:SfListView.ItemTemplate>

 

    <syncfusion:SfListView.SelectedItemTemplate>

        <DataTemplate>

            <Grid RowDefinitions="*,*" HeightRequest="140">

                <Label Text="{Binding BookName}" FontAttributes="Bold" TextColor="Teal" />

                <Label Grid.Row="1" Text="{Binding BookDescription}" TextColor="Teal" />

            </Grid>

        </DataTemplate>

    </syncfusion:SfListView.SelectedItemTemplate>

</syncfusion:SfListView>

 

Please refer to our user guidance document to customize the SelectedItemTemplate,

UG link: https://help.syncfusion.com/maui/listview/selection#selected-item-customization

We have attached the sample for your reference. Please let us know if you need further assistance.

Regards,

Lakshmi Natarajan

Attachment: MauiSample_fd9008a9.zip