ListView Items has been shrunk

[Thanh Hai Dang]

Hi,

I have a Popup with TabView. The TabViewItem Content has a ListView. The listview in each Tab has the same style. However, some tab display properly items, the others display shrink items.

My Code:

   <Style x:Key="ListTemplateStyle" TargetType="listView:SfListView">

        <Setter Property="ItemSize" Value="110"/>
        <Setter Property="HeightRequest" Value="300"/>
        <Setter Property="AutoFitMode" Value="DynamicHeight"/>
        <Setter Property="ItemTemplate" Value="{StaticResource NewDocumentTemplate}"/>
        <Setter Property="TapCommand" Value="{Binding CreateFileFromTemplateCommand}"/>
    </Style>

 <tabView:SfTabView>
            <tabView:SfTabItem Header="All">
                <tabView:SfTabItem.Content>
                    <listView:SfListView
                        Style="{StaticResource ListTemplateStyle}"
                        ItemsSource="{Binding AllTemplates}">
                        <listView:SfListView.ItemsLayout>
                            <listView:GridLayout SpanCount="3" />
                        </listView:SfListView.ItemsLayout>
                    </listView:SfListView>
                </tabView:SfTabItem.Content>
            </tabView:SfTabItem>
            <tabView:SfTabItem Header="White">
                <tabView:SfTabItem.Content>
                    <listView:SfListView
                        Style="{StaticResource ListTemplateStyle}"
                        ItemsSource="{Binding WhiteTemplates}">
                        <listView:SfListView.ItemsLayout>
                            <listView:GridLayout SpanCount="3" />
                        </listView:SfListView.ItemsLayout>
                    </listView:SfListView>
                </tabView:SfTabItem.Content>
            </tabView:SfTabItem>
            <tabView:SfTabItem Header="Yellow">
                <tabView:SfTabItem.Content>
                    <listView:SfListView
                        ItemsSource="{Binding YellowTemplates}"
                        Style="{StaticResource ListTemplateStyle}">
                        <listView:SfListView.ItemsLayout>
                            <listView:GridLayout SpanCount="3" />
                        </listView:SfListView.ItemsLayout>


                    </listView:SfListView>
                </tabView:SfTabItem.Content>
            </tabView:SfTabItem>
            <tabView:SfTabItem Header="Pink">
                <tabView:SfTabItem.Content>
                    <listView:SfListView
                        ItemsSource="{Binding PinkTemplates}"
                        Style="{StaticResource ListTemplateStyle}"
                        >
                        <listView:SfListView.ItemsLayout>
                            <listView:GridLayout SpanCount="3" />
                        </listView:SfListView.ItemsLayout>
                    </listView:SfListView>
                </tabView:SfTabItem.Content>
            </tabView:SfTabItem>
 <tabView:SfTabView>
            <tabView:SfTabItem Header="All">
                <tabView:SfTabItem.Content>
                    <listView:SfListView
                        Style="{StaticResource ListTemplateStyle}"
                        ItemsSource="{Binding AllTemplates}">
                        <listView:SfListView.ItemsLayout>
                            <listView:GridLayout SpanCount="3" />
                        </listView:SfListView.ItemsLayout>
                    </listView:SfListView>
                </tabView:SfTabItem.Content>
            </tabView:SfTabItem>
            <tabView:SfTabItem Header="White">
                <tabView:SfTabItem.Content>
                    <listView:SfListView
                        Style="{StaticResource ListTemplateStyle}"
                        ItemsSource="{Binding WhiteTemplates}">
                        <listView:SfListView.ItemsLayout>
                            <listView:GridLayout SpanCount="3" />
                        </listView:SfListView.ItemsLayout>
                    </listView:SfListView>
                </tabView:SfTabItem.Content>
            </tabView:SfTabItem>
            <tabView:SfTabItem Header="Yellow">
                <tabView:SfTabItem.Content>
                    <listView:SfListView
                        ItemsSource="{Binding YellowTemplates}"
                        Style="{StaticResource ListTemplateStyle}">
                        <listView:SfListView.ItemsLayout>
                            <listView:GridLayout SpanCount="3" />
                        </listView:SfListView.ItemsLayout>


                    </listView:SfListView>
                </tabView:SfTabItem.Content>
            </tabView:SfTabItem>
            <tabView:SfTabItem Header="Pink">
                <tabView:SfTabItem.Content>
                    <listView:SfListView
                        ItemsSource="{Binding PinkTemplates}"
                        Style="{StaticResource ListTemplateStyle}"
                        >
                        <listView:SfListView.ItemsLayout>
                            <listView:GridLayout SpanCount="3" />
                        </listView:SfListView.ItemsLayout>
                    </listView:SfListView>
                </tabView:SfTabItem.Content>
            </tabView:SfTabItem>
