All geek questions in one place

Organizing ListView Elements Horizontally

I am working with a ListView, which is grouped by one of the properties of the data source. My requirement is to display each group aligned horizontally with the other groups, but my implementation (as shown below) shows the groups aligned vertically

<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 an example of the result of this code:

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

Here is an example of what I really 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 was appreciated.

+4
source share
3 answers

Here is the final code after the next 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>
+1
source

In this case, you must define Panel for Group, as well as:

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

After mod your xaml looks like this:

 <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>
+7
source

The correct way to do this 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>
+2
source

Source: https://habr.com/ru/post/1414074/

More articles:


All Articles