Styling ListView.GroupStyle with a WrapPanel - wpf

Okay, here is my pretty simple problem.
I have a ListView that I styled so as to make it look like the Windows Explorer.
Now, I'd like to group the items inside. Therefore, I defined a GroupStyle with an Expander to group it. The grouping is now fine.
What I don't like is that now, my ListView displays each group on a separate line, while I'd like to have some expander-wrapping in order to display many groups on the same line.
An image is better than some text I guess.
Here is what I have:
Here is what I want:
I cannot find which property should I have to style in order to make the GroupItems fit in a WrapPanel, just like I did for the items.
Here is my ListView style:
<ResourceDictionary>
<!-- Explorer-style layout-->
<DataTemplate x:Key="ExplorerView">
<StackPanel Orientation="Horizontal" Height="Auto" Width="150">
<Image Source="{Binding Path=Value.AppConfig.Appli.AppType, Converter={StaticResource TypeToIconConverter}}" Margin="5"
Height="50" Width="50"/>
<StackPanel VerticalAlignment="Center" Width="90">
<TextBlock Text="{Binding Path=Value.AppConfig.Appli.AppName}"
FontSize="13" HorizontalAlignment="Left" TextWrapping="WrapWithOverflow"
Margin="0,0,0,1" />
<TextBlock Text="{Binding Path=Value.AppConfig.Appli.AppType}" FontSize="9"
HorizontalAlignment="Left" Margin="0,0,0,1" />
</StackPanel>
</StackPanel>
</DataTemplate>
<!-- Group header style-->
<Style x:Key="GroupHeaderStyle" TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander x:Name="exp" IsExpanded="True" Width="310"
BorderBrush="CornflowerBlue">
<Expander.Header>
<DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Background="CornflowerBlue" x:Name="expContent"
Width="{Binding RelativeSource={RelativeSource
Mode=FindAncestor, AncestorType={x:Type Expander}},
Path=Width}"
Height="{Binding RelativeSource={RelativeSource
Mode=FindAncestor, AncestorType={x:Type ToggleButton}},
Path=ActualHeight}">
<CheckBox IsChecked="False" DockPanel.Dock="Right"/>
<TextBlock Text="{Binding Path=Name}" Foreground="White"
FontWeight="Bold" HorizontalAlignment="Center" />
</DockPanel>
</Expander.Header>
<ItemsPresenter />
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
<!-- (...) -->
<ListView ItemsSource="{Binding GroupedConfig, Mode=TwoWay}"
ItemTemplate="{StaticResource ExplorerView}">
<ListView.ItemsPanel>
<ItemsPanelTemplate >
<WrapPanel Width="{Binding (FrameworkElement.ActualWidth),
RelativeSource={RelativeSource
AncestorType=Expander}}"
ItemWidth="{Binding (ListView.View).ItemWidth,
RelativeSource={RelativeSource AncestorType=ListView}}"
ItemHeight="{Binding (ListView.View).ItemHeight,
RelativeSource={RelativeSource AncestorType=ListView}}" />
<!--MinWidth="{Binding ItemWidth,
RelativeSource={RelativeSource Self}}"-->
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.GroupStyle>
<GroupStyle ContainerStyle="{StaticResource GroupHeaderStyle}" />
</ListView.GroupStyle>
</ListView>
Any ideas?
I'm trying to insert some appropriate Setter in the style defined for GroupItem, but I'm starting to think that this is not the right way to do.
Thanks!

I finally found the right property to edit after many tries.
I guess it could be useful to post it here if anybody would need to do something with the same behavior:
So we actually have a property Panel in the GroupStyle in which we can add this so needed WrapPanel :
<ListView.GroupStyle>
<GroupStyle ContainerStyle="{StaticResource GroupHeaderStyle}">
<GroupStyle.Panel>
<ItemsPanelTemplate>
<WrapPanel Width="800" />
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</ListView.GroupStyle>