</tabView:SfTabView>

First tab:

 The "Pink" tab:

How can I resolve this issue?

Thank 

[Suthi Yuvaraj]

Hi Thanh Hai Dang,

We have checked your requirement and have implemented a sample utilizing TabView and ListView components. In our analysis, we observed that you have specified both ItemSize and AutoFitMode. It's important to note that you should choose either ItemSize or AutoFitMode to determine the layout size within ItemSize.

Additionally, we noticed that you have included an Image within the ItemTemplate. To ensure proper rendering, please confirm that the Image has been configured with appropriate height and width requests. In order to proceed with addressing any potential issues, kindly share the ItemTemplate of SfListView.

If possible, we recommend sharing the entire sample code so that we can better understand the context and, if needed, make modifications to reproduce the reported issue at our end. This will enable us to find a solution promptly and ensure a seamless resolution. Thank you for your cooperation.

Regards,

Suthi Yuvaraj

Attachment: ListView_1e966f07.zip

[Thanh Hai Dang]

Hi Suthi Yuvaraj , 

I apologize for the missing. 

This is my DataTemplate: 

<DataTemplate x:Key="NewDocumentTemplate">
    <Grid MaximumWidthRequest="110" RowDefinitions="Auto,*" RowSpacing="3">
        <Image Source="{Binding ImageSource}"
               VerticalOptions="Fill"
               HorizontalOptions="Center"
               Aspect="AspectFit"
               >
        </Image>
        <Label Grid.Row="1" Text="{Binding Name}"
               LineBreakMode="WordWrap"
               FontSize="12"
               HorizontalTextAlignment="Center"
               VerticalOptions="Fill"
               VerticalTextAlignment="Start">


        </Label>
    </Grid>
</DataTemplate>

My VM code:

public partial class OpenTemplateViewModel : BaseViewModel
{
    [ObservableProperty] private ObservableCollection<NewDocumentTemplateViewModel>? _allTemplates;
    [ObservableProperty] private ObservableCollection<NewDocumentTemplateViewModel>? _whiteTemplates;
    [ObservableProperty] private ObservableCollection<NewDocumentTemplateViewModel>? _yellowTemplates;
    [ObservableProperty] private ObservableCollection<NewDocumentTemplateViewModel>? _pinkTemplates;
    [ObservableProperty] private ObservableCollection<NewDocumentTemplateViewModel>? _greenTemplates;
    [ObservableProperty] private ObservableCollection<NewDocumentTemplateViewModel>? _blueTemplates;
    [ObservableProperty] private bool _isVertical;




