ListView DataTemplate, ControlTemplate and Style - wpf

Still learning WPF....thanks for any help.
Is there any way to Refactor this:
<ListBox Name="lbEvents"
VerticalAlignment="Stretch"
SelectionMode="Multiple"
Loaded="lbCenterEvents_Loaded"
HorizontalAlignment="Stretch"
BorderBrush="Transparent"
Background="Transparent"
SelectionChanged="lbCenterEvents_SelectionChanged"
ItemContainerStyle="{StaticResource KioskCheckboxListItemContainer}">
<ListBox.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent" />
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent" />
</ListBox.Resources>
<ListBox.ItemTemplate>
<DataTemplate>
<CheckBox Grid.Column="0"
Margin="0,10,0,0"
Padding="5,30,5,10"
DockPanel.Dock="Top"
Style="{StaticResource KioskCheckBox}"
Background="{StaticResource brshSecondaryColor}"
FontSize="26"
HorizontalAlignment="Stretch"
IsChecked="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}"
Content="{Binding DisplayDescriptionForKiosk}">
</CheckBox>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Into something like this:
<ListBox Name="lbEvents" Style="{StaticResource MyFinalListBox}"
VerticalAlignment="Stretch"
SelectionMode="Multiple"
Loaded="lbCenterEvents_Loaded"
HorizontalAlignment="Stretch"
BorderBrush="Transparent"
Background="Transparent" />
Just trying to get an idea...I shouldn't need exact code, pseudo code should be sufficient (I hope), thanks in advance.
EDIT: I'm asking this because I'm trying to find a way to do this with the least amount of references to StaticResources. I realize I can pull out the templates and styles, but I am hoping some one can show me how reduce it to one StaticResource.

Yes you want (something like)
<UserControl>
<UserControl.Resources>
<DataTemplate x:Key="MyItemTemplate" DataType="{x:Type MyDataType}">
<CheckBox Grid.Column="0"
Margin="0,10,0,0"
Padding="5,30,5,10"
DockPanel.Dock="Top"
Style="{StaticResource KioskCheckBox}"
Background="{StaticResource brshSecondaryColor}"
FontSize="26"
HorizontalAlignment="Stretch"
IsChecked="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}"
Content="{Binding DisplayDescriptionForKiosk}">
</CheckBox>
</DataTemplate>
<Style x:Key="MyFinalListBox" TargetType="{x:Type ListBox}">
<Setter Property="SelectionMode" Value="Multiple" />
... put more properties here
</Style>
</UserControl.Resources>
</UserControl>
<ListBox Name="lbEvents"
ItemTemplate="{StaticResource MyItemTemplate}"
Style="{StaticResource MyFinalListBox}"
VerticalAlignment="Stretch"
Loaded="lbCenterEvents_Loaded"
HorizontalAlignment="Stretch"
BorderBrush="Transparent"
Background="Transparent" />

Related

Extra Whitespace with ListBox and UniformGrid

I'm making a calendar as an exercise, and I get the Listbox Items to generate correctly. However, I don't want any spaces in between the borders. I have set HorizontalContentAlignment to stretch, and that didn't fix it.
<Grid>
<ListBox x:Name="monthCalendarListbox"
Grid.RowSpan="2"
BorderThickness="0"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="5"
Columns="7"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black"
BorderThickness="1">
<StackPanel Background="Transparent"
HorizontalAlignment="Stretch">
<Label Content="{Binding DayNumber}"/>
<Label Content="{Binding Message}"
VerticalAlignment="Center"
HorizontalAlignment="Center"/>
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
EDIT:
It looks like ListBoxItem was getting a transparent border thrown in in addition to some padding (mentioned in the comments). So no more spacing but now I have double thick borders where the ListBoxItems meet. Any idea how to fix that?
<Grid>
<ListBox x:Name="monthCalendarListbox"
BorderThickness="0"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Style.Resources>
<SolidColorBrush x:Key="x:Static SystemColors.HighlightBrushKey" Color="Transparent"/>
<SolidColorBrush x:Key="x:Static SystemColors.ControlBrushKey" Color="Transparent"/>
<SolidColorBrush x:Key="x:Static SystemColors.HighlightTextBrushKey" Color="Black"/>
</Style.Resources>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="BorderThickness" Value="1"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="5"
Columns="7"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Background="Transparent">
<Label Content="{Binding DayNumber}"/>
<Label Content="{Binding Message}"
VerticalAlignment="Center"
HorizontalAlignment="Center"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>

