Unable to apply style to button control defined in ResourceDictionary - wpf

I am new to the WPF technology. Currently I am willing to apply master page concept in an WPF application.
I have used ResourceDictionary for the same. I am facing an issue while doing this as per below.
I want list of link buttons to be displayed on my Master page.
As there is no direct link button control available in the WPF I have found a style script used to create a link button as per below.
<Style x:Key="Link" TargetType="Button">
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Foreground" Value="Blue"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<TextBlock TextDecorations="Underline"
Text="{TemplateBinding Content}"
Background="{TemplateBinding Background}"/>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Foreground" Value="Red"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Now I have a button control used in the ResourceDictionary file and I am trying apply this style to the button control. It compiles successfully but runs with an exception message.
Below is my code of ResourceDictionary
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:MSRTC.Master">
<Style TargetType="{x:Type local:Master}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:Master}">
<Grid Background="LightBlue">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="150"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="850"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="120"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Source="D:\Assignments\WPF\MSRTC\Developement\MSRTC\MSRTC\MSRTC\Images\Logo.png" Grid.Column="0" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<Image Source="D:\Assignments\WPF\MSRTC\Developement\MSRTC\MSRTC\MSRTC\Images\HeaderImage1.jpg" Grid.Column="1" Grid.Row="0" Stretch="Fill"/>
<Grid Grid.Row="1" Grid.Column="0" Background="Silver" Height="400">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="Welcome" FontWeight="Bold" FontSize="15" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<Button Name="btnHome" Content="Home" Grid.Row="1" Style="{StaticResource Link}"></Button>
</Grid>
<StackPanel Margin="10" Grid.Column="1" Grid.Row="1">
<!--<StackPanel Margin="10" Grid.Column="0" Grid.Row="1">-->
<ContentPresenter Content="{TemplateBinding Title}"/>
<ContentPresenter Content="{TemplateBinding Abstract}"/>
<ContentControl Content="{TemplateBinding Content}"/>
</StackPanel>
</Grid>
<!--<StackPanel Margin="10">
<ContentPresenter Content="{TemplateBinding Title}"/>
<ContentPresenter Content="{TemplateBinding Abstract}"/>
<ContentControl Content="{TemplateBinding Content}"/>
</StackPanel>-->
</StackPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Can anyone tell me where I am going wrong and how to takle with this.
Also one thing to be mention, the link button style script I have written in App.xaml Application.Resource section.
Thanks in advance.

Related

Format the HierachicalDatatemplate for a TreeView

