WPF HeaderContent Control Vertical Alignment - wpf

How can I get HCC using a tab control to "Stretch" all the way down vertically? How can I achieve this?
Here is the header content control XAML:
<HeaderedContentControl
Content="{Binding Path=Workspaces}"
ContentTemplate="{StaticResource WorkspacesTemplate}" />
Here is the corresponding style info:
<DataTemplate x:Key="WorkspacesTemplate">
<TabControl
IsSynchronizedWithCurrentItem="True"
ItemsSource="{Binding}"
ItemTemplate="{StaticResource ClosableTabItemTemplate}"
Margin="4"
/>
</DataTemplate>
<DataTemplate x:Key="ClosableTabItemTemplate">
<DockPanel>
<Button
Command="{Binding Path=CloseCommand}"
Content="X"
Cursor="Hand"
DockPanel.Dock="Right"
Focusable="False"
FontFamily="Arial"
FontSize="9"
FontWeight="Bold"
Margin="0,1,0,0"
Padding="0"
VerticalContentAlignment="Bottom"
Width="16" Height="16"
/>
<ContentPresenter
Content="{Binding Path=DisplayName}"
/>
</DockPanel>

If you examine the control template for the HeaderedContentControl you'll find it puts the content in a StackPanel which is why content isn't stretching vertically. This is the default template:
<Style x:Key="HeaderedContentControlStyle"
TargetType="{x:Type HeaderedContentControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type HeaderedContentControl}">
<StackPanel>
<ContentPresenter ContentSource="Header"/>
<ContentPresenter/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
So if we replace the StackPanel with a Grid like this:
<Style x:Key="HeaderedContentControlStyle"
TargetType="{x:Type HeaderedContentControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type HeaderedContentControl}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ContentPresenter ContentSource="Header"/>
<ContentPresenter Grid.Row="1"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and use that style
<HeaderedContentControl
Style="{StaticResource HeaderedContentControlStyle}"
Content="{Binding Path=Workspaces}"
ContentTemplate="{StaticResource WorkspacesTemplate}" />
then the content should stretch vertically.

Related

Template not working, not showing anything on screen

