Search code examples
c#scrollpanuno-platform

Uno-Platform Horizontal scroolling control


I'm new to Uno Platform and I created a new project to make some tests.

I would like to add a new control that allows horizontal panning, similar to stories in Instagram or the CollectionView in Net MAUI.

Till now I've tried with an horizontal ListView, but it only works in UWP, neither the Droid project nor Wasm or Skia project.

My actual XAML code is:

<Page
    x:Class="UnoTest.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UnoTest"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    d:Width="500">

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>

        <!--Titol-->
        <TextBlock
            Grid.Row="0"
            Text="DH Orders"
            HorizontalAlignment="Center"
            Margin="0,15,0,0"
            FontSize="30"/>
        
        <!--Imatge-->
        <Border
            Grid.Row="1"
            Margin="25, 10, 25, 0"
            CornerRadius="10"
            Width="400"
            Height="400">
            <Border.Background>
                <ImageBrush
                    Stretch="UniformToFill"
                    ImageSource="/Assets/condil.jpg"/>
            </Border.Background>
        </Border>

        <TextBlock
            Grid.Row="2"
            Text="Order states:"
            FontSize="15"
            Margin="20, 20, 20, 0"/>
        
        <!--Estats comanda-->
        <ListView
            Grid.Row="3"
            ScrollViewer.HorizontalScrollBarVisibility="Visible"
            ScrollViewer.HorizontalScrollMode="Enabled"
            ScrollViewer.IsHorizontalRailEnabled="True"
            ScrollViewer.VerticalScrollMode="Disabled"
            ScrollViewer.IsScrollInertiaEnabled="True"
            ItemsSource="{Binding Options}"
            IsItemClickEnabled="True"
            Margin="10"            
            Height="100">
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Button
                        Content="{Binding Status}"
                        Margin="0, 10"
                        Padding="10"/>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        
    </Grid>
    
</Page>

Should I use a ScrollViwer + ItemsRepeater or is there any specific control for that purpose?


Solution

  • You are absolutely right! It seems it's a bug in Uno: I just reproduced it in the Uno Playground

    New issue has been created in the Uno backlog. Thanks for reporting!