Horizontal Orientation

[ANSON]

Item only show up when my list view orientation set vertical , but i need my list view horizontal 

this is my code 

[ANSON]

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             x:Class="ATAS.Views.POS"

             NavigationPage.HasBackButton="True"

             xmlns:listView="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView"

             xmlns:syncfusion="clr-namespace:Syncfusion.Maui.DataGrid;assembly=Syncfusion.Maui.DataGrid"

             Title="POS">

    <ContentPage.Resources>

        <ResourceDictionary>

            <Style TargetType="Label" x:Key="Label1">

                <Setter Property="VerticalTextAlignment" Value="Center"/>

                <Setter Property="HorizontalTextAlignment" Value="Center"/>

                <Setter Property="HorizontalOptions" Value="CenterAndExpand"/>

                <Setter Property="VerticalOptions" Value="CenterAndExpand"/>

                <Setter Property="FontSize" Value="16"/>

                <Setter Property="TextColor" Value="Red"/>

            </Style>

            <Style TargetType="Label" x:Key="Label2">

                <Setter Property="VerticalTextAlignment" Value="Center"/>

                <Setter Property="HorizontalTextAlignment" Value="End"/>

                <Setter Property="Margin" Value="0,0,8,0"/>

                <Setter Property="FontSize" Value="13.5"/>

                <Setter Property="FontFamily" Value="OpenSansSemibold"/>

                <Setter Property="TextColor" Value="Black"/>

            </Style>

            <Style TargetType="Label" x:Key="Label3">

                <Setter Property="VerticalTextAlignment" Value="Center"/>

                <Setter Property="HorizontalTextAlignment" Value="Start"/>

                <Setter Property="FontSize" Value="13.5"/>

                <Setter Property="Margin" Value="6,0,0,0"/>

                <Setter Property="FontFamily" Value="OpenSansSemibold"/>

                <Setter Property="TextColor" Value="Black"/>

            </Style>

        </ResourceDictionary>

    </ContentPage.Resources>

    <Grid>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="330"/>

            <ColumnDefinition Width="*"/>

        </Grid.ColumnDefinitions>

        <!--#region Right Grid-->

        <Grid Grid.Column="0">

            <Grid>

                <Grid.RowDefinitions>

                    <RowDefinition Height="33"/>

                    <RowDefinition Height="*"/>

                    <RowDefinition Height="148"/>

                    <RowDefinition Height="50"/>

                </Grid.RowDefinitions>

                <HorizontalStackLayout Grid.Row="0" Padding="1">

                    <Image Source="member_card.png" Aspect="AspectFit" VerticalOptions="CenterAndExpand"

                           WidthRequest="35" HeightRequest="35" HorizontalOptions="StartAndExpand" Margin="13,0,0,0"/>

                    <Label Text="Press Here For Member.. " FontFamily="OpenSansRegular"

                           Margin="10,0,0,0"

                           VerticalTextAlignment="Center" HorizontalTextAlignment="Center"

                           FontSize="15" FontAttributes="Italic" TextColor="LightGray"/>

                </HorizontalStackLayout>

                <syncfusion:SfDataGrid x:Name="POS_Item_DataGrid" Grid.Row="1"

                                       ColumnWidthMode="Auto">

                    <syncfusion:SfDataGrid.DefaultStyle>

                        <syncfusion:DataGridStyle

                                        HeaderRowFontAttributes="Bold"

                                        HeaderRowFontFamily="TimesNewRoman"

                                        HeaderRowFontSize="16"

                                        RowFontAttributes="Italic"

                                        RowFontFamily="Adabi"

                                        RowFontSize="14"/>

                    </syncfusion:SfDataGrid.DefaultStyle>

                    <!--#region Data Grid Header-->

                    <syncfusion:SfDataGrid.Columns>

                        <syncfusion:DataGridTextColumn HeaderText="Description"

                                   MappingName="Description"/>

                        <syncfusion:DataGridTextColumn HeaderText="Qty"

                                   MappingName="Qty"/>

                        <syncfusion:DataGridTextColumn HeaderText="UOM"

                                   MappingName="UOM"/>

                    </syncfusion:SfDataGrid.Columns>

                    <!--#endregion-->

                </syncfusion:SfDataGrid>

                <Grid Grid.Row="2">

                    <Grid.RowDefinitions>

                        <RowDefinition Height="0.3"/>

                        <RowDefinition Height="30"/>

                        <RowDefinition Height="30"/>

                        <RowDefinition Height="30"/>

                        <RowDefinition Height="30"/>

                        <RowDefinition Height="30"/>

                    </Grid.RowDefinitions>

                    <Grid.ColumnDefinitions>

                        <ColumnDefinition Width="100"/>

                        <ColumnDefinition Width="*"/>

                    </Grid.ColumnDefinitions>

                    <BoxView HeightRequest="0.1" BackgroundColor="LightGrey" Grid.ColumnSpan="2" Margin="0,0,0,6"/>

                    <Label Grid.Row="1" Grid.Column="0" Text="Sub Total" Style="{StaticResource Label3}"/>

                    <Label Grid.Row="2" Grid.Column="0" Text="Total Qty" Style="{StaticResource Label3}"/>

                    <Label Grid.Row="3" Grid.Column="0" Text="Discount" Style="{StaticResource Label3}"/>

                    <Label Grid.Row="4" Grid.Column="0" Text="Service Charge" Style="{StaticResource Label3}"/>

                    <Label Grid.Row="5" Grid.Column="0" Text="Tax" Style="{StaticResource Label3}"/>

                    <Label Grid.Row="1" Grid.Column="1" Text="1399.00" Style="{StaticResource Label2}"/>

                    <Label Grid.Row="2" Grid.Column="1" Text="100" Style="{StaticResource Label2}"/>

                    <Label Grid.Row="3" Grid.Column="1" Text="888" Style="{StaticResource Label2}"/>

                    <Label Grid.Row="4" Grid.Column="1" Text="39.23" Style="{StaticResource Label2}"/>

                    <Label Grid.Row="5" Grid.Column="1" Text="12.93" Style="{StaticResource Label2}"/>

                </Grid>

                <StackLayout BackgroundColor="#03719c" Grid.Row="4">

                    <Label Text="RM 109" FontSize="38"

                           VerticalOptions="CenterAndExpand"

                           HorizontalOptions="CenterAndExpand"

                           FontAttributes="Bold" TextColor="White"/>

                </StackLayout>

            </Grid>

        </Grid>

    <!--#endregion-->

        <!--#region Left Grid-->

        <Grid Grid.Column="1" BackgroundColor="LightGray">

            <Grid>

                <Grid.RowDefinitions>

                    <RowDefinition Height="60"/>

                    <RowDefinition Height="*"/>

                    <RowDefinition Height="50"/>

                </Grid.RowDefinitions>

                <StackLayout Grid.Row="0" BackgroundColor="LightGray">

                    <SearchBar x:Name="searchBar" TextChanged="OnFilterTextChanged"

                               WidthRequest="300"

                               Placeholder="Item Code Search.." PlaceholderColor="WhiteSmoke"

                               FontSize="23"

                               FontAttributes="Italic,Bold"

                               VerticalTextAlignment="Center"

                               HorizontalOptions="StartAndExpand"

                               FontFamily="OpenSansSemibold"/>

                </StackLayout>

                <!--#region Stock Master List View-->

            <listView:SfListView x:Name="StockMasterListView"

                                     Grid.Row="1"

                                     Orientation="Vertical"

                                     AutoFitMode="DynamicHeight"

                                     ItemSize="150"

                                 ItemTapped="StockMasterListView_ItemTapped"

                                     ItemSpacing="0,0,0,8"

                                     SelectionMode="Single">

                <listView:SfListView.ItemsLayout>

                    <listView:GridLayout SpanCount="6" x:Name="gridLayout"/>

                </listView:SfListView.ItemsLayout>

                <!--#region Stock Master Listing-->

                <listView:SfListView.ItemTemplate>

                    <DataTemplate>

                        <ViewCell>

                            <ViewCell.View>

                                <Frame Padding="0" BackgroundColor="White" WidthRequest="138" HeightRequest="140">

                                    <Grid>

                                        <Grid.RowDefinitions>

                                            <RowDefinition Height="100"/>

                                            <RowDefinition Height="40"/>

                                        </Grid.RowDefinitions>

                                    <StackLayout Grid.Row="0" Padding="0">

                                            <Image Source="{Binding IMAGE}" Aspect="AspectFit"/>

                                        </StackLayout>

                                    <StackLayout Grid.Row="1" BackgroundColor="White">

                                            <Label Text="{Binding StockDescription}" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" FontSize="13"/>

                                        </StackLayout>

                                    </Grid>

                                </Frame>

                            </ViewCell.View>

                        </ViewCell>

                    </DataTemplate>

                </listView:SfListView.ItemTemplate>

                <!--#endregion-->

            </listView:SfListView>

                <!--#endregion-->

                    <listView:SfListView x:Name="PosMenuItemListView"

                                     BackgroundColor="White"

                                     AllowSwiping="True"

                                     Grid.Row="2"

                                     ItemSize="30"

                                     ItemSpacing="3"

                                     AutoFitMode="Height"

                                     SelectionMode="Single">

                        <!--#region Pos Menu Listing-->

                        <listView:SfListView.ItemTemplate>

                            <DataTemplate>

                                <ViewCell>

                                    <ViewCell.View>

                                    <Frame HeightRequest="40" Padding="0" CornerRadius="8"

                                           WidthRequest="100" BackgroundColor="Transparent" BorderColor="Blue" Margin="6,0,6,0">

                                        <Grid>

                                            <Grid.RowDefinitions>

                                                <RowDefinition Height="*"/>

                                                <RowDefinition Height="1"/>

                                            </Grid.RowDefinitions>

                                            <StackLayout Grid.Row="0">

                                            <Label Text="{Binding MenuDescription}"

                                                  TextColor="Black"

                                                   VerticalOptions="CenterAndExpand"

                                                   VerticalTextAlignment="Center"

                                               HorizontalTextAlignment="Center"

                                                  LineBreakMode="WordWrap"/>

                                            </StackLayout>

                                        </Grid>

                                    </Frame>

                                </ViewCell.View>

                                </ViewCell>

                            </DataTemplate>

                        </listView:SfListView.ItemTemplate>

                        <!--#endregion-->

                    </listView:SfListView>

            </Grid>

        </Grid>

        <!--#endregion-->

    </Grid>

   </ContentPage>

