CODEWITHSUNDEEP
c#xamluwpwin-universal-appuwp-xaml
user3796130
user3796130

Reputation:

How to create a custom ListView on UWP

I already set my ListView on C#, the problem is XAML. My current code Works like this :

<ListView x:Name="List" ItemsSource="{Binding}" SelectionChanged="List_SelectionChanged">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid Margin="11" Width="460">
                <StackPanel Orientation="Vertical" >
                    <Image Width="100" Height="100"
                       Source="{Binding Way}"/>
                </StackPanel>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

But I want to do something like this:

enter image description here

Upvotes: 0

Views: 1900

Answers (1)

Jay Zuo
Jay Zuo

Reputation: 15758

For your scenario, I think you can use GridView instead of ListView. GridView displays a collection of data in rows and columns while ListView displays a collection stacked vertically.

By default, GridView uses ItemsWrapGrid as its ItemsPanel, while using ItemsWrapGrid, we can set the ItemsWrapGrid.MaximumRowsOrColumns property with ItemsWrapGrid.Orientation property to limit the max columns to 2.

For example:

<GridView ItemsSource="{Binding}" SelectionChanged="GridView_SelectionChanged">
    <GridView.ItemTemplate>
        <DataTemplate>
            <Grid Width="460" Margin="11">
                <StackPanel Orientation="Vertical">
                    <Image Width="100" Height="100" Source="{Binding Way}" />
                </StackPanel>
            </Grid>
        </DataTemplate>
    </GridView.ItemTemplate>
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid MaximumRowsOrColumns="2" Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
</GridView>

Upvotes: 2

Related Questions