WPMed
WPMed

Reputation: 1414

Horizontally grouped ListView in Windows Store apps

I want the groups in my grouped ListView to show horizontally instead of vertically. I tried this solution, but the groups are still under each other instead of next to each other. Arranging ListView items Horizontally

Here's my XAML (this is the original, unmodified):

<ListView Name="slotlist"
          ItemsSource="{Binding Source={StaticResource cvsDelivery}}"
          Margin="0,0,10,0" 
          IsItemClickEnabled="True"
          ItemClick="onSlotBooked">
            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="HorizontalContentAlignment Value="Stretch"/>
                </Style>
            </ListView.ItemContainerStyle>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid Width="{Binding ActualWidth, ElementName=grRoot}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>

                        <TextBlock Text="{Binding timeRange}" Grid.Column="0" FontWeight="Bold" 
                       Margin="10,0,0,0"
                       Foreground="{Binding Fontcolor}"
                       HorizontalAlignment="Left"
                       VerticalAlignment="Center"
                       Style="{StaticResource BaseTextBlockStyle}"/>

                        <TextBlock Text="{Binding slotPrice}" Grid.Column="1" FontWeight="Bold" 
                       Margin="0,0,20,0"
                       Foreground="{Binding Fontcolor}"
                       HorizontalAlignment="Right"
                       VerticalAlignment="Center"
                       Style="{StaticResource BaseTextBlockStyle}"/>

                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>

            <ListView.GroupStyle>
                <GroupStyle HidesIfEmpty="True">
                    <GroupStyle.HeaderTemplate>
                                    <DataTemplate>
                                        <TextBlock 
                                            Text="{Binding date}"
                                            Foreground="#FF005299"/>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                </GroupStyle>
            </ListView.GroupStyle>

        </ListView>

Upvotes: 1

Views: 510

Answers (1)

Jon G St&#248;dle
Jon G St&#248;dle

Reputation: 3904

To get the ListView to be shown horizontally you can modify the ItemsPanel, like so:

<ListView>
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsStackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
</ListView>

Upvotes: -1

Related Questions