How to adjust size of Horizontal ListView in Xamarin.Forms?

Question

I see this entry and try it, yes, scroll orientation becomes horizontal.

But, size of view is not adjust to view's outline.

Result is like these:

Android result iOS result

How can I adjust the size of view even if it is rotated?

Tom · Accepted Answer · 2014-08-11 08:22:30Z

You can use a relative layout to adjust the position. This is a XAML example of a horizontal list view I implemented using a rotated vertical list view:

<?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="ExampleProject.SomePage" >
    <ContentPage.Content>
        <RelativeLayout>
            <ListView x:Name="listView"
                      ItemsSource="{Binding ExampleList}"
                      RowHeight="120"
                      Rotation="270"
                      RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.5, Constant=-60}"
                      RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=-0.5, Constant=60}"
                      RelativeLayout.WidthConstraint="{ConstraintExpression Type=Constant, Constant=120}"
                      RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
                      >
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <ViewCell.View>
                                <Label Rotation="90"
                                       TranslationX="120" />
                            </ViewCell.View>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
            <StackLayout
                RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=0}"
                RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=120}"
                RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
                RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1, Constant=-120}"
                >
                <!-- Some content below list view -->
            </StackLayout>
        </RelativeLayout>
    </ContentPage.Content>
</ContentPage>

This should work on iOS and Android.

have you tried it? does this work? and I don't mean should work
Yes, this is directly copied from a Xamarin.Forms project. I just tested it on Android and iOS, don't know if it works on Windows Phone.

Stephane Delcroix · Accepted Answer · 2014-06-26 20:52:11Z

1

The ListView is measured unrotated. If you make it square, it shouldn't bleed out of the screen once rotated.

answered Jun 26, 2014 at 20:52

Stephane Delcroix

16.3k5 gold badges61 silver badges85 bronze badges

Collectives™ on Stack Overflow

How to adjust size of Horizontal ListView in Xamarin.Forms?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related