    public ICommand? CreateFileFromTemplateCommand { get; set; }
    public OpenTemplateViewModel()
    {


        Initialize();


    }
    private void Initialize()
    {
        IsVertical = true;
        ChangeTemplates();
    }
    private void ChangeTemplates()
    {
        AllTemplates = new ObservableCollection<NewDocumentTemplateViewModel>(DocumentTemplateFactory.GetTemplates(isVertical: IsVertical));
        WhiteTemplates = new ObservableCollection<NewDocumentTemplateViewModel>(DocumentTemplateFactory.GetTemplates(TemplateColor.White, IsVertical));
        YellowTemplates = new ObservableCollection<NewDocumentTemplateViewModel>(DocumentTemplateFactory.GetTemplates(TemplateColor.Yellow, IsVertical));
        PinkTemplates = new ObservableCollection<NewDocumentTemplateViewModel>(DocumentTemplateFactory.GetTemplates(TemplateColor.Pink, IsVertical));
        GreenTemplates = new ObservableCollection<NewDocumentTemplateViewModel>(DocumentTemplateFactory.GetTemplates(TemplateColor.Green, IsVertical));
        BlueTemplates = new ObservableCollection<NewDocumentTemplateViewModel>(DocumentTemplateFactory.GetTemplates(TemplateColor.Blue, IsVertical));
    }
}

and Factory:

public static class DocumentTemplateFactory
{
    public static IEnumerable<NewDocumentTemplateViewModel> GetTemplates(TemplateColor templateColor = TemplateColor.All, bool isVertical = true)
        => templateColor == TemplateColor.White ? new WhiteDocumentTemplateCollection().Templates.Where(x => x.IsVertical == isVertical)
            : templateColor == TemplateColor.Blue ? new BlueDocumentTemplateCollection().Templates.Where(x => x.IsVertical == isVertical)
            : templateColor == TemplateColor.Yellow ? new YellowDocumentTemplateCollection().Templates.Where(x => x.IsVertical == isVertical)
            : templateColor == TemplateColor.Pink ? new PinkDocumentTemplateCollection().Templates.Where(x => x.IsVertical == isVertical)
            : templateColor == TemplateColor.Green ? new GreenDocumentTemplateCollection().Templates.Where(x => x.IsVertical == isVertical)
            : new List<NewDocumentTemplateViewModel>().Concat(new WhiteDocumentTemplateCollection().Templates.Where(x => x.IsVertical == isVertical))
                .Concat(new YellowDocumentTemplateCollection().Templates.Where(x => x.IsVertical == isVertical))
                .Concat(new BlueDocumentTemplateCollection().Templates.Where(x => x.IsVertical == isVertical))
                .Concat(new PinkDocumentTemplateCollection().Templates.Where(x => x.IsVertical == isVertical))
                .Concat(new GreenDocumentTemplateCollection().Templates.Where(x => x.IsVertical == isVertical));
}

And Collection Factory:

public abstract class NewDocumentTemplateCollection
{
    protected NewDocumentTemplateCollection()
    {
        _templates = GenerateTemplates();
    }


    private readonly IEnumerable<NewDocumentTemplateViewModel> _templates;
    public IEnumerable<NewDocumentTemplateViewModel> Templates => _templates;


    protected abstract IEnumerable<NewDocumentTemplateViewModel> GenerateTemplates();
}


