Develop Reference

Need to display list view items with custom alignment

I am trying to display the listview group items as like in the attached screenshot, but still i have facing issue while displaying group view items
Requirement:
Group header needs to display in horizontal alignment and corresponding group items are needs to be aligned in vertical alignment
<ListView
x:Name="listview"
BorderThickness="0"
ItemsSource="{Binding Source={StaticResource cvs}}"
SelectedItem="{Binding SelectedProduct}">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Product}" />
</DataTemplate>
</ListView.ItemTemplate>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock
Padding="5,0,0,0"
FontSize="14"
FontWeight="Bold"
Text="{Binding Name}"/>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GroupItem">
<StackPanel Orientation="Vertical">
<ContentPresenter/>
<ItemsPresenter/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</ListView.GroupStyle>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ScrollViewer.HorizontalScrollBarVisibility="Disabled"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
Please suggestion a solution to achieve this.

To change the orientation you would have to set the GroupStyle.Panel. Because of your requirement to arrange the items multiline you should use a WrapPanel.
To make it behave properly you should disable the horizontal ScrollViewer of the ListView (to allow the items to wrap) and give the ListView a fixed height (in order to make the vertical ScrollViewer visible).
Since you don't modify the layout of the GroupItem and the ListView you can safely remove the GroupStyle.ContainerStyle (at least the Controltemplate override) and the ListView.ItemsPanel template override. In fact setting ItemsPanelTemplate of a ListBox or ListView explicitly to StackPanel or generally to something other than a VirtualizingPanel removes the ability to virtualize items. UI virtualization significantly improves performance, so you don't want to disable it.
<ListView ItemsSource="{Binding Source={StaticResource cvs}}"
Height="400"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</GroupStyle.Panel>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock
Padding="5,0,0,0"
FontSize="14"
FontWeight="Bold"
Text="{Binding Name}" />
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
</ListView>

You should define the Panel property for GroupStyle and you can remove the ItemsPanel for the ListView:
<GroupStyle.Panel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</GroupStyle.Panel>
Complete code for setting the groups for anyone interested:
<Window.Resources>
<CollectionViewSource x:Key='cvs'
Source="{Binding Path=Products}">
<CollectionViewSource.GroupDescriptions>
<PropertyGroupDescription PropertyName="ProductType" />
</CollectionViewSource.GroupDescriptions>
</CollectionViewSource>
</Window.Resources>
<Grid>
<ListView
x:Name="listview"
BorderThickness="0"
ItemsSource="{Binding Source={StaticResource cvs}}"
SelectedItem="{Binding SelectedProduct}">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Product}" />
</DataTemplate>
</ListView.ItemTemplate>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</GroupStyle.Panel>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock
Padding="5,0,0,0"
FontSize="14"
FontWeight="Bold"
Text="{Binding Name}"/>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GroupItem">
<StackPanel Orientation="Vertical">
<ContentPresenter/>
<ItemsPresenter/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
</Grid>
Regarding the model used: I set up a simple ProductCvs class
public class ProductCvs
{
public string Product { get; set; }
public string ProductType { get; set; }
}

How set same height in group of listbox?