I am trying to make a TreeView in XAML and it works well.
1) I have a Class containing a Name and a list of Children
<TreeView x:Name="TreeViewOffset" ItemsSource="{Binding OffsetsCollection}" VM:TreeViewHelper.SelectedItem="{Binding MyCollection, Mode=TwoWay}" Margin="19,32,59,33" AutomationProperties.IsColumnHeader="True">
<TreeViewContainer>Some Properties</TreeViewContainer>
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type VM:ParentViewModel}" ItemsSource="{Binding Children}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="Reference"
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition SharedSizeGroup="Ref"/>
<RowDefinition SharedSizeGroup="Value"/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Text="{Binding MyName}" Margin="10, 10, 10,10 "/>
</Grid>
</HierarchicalDataTemplate>
<DataTemplate DataType="{x:Type VM:ChildrenViewModel}">
<Grid >
<Grid.ColumnDefinitions>
<!--Placeholders for two columns of ToggleButton-->
<ColumnDefinition SharedSizeGroup="RefName"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition SharedSizeGroup="Name"/>
<RowDefinition SharedSizeGroup="Value"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding ChildrenValue}" Grid.Column="1" Margin="25, 0,0, 0" />
</Grid>
</DataTemplate>
</TreeView.Resources>
2) I want to improve the display by adding an another textbox (who is contained in the ParentViewModel) but this time at the end of the childrens
It Should be exactly like :
Parent : Name
Children1 Value
Children2 Value
Children3 Value
Children4 Value
Value
And this is the problem, how to improve the XAML to show the value?
I have tried to insert under
<TextBlock Grid.Column="0" Text="{Binding MyName}" Margin="10, 10, 10,10 "/>
this
<TextBlock Grid.Column="0" Grid.Row="1" Text="{Binding Value}" Margin="10, 10, 10,10 "/>
but it doesnt work. It is all a question about formatting but I'am not expert enough. Could you help me?
What you need to set is the ItemContainerStyle for the TreeView
A good starting point would be something like this
<Style x:Key="myTreeViewItemContainerStyle" TargetType="{x:Type TreeViewItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TreeViewItem}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="14" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ToggleButton
x:Name="Expander"
Grid.Row="0"
Grid.Column="0"
ClickMode="Press"
IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"
Style="{StaticResource myExpandCollapseToggleStyle}" />
<Border
x:Name="PART_Border"
Grid.Row="0"
Grid.Column="1"
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter
x:Name="PART_Header"
Margin="0,2"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
ContentSource="Header" />
</Border>
<ItemsPresenter
x:Name="ItemsHost"
Grid.Row="1"
Grid.Column="1" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="false">
<Setter TargetName="ItemsHost" Property="Visibility" Value="Collapsed" />
</Trigger>
<Trigger Property="HasItems" Value="false">
<Setter TargetName="Expander" Property="Visibility" Value="Hidden" />
</Trigger>
<!-- Use the same colors for a selected item, whether the TreeView is focussed or not -->
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="PART_Border" Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Which you can apply to the TreeView by setting its style
<Style TargetType="{x:Type TreeView}">
<Setter Property="ItemContainerStyle" Value="{StaticResource myTreeViewItemContainerStyle}" />
</Style>
For your requirement, you need to add another control after the ItemsPresenter, which you then bind to the property you want to display.

Custom WPF window style

I'm trying to make a custom window style. The goal is to create a template that migth be used by every window in my application. Template contains the toolbar, title and "the area which will be used by window". The problem is: When I use my style I can no longer add grid and conrols.
App.xaml
<Style x:Key="CustomWindowStyle" TargetType="{x:Type Window}">
<Setter Property="WindowStyle" Value="None"/>
<Setter Property="AllowsTransparency" Value="True"/>
<Setter Property="ResizeMode" Value="NoResize"/>
<Setter Property="Background" Value="MintCream"/>
<Setter Property="BorderBrush" Value="#0046E7"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<Grid Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.ColumnSpan="2">
<TextBlock TextAlignment="Center"
Margin="0 10 0 0"
FontSize="22"
FontWeight="DemiBold"
Foreground="RoyalBlue"
Text="{TemplateBinding Title}"/>
</StackPanel>
<StackPanel Grid.Row="0" Grid.Column="1"
Orientation="Horizontal"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
Margin="0 10 15 0">
<Button Style="{StaticResource MinimizeButtonStyle}"
Width="25"
Height="22"
Margin="0 0 10 0"/>
<Button Style="{StaticResource CloseButtonStyle}"
Width="25"
Height="22"/>
</StackPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
MainWindow.xaml
<Window x:Class="WindowForHW2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WindowForHW2"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525"
Style="{StaticResource CustomWindowStyle}">
<Grid>
<Button Width="100" Height="40" Content="Hello"/>
</Grid>
Template Works, but I cannot add smth anymore:
You need to add a ContentPresenter where the Content of your Window goes. Try this.
<Style x:Key="CustomWindowStyle" TargetType="{x:Type Window}">
<Setter Property="WindowStyle" Value="None"/>
<Setter Property="AllowsTransparency" Value="True"/>
<Setter Property="ResizeMode" Value="NoResize"/>
<Setter Property="Background" Value="MintCream"/>
<Setter Property="BorderBrush" Value="#0046E7"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<Grid Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.ColumnSpan="2">
<TextBlock TextAlignment="Center"
Margin="0 10 0 0"
FontSize="22"
FontWeight="DemiBold"
Foreground="RoyalBlue"
Text="{TemplateBinding Title}"/>
</StackPanel>
<StackPanel Grid.Row="0" Grid.Column="1"
Orientation="Horizontal"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
Margin="0 10 15 0">
<Button Content="+"
Width="25"
Height="22"
Margin="0 0 10 0"/>
<Button Content="X"
Width="25"
Height="22" />
</StackPanel>
<!-- here goes the content -->
<ContentPresenter Grid.Row="1"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

