We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Horizontal Orientation

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

this is my code 




10 Replies

AN ANSON October 17, 2022 01:56 AM

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



SY Suthi Yuvaraj Syncfusion Team October 17, 2022 01:57 AM

Hi Anson,


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


Regards,

Suthi Yuvaraj.



SY Suthi Yuvaraj Syncfusion Team October 18, 2022 03:56 AM

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


AN ANSON October 18, 2022 05:05 AM

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



AN ANSON October 18, 2022 05:06 AM

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




SY Suthi Yuvaraj Syncfusion Team October 19, 2022 08:37 PM

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


AN ANSON October 20, 2022 05:42 AM

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


SY Suthi Yuvaraj Syncfusion Team October 21, 2022 08:32 AM

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



AN ANSON October 22, 2022 06:35 AM

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



RP Rasika Palanisamy Syncfusion Team October 24, 2022 12:59 AM

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



Loader.
Live Chat Icon For mobile
Up arrow icon