I have a listview that uses GroupStyles where the ColumnHeaders are shown in each group. This works fine.
I would however like to hide the original ListView ColumnHeader (seen at the top of image) and just show Headers within the groups.
How can I separate them so it only show in the groups?
The GroupStyle:
<Style x:Key="GroupingSerialStyle" TargetType="{x:Type GroupItem}" BasedOn="{StaticResource GroupingBase}">
<Setter Property = "Template">
<Setter.Value>
<ControlTemplate>
<Expander Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" IsExpanded="{Binding IsExpandedAll, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Mode=OneTime}" Margin="2">
<Expander.Header>
<StackPanel Orientation = "Horizontal">
<TextBlock Text=" # "/>
<TextBlock Text = "{Binding Name}" />
</StackPanel>
</Expander.Header>
<StackPanel Orientation="Vertical">
<GridViewHeaderRowPresenter Visibility = "Visible" Margin="15,0,0,0"
DataContext="{Binding View, RelativeSource={RelativeSource FindAncestor,ListView,1}}"
Columns="{Binding Columns}"
ColumnHeaderContainerStyle="{StaticResource GridViewColumnHeaderStyleABCD}"
ColumnHeaderTemplate="{Binding ColumnHeaderTemplate}"
ColumnHeaderTemplateSelector="{Binding ColumnHeaderTemplateSelector}"
AllowsColumnReorder="{Binding AllowsColumnReorder}"
ColumnHeaderContextMenu="{Binding ColumnHeaderContextMenu}"
ColumnHeaderToolTip="{Binding ColumnHeaderToolTip}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
<ItemsPresenter Margin = "15,0,0,0" />
</StackPanel>
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Edit: Further the column headers shall presented with custom colors for each column.
It can be solved through the ColumnHeaderContainerStyle. If you set an empty Template at GridView.ColumnHeaderContainerStyle and use your styled GridViewColumnHeaderStyleABCD for your GroupItem it should work.
I tried the following, that only displays column headers at the group items with customized Background.
<ListView BindingGroup="{Binding Name}" ItemsSource="{Binding Source={StaticResource TestItems}}">
<!-- ### custom coloring column headers ### -->
<ListView.Resources>
<Style TargetType="GridViewColumnHeader">
<Setter Property="Background" Value="{Binding Path=Column.(YourNamespace:BgHelper.CustomBackground), RelativeSource={RelativeSource Self}}" />
</Style>
</ListView.Resources>
<ListView.View>
<GridView>
<GridView.ColumnHeaderContainerStyle>
<Style TargetType="GridViewColumnHeader">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
<!-- Empty: ListViews header shows nothing -->
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GridView.ColumnHeaderContainerStyle>
<!-- ### custom coloring column headers ### -->
<GridViewColumn DisplayMemberBinding="{Binding Parameter0}" Header="Par0" YourNamespace:BgHelper.CustomBackground="Pink" />
<GridViewColumn DisplayMemberBinding="{Binding Parameter1}" Header="Par1" YourNamespace:BgHelper.CustomBackground="Green" />
</GridView>
</ListView.View>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Expander Margin="2">
<Expander.Header>
<StackPanel Orientation="Horizontal">
<TextBlock Text=" # " />
<TextBlock Text="{Binding Name}" />
</StackPanel>
</Expander.Header>
<StackPanel Orientation="Vertical">
<GridViewHeaderRowPresenter Margin="15,0,0,0"
Columns="{Binding Columns}"
DataContext="{Binding View, RelativeSource={RelativeSource FindAncestor, ListView, 1}}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
Visibility="Visible" />
<ItemsPresenter Margin="15,0,0,0" />
</StackPanel>
</Expander>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
To customize your column header colors you could use an AttachedProperty as follows:
namespace YourNamespace
{
public class BgHelper
{
#region Fields
public static DependencyProperty CustomBackgroundProperty =
DependencyProperty.RegisterAttached("CustomBackground",
typeof (SolidColorBrush),
typeof (BgHelper),
new FrameworkPropertyMetadata(new SolidColorBrush(Colors.Transparent)));
#endregion
#region Public Methods
public static SolidColorBrush GetCustomBackground(DependencyObject element)
{
return (SolidColorBrush) element.GetValue(CustomBackgroundProperty);
}
public static void SetCustomBackground(DependencyObject element, SolidColorBrush value)
{
element.SetValue(CustomBackgroundProperty, value);
}
#endregion
}
}
Then I extended my example above with setting the CustomBackground and using it at GridViewColumnHeader style. I marked the new/edited lines with comments.
#WPFGermany was correct. However, in my original question I forgot to add that for the headers within the GroupStyle I also needed to show different background colors for some of the column headings. I was able to get this to work by duplicating all of the columns in the GroupStyle and pointing each ColumnHeaderStyle to a unique color. Perhaps there is a better way but for now this works for me. Here is the partial GroupStyle to illustrate:
<Style x:Key="GroupingNcpCheckStyleRoot" TargetType="{x:Type GroupItem}" BasedOn="{StaticResource GroupingBaseRoot}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Expander Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" IsExpanded="{Binding IsExpandedData, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Mode=OneTime}" Margin="2">
<Expander.Header>
<StackPanel Orientation="Horizontal">
<CheckBox x:Name="HeaderCheckBox" Margin="0,0,6,0" IsChecked="True"></CheckBox>
<TextBlock Text=" # "/>
<TextBlock Text="{Binding Name}"/>
</StackPanel>
</Expander.Header>
<StackPanel Orientation="Vertical">
<GridViewHeaderRowPresenter Margin="15,0,0,0"
DataContext="{Binding View, RelativeSource={RelativeSource FindAncestor, ListView, 1}}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
Visibility="Visible" >
<GridViewHeaderRowPresenter.Columns>
<!--NOTE: must explicitly create the collection-->
<GridViewColumnCollection>
<GridViewColumn Header=" " Width="60" >
<GridViewColumn.HeaderContainerStyle>
<Style TargetType="{x:Type GridViewColumnHeader}" BasedOn="{StaticResource GridViewColumnHeaderStyleTEST1}">
<Setter Property="Background" Value="{StaticResource TargetHeaderColor}" />
<Setter Property="Foreground" Value="White" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Margin" Value="-1,0,-1,0" />
</Style>
</GridViewColumn.HeaderContainerStyle>
<GridViewColumn.CellTemplate>
<DataTemplate >
<TextBlock HorizontalAlignment="Left" Text="{Binding Path=Id, StringFormat='# {0}'}"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header=" Show " >
<GridViewColumn.HeaderContainerStyle>
<Style TargetType="{x:Type GridViewColumnHeader}" BasedOn="{StaticResource GridViewColumnHeaderStyleTEST1}">
<Setter Property="Background" Value="{StaticResource DifferentHeaderColor}" />
<Setter Property="Foreground" Value="White" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Margin" Value="-1,0,-1,0" />
</Style>
</GridViewColumn.HeaderContainerStyle>
<GridViewColumn.CellTemplate>
<DataTemplate >
<CheckBox IsChecked="{Binding Path=IncludeInReport}" HorizontalAlignment="center"></CheckBox>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
Related
I want to select next item on scrolling right or left
<StackPanel >
<StackPanel Width="500">
<ItemsControl ItemsSource="{Binding Devices}" Focusable="False" >
<ItemsControl.Template>
<ControlTemplate TargetType="{x:Type ItemsControl}" >
<ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled"
CanContentScroll="True" Template="{DynamicResource ScrollViewerControlTemplate1}"
helpers:ScrollBarVisibilityHelper.IsEnabled="True" >
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Views:DeviceMiniView DataContext="{Binding}" Margin="10,5" />
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.Style>
<Style TargetType="{x:Type ItemsControl}">
<Style.Triggers>
<DataTrigger Binding="{Binding Items.Count, RelativeSource={RelativeSource Self}}"
Value="0">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<StackPanel>
<TextBlock Text="No devices" FontSize="24" FontWeight="Bold"
Margin="0,0,0,20" Foreground="#FFF8F5F5" />
<TextBlock Text="Click Menu->Reconnect" FontSize="24"
FontWeight="Bold" Margin="0,0,5,0" Foreground="White" />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding Items.Count, RelativeSource={RelativeSource Self}}"
Value="1">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate />
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ItemsControl.Style>
</ItemsControl>
</StackPanel>
I am trying to scroll my item present in scrollViwer, One item once from the list of items, But unfortunately i didn't succeed,
i new with WPF,
I have Xaml:
<ItemsControl.Template>
<ControlTemplate TargetType="{x:Type ItemsControl}" >
<ScrollViewer
HorizontalScrollBarVisibility="Visible"
VerticalScrollBarVisibility="Disabled"
CanContentScroll="True"
Template="{DynamicResource ScrollViewerControlTemplate1}"
helpers:ScrollBarVisibilityHelper.IsEnabled="True"
>
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
Can anybody help me out i have tried to change the style, templet and also tried with collectionview and observable collection in view model.
I would be thankfull.
I am using a ListView with a WrapPanel as its ItemsPanel. I need to change the style of selected items - use a different background color and add a border around the selected items, like Windows 7's Explorer does.
<ListView ItemsSource="{Binding Items}" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Margin="10">
<Rectangle Width="100" Height="100" Fill="Pink" />
<TextBlock Text="{Binding Caption}" Margin="0,10,0,0" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Just simply design ControlTemplate for Default type and Selected type. Then you can set Selected ControlTemplate when any item in the ListView is selected, otherwise keep Default type.
<Window.Resources>
<ControlTemplate x:Key="DEFAULT">
<StackPanel Orientation="Vertical" Margin="10">
<Rectangle Width="100" Height="100" Fill="Green" />
<TextBlock Text="{Binding Caption}" Margin="0,10,0,0" />
</StackPanel>
</ControlTemplate>
<ControlTemplate x:Key="SELECTED_TYPE">
<Border BorderBrush="Gray" BorderThickness="1">
<StackPanel Orientation="Vertical" Margin="10">
<Rectangle Width="100" Height="100" Fill="Pink" />
<TextBlock Text="{Binding Caption}" Margin="0,10,0,0" />
</StackPanel>
</Border>
</ControlTemplate>
<Style x:Key="ListItemStyle" TargetType="{x:Type ListBoxItem}">
<Setter Property="Background" Value="White"/>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Template" Value="{StaticResource SELECTED_TYPE}"/>
<Setter Property="Background" Value="Orange"/>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter Property="Template" Value="{StaticResource DEFAULT}"/>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<ListView ItemsSource="{Binding Items}" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ItemContainerStyle="{StaticResource ListItemStyle}">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
I have the following XAML to bind data to a ListBox filled with CheckBoxes:
<ListBox Background="Transparent" Grid.Column="8" Grid.Row="3" ItemsSource="{Binding Path=StakeTypes}" Foreground="White"
Name="lbStakes" ItemContainerStyle="{StaticResource SelectionListBoxItem}" SelectionChanged="lbStakes_SelectionChanged" SelectionMode="Extended">
<ListBox.ItemTemplate>
<DataTemplate>
<ListBoxItem IsSelected="{Binding IsSelected, Mode=TwoWay}" HorizontalContentAlignment="Stretch">
<CheckBox Cursor="Hand" IsChecked="{Binding IsSelected, Mode=TwoWay}" Content="{Binding Text}" HorizontalContentAlignment="Stretch" />
</ListBoxItem>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Problem is, the style for the ListBox selection is different than if I manually created each ListBox Item:
<ListBox Background="Transparent" Cursor="Hand" Grid.Column="6" Grid.Row="3" Name="lbStakes" SelectionMode="Extended">
<ListBoxItem IsSelected="True">
<CheckBox IsChecked="True" Foreground="White" Content="Low" />
</ListBoxItem>
<ListBoxItem IsSelected="True">
<CheckBox IsChecked="True" Foreground="White" Content="Medium" />
</ListBoxItem>
<ListBoxItem IsSelected="True">
<CheckBox IsChecked="True" Foreground="White" Content="High" />
</ListBoxItem>
<ListBoxItem IsSelected="True">
<CheckBox IsChecked="True" Foreground="White" Content="Highest" />
</ListBoxItem>
</ListBox>
Here are the images:
I would like it to look like the second image. Any ideas are greatly appreciated.
Update: The following is the style I am trying to apply to the ListBoxItem:
<Style x:Key="SelectionListBoxItem" TargetType="ListBoxItem">
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Name="Border" Padding="3" SnapsToDevicePixels="true">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Border" Property="Background" Value="{StaticResource myBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The two styles are different because in your bound ListBox you are using ItemContainerStyle="{StaticResource SelectionListBoxItem}", whereas in your second snippit, the default listbox item style applies. Try removing this style assignment from the bound listbox.
<Window.Resources>
<Style x:Key="SelectionListBoxItem" TargetType="ListBoxItem">
<Setter Property="KeyboardNavigation.TabNavigation" Value="None"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Name="Border" BorderBrush="Black" BorderThickness="0.5" SnapsToDevicePixels="true">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Border" Property="Background" Value="Red"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<ListBox Background="Transparent" Grid.Column="8" Grid.Row="3" ItemsSource="{Binding Path=IsSelectede}" Foreground="White"
Name="lbStakes" ItemContainerStyle="{StaticResource SelectionListBoxItem}">
<ListBox.ItemTemplate>
<DataTemplate>
<ListBoxItem IsSelected="{Binding IsSelected, Mode=TwoWay}" HorizontalContentAlignment="Stretch" KeyboardNavigation.TabNavigation="None">
<CheckBox Cursor="Hand" IsChecked="{Binding IsSelected, Mode=TwoWay}" Content="{Binding Text}" HorizontalContentAlignment="Stretch" />
</ListBoxItem>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
some of the binding properties are changed please correct them according to your properties .And also the style of your brush.I hope this will help.
I have a ListView with Horizontal WrapPanel as its ItemsPanelTemplate.
I want to get rid of the blue background for selected item. It is visible only on the left of the selected item.
There are many similar question on SO and I tried a lot of the solutions and none of them worked.
This is what I have already tried:
<ListView.Resources>
<Style TargetType="{x:Type ListViewItem}">
<Style.Resources>
<!-- Foreground for Selected ListViewItem -->
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}"
Color="Black"/>
<!-- Background for Selected ListViewItem -->
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
Color="Transparent"/>
<!--SelectedItem without focus-->
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent"/>
</Style.Resources>
</Style>
</ListView.Resources>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<EventSetter Event="Control.MouseDoubleClick" Handler="HandleSelectedItemDoubleClick"/>
<Style.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="2" ScaleY="2" CenterX="12" CenterY="12" />
</Setter.Value>
</Setter>
<Setter Property="Panel.ZIndex" Value="150"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="BorderBrush" Value="{x:Null}" />
<Setter Property="Background" Value="{x:Null}" />
</Trigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" Width="210" Margin="15" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
You need to overwrite the SystemColors.HighlightBrushKey for the ListView to be Transparent (or whatever color you want)
I typically put this in the ListView.Resources so it only applies to the specific ListView, and not all ListViews in my application
<ListView.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
Color="Transparent"/>
</ListView.Resources>
Its very close to what you have in your code already, but you need to set it for the ListView.Resources, not ListViewItem.Resources
To remove all default styling (hovering, selecting, etc.) just define a custom Template for the ItemContainer (not the Item itself):
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
Found on MSDN Forum
This is what did it for me:
<UserControl.Resources>
<DataTemplate x:Key="ItemTemplate">
<StackPanel Orientation="Vertical" Background="Transparent" Opacity="1" Width="185" MaxWidth="185">
<StackPanel Orientation="Horizontal">
<TextBlock
Margin="0,0,10,0"
Background="Transparent"
Foreground="DarkGoldenrod"
FontSize="12" FontStyle="Italic"
Text="{Binding Path=EventTypeName, Mode=OneWay}" />
<TextBlock
Background="Transparent"
Foreground="DarkGoldenrod"
FontSize="12" FontStyle="Italic"
Text="{Binding Path=AccountIdentity, Mode=OneWay}" />
</StackPanel>
<TextBlock
Background="Transparent"
Foreground="DarkGoldenrod" MaxWidth="170"
FontSize="12" FontStyle="Italic" TextTrimming="WordEllipsis" ToolTip="{Binding Path=EventMessage,Mode=OneWay}"
Text="{Binding Path=EventMessage, Mode=OneWay}" />
<TextBlock
Background="Transparent"
Foreground="Black"
FontSize="8"
Text="{Binding Path=EventLoggedOn, Mode=OneWay}"
TextTrimming="WordEllipsis"
ToolTip="{Binding Path=EventLoggedOn, Mode=OneWay}"
Margin="0,0,10,0" />
<StackPanel Orientation="Horizontal">
<TextBlock
Background="Transparent"
Foreground="Black"
FontSize="8"
Text="{Binding Path=QualifiedCreator, Mode=OneWay}" />
</StackPanel>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="SelectedTemplate">
<StackPanel Orientation="Vertical" Background="LightGray" Opacity="1" Width="185" MaxWidth="185">
<StackPanel Orientation="Horizontal">
<TextBlock
Margin="0,0,10,0"
Background="Transparent"
Foreground="Yellow"
FontSize="12" FontStyle="Italic"
Text="{Binding Path=EventTypeName, Mode=OneWay}" />
<TextBlock
Background="Transparent"
Foreground="Yellow"
FontSize="12" FontStyle="Italic"
Text="{Binding Path=AccountIdentity, Mode=OneWay}" />
</StackPanel>
<TextBlock
Background="Transparent"
Foreground="DarkGoldenrod" MaxWidth="170"
FontSize="12" FontStyle="Italic" TextTrimming="WordEllipsis" ToolTip="{Binding Path=EventMessage,Mode=OneWay}"
Text="{Binding Path=EventMessage, Mode=OneWay}" />
<TextBlock
Background="Transparent"
Foreground="Black"
FontSize="8"
Text="{Binding Path=EventLoggedOn, Mode=OneWay}"
TextTrimming="WordEllipsis"
ToolTip="{Binding Path=EventLoggedOn, Mode=OneWay}"
Margin="0,0,10,0" />
<StackPanel Orientation="Horizontal">
<TextBlock
Background="Transparent"
Foreground="Black"
FontSize="8"
Text="{Binding Path=QualifiedCreator, Mode=OneWay}" />
</StackPanel>
</StackPanel>
</DataTemplate>
<Style TargetType="ListViewItem" x:Key="ContainerStyle">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="ContentTemplate" Value="{StaticResource ResourceKey=ItemTemplate}" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True" >
<Setter Property="ContentTemplate" Value="{StaticResource ResourceKey=SelectedTemplate}" />
</Trigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
The simplest way to do this is to set the background to {x:Null} when the item is selected, using a trigger.
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Style.Triggers>
<Trigger Property="IsSelected"
Value="True">
<Setter Property="Background"
Value="{x:Null}" />
<Setter Property="BorderBrush"
Value="{x:Null}" />
</Trigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
...
</ListView>
I have a TreeView where parent and child nodes are bound to the same object type. What I want to do is have extra space, or create some other way to separate, only the top level nodes.
For example, if it looks like this normally:
A
B
C
F
D
E
I want it to look like this:
A
B
C
F
(space here)
D
E
Below is my code - There is already a lot of styling in order to use the TreeView as a ComboBox.
<TreeView
x:Name="GroupsCB"
Style="{StaticResource TreeViewBoxStyle}"
ItemsSource="{Binding Mode=OneTime}"
ItemContainerStyle="{StaticResource TreeViewItemStyle}"
ItemTemplate="{StaticResource GroupTreeItemTemplate}"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Margin="0,4,97,0"
Width="120" Height="26"
SelectedItemChanged="GroupsCB_SelectedItemChanged"
/>
<Style x:Key="TreeViewItemStyle" TargetType="TreeViewItem">
<Setter Property="IsExpanded" Value="True" />
</Style>
<Style x:Key="TreeViewBoxStyle" TargetType="{x:Type TreeView}">
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="Padding" Value="5,0,0,0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TreeView}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ToggleButton Content="{TemplateBinding SelectedItem, Converter={StaticResource GroupNameConv}}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Grid.Row="0" Height="22" Padding="{TemplateBinding Padding}" x:Name="titleButton">
<ToggleButton.Style>
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border Background="Transparent" BorderBrush="Black" BorderThickness="1,1,1,1">
<Grid>
<Path HorizontalAlignment="Right" x:Name="Arrow" VerticalAlignment="Center" Fill="Black"
Data="M 0 0 L 4 4 L 8 0 Z" UseLayoutRounding="False" Margin="0,0,5,0"/>
<ContentPresenter Margin="5,0,0,0" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=GroupsCB, Path=SelectedItem}">
<Setter Property="IsChecked" Value="false" />
</DataTrigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
<Popup IsOpen="{Binding IsChecked, ElementName=titleButton}" Placement="Bottom" Focusable="False" AllowsTransparency="True" PopupAnimation="Slide" Grid.Row="1">
<Border BorderBrush="Black" BorderThickness="1,1,1,1" Background="White" MinWidth="{TemplateBinding ActualWidth}" Height="auto">
<ScrollViewer>
<ItemsPresenter/>
</ScrollViewer>
</Border>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<HierarchicalDataTemplate
x:Key="GroupTreeItemTemplate"
ItemsSource="{Binding Children, Mode=OneTime}"
>
<StackPanel Orientation="Horizontal">
<StackPanel.Resources>
</StackPanel.Resources>
<ContentPresenter
Content="{Binding Name, Mode=OneTime}"
Margin="2,0,0,0"
/>
</StackPanel>
</HierarchicalDataTemplate>
Ok, lets dig up some old question :)
Just use different ItemContainerStyle for the top level and nested levels. The TreeView.ItemContainerStyle will target the top-level items, while the HierarchicalDataTemplate.ItemContainerStyle will target nested items.
<Style x:Key="TreeViewItemStyle" TargetType="TreeViewItem">
<Setter Property="IsExpanded" Value="True" />
</Style>
<!-- Special style for the top level with top/bottom margin of 5 -->
<Style x:Key="TopTreeViewItemStyle" TargetType="TreeViewItem" BasedOn="{StaticResource TreeViewItemStyle}">
<Setter Property="Margin" Value="0 5" />
</Style>
...
<TreeView
x:Name="GroupsCB"
Style="{StaticResource TreeViewBoxStyle}"
ItemsSource="{Binding Mode=OneTime}"
ItemContainerStyle="{StaticResource TopTreeViewItemStyle}"
...
<HierarchicalDataTemplate
x:Key="GroupTreeItemTemplate"
ItemsSource="{Binding Children, Mode=OneTime}"
ItemContainerStyle="{StaticResource TreeViewItemStyle}"
Use demo2 here: and add a top margin to the StackPanel for your top level HierarchicalDataTemplate
eg:
<HierarchicalDataTemplate
DataType="{x:Type local:TopLevelViewModel}"
ItemsSource="{Binding Children}"
>
<StackPanel Orientation="Horizontal" Margin="0,20,0,0">
<TextBlock Text="{Binding Name}" />
</StackPanel>
</HierarchicalDataTemplate>
Try out this
<TreeView>
<TreeViewItem Header="Employee1">
<TreeViewItem Header="Jesper"/>
<TreeViewItem Header="Aaberg"/>
<TreeViewItem Header="12345"/>
</TreeViewItem>
**<Separator />**
<TreeViewItem Header="Employee2">
<TreeViewItem Header="Dominik"/>
<TreeViewItem Header="Paiha"/>
<TreeViewItem Header="98765"/>
</TreeViewItem>
</TreeView>
Or u can make a DataTemplate for the Items with the Separator inside that template