TabControl - Align TabItems correctly if free space dominates

I have a customized TabControl:
<Window x:Class="WpfApplication2.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="TabControl">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="TabStripPlacement" Value="Bottom" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabControl">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="1" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TabPanel Grid.Column="0" Panel.ZIndex="1" IsItemsHost="True" Background="Transparent" />
<ItemsControl Grid.Column="1">
<ItemsControl.Items>
<Button Height="50">DOMINATES</Button>
</ItemsControl.Items>
</ItemsControl>
</Grid>
<ContentPresenter Grid.Row="0" ContentSource="SelectedContent" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Border Background="LightCyan" Padding="20,0">
<TextBlock SnapsToDevicePixels="True" Text="{TemplateBinding Header}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<TabControl>
<TabItem Header="TEST 123">
<TextBlock>1</TextBlock>
</TabItem>
<TabItem Header="TEST 456">
<TextBlock>2</TextBlock>
</TabItem>
</TabControl>
</Window>
Beside the TabItems other controls are placed - which are much higher than the TabItems. How can i stretch the TabItems and place the TextBox in the middle (so that the fill the area)? Can i adjust the Padding dynamically?
http://goo.gl/xcYOY3 The red marked area should be filled and the TextBox centered. Is this possible?
Thx :)
Solution
<Window x:Class="WpfApplication2.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="TabControl">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="TabStripPlacement" Value="Bottom" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabControl">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ContentPresenter Grid.ColumnSpan="2" Grid.Column="0" Grid.Row="0" ContentSource="SelectedContent" />
<TabPanel Panel.ZIndex="1" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsItemsHost="True" Background="Transparent" />
<ItemsControl Grid.Row="1" Grid.Column="1" VerticalAlignment="Bottom">
<ItemsControl.ItemContainerStyle>
<Style TargetType="FrameworkElement">
<Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
</Style>
</ItemsControl.ItemContainerStyle>
<Button Background="LightGray" Height="70" BorderThickness="0">DOMINATES</Button>
</ItemsControl>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid Background="LightCyan" Height="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabPanel}}, Path=ActualHeight}">
<TextBlock SnapsToDevicePixels="True" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="20,0" Text="{TemplateBinding Header}" ></TextBlock>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<TabControl>
<TabItem Header="TEST 123">
<TextBlock >1</TextBlock>
</TabItem>
<TabItem Header="TEST 456">
<TextBlock >2</TextBlock>
</TabItem>
</TabControl>
</Window>
I have edited your template As per you image ..please run this xaml code separately.
<Window.Resources>
<Style TargetType="TabControl">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="TabStripPlacement" Value="Bottom" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabControl">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ContentPresenter Grid.ColumnSpan="2" Height="50" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center" ContentSource="SelectedContent" />
<Grid Grid.Row="1" Grid.Column="0" Background="LightCyan">
<TabPanel Panel.ZIndex="1" HorizontalAlignment="Center" VerticalAlignment="Center" IsItemsHost="True" Background="Transparent" />
</Grid>
<ItemsControl Grid.Row="1" VerticalAlignment="Bottom" Grid.Column="1">
<ItemsControl.ItemContainerStyle>
<Style TargetType="FrameworkElement">
<Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
<Setter Property="Height" Value="50"></Setter>
</Style>
</ItemsControl.ItemContainerStyle>
<Button Background="LightGray" BorderThickness="0">DOMINATES</Button>
</ItemsControl>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid Background="LightCyan" >
<TextBlock SnapsToDevicePixels="True" Margin="5,0,5,0" >
<ContentPresenter x:Name="ContentSite" HorizontalAlignment="Center" VerticalAlignment="Center" ContentSource="Header" RecognizesAccessKey="True"/>
</TextBlock>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<TabControl>
<TabItem Header="TEST 123">
<TextBlock >1</TextBlock>
</TabItem>
<TabItem Header="TEST 456">
<TextBlock >2</TextBlock>
</TabItem>
</TabControl>
and output from above code is http://prntscr.com/2yc51f
Update
<Style TargetType="TabControl">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="TabStripPlacement" Value="Bottom" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabControl">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ContentPresenter Grid.ColumnSpan="2" Height="50" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center" ContentSource="SelectedContent" />
<TabPanel Panel.ZIndex="1" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" IsItemsHost="True" Background="Transparent" />
<ItemsControl Grid.Row="1" VerticalAlignment="Bottom" Grid.Column="1">
<ItemsControl.ItemContainerStyle>
<Style TargetType="FrameworkElement">
<Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
<Setter Property="Height" Value="50"></Setter>
</Style>
</ItemsControl.ItemContainerStyle>
<Button Background="LightGray" BorderThickness="0">DOMINATES</Button>
</ItemsControl>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid Background="LightCyan" Height="50">
<TextBlock SnapsToDevicePixels="True" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5,0,5,0" Text="{TemplateBinding Header}" ></TextBlock>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