[Suthi Yuvaraj]

Hi Anson,

We could see that you have missed to add your code. Please provide the code to proceed further.

Regards,

Suthi Yuvaraj.

[Suthi Yuvaraj]

Hi Anson,

We have checked the reported query “Horizontal Orientation” , issue is not replicated at our end, We have created a sample based on the provided code snippet , Horizontal Orientation is working fine. We suspect that the handler for SfListView[ ConfigureSyncfusionListView()] was not register in the MauiProgram.cs class in the sample. We have attached the output screenshot and tested sample and scenario for your reference

Tested scenario details:

• Syncfusion.Maui.ListView (version 20.2.0.50 and in recent nuget version 20.3.0.49)
• Tested Platform details(Android 9 – API 28 , Windows)

Also Refer UG link for handler registration and let us know if your still facing the issue

UG link: https://help.syncfusion.com/maui/listview/getting-started#register-the-handler

If yes, Please share the below details or modify the sample to replicate the issue which will be more helpful for us to find the solution as soon as possible.

1. Visual Studio version details
2. Illustration video to reproduce the issue
3. Platform details

Regards,

Suthi Yuvaraj.

Attachment: Testing_98cd3ee.zip

[ANSON]

pls check the sample which i attached , for 1st time i need click to show ...

[ANSON]

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

                          xmlns:listView="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView"

             x:Class="MauiApp2.MainPage">

    <ContentPage.Content>

        <AbsoluteLayout Padding="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">

            <StackLayout BackgroundColor="Azure" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">

                <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >

                    <Label Text="Xamarin Monkeys" HorizontalOptions="Center" FontAttributes="Bold" FontSize="Medium"></Label>

                    <Image x:Name="imgMonkey" HeightRequest="200" WidthRequest="200"></Image>

                    <Button HorizontalOptions="Center" VerticalOptions="Center" Clicked="btnPopupButton_Clicked" Text="Show Popup"></Button>

                </StackLayout>

            </StackLayout>

            <!--Popup Area-->

            <ContentView x:Name="popupLoginView" BackgroundColor="#C0808080" Padding="10, 0" IsVisible="false" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">

                <StackLayout VerticalOptions="Center" HorizontalOptions="Center">

                    <StackLayout Orientation="Vertical" HeightRequest="600" WidthRequest="600" BackgroundColor="White">

                        <Entry Margin="20,20,20,10" Placeholder="Enter Username"></Entry>

                        <Entry Margin="20,0,20,0" Placeholder="Enter Password"></Entry>

                        <Button Margin="20,0,20,0" Text="Login" Clicked="Button_Clicked"/>

                    </StackLayout>

                </StackLayout>

            </ContentView>

            <ContentView x:Name="popupLoadingView" BackgroundColor="#C0808080" Padding="10, 0" IsVisible="false" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">

                <StackLayout VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="650" WidthRequest="900">

                    <StackLayout Orientation="Vertical" HeightRequest="650" WidthRequest="900" BackgroundColor="White">

                        <ActivityIndicator x:Name="activityIndicator" Margin="0,50,0,0" VerticalOptions="Center" HorizontalOptions="Center" Color="Black" WidthRequest="30" HeightRequest="30" ></ActivityIndicator>

                        <Label x:Name="lblLoadingText" TextColor="Black" VerticalOptions="Center" HorizontalOptions="Center" VerticalTextAlignment="Center" Text="Loading..."></Label>

                    </StackLayout>

                </StackLayout>

            </ContentView>

            <ContentView x:Name="popupListView" BackgroundColor="#C0808080" IsVisible="false" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All" WidthRequest="600" HeightRequest="600">

                <StackLayout VerticalOptions="Center" HorizontalOptions="Center">

                    <ScrollView>

                    <StackLayout HeightRequest="600" WidthRequest="600" BackgroundColor="White">

                        <listView:SfListView x:Name="ItemSizelstViewData"

                                                     HeightRequest="100"

                                                     ItemSpacing="10"

                                                     ItemSize="100"

                                             Orientation="Horizontal"

                                                     WidthRequest="300">

                                <listView:SfListView.HeaderTemplate>

                                    <DataTemplate>

                                        <ViewCell>

                                            <Grid>

                                                <Label Text="Contact Details"/>

                                            </Grid>

                                        </ViewCell>

                                    </DataTemplate>

                                </listView:SfListView.HeaderTemplate>

                            <listView:SfListView.ItemTemplate>

                                <DataTemplate>

                                    <ViewCell>

                                        <Frame Padding="0" BackgroundColor="White" HeightRequest="100" WidthRequest="100">

                                            <StackLayout BackgroundColor="#3cb371">

                                                <Label Text="{Binding SizeDescription}" TextColor="White"

                                                            FontSize="18" FontAttributes="Bold"

                                                            HorizontalTextAlignment="Center"

                                                            VerticalTextAlignment="Center"

                                                            VerticalOptions="CenterAndExpand"/>

                                            </StackLayout>

                                        </Frame>

                                    </ViewCell>

                                </DataTemplate>

                            </listView:SfListView.ItemTemplate>

                            <!--#endregion-->

                        </listView:SfListView>

                            <Button Margin="20,0,20,0" Text="Login" Clicked="Button_Clicked"/>

                        </StackLayout>

                    </ScrollView>

                </StackLayout>

            </ContentView>

            <ContentView x:Name="popupImageView" BackgroundColor="#C0808080" Padding="10, 0" IsVisible="false" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">

                <StackLayout VerticalOptions="Center" HorizontalOptions="Center">

                    <StackLayout Orientation="Vertical" HeightRequest="200" WidthRequest="300" BackgroundColor="White">

                        <Image WidthRequest="200" HeightRequest="200" x:Name="imgPopup"></Image>

                    </StackLayout>

                </StackLayout>

            </ContentView>

        </AbsoluteLayout>

    </ContentPage.Content>