I have some problem with generating listbox.
I have dataset with many rows and i need to split one big table to two or more depends on some RowsLimit. One table with 100 rows will became two tables with 50 rows and so on. These blocks will display next to each other.
For this I use listbox with grouping (in code behind I set property for filtering) and it works well. But each row has different height and I need last row in group fills all remaining space in every group.
I tried use dock panel, but it changes nothing.
Also I need create and set GroupStyle.HeaderTemplate in runtime, because I have in my dataset number of columns, width, bordercolor, and other properties. How can I replace DataTemplate "HeaderGroupStyle" with new?
<ListBox Name="lbTable" >
<ListBox.Resources>
<DataTemplate x:Key="HeaderGroupStyle">
<StackPanel Orientation="Horizontal">
<TextBox Width="100" Text="Header 1" />
<TextBox Width="100" Text="Header 2" />
<TextBox Width="100" Text="Header 3" />
<TextBox Width="100" Text="Header 4" />
</StackPanel>
</DataTemplate>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<DockPanel>
<ContentPresenter DockPanel.Dock="Top"/>
<ItemsPresenter Margin="0,0,0,0" DockPanel.Dock="Top"/>
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.Resources>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Padding" Value="0"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" DockPanel.Dock="Top">
<TextBox Width="100" Text="{Binding Path=Cell[0].Value}" />
<TextBox Width="100" Text="{Binding Path=Cell[1].Value}" />
<TextBox Width="100" Text="{Binding Path=Cell[2].Value}" />
<TextBox Width="100" Text="{Binding Path=Cell[3].Value}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.GroupStyle>
<GroupStyle HeaderTemplate="{StaticResource HeaderGroupStyle}">
<GroupStyle.Panel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</ListBox.GroupStyle>
</ListBox>
This is what I have now
And this is what I want

How to make a grid column scroll horizontally in metro apps?

I have a Grid column and I have a list view in it. I am populating it from a form which is found in a another column. The values entered in the form gets saved to a list. I want that list displayed in the list view. When the text entered in the form increases the remaining values gets disappeared. I want that column to scroll horizontally so the values don't get disappeared.
This is what I have tried so far..
<Grid Grid.Column="2" Margin="0,0,46,10" ScrollViewer.HorizontalScrollBarVisibility="Visible">
<ScrollViewer HorizontalScrollMode="Auto" HorizontalScrollBarVisibility="Auto" VerticalScrollMode="Disabled" VerticalScrollBarVisibility="Hidden" Margin="0,0,-60,10">
<ListView x:Name="lsvLessons" IsItemClickEnabled="True" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollMode="Enabled" ScrollViewer.HorizontalScrollBarVisibility="Auto" BorderThickness="1" SelectionMode="Multiple" ItemsSource="{Binding Source={StaticResource cvsLessons}}" Margin="7,0,62,0">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Vertical" HorizontalChildrenAlignment="left"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Padding" Value="0"/>
<Setter Property="Margin" Value="-12"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate >
<StackPanel Orientation="Horizontal" Width="375" Height="20" Background="Transparent" HorizontalAlignment="Left">
<StackPanel Width="230" VerticalAlignment="Center" Margin="15,5,0,0">
<TextBlock Text="{Binding Name}" Foreground="white" FontSize="14" Margin="0,3,0,0" FontWeight="Normal" VerticalAlignment="Center" HorizontalAlignment="Left"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollViewer>
</Grid>
Someone please help me do this.
Any kind of help is appreciated....

Have you tried to do that w/o the ScrollViewer Control? and Enable the horizontal scroll mode?
Try this:
<Grid Grid.Column="2" Margin="0,0,46,10" ScrollViewer.HorizontalScrollBarVisibility="Visible">
<ListView x:Name="lsvLessons" IsItemClickEnabled="True" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollMode="Enabled" ScrollViewer.HorizontalScrollBarVisibility="Auto" BorderThickness="1" SelectionMode="Multiple" ItemsSource="{Binding Source={StaticResource cvsLessons}}" Margin="7,0,62,0" ScrollViewer.HorizontalScrollMode="Enabled" >
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Vertical" HorizontalChildrenAlignment="left"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Padding" Value="0"/>
<Setter Property="Margin" Value="-12"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate >
<StackPanel Orientation="Horizontal" Width="375" Height="20" Background="Transparent" HorizontalAlignment="Left">
<StackPanel Width="230" VerticalAlignment="Center" Margin="15,5,0,0">
<TextBlock Text="{Binding Name}" Foreground="white" FontSize="14" Margin="0,3,0,0" FontWeight="Normal" VerticalAlignment="Center" HorizontalAlignment="Left"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
Adding ScrollViewer.HorizontalScrollMode="Enabled" & Removing the ScrollViewer control ..
UPDATE:
You can achieve that without using columns.. here's my try:
<Grid x:Name="rootGrid">
<ScrollViewer HorizontalScrollMode="Enabled" >
<StackPanel Orientation="Horizontal" >
<Grid x:Name="form" >
<!-- your form here.. -->
</Grid>
<Grid x:Name="list" >
<!-- your listview here.. -->
</Grid>
</StackPanel>
</ScrollViewer>
</Grid>
Good luck :)