I'm having really trouble understanding templates and how to use them and re-use them across my App. I have defined two style templates in a resource dictionary, then in my page load them in the correct control and set the style to the resource in dictionary, but nothing showing in screen, nothing at all. I have the control working in another page but I am trying to make it re-usable, code:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="CustomListBox" TargetType="ListBox">
<Style.Resources>
<Style TargetType="{x:Type Expander}">
<Setter Property="IsExpanded"
Value="{Binding Path=IsSelected,
RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}" />
</Style>
<ScrollViewer x:Key="Scroller">
<ScrollViewer.VerticalScrollBarVisibility>
Auto
</ScrollViewer.VerticalScrollBarVisibility>
</ScrollViewer>
</Style.Resources>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBox}">
<ItemsPresenter/>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<ContentPresenter Content="{TemplateBinding Content}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="CustomExpander" TargetType="{x:Type Expander}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Expander}">
<DockPanel>
<ToggleButton
DockPanel.Dock="Top"
Background="Teal"
HorizontalAlignment="Left"
Content="{TemplateBinding Content}"
Foreground="WhiteSmoke"
FontSize="12"
Name="Header"
Padding="1"
>
<ToggleButton.Template>
<ControlTemplate TargetType="ToggleButton">
<TextBlock Text="{TemplateBinding Content}"/>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
<ContentPresenter
Content="{TemplateBinding Content}"
Name="ExpandSite"
Visibility="Collapsed"
DockPanel.Dock="Bottom"
HorizontalAlignment="Center"
VerticalAlignment="Center">
</ContentPresenter>
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Implementation:
<UserControl x:Class="Neotek.Contabilidad.UI.Views.AdminView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:views="clr-namespace:Neotek.Contabilidad.UI.Views"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="600">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="../Visual Resources/MenuDesplegableRD.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ListBox Grid.Column="0" Style="{StaticResource CustomListBox}" Background="Yellow" Width="200" Height="200">
<Expander Width="200" Height="200" Background="Violet"
Style="{StaticResource CustomExpander}">
<Expander.Header>
<TextBlock Text="Administrar Cuentas"
Foreground="White" />
</Expander.Header>
<WrapPanel>
<Label Margin="20,5,5,5" Foreground="white" Content="Nueva Cuenta"/>
<Label Margin="20,5,5,5" Foreground="white" Content="--------------"/>
<Label Margin="20,5,5,5" Foreground="white" Content="---------------"/>
</WrapPanel>
</Expander>
<Expander Style="{StaticResource CustomExpander}">
<Expander.Header>
<TextBlock Text="Administrar Cuentas"
Foreground="White" />
</Expander.Header>
<WrapPanel>
<Label Margin="20,5,5,5" Foreground="white" Content="Nueva Cuenta"/>
<Label Margin="20,5,5,5" Foreground="white" Content="--------------"/>
<Label Margin="20,5,5,5" Foreground="white" Content="---------------"/>
</WrapPanel>
</Expander>
</ListBox>
</Grid>
</UserControl>
I have this working:
<ListBox ScrollViewer.VerticalScrollBarVisibility="Auto">
<ListBox.Resources>
<Style TargetType="{x:Type Expander}">
<Setter Property="IsExpanded"
Value="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}"/>
</Style>
</ListBox.Resources>
<ListBox.Template>
<ControlTemplate TargetType="{x:Type ListBox}">
<ItemsPresenter/>
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<ContentPresenter Content="{TemplateBinding Content}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
<Expander Background="OliveDrab">
<Expander.Header>
<BulletDecorator>
<BulletDecorator.Bullet>
<Image Width="60" Height="64" HorizontalAlignment="Left" VerticalAlignment="Top" />
</BulletDecorator.Bullet>
<TextBlock Margin="10,0,0,0" Text="Administrar Cuentas" VerticalAlignment="Center" HorizontalAlignment="Stretch" Foreground="White" />
</BulletDecorator>
</Expander.Header>
<WrapPanel>
<Label Margin="20,5,5,5" Foreground="white" Content="Nueva Cuenta"/>
<Label Margin="20,5,5,5" Foreground="white" Content="--------------"/>
<Label Margin="20,5,5,5" Foreground="white" Content="---------------"/>
</WrapPanel>
</Expander>
<Expander Background="OrangeRed">
<Expander.Header>
<BulletDecorator>
<BulletDecorator.Bullet>
<Image Width="64" Height="64" HorizontalAlignment="Left" VerticalAlignment="Top" />
</BulletDecorator.Bullet>
<TextBlock Margin="10,0,0,0" Text="Rubros" VerticalAlignment="Center" HorizontalAlignment="Stretch" Foreground="White" />
</BulletDecorator>
</Expander.Header>
<WrapPanel Orientation="Vertical" >
<Label Margin="20,5,5,5" Foreground="white" Content="----------"/>
<Label Margin="20,5,5,5" Foreground="white" Content="----------------"/>
<Label Margin="20,5,5,5" Foreground="white" Content="----------------"/>
</WrapPanel>
</Expander>
<Expander Background="Teal">
<Expander.Header>
<BulletDecorator>
<BulletDecorator.Bullet>
<Image Width="64" Height="64" HorizontalAlignment="Left" VerticalAlignment="Top" />
</BulletDecorator.Bullet>
<TextBlock Margin="10,0,0,0" Text="Subrubros" VerticalAlignment="Center" HorizontalAlignment="Stretch" Foreground="White" />
</BulletDecorator>
</Expander.Header>
<WrapPanel>
<Label Margin="20,5,5,5" Foreground="white" Content="----------"/>
<Label Margin="20,5,5,5" Foreground="white" Content="-------------------"/>
</WrapPanel>
</Expander>
</ListBox>
Any clues what's happening or what I am getting wrong with templates??
Change background of DockPanel, this will use Background property set in Expander in DockPanel. You have set it to Violet.
<DockPanel Background="{TemplateBinding Background}">
Change ToggleButton Content property to <ToggleButton Content="{TemplateBinding Header}".
This will show your Header content of Expander in ToggleButton. You have set it to 'Administrar Cuentas'.
Change control template of your Expander from
<ToggleButton.Template>
<ControlTemplate TargetType="ToggleButton">
<TextBlock Text="{TemplateBinding Content}"/>
</ControlTemplate>
to
<ToggleButton.Template>
<ControlTemplate TargetType="ToggleButton">
<Border BorderBrush="Yellow" BorderThickness="3" CornerRadius="5" Background="{TemplateBinding Background}" Height="24">
<ContentPresenter/>
</Border>
</ControlTemplate>
</ToggleButton.Template>
You are trying to put TextBlock of your Header content(set in XAML) inside TextBlock(template). Now, after change TextBlock of Header content will appear within border. Note here <ContentPresenter/> is pointing to
Header.
These changes are enough. I have also changed Horizontal properties of Expander like :
HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch"
/////////// Changed ResourceDictionary //////////
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="CustomListBox" TargetType="ListBox">
<Style.Resources>
<Style TargetType="{x:Type Expander}">
<Setter Property="IsExpanded"
Value="{Binding Path=IsSelected,
RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}" />
</Style>
<ScrollViewer x:Key="Scroller">
<ScrollViewer.VerticalScrollBarVisibility>
Auto
</ScrollViewer.VerticalScrollBarVisibility>
</ScrollViewer>
</Style.Resources>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBox}">
<ItemsPresenter/>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<ContentPresenter Content="{TemplateBinding Content}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="CustomExpander" TargetType="{x:Type Expander}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Expander}">
<DockPanel Background="{TemplateBinding Background}">
<ToggleButton
Content="{TemplateBinding Header}"
DockPanel.Dock="Top"
Background="Teal"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
Foreground="WhiteSmoke"
FontSize="12"
Name="Header"
Padding="1"
>
<ToggleButton.Template>
<ControlTemplate TargetType="ToggleButton">
<Border BorderBrush="Yellow" BorderThickness="3" CornerRadius="5" Background="{TemplateBinding Background}" Height="24">
<ContentPresenter/>
</Border>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
<ContentPresenter
Content="{TemplateBinding Content}"
Name="ExpandSite"
Visibility="Visible"
DockPanel.Dock="Bottom"
HorizontalAlignment="Center"
VerticalAlignment="Center">
</ContentPresenter>
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I have touched only your ResourceDictionary, and added background to your second expander.
Output after modifying your styles only.