WPF Button Style Doesn't Show Text

I'm new to this so please bear with me.
I now have this Style. Paste this into a window to see it in action.
<Window.Resources>
<Style x:Key="SelectionButton3"
TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ClipToBounds="False">
<Grid.RowDefinitions>
<RowDefinition Height="75" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="55" />
</Grid.ColumnDefinitions>
<Border x:Name="TheBorder"
BorderThickness="0,1.5,1.5,1.5"
CornerRadius="3"
Background="SteelBlue"
Height="35"
Grid.Column="1"
Grid.Row="0"
Margin="-31"
BorderBrush="DarkSlateBlue"/>
<Rectangle Name="TheRectangle"
Fill="SteelBlue"
Stroke="DarkSlateBlue"
Grid.Row="0"
Grid.Column="0">
<Rectangle.LayoutTransform>
<RotateTransform Angle="-45" />
</Rectangle.LayoutTransform>
<Rectangle.BitmapEffect>
<DropShadowBitmapEffect ShadowDepth="5" />
</Rectangle.BitmapEffect>
</Rectangle>
<ContentPresenter x:Name="ContentArea"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter TargetName="TheBorder"
Property="BitmapEffect">
<Setter.Value>
<DropShadowBitmapEffect ShadowDepth="0" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Foreground"
Value="White"/>
<Setter Property="FontFamily"
Value="Segoe UI" />
<Setter Property="FontSize"
Value="20" />
</Style>
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="250" />
</Grid.ColumnDefinitions>
<Button Grid.Row="1"
Grid.Column="1"
Style="{StaticResource SelectionButton3}"
Margin="0,0,0,5"
Click="Button_Click">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image Height="35"
Width="35"
Stretch="Fill"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Grid.Column="0"
Margin="32.5,0,0,0"
Source="/app;component/Media/Images/Mail/email.png" />
<TextBlock Text="Email"
Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="22,0,0,0"/>
</Grid>
</Button>
I have 2 questions:
1) Why is only part of the text showing up?
2) How do I put the Image and TextBlock in the Template and just bind to them?
The reason why your Text is clipped is because you did not specify Grid.Row and Grid.Column for your ContentPresenter. This causes your button's content to default to the 0th Row and 0th Column on your ControlTemplate, which in combination with your margins and positions causes the Textblock on your Button Element to be cut off. I am guessing this might be your intent?
<ContentPresenter x:Name="ContentArea"
Grid.Column="0"
Grid.ColumnSpan="2"
Grid.Row="0"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Content="{Binding Path=Content,
RelativeSource={RelativeSourceTemplatedParent}}" />
Now the ContentPresenter will span both columns on the ControlTemplate's Grid, so your Textblock will have more room to display itself.
To answer your second question How do I put the Image and Textblock in the template and just bind to them?
One way to do it is to subclass the Button class, call it MyImageButton for example, and implement two new Dependency Properties called Image and Text in this new class. Then you can move your <Image> and <TextBlock> into your Control Template and bind them to your new Image and Text Properties. You can then instantiate MyImageButton and used the new Properties to set the button's image and text.

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