In case anyone is here like I am trying to make a the ListBox Items Wrap but based on an unknown amount of items so you cannot set a Width like the above answer, this is how I did it.
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Vertical" MaxHeight="{Binding Converter={StaticResource ListBoxHeightToItemsPanelHeightConverter}, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBox}}, Path=ActualHeight}"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
In my converter I simply subtract 30 to account for the height of the header.
Here is the complete code:
<ListBox.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Margin="8" FontSize="18" TextAlignment="Center" FontWeight="Bold" Foreground="White" >
<TextBlock.Text>
<Binding Path="Name"/>
</TextBlock.Text>
</TextBlock>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</ListBox.GroupStyle>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Vertical" MaxHeight="{Binding Converter={StaticResource ListBoxHeightToGroupStyleHeightConverter}, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBox}}, Path=ActualHeight}"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.Template>
<ControlTemplate>
<!-- Your template here. -->
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemTemplate>
<DataTemplate >
<!-- Your template here. -->
</DataTemplate>
</ListBox.ItemTemplate>
Hope this helps save someone some time!

Related

Nested Scrollbar only part visible

I am unable to work out how to provide space for a nested ScrollViewer control.
I have a Border with nested ScrollViewer which contains ListView templated to render multiple DevExpress GridControl controls.
I've tried adding padding, margins etc nothing seems to work.
This Grid is there to allow me to add multiple StackPanel as they are made visible at different points. I've trimmed out the code for conciseness.
<Border BorderThickness="4" Grid.Column="0" Grid.Row="2">
<ScrollViewer VerticalScrollBarVisibility="Auto" Width="450" MinHeight="200" MaxHeight="600">
<Grid>
<StackPanel HorizontalAlignment="Center">
<ListView ItemsSource="{Binding FilterItemLists}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" view:MarginSetter.Margin="5">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"></WrapPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Width="200">
<dxlc:LayoutItem VerticalAlignment="Stretch" Padding="4">
<Label Content="{Binding Title}"/>
</dxlc:LayoutItem>
<dxlc:LayoutItem VerticalAlignment="Stretch" Padding="4" Height="200" >
<dxg:GridControl ItemsSource="{Binding Path=Items, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
AutoGenerateColumns="None" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<dxg:GridControl.Columns>
<dxg:GridColumn FieldName="IsSelected" Width="20" FixedWidth="True" Fixed="Left">
<dxg:GridColumn.CellTemplate>
<DataTemplate>
<dxe:CheckEdit MaxWidth="20" IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent},
Path=DataContext.RowData.Row.IsSelected, Mode=TwoWay}"
Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type dxg:GridControl}}, Path=DataContext.FilterItemSelectedCommand}"
CommandParameter="{Binding Path=RowData.Row}"
HorizontalAlignment="Center" VerticalAlignment="Center">
</dxe:CheckEdit>
</DataTemplate>
</dxg:GridColumn.CellTemplate>
</dxg:GridColumn>
<dxg:GridColumn FieldName="Name" BestFitMode="AllRows"/>
</dxg:GridControl.Columns>
<dxg:GridControl.View>
<dxg:TableView AllowEditing="False" AutoWidth="True" ShowBandsInCustomizationForm="False" ShowBandsPanel="False"
ShowColumnHeaders="False" ShowGroupPanel="False" ShowIndicator="False" ShowSearchPanelCloseButton="False"
ShowVerticalLines="False" ShowHorizontalLines="False"/>
</dxg:GridControl.View>
</dxg:GridControl>
</dxlc:LayoutItem>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</Grid>
</ScrollViewer>
</Border>

Wpf Button Width in GroupBox Header

I have the following code:
<Window.Resources>
<DataTemplate x:Key="ParameterItemTemplate">
<my:ParameterItem ParamValue="{Binding Value}" Description="{Binding Name}"/>
</DataTemplate>
</Window.Resources>
<Grid Width="Auto">
<GroupBox BorderBrush="Black"
BorderThickness="2"
Width="Auto"
HorizontalAlignment="Left"
VerticalAlignment="Top">
<GroupBox.HeaderTemplate>
<DataTemplate>
<Button Content="Header"
Width="{Binding RelativeSource={RelativeSource Self}, Path=Width}"
Height="30">
</Button>
</DataTemplate>
</GroupBox.HeaderTemplate>
<ScrollViewer HorizontalScrollBarVisibility="Auto">
<ItemsControl x:Name="Test"
ItemsSource="{Binding Items}"
ItemTemplate="{StaticResource ParameterItemTemplate}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Vertical" Height="228"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>
</GroupBox>
</Grid>
When the binded items fill my ItemsControl, the Button placed in the Header of the GroupBox does not change it's width. Do I have a binding problem?
The width of the button fits only it's content.
What do you expect if you bind the width with itself? Try
<Button Content="Header"
Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type GroupBox}}, Path=ActualWidth}"
Height="30">