public class WhiteDocumentTemplateCollection : NewDocumentTemplateCollection
{
    protected override IEnumerable<NewDocumentTemplateViewModel> GenerateTemplates()
        => new[]
        {
            new NewDocumentTemplateViewModel() { ImageSource = "blank.png", TemplateType = DocumentTemplateType.Blank, FilePath = "Templates/blank_file.pdf" , IsVertical = true},
            new NewDocumentTemplateViewModel() { ImageSource = "horizontal_line.png", TemplateType = DocumentTemplateType.HorizontalLines ,FilePath = "Templates/horizontal_line.pdf" , IsVertical = true},
            new NewDocumentTemplateViewModel() { ImageSource = "horizontal_line_dense.png",TemplateType = DocumentTemplateType.HorizontalLinesDense , IsVertical = true},
            new NewDocumentTemplateViewModel() { ImageSource = "margin.png", TemplateType = DocumentTemplateType.Margin , IsVertical = true},
            new NewDocumentTemplateViewModel() { ImageSource = "margin_dense.png", TemplateType = DocumentTemplateType.MarginDense , IsVertical = true},
            new NewDocumentTemplateViewModel() { ImageSource = "plaid.png",TemplateType = DocumentTemplateType.Plaid , IsVertical = true},
            new NewDocumentTemplateViewModel() { ImageSource = "plaid_dense.png",TemplateType = DocumentTemplateType.PlaidDense , IsVertical = true},


            new NewDocumentTemplateViewModel() { ImageSource = "hz_blank.png", TemplateType = DocumentTemplateType.Blank, FilePath = "Templates/blank_file.pdf" , IsVertical = false},
            new NewDocumentTemplateViewModel() { ImageSource = "hz_horizontal_line.png", TemplateType = DocumentTemplateType.HorizontalLines , IsVertical = false},
            new NewDocumentTemplateViewModel() { ImageSource = "hz_horizontal_line_dense.png",TemplateType = DocumentTemplateType.HorizontalLinesDense , IsVertical = false},
            new NewDocumentTemplateViewModel() { ImageSource = "hz_margin.png", TemplateType = DocumentTemplateType.Margin , IsVertical = false},
            new NewDocumentTemplateViewModel() { ImageSource = "hz_margin_dense.png", TemplateType = DocumentTemplateType.MarginDense , IsVertical = false},
            new NewDocumentTemplateViewModel() { ImageSource = "hz_plaid.png",TemplateType = DocumentTemplateType.Plaid , IsVertical = false},
            new NewDocumentTemplateViewModel() { ImageSource = "hz_plaid_dense.png",TemplateType = DocumentTemplateType.PlaidDense , IsVertical = false},


        };
}


public class YellowDocumentTemplateCollection : NewDocumentTemplateCollection
{
    protected override IEnumerable<NewDocumentTemplateViewModel> GenerateTemplates()
        => new[]
        {
            new NewDocumentTemplateViewModel() { ImageSource = "blank_yellow.png", TemplateType = DocumentTemplateType.Blank, FilePath = "" , Color = TemplateColor.Yellow, IsVertical = true},
            new NewDocumentTemplateViewModel() { ImageSource = "horizontal_line_yellow.png", TemplateType = DocumentTemplateType.HorizontalLines, Color = TemplateColor.Yellow , IsVertical = true},
            new NewDocumentTemplateViewModel() { ImageSource = "horizontal_line_dense_yellow.png",TemplateType = DocumentTemplateType.HorizontalLinesDense , Color = TemplateColor.Yellow, IsVertical = true},
            new NewDocumentTemplateViewModel() { ImageSource = "margin_yellow.png", TemplateType = DocumentTemplateType.Margin , Color = TemplateColor.Yellow, IsVertical = true},
            new NewDocumentTemplateViewModel() { ImageSource = "margin_dense_yellow.png", TemplateType = DocumentTemplateType.MarginDense, Color = TemplateColor.Yellow , IsVertical = true},
            new NewDocumentTemplateViewModel() { ImageSource = "plaid_yellow.png",TemplateType = DocumentTemplateType.Plaid , Color = TemplateColor.Yellow, IsVertical = true},
            new NewDocumentTemplateViewModel() { ImageSource = "plaid_dense_yellow.png",TemplateType = DocumentTemplateType.PlaidDense , Color = TemplateColor.Yellow, IsVertical = true},


            new NewDocumentTemplateViewModel() { ImageSource = "hz_blank_yellow.png", TemplateType = DocumentTemplateType.Blank, FilePath = "" , Color = TemplateColor.Yellow, IsVertical = false},
            new NewDocumentTemplateViewModel() { ImageSource = "hz_horizontal_line_yellow.png", TemplateType = DocumentTemplateType.HorizontalLines, Color = TemplateColor.Yellow , IsVertical = false},
            new NewDocumentTemplateViewModel() { ImageSource = "hz_horizontal_line_dense_yellow.png",TemplateType = DocumentTemplateType.HorizontalLinesDense , Color = TemplateColor.Yellow, IsVertical = false},
            new NewDocumentTemplateViewModel() { ImageSource = "hz_margin_yellow.png", TemplateType = DocumentTemplateType.Margin , Color = TemplateColor.Yellow, IsVertical = false},
            new NewDocumentTemplateViewModel() { ImageSource = "hz_margin_dense_yellow.png", TemplateType = DocumentTemplateType.MarginDense, Color = TemplateColor.Yellow , IsVertical = false},
            new NewDocumentTemplateViewModel() { ImageSource = "hz_plaid_yellow.png",TemplateType = DocumentTemplateType.Plaid , Color = TemplateColor.Yellow, IsVertical = false},
            new NewDocumentTemplateViewModel() { ImageSource = "hz_plaid_dense_yellow.png",TemplateType = DocumentTemplateType.PlaidDense , Color = TemplateColor.Yellow, IsVertical = false},
        };
}


