CODEWITHSUNDEEP
xamluwp
Vitreous-Flower
Vitreous-Flower

Reputation: 257

How to adapt a horizontal listView vertically in UWP

I'm new to UWP development. Now I just implement a horizontal listView. Here is my code:

<Grid Background="{StaticResource DefaultBackground}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <StackPanel Height="100" Grid.Row="0"/>

    <controls:TestListView Grid.Row="1" x:Name="MyListView" IsItemClickEnabled="False" ItemsSource="{x:Bind Folders}" Margin="10,0,10,0"
                                ScrollViewer.HorizontalScrollMode="Auto" ScrollViewer.VerticalScrollMode="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Auto">
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="model:TestClass">
                <controls:TestControl/>
            </DataTemplate>
        </ListView.ItemTemplate>
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="VerticalContentAlignment" Value="Top"/>
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                <Setter Property="Width" Value="270"/>
                <Setter Property="HorizontalAlignment" Value="Left"/>
            </Style>
        </ListView.ItemContainerStyle>
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel Orientation="Horizontal" VerticalAlignment="Stretch"  ScrollViewer.HorizontalScrollMode="Auto" ScrollViewer.VerticalScrollMode="Disabled"/>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
    </controls:TestListView>

</Grid>

I want the MyListView take up all space vertically. Notice that the TestControl(UserControl) is another ListView. It may contains plenty of items. The final result is that the height of MyListView is equal to the maximun height among all the TestControl. I wish the TestControl should to display a scrollbar instead of just showing a long list vertically, but it didn't.

So how to make the height of all TestControl adaptive to the height of the UWP application?

Upvotes: 2

Views: 1070

Answers (1)

Vitreous-Flower
Vitreous-Flower

Reputation: 257

Finally, I got what I want. Just make the following change, everything is fine.

<ListView.ItemContainerStyle>
    <Style TargetType="ListViewItem">
        <Setter Property="VerticalContentAlignment" Value="Stretch" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="Width" Value="270" />
        <Setter Property="HorizontalAlignment" Value="Left" />
    </Style>
</ListView.ItemContainerStyle>
<ListView.ItemsPanel>
    <ItemsPanelTemplate>
        <ItemsStackPanel Orientation="Horizontal" 
                         VerticalAlignment="Stretch"  
                         ScrollViewer.HorizontalScrollMode="Auto" 
                         ScrollViewer.VerticalScrollMode="Disabled" />
    </ItemsPanelTemplate>
</ListView.ItemsPanel>

Upvotes: 2

Related Questions