Display Button as long as ListView doesn't has more than five Items

I have some ListViews who each can contain max 5 ListViewItems. As long as there are less than 5 items there should be an Button be displayed. I have already written an Value Converter that returns true if the Count is less than five. But now I have Problems styling my ListView. Because i.e. if there are three ListViewItems they should be styled with the normal style and the "4" item should be an Button. My tought was that I add a new ListViewItem inside the DataTrigger. Is that possible or is there a better way to achive that?
Style.xaml
<Style TargetType="{x:Type ListView}">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<UniformGrid Rows="5" Columns="1"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=Items.Count, Converter={StaticResource ItemCounterConverter}}" Value="true">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<TextBlock>No items to display</TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
<!--ListViewItem-->
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border BorderBrush="#5076A7" BorderThickness="1">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#FFFFFF" Offset="0.0"/>
<GradientStop Color="#C0D3EA" Offset="1.0"/>
</LinearGradientBrush>
</Border.Background>
<StackPanel TextElement.FontFamily="Segoe UI" TextElement.FontSize="12">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="15"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Padding="3,0,0,0" Text="{Binding Betreff}" TextTrimming="CharacterEllipsis" Grid.Column="0" Grid.Row="0"/>
<Button FontSize="7" Content="X" Grid.Column="1" Grid.Row="0"/>
</Grid>
<TextBlock Padding="3,0,0,0" Text="{Binding Kunde}"/>
<StackPanel Orientation="Horizontal">
<TextBlock FontWeight="Bold" Padding="3,0,0,0" Text="{Binding Ort}"/>
<TextBlock Padding="3,0,0,0" Text="("/>
<TextBlock Text="{Binding Alternative}"/>
<TextBlock Text=")"/>
</StackPanel>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Update
Thanks this looks very promising and you understood it right. But I have problems implementing it. Every ListView has a differnt ItemSource(they're all ObservableCollections), so I don't know if I can set the ItemSource inside the Style? But the Button at the End should be available to all of them. My Styles are in a different File than the ListViews themselves. The definition for my ListViews looks like this:
AppointmentOverview.xaml
<ListView Grid.Column="1" Grid.Row="3" ItemsSource="{Binding Mov}"/>
<ListView Grid.Column="1" Grid.Row="4" ItemsSource="{Binding Mon}"/>
<ListView Grid.Column="2" Grid.Row="3" ItemsSource="{Binding Div}"/>
<ListView Grid.Column="2" Grid.Row="4" ItemsSource="{Binding Div}"/>
<ListView Grid.Column="3" Grid.Row="3" ItemsSource="{Binding Miv}"/>
<ListView Grid.Column="3" Grid.Row="4" ItemsSource="{Binding Min}"/>
<ListView Grid.Column="4" Grid.Row="3" ItemsSource="{Binding Dov}"/>
<ListView Grid.Column="4" Grid.Row="4" ItemsSource="{Binding Don}"/>
<ListView Grid.Column="5" Grid.Row="3" ItemsSource="{Binding Frv}"/>
<ListView Grid.Column="5" Grid.Row="4" ItemsSource="{Binding Frn}"/>

Remove Control Highlight From ListBoxItems but not children controls

I am using a ListBox to display a list of items: PictureOrders.
I have applied a DataTemplate for the ListBox's Items.
I would like to style the list box so that the items are not highlighted when the mouse is over any of the items in the list box and so that the selected item in the list box is not highlighted either.
So, I used the following in the ListBox's resources:
<ListBox.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent" />
</ListBox.Resources>
However, now the ComboBoxes within the ListBox no longer have highlight colors which poses a bit of a problem.
I have the following classes:
Public Class PictureOrder
Public Property OrderName As String
Public Property NumberOfPictures As Integer
Public Property QualityOfPictures As Integer
Public Property Comments As String
End Class
Public Class PictureOrders
Public Property PictureOrders As ObjectModel.ObservableCollection(Of PictureOrder)
Public Sub New()
PictureOrders = New ObjectModel.ObservableCollection(Of PictureOrder)
For i As Integer = 1 To 11 '
Dim picOrder As New PictureOrder With {.OrderName = String.Format("Picture Order # {0}", i.ToString),
.NumberOfPictures = 50,
.QualityOfPictures = 10,
.Comments = String.Format("Picture Order # {0} Comments", i.ToString)}
PictureOrders.Add(picOrder)
Next
End Sub
End Class
Here is my current XAML:
<Window x:Class="Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Picture Orders" Height="600" Width="600"
xmlns:myProj="clr-namespace:TryingWPF">
<Window.Resources>
<x:Array x:Key="NumberOfPicturesOptions" Type="sys:Int32"
xmlns:sys="clr-namespace:System;assembly=mscorlib">
<sys:Int32>10</sys:Int32>
<sys:Int32>15</sys:Int32>
<sys:Int32>20</sys:Int32>
<sys:Int32>25</sys:Int32>
<sys:Int32>50</sys:Int32>
<sys:Int32>100</sys:Int32>
<sys:Int32>150</sys:Int32>
</x:Array>
<x:Array x:Key="QualityOfPicturesOptions" Type="sys:Int32"
xmlns:sys="clr-namespace:System;assembly=mscorlib">
<sys:Int32>5</sys:Int32>
<sys:Int32>6</sys:Int32>
<sys:Int32>7</sys:Int32>
<sys:Int32>8</sys:Int32>
<sys:Int32>9</sys:Int32>
<sys:Int32>10</sys:Int32>
</x:Array>
<myProj:PictureOrders x:Key="Orders" />
</Window.Resources>
<ListBox x:Name="OrderListings" DataContext="{StaticResource Orders}" ItemsSource="{Binding PictureOrders}" SelectedIndex="0">
<ListBox.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent" />
</ListBox.Resources>
<ListBox.ItemTemplate>
<DataTemplate>
<Expander x:Name="PhotoOrderExpander"
Content="{Binding}"
Header="{Binding OrderName}"
IsExpanded="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}">
<Expander.ContentTemplate>
<DataTemplate>
<DockPanel Margin="25,5">
<DockPanel DockPanel.Dock="Top">
<Label VerticalAlignment="Top" Content="Order Name" />
<TextBox Text="{Binding OrderName, ValidatesOnExceptions=True}" VerticalAlignment="Top" MaxLength="50"/>
</DockPanel>
<DockPanel DockPanel.Dock="Top">
<Label Content="NumberOfPictures" />
<ComboBox ItemsSource="{Binding Source={StaticResource NumberOfPicturesOptions}}"
SelectedItem="{Binding Path=NumberOfPictures, ValidatesOnExceptions=True}" />
</DockPanel>
<DockPanel DockPanel.Dock="Top">
<Label Content="Quality Of Pictures" />
<ComboBox ItemsSource="{StaticResource QualityOfPicturesOptions}"
SelectedItem="{Binding Path=QualityOfPictures, ValidatesOnExceptions=True}" />
</DockPanel>
<DockPanel DockPanel.Dock="Top">
<Label Content="Comments" />
<TextBox Text="{Binding Comments}" />
</DockPanel>
</DockPanel>
</DataTemplate>
</Expander.ContentTemplate>
</Expander>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
You can set the SolidColorBrush resources in a style that only targets ListBoxItem.
Since ComboBoxItem inherits from ListBoxItem, the ComboBox will still be affected though, so it's also necessary to create a style for ComboBoxItem to apply the default colors.
<ListBox.Resources>
<Style TargetType="ListBoxItem">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent" />
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent" />
</Style.Resources>
</Style>
<Style TargetType="ComboBoxItem">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="{x:Static SystemColors.HighlightColor}"/>
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="{x:Static SystemColors.ControlColor}"/>
</Style.Resources>
</Style>
</ListBox.Resources>
After many different attempts to solve this problem, I finally came to a solution that works.
I created a style for the ListBoxItem that set the TemplateControl and set the VisualStates for the MouseOver, Selected, and UnSelected states.
Here is the XAML code solution to the problem:
<Window.Resources>
<Style TargetType="ListBoxItem" x:Key="ListBoxWithNoSelection">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="LayoutRoot"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver" />
<VisualState x:Name="Disabled" />
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl x:Name="ContentContainer"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<x:Array x:Key="NumberOfPicturesOptions" Type="sys:Int32"
xmlns:sys="clr-namespace:System;assembly=mscorlib">
<sys:Int32>10</sys:Int32>
<sys:Int32>15</sys:Int32>
<sys:Int32>20</sys:Int32>
<sys:Int32>25</sys:Int32>
<sys:Int32>50</sys:Int32>
<sys:Int32>100</sys:Int32>
<sys:Int32>150</sys:Int32>
</x:Array>
<x:Array x:Key="QualityOfPicturesOptions" Type="sys:Int32"
xmlns:sys="clr-namespace:System;assembly=mscorlib">
<sys:Int32>5</sys:Int32>
<sys:Int32>6</sys:Int32>
<sys:Int32>7</sys:Int32>
<sys:Int32>8</sys:Int32>
<sys:Int32>9</sys:Int32>
<sys:Int32>10</sys:Int32>
</x:Array>
<myProj:PictureOrders x:Key="Orders" />
</Window.Resources>
<ListBox x:Name="OrderListings" DataContext="{StaticResource Orders}"
ItemsSource="{Binding PictureOrders}"
SelectedIndex="0"
ItemContainerStyle="{StaticResource ListBoxWithNoSelection}">
<ListBox.ItemTemplate>
<DataTemplate>
<Expander x:Name="PhotoOrderExpander"
Content="{Binding}"
Header="{Binding OrderName}"
IsExpanded="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}">
<Expander.ContentTemplate>
<DataTemplate>
<DockPanel Margin="25,5">
<DockPanel DockPanel.Dock="Top">
<Label VerticalAlignment="Top" Content="Order Name" />
<TextBox Text="{Binding OrderName, ValidatesOnExceptions=True}" VerticalAlignment="Top" MaxLength="50"/>
</DockPanel>
<DockPanel DockPanel.Dock="Top">
<Label Content="NumberOfPictures" />
<ComboBox ItemsSource="{Binding Source={StaticResource NumberOfPicturesOptions}}"
SelectedItem="{Binding Path=NumberOfPictures, ValidatesOnExceptions=True}" />
</DockPanel>
<DockPanel DockPanel.Dock="Top">
<Label Content="Quality Of Pictures" />
<ComboBox ItemsSource="{StaticResource QualityOfPicturesOptions}"
SelectedItem="{Binding Path=QualityOfPictures, ValidatesOnExceptions=True}" />
</DockPanel>
<DockPanel DockPanel.Dock="Top">
<Label Content="Comments" />
<TextBox Text="{Binding Comments}" />
</DockPanel>
</DockPanel>
</DataTemplate>
</Expander.ContentTemplate>
</Expander>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
-Frinny

How to set a ToolTip for each ListBoxItem

I have a ListBox control; how would I set the ToolTip for each ListBoxItem using the code below.
<ListBox Name="FillSelections"
VerticalContentAlignment="Stretch"
Margin="1, 3, 1, 3"
IsEnabled="True"
Grid.Column="0"
Background="Transparent"
HorizontalContentAlignment="Center"
SelectedItem="{Binding SelectedColor}"
SelectionMode="Single"
Style="{StaticResource HorizontalListBoxStyle}"
ItemsSource="{Binding FillColors}"
ItemTemplate="{StaticResource ColorsItemTemplate}">
</ListBox>
<DataTemplate x:Key="ColorsItemTemplate">
<Border Width="20"
Height="16"
BorderBrush="Black"
BorderThickness="1">
<Border.Background>
<SolidColorBrush Color="{Binding}" />
</Border.Background>
<Path Stroke="Red"
StrokeThickness="3"
x:Name="abc"
Visibility="Hidden">
<Path.Data>
<LineGeometry StartPoint="0,16" EndPoint="20,0"/>
</Path.Data>
</Path>
</Border>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding}" Value="#00FFFFFF">
<Setter TargetName="abc" Property="Visibility" Value="Visible"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
Try something like this
<ListBox Width="400" Margin="10"
ItemsSource="{Binding Source={StaticResource myTodoList}}">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=TaskName}"
ToolTipService.ToolTip="{Binding Path=TheTooltipText}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Of course adapt the ItemsSource binding with whatever your binding source is, and the binding Path parts with whatever public property of the objects in the list you actually want to display.
You could create a style for ListBoxItem. So something along the lines of:
<Window x:Class="WpfApplication3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style TargetType="ListBoxItem">
<Setter Property="ToolTip">
<Setter.Value>
<ToolTip>
<TextBlock>Hello</TextBlock>
</ToolTip>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<ListBox>
<ListBoxItem>
<TextBlock Text="Hello" />
</ListBoxItem>
</ListBox>
</Grid>
</Window>