</ContentPage>

[Suthi Yuvaraj]

Hi Anson ,

We have checked the reported scenario , by creating a sample with provided code snippet , We are unable to reproduce the issue at our end. Also We could see that you have missed to add your sample , Please attach the sample to replicate the issue or We would like to set up a web meeting with you to find the cause of the issue and get the replication details. Would you please let me know of your availability for this? Our team will make every effort to have this scheduled on a date and time according to your convenience. 

Also Please refer the below sample which have tested regarding to your code snippet or if possible. please modify the sample to reproduce the issue and share the platform details in which your are facing the issue.

Regards,

Suthi Yuvaraj.

Attachment: TestedSample_fc011827.zip

[ANSON]

the sample u attached is the same result ...please see the attachment 

tomorrow GMT 4pm we can set up  a web meeting 

Attachment: Android_Emulator__pixel_5__api_31_5556_20221020_183905_f9d01eb7.rar

[Suthi Yuvaraj]

Hi Anson,

We would like to let you know that we are able to reproduce the issue at our end, We found the when the IsVisible property is handled at runtime in horizontal orientation  of ListView with ItemsSpacing value as ‘10’ , Items appears only after scrolling. Could please confirm us whether you are facing the same issue with itemSpacing value as 10?, We have internally logged the issue for the reported scenario and working on it. We will update you further details on or before November 11, 2022.

Also with reference to the attached illustration video , Is there any crash occurring while the items in listview in your application, If yes Please share the crash details which will be more helpful for us to find the solution as soon as possible.

Regards,

Suthi Yuvaraj

[ANSON]

Yes ...need scroll item only visible ...and when item source less than 2 item....it won't display correctly...my item spacing I make it 1

[Rasika Palanisamy]

Hi Anson,

We would like to let you know that we are able to reproduce the issue at our end. We will consider this scenario and fix both issues as promised.

Regards,

Rasika Palanisamy

[Suthi Yuvaraj]

We would like to let you know that we have analyzed the issue at source , we have found that issue is only replicated on Android emulators , we are unable to reproduced the issue in physical device, could you please confirm that you are facing issue on physical device also , which would be more helpful for us to find the appropriate solution as soon as possible.