Why is the Style defined inside of the control being ignored?

I have a ListBox inside a UserControl with its style defined in the ListBox.Resources, but the style is being ignored. We add a generic ListBox style in the Application.Resources.
Why does the Application.Resources style take presedence over the style defined in the control's resources?
This is how I define the ListBox and its style:
<ListBox x:Name="myListBox" SelectionMode="Extended" >
<ListBox.Resources>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Margin="0" Padding="2" Grid.Column="0" Grid.ColumnSpan="2" x:Name="Background" CornerRadius="0" Background="Transparent" BorderThickness="0" BorderBrush="Transparent" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<CheckBox x:Name="myCheckBox" Grid.Column="0" IsChecked="{Binding MyBoolean}"
HorizontalAlignment="Center" IsThreeState="False" VerticalAlignment="Center" Background="Transparent" Click="myCheckBox_Click"/>
<TextBlock Grid.Column="1" Text="{Binding ItemName}" VerticalAlignment="Center" Margin="4,1,2,4">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="Black" />
</Style>
</TextBlock.Style>
</TextBlock>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.Resources>
</ListBox>
This is how we add the ListBox generic style in the App.xaml - Application.Resources:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MyAssembly;component/MyListBoxGenericStyle.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
Also, if I define the Style inside the ListBox.ItemContainerStyle it seems to work:
<ListBox x:Name="myListBox" SelectionMode="Extended" >
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Margin="0" Padding="2" Grid.Column="0" Grid.ColumnSpan="2" x:Name="Background" CornerRadius="0" Background="Transparent" BorderThickness="0" BorderBrush="Transparent" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<CheckBox x:Name="myCheckBox" Grid.Column="0" IsChecked="{Binding MyBoolean}"
HorizontalAlignment="Center" IsThreeState="False" VerticalAlignment="Center" Background="Transparent" Click="myCheckBox_Click"/>
<TextBlock Grid.Column="1" Text="{Binding ItemName}" VerticalAlignment="Center" Margin="4,1,2,4">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="Black" />
</Style>
</TextBlock.Style>
</TextBlock>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.Resources>
</ListBox>
You should define the style listed under the list-box resources under the dictionary instead. Putting styles or templates under the element to be manipulated is akin to ignoring CSS and doing styles directly in the element in HTML.
You can give the dictionary resource template a name and reference it in the tag as
<ListBox ItemTemplate="{StaticResource MyTemplate}">
Check if MyListBoxGenericStyle.xaml's style doesn't have ItemContainerStyle set explicitly to another value. This would render your default style useless.
Also, you can check by means of Snoop where does your ListBoxItem gets it style from (i.e. locally set, resources, theme, etc).

