CODEWITHSUNDEEP
wpflistview
Arpit Khandelwal
Arpit Khandelwal

Reputation: 1803

Arranging ListView items Horizontally

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.

Upvotes: 5

Views: 14246

Answers (4)

moneeb
moneeb

Reputation: 152

    <ListBox Height="50" VerticalAlignment="Top">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBoxItem Content="aaaaaaaaaaa"/>
        <ListBoxItem Content="aaaaaaaaaaa"/>
        <ListBoxItem Content="aaaaaaaaaaa"/>
        <ListBoxItem Content="aaaaaaaaaaa"/>
        <ListBoxItem Content="aaaaaaaaaaa"/>
    </ListBox>

Upvotes: 0

user3675847
user3675847

Reputation: 51

The correct way to do it, is:

<ListView Grid.Row="4" Name="btView"> 
    <ListView.ItemsPanel> 
        <ItemsPanelTemplate> 
            <StackPanel Orientation="Horizontal"></StackPanel> 
        </ItemsPanelTemplate> 
    </ListView.ItemsPanel> 
    <ListView.ItemTemplate> 
        <DataTemplate> 
            <StackPanel Orientation="Horizontal"> 
                <RadioButton Name="Octave1" Content="Octave 1"/> 
                <RadioButton Name="Octave2" Content="Octave 2"/> 
                <RadioButton Name="Octave3" Content="Octave 3"/> 
                <RadioButton Name="Octave4" Content="Octave 4"/> 
            </StackPanel> 
        </DataTemplate> 
    </ListView.ItemTemplate> 

    <ListItem/> 
</ListView>

Upvotes: 3

Arpit Khandelwal
Arpit Khandelwal

Reputation: 1803

Here is the final code after following gaurawerma

<ListView x:Name="listViewResourceHours" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderThickness="0" SelectionMode="Single" Height="100" Width="500" >
        <ListView.GroupStyle>
            <GroupStyle>
                <GroupStyle.Panel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </GroupStyle.Panel>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <TextBlock FontWeight="Bold" Text="{Binding Name, StringFormat={}{0}:}" />
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
                <GroupStyle.ContainerStyle>
                    <Style TargetType="{x:Type GroupItem}">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="GroupItem">
                                    <StackPanel Orientation="Horizontal">
                                        <ContentPresenter Margin="0,0,0,0" VerticalAlignment="Center" />
                                        <ItemsPresenter Margin="0,0,0,0" VerticalAlignment="Center"/>
                                    </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="Left" VerticalAlignment="Center" >
                    <Label VerticalAlignment="Center"  Margin="0" Content="{Binding Hours}" />
                    <Label Name="lblWorkingHours" VerticalAlignment="Center"  Margin="0,0,0,0" Content="{Binding WorkingHoursType, Converter={StaticResource ResourceKey=hoursTypeConverter}}" />
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>

    </ListView>

Upvotes: 0

gaurawerma
gaurawerma

Reputation: 1826

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>

Upvotes: 9

Related Questions