xamllistviewxamarin.formshorizontallist

Xamarin Forms Rotating Listview adjust row width


In Xamarin Forms, I want to implement a horizontal listview (like shown in the image below). Via Rotation this is possible, but the I cannot change the row width. Is there also a possibility the let the second layout start under the first one? Thanks in advance!

 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="Recipe.Pages.SearchPage"
         Title="Search">
<ContentPage.Content>
<StackLayout Spacing="5" x:Name="layout" Orientation="Vertical" >
  <StackLayout x:Name="layoutButtons" HorizontalOptions="FillAndExpand" Orientation="Horizontal" Spacing="5" BackgroundColor="Red">
    <Button x:Name="btn1" BackgroundColor="White" Image="@drawable/scan" />
    <Button x:Name="btn2" BackgroundColor="White" Image="@drawable/menu" />
    <Button x:Name="btn3" BackgroundColor="White" Image="@drawable/search" />
  </StackLayout>
  <StackLayout x:Name="layoutList" >
    <ListView  x:Name="listView" Rotation="270" RowHeight="75" >
      <ListView.ItemTemplate>
        <DataTemplate>
          <ViewCell>
            <StackLayout BackgroundColor="#eee" Orientation="Vertical" >
              <StackLayout Orientation="Horizontal" >
                <Button BackgroundColor="White" Rotation="90" Image="{Binding Recipe}" />
              </StackLayout>
          </StackLayout>
          </ViewCell>
        </DataTemplate>
      </ListView.ItemTemplate>
    </ListView>
  </StackLayout>
 </StackLayout>
 </ContentPage.Content>
</ContentPage>

enter image description here

EDIT I also tried with a grid in the listview. Having the same issue.

 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="Recipe.Pages.SearchPage"
         Title="Search">
<ContentPage.Content>
<StackLayout Spacing="5" x:Name="layout" Orientation="Vertical" >
  <StackLayout x:Name="layoutButtons" HorizontalOptions="FillAndExpand" Orientation="Horizontal" Spacing="5" BackgroundColor="Red">
    <Button x:Name="btn1" BackgroundColor="White" Image="@drawable/scan" />
    <Button x:Name="btn2" BackgroundColor="White" Image="@drawable/menu" />
    <Button x:Name="btn3" BackgroundColor="White" Image="@drawable/search" />
  </StackLayout>
  <StackLayout x:Name="layoutList" >
    <ListView  x:Name="listView" Rotation="270" RowHeight="75" >
      <ListView.ItemTemplate>
        <DataTemplate>
          <ViewCell>
            <Grid>
              <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
              </Grid.RowDefinitions>
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="75" />
              </Grid.ColumnDefinitions>
              <Button Grid.Column="0" BackgroundColor="White" Rotation="90" Image="{Binding Recipe}" />
            </Grid>
          </ViewCell>
        </DataTemplate>
      </ListView.ItemTemplate>
    </ListView>
  </StackLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>

Solution

  • I have also facing the same issue. I used below xaml code to manage the height and width of ListView.

    <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="VCRoom.HorizontalScroll">
      <ContentPage.Content >
        <RelativeLayout>
          <ListView x:Name="TestListView"
                    RowHeight="80"
                    Rotation="270"
                    RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.5, Constant=-40}"
                    RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=-0.5, Constant=40}"
                    RelativeLayout.WidthConstraint="{ConstraintExpression Type=Constant, Constant=80}"
                    RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
                    >
          </ListView>
        </RelativeLayout>
      </ContentPage.Content>
    </ContentPage>
    

    Change RowHeight and Constant in XConstraint and YConstraint to manage Width and height of horizontal ListView accordingly.

    Just for reference Below is custom cell I used to populate ListView items. I displayed vertical labels in each list item.

    <?xml version="1.0" encoding="UTF-8"?>
    <ViewCell xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="VCRoom.TestCell">
      <ViewCell.View>
    
          <StackLayout Orientation="Horizontal" HorizontalOptions="End" VerticalOptions ="Center">
            <Label Rotation="90" Text="{Binding Day}"  TextColor="#000000" HorizontalOptions="StartAndExpand" VerticalOptions="Start"/>
            <Label Rotation="90" Text="{Binding mDate}" TextColor="#000000" HorizontalOptions="StartAndExpand" VerticalOptions="Start"/>
          </StackLayout>
    
      </ViewCell.View>
    </ViewCell>
    

    Hope this will help future users.