WPF: Groupstyle not working correctly because of Style and/or modified ListBox

I am trying to use a GroupStyle but instead of showing the groupname as a header over the items in the list it only shows the header and not the items.
It works fine until I applied a special style to the list. I then decided this style was pretty bogus so I created a UserControl fro this effect. The problem persists.
The purpose of the UserControl is to have a expending effect on the selected item where normally it could show some info and then more info when expanded.
UserControl:
<UserControl x:Class="MyProject.CustomUC.ExpandingList"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<ListBox x:Name="List"
ItemsSource="{Binding Path=Collection}">
<ListBox.Template>
<ControlTemplate TargetType="ListBox">
<Border BorderBrush="Blue"
BorderThickness="1"
CornerRadius="2"
Background="White">
<ScrollViewer Focusable="False">
<StackPanel Margin="2" IsItemsHost="True" />
</ScrollViewer>
</Border>
</ControlTemplate>
</ListBox.Template>
<ListBox.GroupStyle>
<GroupStyle HidesIfEmpty="True">
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=Name}"/>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListBox.GroupStyle>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Margin="4" Name="Border" BorderBrush="Blue" BorderThickness="1" CornerRadius="5" Background="LightBlue">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<ContentPresenter Name="Head"
Margin="4"
Visibility="Visible"
ContentTemplate="{Binding ElementName=List, Path=DataContext.HeadTemplate}"/>
<Border Name="Tail" Visibility="Collapsed" Grid.Row="1" BorderThickness="0,1,0,0" BorderBrush="Blue">
<ContentPresenter Margin="4"
ContentTemplate="{Binding ElementName=List, Path=DataContext.TailTemplate}" />
</Border>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Tail" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
</Grid>
</UserControl>
Using the UserControl:
<CustomUC:ExpandingList Collection="{Binding Path=List}">
<CustomUC:ExpandingList.HeadTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=DisplayName}" />
</DataTemplate>
</CustomUC:ExpandingList.HeadTemplate>
<CustomUC:ExpandingList.TailTemplate>
<DataTemplate DataType="{x:Type ViewModel:ElementViewModel}">
<TextBlock Text="{Binding Path=SomeOtherProperties}" />
</DataTemplate>
</CustomUC:ExpandingList.TailTemplate>
</CustomUC:ExpandingList>
This works if I change from the ExpandingList UserCotnrol:
<ListView ItemsSource="{Binding Path=List}" >
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=DisplayName}" />
</DataTemplate>
</ListView.ItemTemplate>
<ListView.GroupStyle>
<GroupStyle HidesIfEmpty="True">
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=Name}"/>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
Anyone know what could be wrong?
In the ListBox template, replace:
<StackPanel Margin="2" IsItemsHost="True" />
with
<ItemsPresenter Margin="2" />
The ItemsPresenter class has extra logic for groups, that you lose if you're directly using a panel to display the items.

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}">

WPF: How to make HeaderedContentControl.Content fit height?