public class PinkDocumentTemplateCollection : NewDocumentTemplateCollection
{
    protected override IEnumerable<NewDocumentTemplateViewModel> GenerateTemplates()
        => new[]
        {
            new NewDocumentTemplateViewModel() { ImageSource = "blank_pink.png", TemplateType = DocumentTemplateType.Blank, FilePath = "" , Color = TemplateColor.Pink , IsVertical = true},
            new NewDocumentTemplateViewModel() { ImageSource = "horizontal_line_pink.png", TemplateType = DocumentTemplateType.HorizontalLines , Color = TemplateColor.Pink, IsVertical = true},
            new NewDocumentTemplateViewModel() { ImageSource = "horizontal_line_dense_pink.png",TemplateType = DocumentTemplateType.HorizontalLinesDense, Color = TemplateColor.Pink , IsVertical = true},
            new NewDocumentTemplateViewModel() { ImageSource = "margin_pink.png", TemplateType = DocumentTemplateType.Margin , Color = TemplateColor.Pink, IsVertical = true},
            new NewDocumentTemplateViewModel() { ImageSource = "margin_dense_pink.png", TemplateType = DocumentTemplateType.MarginDense , Color = TemplateColor.Pink, IsVertical = true},
            new NewDocumentTemplateViewModel() { ImageSource = "plaid_pink.png",TemplateType = DocumentTemplateType.Plaid , Color = TemplateColor.Pink, IsVertical = true},
            new NewDocumentTemplateViewModel() { ImageSource = "plaid_dense_pink.png",TemplateType = DocumentTemplateType.PlaidDense , Color = TemplateColor.Pink, IsVertical = true},


            new NewDocumentTemplateViewModel() { ImageSource = "hz_blank_pink.png", TemplateType = DocumentTemplateType.Blank, FilePath = "" , Color = TemplateColor.Pink , IsVertical = false},
            new NewDocumentTemplateViewModel() { ImageSource = "hz_horizontal_line_pink.png", TemplateType = DocumentTemplateType.HorizontalLines , Color = TemplateColor.Pink, IsVertical = false},
            new NewDocumentTemplateViewModel() { ImageSource = "hz_horizontal_line_dense_pink.png",TemplateType = DocumentTemplateType.HorizontalLinesDense, Color = TemplateColor.Pink , IsVertical = false},
            new NewDocumentTemplateViewModel() { ImageSource = "hz_margin_pink.png", TemplateType = DocumentTemplateType.Margin , Color = TemplateColor.Pink, IsVertical = false},
            new NewDocumentTemplateViewModel() { ImageSource = "hz_margin_dense_pink.png", TemplateType = DocumentTemplateType.MarginDense , Color = TemplateColor.Pink, IsVertical = false},
            new NewDocumentTemplateViewModel() { ImageSource = "hz_plaid_pink.png",TemplateType = DocumentTemplateType.Plaid , Color = TemplateColor.Pink, IsVertical = false},
            new NewDocumentTemplateViewModel() { ImageSource = "hz_plaid_dense_pink.png",TemplateType = DocumentTemplateType.PlaidDense , Color = TemplateColor.Pink, IsVertical = false},
        };
}
public class GreenDocumentTemplateCollection : NewDocumentTemplateCollection
{
    protected override IEnumerable<NewDocumentTemplateViewModel> GenerateTemplates()
        => new[]
        {
            new NewDocumentTemplateViewModel() { ImageSource = "blank_green.png", TemplateType = DocumentTemplateType.Blank, FilePath = "", Color = TemplateColor.Green, IsVertical= true },
            new NewDocumentTemplateViewModel() { ImageSource = "horizontal_line_green.png", TemplateType = DocumentTemplateType.HorizontalLines , Color = TemplateColor.Green, IsVertical= true },
            new NewDocumentTemplateViewModel() { ImageSource = "horizontal_line_dense_green.png",TemplateType = DocumentTemplateType.HorizontalLinesDense , Color = TemplateColor.Green , IsVertical= true},
            new NewDocumentTemplateViewModel() { ImageSource = "margin_green.png", TemplateType = DocumentTemplateType.Margin, Color = TemplateColor.Green  , IsVertical= true},
            new NewDocumentTemplateViewModel() { ImageSource = "margin_dense_green.png", TemplateType = DocumentTemplateType.MarginDense , Color = TemplateColor.Green , IsVertical= true},
            new NewDocumentTemplateViewModel() { ImageSource = "plaid_green.png",TemplateType = DocumentTemplateType.Plaid , Color = TemplateColor.Green , IsVertical= true},
            new NewDocumentTemplateViewModel() { ImageSource = "plaid_dense_green.png",TemplateType = DocumentTemplateType.PlaidDense, Color = TemplateColor.Green  , IsVertical= true},


            new NewDocumentTemplateViewModel() { ImageSource = "hz_blank_green.png", TemplateType = DocumentTemplateType.Blank, FilePath = "", Color = TemplateColor.Green, IsVertical= false },
            new NewDocumentTemplateViewModel() { ImageSource = "hz_horizontal_line_green.png", TemplateType = DocumentTemplateType.HorizontalLines , Color = TemplateColor.Green, IsVertical= false },
            new NewDocumentTemplateViewModel() { ImageSource = "hz_horizontal_line_dense_green.png",TemplateType = DocumentTemplateType.HorizontalLinesDense , Color = TemplateColor.Green , IsVertical= false},
            new NewDocumentTemplateViewModel() { ImageSource = "hz_margin_green.png", TemplateType = DocumentTemplateType.Margin, Color = TemplateColor.Green  , IsVertical= false},
            new NewDocumentTemplateViewModel() { ImageSource = "hz_margin_dense_green.png", TemplateType = DocumentTemplateType.MarginDense , Color = TemplateColor.Green , IsVertical= false},
            new NewDocumentTemplateViewModel() { ImageSource = "hz_plaid_green.png",TemplateType = DocumentTemplateType.Plaid , Color = TemplateColor.Green , IsVertical= false},
            new NewDocumentTemplateViewModel() { ImageSource = "hz_plaid_dense_green.png",TemplateType = DocumentTemplateType.PlaidDense, Color = TemplateColor.Green  , IsVertical= false},
        };
}
public class BlueDocumentTemplateCollection : NewDocumentTemplateCollection
{
    protected override IEnumerable<NewDocumentTemplateViewModel> GenerateTemplates()
        => new[]
        {
            new NewDocumentTemplateViewModel() { ImageSource = "blank_blue.png", TemplateType = DocumentTemplateType.Blank, FilePath = "", Color = TemplateColor.Blue  , IsVertical = true},
            new NewDocumentTemplateViewModel() { ImageSource = "horizontal_line_blue.png", TemplateType = DocumentTemplateType.HorizontalLines, Color = TemplateColor.Blue , IsVertical = true },
            new NewDocumentTemplateViewModel() { ImageSource = "horizontal_line_dense_blue.png",TemplateType = DocumentTemplateType.HorizontalLinesDense, Color = TemplateColor.Blue , IsVertical = true },
            new NewDocumentTemplateViewModel() { ImageSource = "margin_blue.png", TemplateType = DocumentTemplateType.Margin, Color = TemplateColor.Blue  , IsVertical = true},
            new NewDocumentTemplateViewModel() { ImageSource = "margin_dense_blue.png", TemplateType = DocumentTemplateType.MarginDense , Color = TemplateColor.Blue , IsVertical = true},
            new NewDocumentTemplateViewModel() { ImageSource = "plaid_blue.png",TemplateType = DocumentTemplateType.Plaid, Color = TemplateColor.Blue  , IsVertical = true},
            new NewDocumentTemplateViewModel() { ImageSource = "plaid_dense_blue.png",TemplateType = DocumentTemplateType.PlaidDense, Color = TemplateColor.Blue , IsVertical = true},


                        new NewDocumentTemplateViewModel() { ImageSource = "blank_blue.png", TemplateType = DocumentTemplateType.Blank, FilePath = "", Color = TemplateColor.Blue  , IsVertical = false},
            new NewDocumentTemplateViewModel() { ImageSource = "hz_horizontal_line_blue.png", TemplateType = DocumentTemplateType.HorizontalLines, Color = TemplateColor.Blue , IsVertical = false },
            new NewDocumentTemplateViewModel() { ImageSource = "hz_horizontal_line_dense_blue.png",TemplateType = DocumentTemplateType.HorizontalLinesDense, Color = TemplateColor.Blue , IsVertical = false },
            new NewDocumentTemplateViewModel() { ImageSource = "hz_margin_blue.png", TemplateType = DocumentTemplateType.Margin, Color = TemplateColor.Blue  , IsVertical = false},
            new NewDocumentTemplateViewModel() { ImageSource = "hz_margin_dense_blue.png", TemplateType = DocumentTemplateType.MarginDense , Color = TemplateColor.Blue , IsVertical = false},
            new NewDocumentTemplateViewModel() { ImageSource = "hz_plaid_blue.png",TemplateType = DocumentTemplateType.Plaid, Color = TemplateColor.Blue  , IsVertical = false},
            new NewDocumentTemplateViewModel() { ImageSource = "hz_plaid_dense_blue.png",TemplateType = DocumentTemplateType.PlaidDense, Color = TemplateColor.Blue , IsVertical = false},
        };
}

