Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Arranging ListView items Horizontally

Tags:

listview

wpf

I am working with a ListView which is grouped on one of the properties (Resource) of Data Source. My requirement is to display each group aligned horizontally with other groups but my implementation (as below) shows the groups aligned veritcally

            <ListView x:Name="listViewResourceHours" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderThickness="0" SelectionMode="Single" Height="100" Width="300" >
            <ListView.GroupStyle>
                <GroupStyle>
                    <GroupStyle.ContainerStyle>
                        <Style TargetType="{x:Type GroupItem}">
                            <Setter Property="Template">
                                <Setter.Value>
                                <ControlTemplate TargetType="GroupItem">
                                    <StackPanel Orientation="Horizontal">
                                        <ContentPresenter/>
                                        <ItemsPresenter/>
                                    </StackPanel>
                                </ControlTemplate>
                            </Setter.Value>
                            </Setter>
                        </Style>
                    </GroupStyle.ContainerStyle>
                </GroupStyle>
            </ListView.GroupStyle>
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ScrollViewer.HorizontalScrollBarVisibility="Disabled" />
                </ItemsPanelTemplate>
            </ListView.ItemsPanel> 
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
                        <Label VerticalAlignment="Center"  Margin="0" Content="{Binding Hours}" />
                        <Label VerticalAlignment="Center"  Margin="2,0,0,0" Content="{Binding WorkingHoursType, Converter={StaticResource ResourceKey=hoursTypeConverter}}" />
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

Here is a sample of what this code results:

PSE: 0 (B) 0 (NB)
PSC: 0 (B) 0 (NB)
PM: 0 (B) 0 (NB)
EIA: 0 (B) 0 (NB)

Here is a sample of what I actually want it to look like

PSE: 0 (B) 0 (NB)  PSC: 0 (B) 0 (NB)  PM: 0 (B) 0 (NB)  EIA: 0 (B) 0 (NB)

Any help appreciated.

like image 925
Arpit Khandelwal Avatar asked Dec 21 '22 21:12

Arpit Khandelwal


1 Answers

In this case you should define the Panel for Group as well like:

<GroupStyle.Panel>
    <ItemsPanelTemplate>
        <StackPanel Orientation="Horizontal" />
    </ItemsPanelTemplate>
</GroupStyle.Panel>

After the mod your xaml looks like:

<ListView x:Name="listViewResourceHours" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderThickness="0" SelectionMode="Single" Height="100" Width="300" >
    <ListView.GroupStyle>
        <GroupStyle>
            <GroupStyle.Panel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </GroupStyle.Panel>
            <GroupStyle.ContainerStyle>
                <Style TargetType="{x:Type GroupItem}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="GroupItem">
                                <StackPanel Orientation="Horizontal">
                                    <ContentPresenter/>
                                    <ItemsPresenter/>
                                </StackPanel>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </GroupStyle.ContainerStyle>
        </GroupStyle>
    </ListView.GroupStyle>
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ScrollViewer.HorizontalScrollBarVisibility="Disabled" />
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
                <Label VerticalAlignment="Center"  Margin="0" Content="{Binding Hours}" />
                <Label VerticalAlignment="Center"  Margin="2,0,0,0" Content="{Binding WorkingHoursType}" />
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>
like image 88
gaurawerma Avatar answered Dec 23 '22 10:12

gaurawerma