I am having a form in maximize mode, within the form contains a HeaderContentControl.
Within the HeaderContentControl.Content, i added a DockLayout, but the problem is that DockLayout is not fit to the form height.
How can I resolve this problem? Here's the xaml file:
<Window x:Class="Prototype.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Prototype"
Title="XXX"
x:Name="frmMain"
Width="581" Height="340" ResizeMode="CanMinimize"
WindowStartupLocation="CenterScreen" WindowState="Maximized"
WindowStyle="None" IsHitTestVisible="True" Topmost="False" AllowsTransparency="True" Background="Transparent" Loaded="frmMain_Loaded">
<!-- Copyright Microsoft Corporation. All Rights Reserved. -->
<Window.Resources>
<Style TargetType="{x:Type local:MainWindow}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:MainWindow}">
<Border Background="#FF333333"
BorderBrush="#FFCCCCCC"
BorderThickness="1"
CornerRadius="5"
Padding='2'>
<HeaderedContentControl>
<HeaderedContentControl.Header>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="19*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="212*" />
<ColumnDefinition Width="84*" />
<ColumnDefinition Width='Auto' />
</Grid.ColumnDefinitions>
<Rectangle Grid.ColumnSpan="3" Fill="#FF505050" />
<TextBlock FontSize="13"
FontWeight='Bold'
VerticalAlignment='Center'
Margin="6,5,3,6"
Text="XXX" Grid.ColumnSpan="2" OpacityMask="#FFCECECE" Foreground="#FFF3F3F3" Height="20" />
<Button x:Name='WindowCloseButton'
Grid.Column="2"
Width="17"
Height="17"
Cursor='Hand'
Margin="8,6,6,8"
VerticalAlignment='Center'
Click='WindowCloseButton_Click' FontFamily="Lucida Console">
<Button.Background>
<ImageBrush />
</Button.Background>
<Image Source="/Prototype;component/Resource/window-close.png"></Image>
</Button>
</Grid>
</HeaderedContentControl.Header>
<!-- New Content Area -->
<HeaderedContentControl.Content>
<ContentPresenter Content="{TemplateBinding Content}" />
</HeaderedContentControl.Content>
</HeaderedContentControl>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type MenuItem}">
<Setter Property="Foreground" Value="#FF7B7B7B"></Setter>
<Style.Triggers>
<Trigger Property="IsHighlighted" Value="True">
<Setter Property="Foreground" Value="#333333"></Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="#333333"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="23" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Menu Height="23" Name="menuContext" Margin="0,0" Background="#FF7B7B7B" Foreground="White" Grid.Row="0">
<MenuItem Header="File" Background="#FF7B7B7B" Foreground="White">
<MenuItem Header="Open" Margin="0,1"/>
<MenuItem Header="Save" Margin="0,1"/>
<MenuItem Header="Exit" Margin="0,1" UseLayoutRounding="True" />
</MenuItem>
</Menu>
<Grid Grid.Row="1" ShowGridLines="True">
<DockPanel LastChildFill="True">
<Border Height="25"
Background="SkyBlue"
BorderBrush="Black"
BorderThickness="1"
DockPanel.Dock="Top">
<TextBlock Foreground="Black">Dock = "Top"</TextBlock>
</Border>
<Border Height="25"
Background="SkyBlue"
BorderBrush="Black"
BorderThickness="1"
DockPanel.Dock="Top">
<TextBlock Foreground="Black">Dock = "Top"</TextBlock>
</Border>
<Border Height="25"
Background="LemonChiffon"
BorderBrush="Black"
BorderThickness="1"
DockPanel.Dock="Bottom">
<TextBlock Foreground="Black">Dock = "Bottom"</TextBlock>
</Border>
<Border Width="200"
Background="PaleGreen"
BorderBrush="Black"
BorderThickness="1"
DockPanel.Dock="Left">
<TextBlock Foreground="Black">Dock = "Left"</TextBlock>
</Border>
<Border Background="White"
BorderBrush="Black"
BorderThickness="1">
<TextBlock Foreground="Black">This content will "Fill" the remaining space</TextBlock>
</Border>
</DockPanel>
</Grid>
</Grid>
</Window>
Problem here is HeaderedContentControl uses StackPanel internally to layout header and content.
To fix that, use a Grid instead or re-template HeaderedContentControl to use Grid.
Example:
<ControlTemplate TargetType="HeaderedContentControl">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ContentControl Content="{TemplateBinding Header}" Grid.Row="0" />
<ContentControl Content="{TemplateBinding Content}" Grid.Row="1" />
</Grid>
</ControlTemplate>
Adding a similar answer to the accepted one, but which uses a DockPanel instead of a Grid for a simpler implementation with the same results.
Example with DockPanel:
<ControlTemplate TargetType="HeaderedContentControl">
<DockPanel>
<ContentControl Content="{TemplateBinding Header}" DockPanel.Dock="Top" />
<ContentControl Content="{TemplateBinding Content}" />
</DockPanel>
</ControlTemplate>

Resources