Tabbing User Control In Listbox DataTemplate

I have a User Control in a ListBox and when I use the tab key to focus I'd like to get the focus on the TextBox in my Control instead of the Custom Control. How can I do it?
I simplified the code because In my control I have other UI Elements.
User Control Code:
<Grid>
<TextBox Name="txtFreeTextDescription" Style="{StaticResource TextBoxStyleLargeDynamic}" Text="{Binding Description, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}" />
</Grid>
ListBox Code:
<ListBox Name="lsbItems" DataContext="{Binding}" KeyboardNavigation.TabNavigation="Local">
<ListBox.ItemTemplate>
<DataTemplate>
<local:SectionDynamicItem x:Name="ucSectionDynamicItem" Description="{Binding SectionItem.Description}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
This works for me....
<ListBox ItemsSource="{Binding EmployeeList}"
KeyboardNavigation.TabNavigation="Continue">
<ItemsControl.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Focusable" Value="False"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Margin="5" Focusable="False">
<TextBox Text="{Binding Name}"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ListBox>
Check below link.
http://social.msdn.microsoft.com/forums/en-US/wpf/thread/98d8423c-9719-4291-94e2-c5bf3d80cd46/
Thanks
Rajnikant

ListView: define ItemsPanelTemplate in resource dictionary

I have a ListView which layout looks like a Windows Explorer view (icon + some details), bound to a list somewhere in the ViewModel.
My aim here is to be able to switch between explorer view or classic view whenever we want.
I could define an ItemsPanelTemplate doing exactly the work to display correctly the layout, directly in the ListView.ItemsPanel field. Now, I'd like to define it in the resources so that I'll be able to use it in different views, and especially in one control, the user should have the choice between Explorer view or classic list view (the default rendering for a list)
How'd you do that? I cannot define any ItemsPanelTemplate in my ResourceDictionary, and if I define a DataTemplate it is not compatible (while I thought that following pure logic, ItemsPanelTemplate should inherit from DataTemplate, but it actually doesn't look like so).
Code snippet for the actual list:
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel
Width="{Binding (FrameworkElement.ActualWidth),
RelativeSource={RelativeSource
AncestorType=ScrollContentPresenter}}"
ItemWidth="{Binding (ListView.View).ItemWidth,
RelativeSource={RelativeSource AncestorType=ListView}}"
ItemHeight="{Binding (ListView.View).ItemHeight,
RelativeSource={RelativeSource AncestorType=ListView}}"
/>
<!--
MinWidth="{Binding ItemWidth, RelativeSource={RelativeSource Self}}"
-->
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel
Orientation="Horizontal"
Height="Auto"
Width="150" >
<Image
Source="{Binding Path=Appli.AppType, Converter={StaticResource TypeToIconConverter}}"
Margin="5"
Height="50"
Width="50" />
<StackPanel
VerticalAlignment="Center"
Width="90" >
<TextBlock
Text="{Binding Path=Appli.AppName}"
FontSize="13"
HorizontalAlignment="Left"
TextWrapping="WrapWithOverflow"
Margin="0,0,0,1" />
<TextBlock
Text="{Binding Path=Appli.AppType}"
FontSize="9"
HorizontalAlignment="Left"
Margin="0,0,0,1" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
Keeping the ItemTemplate in a static resource was easy to do, but now I can't do anything with the ItemsPanelTemplate...
Any ideas? I'm using MVVM so I'm trying ideally not to use code-behind if possible
You would use a style for the whole ListView for that. So you would do:
<Grid.Resources>
<Style x:Key="ListViewStyle" TargetType="ListView">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<WrapPanel
Width="{Binding (FrameworkElement.ActualWidth), RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
ItemWidth="{Binding (ListView.View).ItemWidth, RelativeSource={RelativeSource AncestorType=ListView}}"
ItemHeight="{Binding (ListView.View).ItemHeight, RelativeSource={RelativeSource AncestorType=ListView}}" />
<!--
MinWidth="{Binding ItemWidth, RelativeSource={RelativeSource Self}}"
-->
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<ListView
SelectionMode="Single"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Bottom"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ItemsSource="{Binding ListUserApps, UpdateSourceTrigger=PropertyChanged}"
SelectedIndex="{Binding SelectedUserApp, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Background="White"
Style="{StaticResource ListViewStyle}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel
Orientation="Horizontal"
Height="Auto"
Width="150">
<Image
Source="{Binding Path=Appli.AppType, Converter={StaticResource TypeToIconConverter}}"
Margin="5"
Height="50"
Width="50"/>
<StackPanel
VerticalAlignment="Center"
Width="90">
<TextBlock
Text="{Binding Path=Appli.AppName}"
FontSize="13"
HorizontalAlignment="Left"
TextWrapping="WrapWithOverflow"
Margin="0,0,0,1" />
<TextBlock
Text="{Binding Path=Appli.AppType}"
FontSize="9"
HorizontalAlignment="Left"
Margin="0,0,0,1" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
If you want the user then be able to switch between explorer and classic view, just define a second Style and switch the style of the listview. This can be done for example with some VisualStates and a 'DataStateBehavior'.
Alternatively you could create a style with some DataTriggers and Setters for the individual ItemsPanels.