WPF TreeViewItem Control Template Partially applied?

I know a ControlTemplate is suppose to replace the default one entirely and this seems to work when not using a HierarchicalDataTemplate. However using a HierarchicalDataTemplate my control template seems to be partially used - the TreeViewItem is the control I specified containing an image etc. BUT still appears as a node with the default expander to show its children - not specified in my Template (I want my children to always be shown, but thats beside the point). It looks like this:
<TreeView>
<TreeView.Resources>
<Style x:Key="MyNodeStyle" TargetType="TreeViewItem">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="IsExpanded" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TreeViewItem">
<StackPanel Orientation="Vertical" HorizontalAlignment="Center">
<Border CornerRadius="8" BorderThickness="1" Padding="2" Margin="4, 6" BorderBrush="{StaticResource itemBorderBrush}" Background="{StaticResource itemBackgroundBrush}" x:Name="border">
<DockPanel LastChildFill="False">
<StackPanel Orientation="Vertical" DockPanel.Dock="Top" Height="80">
<TextBlock Text="{Binding Path=DisplayValue}" HorizontalAlignment="Center" FontWeight="Bold"/>
<Image Source="MyNode.png" Stretch="None"/>
<TextBlock Text="{Binding Path=Notes}" TextWrapping="Wrap" Width="150"/>
</StackPanel>
</DockPanel>
</Border>
<ItemsPresenter />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" IsItemsHost="True" HorizontalAlignment="Center" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
<HierarchicalDataTemplate DataType="{x:Type src:MyNode}" ItemsSource="{Binding Path=Children}" >
<TreeViewItem Style="{StaticResource MyNodeStyle}"/>
</HierarchicalDataTemplate>
</TreeView.Resources>
<!-- Arrange the root items horizontally. -->
<TreeView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel IsItemsHost="True" Orientation="Horizontal" HorizontalAlignment="Center" />
</ItemsPanelTemplate>
</TreeView.ItemsPanel>
</TreeView>
For some reason only when using a HierarchicalDataTemplate the ItemsPanel and Setter does not seem to be applied and the children are presented in the default expander. How did that expander get there when I am using my own ControlTemplate!?##$
I don't think you should put the TreeViewItem inside your HierarchicalDataTemplate.
Try this:
<HierarchicalDataTemplate DataType="{x:Type src:MyNode}" ItemsSource="{Binding Path=Children}" >
<StackPanel Orientation="Vertical" DockPanel.Dock="Top" Height="80">
<TextBlock Text="{Binding Path=DisplayValue}" HorizontalAlignment="Center" FontWeight="Bold"/>
<Image Source="MyNode.png" Stretch="None"/>
<TextBlock Text="{Binding Path=Notes}" TextWrapping="Wrap" Width="150"/>
</StackPanel>
</HierarchicalDataTemplate>
Now, your template becomes:
<ControlTemplate TargetType="TreeViewItem">
<StackPanel Orientation="Vertical" HorizontalAlignment="Center">
<Border CornerRadius="8" BorderThickness="1" Padding="2" Margin="4, 6" x:Name="border">
<DockPanel LastChildFill="False">
<ContentPresenter ContentSource="Header" />
</DockPanel>
</Border>
<ItemsPresenter />
</StackPanel>
</ControlTemplate>
Is that how you intended it to look?
Edit: the original expanders are probably there because you only use your style for child items - make your style the ItemContainerStyle for the treeview:
<Window.Resources>
<Style x:Key="MyNodeStyle" TargetType="TreeViewItem">
....
<TreeView ItemContainerStyle="{StaticResource MyNodeStyle}">

Resources