I've  also attached my resource image below. 

Thank for your support.

Regards,

TH

Attachment: Templates_745f6218.rar

[Suthi Yuvaraj]

Thanh Hai Dang,

We have checked the provided code snippet ,we would like to let you know that ,unfortunately, we are unable to reproduce the issue at our end, We suspect that the issue occurs due item height is not updated properly ,Hence we suggest you to Refresh the SfListView when changing the tabs.Please refer the below code snippet for more reference. 

Code snippet:

In XAML:

<tabView:SfTabView SelectionChanged="SfTabView_SelectionChanged">

<tabView:SfTabView.Items>

<tabView:SfTabItem Header="All">

<tabView:SfTabItem.Content>

 

<listView:SfListView

Style="{StaticResource ListTemplateStyle}"

ItemsSource="{Binding BookInfo}">

<listView:SfListView.ItemsLayout>

<listView:GridLayout SpanCount="3" />

</listView:SfListView.ItemsLayout>

</listView:SfListView>

</tabView:SfTabItem.Content>

</tabView:SfTabItem>

In XAML.cs

private void SfTabView_SelectionChanged(object sender, Syncfusion.Maui.TabView.TabSelectionChangedEventArgs e)

{

    var index =(int) e.NewIndex;

    var TabItem = (sender as SfTabView).Items[index].Content as SfListView;

    TabItem.RefreshView();

}

Please let us know if you have any concerns if you are still facing any issues, and modify the sample in the previous update or share the platform details to find the solution as soon as possible.

[Thanh Hai Dang]

Hi  Suthi Yuvaraj,

According to your suggestion, I've resolved this issue.

Thank  

[Suthi Yuvaraj]

Thanh Hai Dang,

We are glad that the provided response meets your requirement. Please let us know if you need further assistance. As always, we are happy to help you out.