davidpoll's printcollection

I'm trying to use David Poll's printcollection control, from the SLaB project- www.davidpoll.com but for some reason no items get shown. Maybe it's something with my itemtemplate, please have a look at this:
<Style x:Key="PrintStyle"
TargetType="SLaB:CollectionPrinter">
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Grid>
<sdk:Label x:Name="lblTitle" HorizontalAlignment="Left" Margin="0,8,0,0" VerticalAlignment="Top" Content="{Binding Source={StaticResource ResourceWrapper}, Path=NoteEditorResources.Title}"/>
<sdk:Label x:Name="lblTitleResult" HorizontalAlignment="Left" Margin="42,8,0,0" VerticalAlignment="Top" Content="{Binding Path=Title}"/>
<sdk:Label x:Name="lblDateCreated" HorizontalAlignment="Right" Margin="0,8,156,0" VerticalAlignment="Top" Content="{Binding Source={StaticResource ResourceWrapper}, Path=NoteEditorResources.DateCreated}"/>
<sdk:Label x:Name="lblDateCreatedResult" HorizontalAlignment="Right" Margin="0,8,113,0" VerticalAlignment="Top" Content="{Binding Path=DateCreated}"/>
<RichTextBox x:Name="rtbContent" Margin="0,28,0,8" Width="582" Xaml="{Binding Content}" />
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel HorizontalAlignment="Stretch">
<StackPanel HorizontalAlignment="Right"
Orientation="Horizontal">
<TextBlock Text="{Binding CurrentPage, StringFormat='{}Page {0} '}" />
<TextBlock Text="{Binding PageCount, StringFormat='{}/ {0}'}" />
</StackPanel>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="FooterTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel HorizontalAlignment="Center"
Orientation="Horizontal">
<TextBlock Text="{Binding FirstItemValue.Name}" />
<TextBlock Text=" - " />
<TextBlock Text="{Binding LastItemValue.Name}" />
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
I've used his printing control, but I never modified the itemtemplate. I used his TestPrinter.xaml as a template and filled in the HeaderTemplate, FooterTemplate, and the BodyTemplate with my code.
The BodyTemplate being the important one to take a look at. Here is the BodyTemplate section from his example:
<Printing:CollectionPrinter.BodyTemplate>
<DataTemplate>
<sdk:DataGrid ItemsSource="{Binding CurrentItems}"
AutoGenerateColumns="False"
VerticalScrollBarVisibility="Disabled">
<sdk:DataGrid.Columns>
<sdk:DataGridTextColumn Binding="{Binding Name}"
Header="Name" />
<sdk:DataGridTextColumn Binding="{Binding Address}"
Header="Address" />
<sdk:DataGridTextColumn Binding="{Binding Age}"
Header="Age" />
</sdk:DataGrid.Columns>
</sdk:DataGrid>
</DataTemplate>
</Printing:CollectionPrinter.BodyTemplate>
The important thing is to set the CurrentItems as the source for your control that will be used to display your collection. This way it can automatically calculate how many items to display in the page before they cut off.

Resources