CODEWITHSUNDEEP
xamlwindows-runtimewindows-store-apps
sahap
sahap

Reputation: 389

XAML GridView in GridView with different orientation

(Title edited)

How to do this with XAML? Horizontal Width is fixed and must be scrollable.

Maybe GridView or another control like ItemsControl or StackPanel.

enter image description here

Upvotes: 0

Views: 486

Answers (4)

sahap
sahap

Reputation: 389

Simple working example: Linking only vertical offset of two scrollviewers

And I found advanced example in 5th sample of the "XAML input and manipulations - advanced concepts": https://code.msdn.microsoft.com/windowsapps/XAML-input-and-manipulation-44125241

Upvotes: 0

Jon
Jon

Reputation: 2891

You can make this work by putting the entire row into the datatemplate and use grid columns to set the width:

    <ListView Width="500" Height="500" ItemsSource="{Binding Data}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="100"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Text="{Binding Item}" Grid.Column="0"/>
                    <ListView ItemsSource="{Binding SubItems}" Grid.Column="1"
                                ScrollViewer.HorizontalScrollBarVisibility="Auto"
                                ScrollViewer.HorizontalScrollMode="Enabled"
                                SelectionMode="None">
                        <ListView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel
                                    Orientation="Horizontal" />
                            </ItemsPanelTemplate>
                        </ListView.ItemsPanel>
                    </ListView>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

Upvotes: 0

Liero
Liero

Reputation: 27338

If I understand your requirement correctly, you can have grid with two cells. In left cell will be scrollviewer with stackpanel, in second cell will be scrollviewer with wrappanel with vertical orientation.

If you need to databinnd to some itemssource, use itemscontrols with custom ItemsPanelTemplate - stackpanel, wrappanel, uniform grid, canvas, or whatever panel you need.

EDIT: sample code using two cell with ListView and IntemsControl, each in its own scrollviewer:

<ScrollViewer HorizontalScrollBarVisibility="Disabled">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <ListView x:Name="StudentsListView"  ItemsSource="{Binding Students}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Border Background="#484" Height="90"  Width="200">
                        <TextBlock Text="{Binding Name}" FontSize="24"  HorizontalAlignment="Center" VerticalAlignment="Center"  />
                    </Border>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        <ScrollViewer Grid.Column="1" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled" ZoomMode="Disabled">
            <ItemsControl ItemsSource="{Binding Students}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <ItemsControl ItemsSource="{Binding Markings}">
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <StackPanel Orientation="Horizontal" />
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <Border Background="#888" Height="90" Width="90" Margin="5">
                                        <TextBlock Text="{Binding }" FontSize="48" HorizontalAlignment="Center" VerticalAlignment="Center"  />
                                    </Border>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </ScrollViewer>


    </Grid>
</ScrollViewer>

public class ViewModel
{
    public ViewModel()
    {
        Students = Enumerable.Range(0, 25)
            .Select(i => new Student
            {
                Name = "Student " + i,
                Markings = Enumerable.Range(1, 30).Select(j => (j + i) % 5 + 1).ToList()
            }).ToList();
    }

    public List<Student> Students { get; set; }
}

public class Student
{
    public string Name { get; set; }
    public List<int> Markings { get; set; }
}

and the result:

enter image description here

Upvotes: 1

user4637073
user4637073

Reputation:

You use ListView only when you need to have the elements in vertical direction otherwise GridView presents all what you need. It presents the items in the horizontal direction.

The most of the functioning of the both is same.

Upvotes: 3

Related Questions