GridView Groups should not start in a new column

I've created a new GridView that groups the item by key.
<GridView
Style="{StaticResource DefaultGridViewStyle}"
ItemsSource="{Binding Source={StaticResource TimeGroupCollectionViewSource}}"
ItemTemplate="{StaticResource TransactionDataTemplate}"
MaxHeight="{Binding MaximumContentHeight}">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Vertical" GroupHeaderPlacement="Left"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Border Background="{ThemeResource B2}" Height="40" VerticalAlignment="Top" Tapped="Border_Tapped">
<TextBlock Style="{StaticResource GroupTextBlockStyle}" Height="40" VerticalAlignment="Top" Text="{Binding Key}" />
</Border>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
<Page.Resources>
<CollectionViewSource x:Name="TimeGroupCollectionViewSource" IsSourceGrouped="True" Source="{Binding TransactionList}" ItemsPath="Data"/>
</Page.Resources>
That works fine. By default every group starts in a new column.
What I want is something like this:
How can I achieve that? Do I miss some properties?

If you want your grid to scroll vertically - you should try changing its ScrollViewer.HorizontalScrollMode and ScrollViewer.VerticalScrollMode or use a ListView with custom ItemsPanel.

WPF Datagrid - How to avoid second level grouping when value is null

I have a grid that supports two-level grouping, the grouping is based on multiple columns. In cases when the value is "null", how can I avoid the second level grouping.
DataTable - converted to CollectionView is the data source of the below DataGrid. The data table has multiple two columns, "Category" and "SubCategory" based on which two-level grouping should be done - primary and secondary respectively. However, the catch is that the "SubCategory" is not applicable in all cases and certain rows may only have the "Category" - In that case, I don't want the second group level header to show up at all - right now it shows up as an empty row with the "expander" toggle button.
The Data is flexible, if I have to make changes to the datatable - I can do so. Please suggest.
<DataGrid Name="gridResult" IsSynchronizedWithCurrentItem="True" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.CanContentScroll="True" AlternationCount="2" ItemsSource="{Binding }" HeadersVisibility="All" CanUserAddRows="False"
CanUserDeleteRows="False" EnableRowVirtualization="False" EnableColumnVirtualization="False" Margin="2,10,2,2" BorderThickness="0" HorizontalGridLinesBrush="Gray"
VerticalGridLinesBrush="Gray" Background="Transparent" AllowDrop="False" Grid.Row="2">
<DataGrid.GroupStyle>
<GroupStyle ContainerStyle="{StaticResource GroupHeaderStyle}">
<GroupStyle.Panel>
<ItemsPanelTemplate>
<DataGridRowsPresenter/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
<GroupStyle ContainerStyle="{StaticResource SecondGroupContainerStyle}">
<GroupStyle.Panel>
<ItemsPanelTemplate>
<DataGridRowsPresenter/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</DataGrid.GroupStyle>
</DataGrid>
<Style x:Key="GroupHeaderStyle" TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander x:Name="exp" IsExpanded="True" Background="#FFBDC8C9" Foreground="Black" FontWeight="Bold" BorderBrush="Black" BorderThickness="0 0 0 1">
<Expander.Header>
<TextBlock Text="{Binding Name}"/>
<!--</StackPanel>-->
</Expander.Header>
<ItemsPresenter />
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SecondGroupContainerStyle" TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}" >
<Expander x:Name="exp" IsExpanded="True" Background="#FFC2CBCC" Foreground="Black" FontWeight="Bold" BorderBrush="Black" BorderThickness="0 0 0 1" Margin="5 0 0 0">
<Expander.Header>
<TextBlock Text="{Binding Name}">
</TextBlock>
</Expander.Header>
<ItemsPresenter />
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>