Custom WPF-WindowStyle: How to recognize click on custom help button? - wpf

I've got a custom Style for my WPF Windows. One part of it is an additional HelpButton next to the regular minimize, maximize and Close button. Assigning this style to my Windows works as expected, but how does my window notice that this button was clicked? The button is defined in the style so my window does not really know about it. Here's the code for the style:
<ResourceDictionary x:Class="Company.Common.Themes.CompanyWindowStyle"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/Company.Common.Themes;component/CompanyWindowBaseStyle.xaml" />
</ResourceDictionary.MergedDictionaries>
<Style x:Key="CompanyWindowStyle"
BasedOn="{StaticResource CompanyWindowBaseStyle}"
TargetType="{x:Type Window}">
<Setter Property="ResizeMode"
Value="CanResize" />
<EventSetter Event="Loaded"
Handler="WindowLoaded" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<Border x:Name="PART_Container"
Padding="7,7,7,5">
<Grid TextOptions.TextFormattingMode="Display"
TextOptions.TextRenderingMode="ClearType">
<Border x:Name="PART_Border"
Width="Auto"
Height="Auto"
Background="{StaticResource BackgroundBrush}"
BorderBrush="{StaticResource BorderBrush}"
BorderThickness="1">
<DockPanel HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="Transparent">
<Border x:Name="TitleBar"
Background="{StaticResource BackgroundBrush}"
BorderThickness="0"
DockPanel.Dock="Top"
MouseDown="TitleBarMouseDown">
<Grid Height="32"
Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="36" />
<ColumnDefinition />
<ColumnDefinition Width="34" />
<ColumnDefinition Width="34" />
<ColumnDefinition Width="34" />
<ColumnDefinition Width="34" />
</Grid.ColumnDefinitions>
<ContentControl Grid.Column="0"
MouseDoubleClick="IconMouseDoubleClicked">
<Image x:Name="Icon"
Width="32"
Height="32"
Margin="4,-7,0,7"
HorizontalAlignment="Right"
WindowChrome.IsHitTestVisibleInChrome="True"
Source="{Binding Path=Icon,
Mode=OneWay,
RelativeSource={RelativeSource TemplatedParent}}" />
</ContentControl>
<TextBlock x:Name="Caption"
Grid.Column="1"
Margin="4,0,0,0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontFamily="Segoe UI"
FontSize="12"
Opacity="0.66"
Text="{Binding Path=Title,
Mode=OneWay,
RelativeSource={RelativeSource TemplatedParent}}" />
<Button x:Name="HelpButton"
Grid.Column="2"
Width="34"
Height="26"
VerticalAlignment="Top"
Click="HelpButtonClick"
Style="{StaticResource TitleBarButtonStyle}"
WindowChrome.IsHitTestVisibleInChrome="True">
<Grid MaxWidth="9"
MaxHeight="9">
<TextBlock Text="?" FontSize="14"
Foreground="{Binding RelativeSource={RelativeSource AncestorType=Button},
Path=Foreground}" />
</Grid>
</Button>
<Button x:Name="MinButton"
Grid.Column="3"
Width="34"
Height="26"
VerticalAlignment="Top"
Click="MinButtonClick"
Style="{StaticResource TitleBarButtonStyle}"
WindowChrome.IsHitTestVisibleInChrome="True">
<Grid MaxWidth="9"
MaxHeight="9">
<Path Data="M0,8 H8 M0,7 H8 M0,6 H8"
RenderOptions.EdgeMode="Aliased"
Stretch="None"
Stroke="{Binding RelativeSource={RelativeSource AncestorType=Button},
Path=Foreground}"
StrokeThickness="1" />
</Grid>
</Button>
<Button x:Name="MaxButton"
Grid.Column="4"
Width="34"
Height="26"
VerticalAlignment="Top"
Click="MaxButtonClick"
Style="{StaticResource TitleBarButtonStyle}"
WindowChrome.IsHitTestVisibleInChrome="True">
<Grid MaxWidth="9"
MaxHeight="9">
<Path x:Name="PART_MaxButton_Path"
Data="M0,0 H8 V8 H0 V0 M0,1 H8 M0,2 H8"
RenderOptions.EdgeMode="Aliased"
Stretch="None"
Stroke="{Binding RelativeSource={RelativeSource AncestorType=Button},
Path=Foreground}"
StrokeThickness="1" />
</Grid>
</Button>
<Button x:Name="CloseButton"
Grid.Column="5"
Width="34"
Height="26"
VerticalAlignment="Top"
Click="CloseButtonClick"
Style="{StaticResource TitleBarButtonStyle}"
WindowChrome.IsHitTestVisibleInChrome="True">
<Grid MaxWidth="9"
MaxHeight="9">
<Path Data="M0,0 L8,8 M0,8 L8,0"
Stretch="None"
Stroke="{Binding RelativeSource={RelativeSource AncestorType=Button},
Path=Foreground}"
StrokeThickness="1.5" />
</Grid>
</Button>
</Grid>
</Border>
<ContentPresenter />
</DockPanel>
</Border>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="WindowState"
Value="Maximized">
<Setter TargetName="PART_MaxButton_Path"
Property="Data"
Value="M0,3 H5 V8 H0 V3 M0,4 H5 M3,0 H8 V5 H7 M3,1 H8" />
</Trigger>
<Trigger Property="WindowState"
Value="Normal">
<Setter TargetName="PART_Border"
Property="Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="7"
Direction="315"
Opacity="0.5"
ShadowDepth="2"
Color="black" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsActive"
Value="False">
<Setter TargetName="PART_Border"
Property="BorderBrush"
Value="{StaticResource BorderBrushInactive}" />
</Trigger>
<Trigger Property="IsActive"
Value="True">
<Setter TargetName="PART_Border"
Property="BorderBrush"
Value="{StaticResource BorderBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
I have somehow no idea how it is done. Can someone please point me in the right direction?
UPDATE:
This is the header of my MainWindow's XAML where I use the Style:
<Window x:Class="Company.MainGUI.GUI.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:common="clr-namespace:Company.Common;assembly=Company.Common"
xmlns:controls="clr-namespace:Company.Common.Controls;assembly=Company.Common.Controls"
xmlns:l="clr-namespace:Company.Common.Languages;assembly=Company.Common.Languages"
xmlns:local="clr-namespace:Company.MainGUI.GUI"
Title="{x:Static l:Common_Text.Application_Name}"
UseLayoutRounding="True"
MinWidth="900"
MinHeight="600"
Icon="pack://application:,,,/Company.Common.Images;component/Resources/ApplicationLogo_MainGUI.ico"
WindowStartupLocation="CenterScreen">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/Company.Common.Themes;component/CompanyWindowStyle.xaml" />
<ResourceDictionary Source="pack://application:,,,/Company.Common.Themes;component/MainGUISkin.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Window.Style>
<Style TargetType="{x:Type local:MainWindow}"
BasedOn="{StaticResource CompanyWindowStyle}" />
</Window.Style>

Related

How to give a custom shape to a Tab Control in WPF?

I make an application in WPF where I need to use the TabControl to switching between Contents. But due to design purpose my content of the Tab items are in same horizontal line followed by the Tab item header.
Here is the code of my Mainwindow.xaml
<Grid Width="635" HorizontalAlignment="Left" Height="458" VerticalAlignment="Top" Margin="0,61,0,0" >
<TabControl Margin="-1" BorderThickness="0" Background="#222222" >
<TabItem Style="{StaticResource TabItemDefaults}" Header="File manager" FontSize="10" Foreground="#efefef" Margin="5,0,0,0" Width="97" Height="20" FontFamily="Segoe UI" UseLayoutRounding="True" TextOptions.TextFormattingMode="Display" >
<Grid>
<Label Name="Folder" Content="Folder:" FontSize="10" Foreground="#efefef" Height="20" Width="40" Margin="-571,-367,0,0" FontFamily="Segoe UI" UseLayoutRounding="True" TextOptions.TextFormattingMode="Display" />
<Button Name ="FolderSelect" Width="532" HorizontalAlignment="Left" VerticalAlignment="Top" Height="33" Margin="85,17,0,0" Background="#1a1a1a"
materialDesign:ShadowAssist.ShadowDepth="Depth0" materialDesign:RippleAssist.Feedback="Transparent" BorderThickness="0" UseLayoutRounding="True"
></Button>
<Label Name="ShowFolders" Content=".." Margin="-479,59,0,0" Background="#1a1a1a" Width="168" Height="373" Foreground="#efefef" ></Label>
<Button
Style="{StaticResource MaterialDesignRaisedButton}"
Width="65" HorizontalAlignment="Left" Height="25" Background="#FF403D3D" Margin="16,292,0,0"
ToolTip="Resource name: MaterialDesignRaisedButton">
<materialDesign:PackIcon Kind="PlusThick" />
</Button>
<Button
Style="{StaticResource MaterialDesignRaisedButton}"
Width="65" HorizontalAlignment="Left" Height="25" Background="#FF403D3D" Margin="82,292,0,0"
ToolTip="Open output folder">
<materialDesign:PackIcon Kind="FolderUpload" />
</Button>
<Label Content="Video recordings:" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="269.2,-22,0,0" Foreground="#efefef" FontSize="10" FontFamily="Segoe UI" UseLayoutRounding="True" TextOptions.TextFormattingMode="Display" />
</Grid>
</TabItem>
<TabItem Style="{StaticResource TabItemDefaults}" Header ="Preview" FontSize="10" Foreground="#efefef" Width="67" Height="20" Margin="-8,0,0,0" FontFamily="Segoe UI" UseLayoutRounding="True" TextOptions.TextFormattingMode="Display" >
<Grid>
<CheckBox Content="Draggable mode" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="520,-22,0,0" Width="110" />
</Grid>
</TabItem>
</TabControl>
</Grid>
Both Tab Control and Tab items are made by control template which I declare in App.xaml.
And here is the code of Tab Control which I separately declare in App.xaml -
<Style TargetType="{x:Type TabControl}" x:Key="TabControlDefaults" x:Name="NewTabcontrol" >
<Setter Property="OverridesDefaultStyle"
Value="True" />
<Setter Property="SnapsToDevicePixels"
Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid KeyboardNavigation.TabNavigation="Local">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Border.BorderBrush).
(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0"
Value="#FFAAAAAA" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<TabPanel x:Name="HeaderPanel"
Grid.Row="0"
Panel.ZIndex="1"
Margin="0,0,4,-1"
IsItemsHost="True"
KeyboardNavigation.TabIndex="1"
Background="Transparent" />
<Border x:Name="Border"
Grid.Row="1"
BorderThickness="1"
CornerRadius="2"
KeyboardNavigation.TabNavigation="Local"
KeyboardNavigation.DirectionalNavigation="Contained"
KeyboardNavigation.TabIndex="2">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="{DynamicResource ContentAreaColorLight}"
Offset="0" />
<GradientStop Color="{DynamicResource ContentAreaColorDark}"
Offset="1" />
</LinearGradientBrush>
</Border.Background>
<Border.BorderBrush>
<SolidColorBrush Color="{DynamicResource BorderMediumColor}"/>
</Border.BorderBrush>
<ContentPresenter x:Name="PART_SelectedContentHost"
Margin="4"
ContentSource="SelectedContent" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And here is the code of Tab Items which I separately declare in App.xaml -
<Style TargetType="{x:Type TabItem}" x:Key="TabItemDefaults" x:Name="NewTabitem" >
<Setter Property="Foreground" Value="#bababa" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid x:Name="Panel" ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local" >
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="10,2"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Black"/>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<!-- <Setter TargetName="Panel" Property="Background" Value="LightSkyBlue" /> -->
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{TemplateBinding Content}">
<TextBlock.TextDecorations>
<TextDecoration PenOffset="4" PenOffsetUnit="Pixel" >
<TextDecoration.Pen>
<Pen Brush="#673ab7" Thickness="4" />
</TextDecoration.Pen>
</TextDecoration>
</TextBlock.TextDecorations>
</TextBlock>
</DataTemplate>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Panel" Property="Background" Value="#212121" />
<Setter Property="Foreground" Value="WhiteSmoke"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And my question is the checkbox (I give a red circle) are not functioning properly. I know the main cause is the check box is outside of the tab panel of the Tab Control. But I have to place it there for the design purpose of my Application.
So, how I give a custom shape to the tab panel of the Tab control so that I perfectly dock my content elements where I want.
Your CheckBox can't be selected , you can use DataTrigger to make the chexkbox Visible or Hidden depending on the Preview TabItem selected or not.
I do some update for your MainWindow.xaml to make the checkbox can be selected.
<StackPanel Width="635" HorizontalAlignment="Left" Height="458" VerticalAlignment="Top" Margin="0,61,0,0" >
<CheckBox Content="Draggable mode" HorizontalAlignment="Right" VerticalAlignment="Top" Width="110" >
<CheckBox.Style>
<Style TargetType="CheckBox">
<Setter Property="Visibility" Value="Hidden"></Setter>
<Setter Property="IsEnabled" Value="False"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=myTabControl,Path=SelectedItem.Header}" Value="Preview" >
<Setter Property="Visibility" Value="Visible"></Setter>
<Setter Property="IsEnabled" Value="True"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</CheckBox.Style>
</CheckBox>
<TabControl BorderThickness="0" Background="#222222" Name="myTabControl" SelectionChanged="myTabControl_SelectionChanged">
<TabItem Style="{StaticResource TabItemDefaults}" Header="File manager" FontSize="10" Foreground="#efefef" Margin="5,0,0,0" Width="97" Height="20" FontFamily="Segoe UI" UseLayoutRounding="True" TextOptions.TextFormattingMode="Display" >
<Grid Height="300">
</Grid>
</TabItem>
<TabItem Style="{StaticResource TabItemDefaults}" Header ="Preview" FontSize="10" Foreground="#efefef" Width="67" Height="20" FontFamily="Segoe UI" UseLayoutRounding="True" TextOptions.TextFormattingMode="Display" >
<Grid Height="300">
</Grid>
</TabItem>
</TabControl>
</StackPanel>

How I get this kind of drop shadow Direction, Shadow depth, Color shown in the Tooltip (Click me) in this image in WPF?

I just want to know the Drop Shadow shadow depth, Direction, Blur radius, opacity of the tooltip? And what is the Hex Color code of a windows 10 Tooltip
You can get/set the values in the Tooltip's ControlTemplate.In my code, I set the name for the DropShadowEffect and get the value by using ElementName, then show the values in a Grid which included in parent grid.
<Window.Resources>
<Style x:Key="{x:Type ToolTip}" TargetType="ToolTip">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="HasDropShadow" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToolTip}">
<Grid x:Name="grid" Background="White" >
<Border x:Name="Border" Margin="0,0,0,0" BorderThickness="0.5" Width="{TemplateBinding Width}" Height="150">
<Border.BorderBrush>
<SolidColorBrush Color="Gray" />
</Border.BorderBrush>
<Border.Effect>
<DropShadowEffect x:Name="Myeffect" ShadowDepth="6" Direction="135" Color="Maroon" Opacity="0.35" BlurRadius="0.0"/>
</Border.Effect>
<ContentPresenter Margin="4,0" HorizontalAlignment="Left" VerticalAlignment="Top" />
</Border>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="60"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0">ShadowDepth:</TextBlock>
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding ElementName=Myeffect,Path=ShadowDepth}"><!--Useful information goes here.--></TextBlock>
<TextBlock Grid.Row="1" Grid.Column="0">Direction:</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding ElementName=Myeffect,Path=Direction}"><!--Useful information goes here.--></TextBlock>
<TextBlock Grid.Row="2" Grid.Column="0">Color:</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding ElementName=Myeffect,Path=Color}"><!--Useful information goes here.--></TextBlock>
<TextBlock Grid.Row="3" Grid.Column="0">Opacity:</TextBlock>
<TextBlock Grid.Row="3" Grid.Column="1" Text="{Binding ElementName=Myeffect,Path=Opacity}"><!--Useful information goes here.--></TextBlock>
<TextBlock Grid.Row="4" Grid.Column="0">BlurRadius:</TextBlock>
<TextBlock Grid.Row="4" Grid.Column="1" Text="{Binding ElementName=Myeffect,Path=BlurRadius}"><!--Useful information goes here.--></TextBlock>
</Grid>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasDropShadow" Value="True" >
<Setter TargetName="Border" Property="CornerRadius" Value="0" />
<Setter TargetName="Border" Property="SnapsToDevicePixels" Value="true" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Button Width="200" Height="50" HorizontalAlignment="Center" Content="Click Here">
<Button.Template >
<ControlTemplate TargetType="{x:Type Button}" >
<Border BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="1" CornerRadius="7,7,7,7">
<Border.Background>#FFDDDDDD</Border.Background>
<ContentPresenter Content="{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center" VerticalAlignment="Center" ></ContentPresenter>
</Border>
</ControlTemplate>
</Button.Template>
<Button.ToolTip>
<ToolTip>
</ToolTip>
</Button.ToolTip>
</Button>
</Grid>
The result is as below picture shown:

How to remove border from menuitem?

I have created code using mutil menuitem, but I can not remove the border.
.
How can I remove the menuitem border WPF?
Code MainWindow.xaml below
<Window x:Class="TestMutilColumnMenu.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:TestMutilColumnMenu"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style x:Key="MenuItem1" TargetType="{x:Type MenuItem}">
<Setter Property="BorderBrush" Value="DarkGray"/>
<Setter Property="Margin" Value="1,1,1,1"/>
</Style>
</Window.Resources>
<Menu>
<MenuItem x:Name="tesst" Header="nane" >
<MenuItem.ItemsPanel>
<ItemsPanelTemplate>
<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
</Grid>
</ItemsPanelTemplate>
</MenuItem.ItemsPanel>
<MenuItem Grid.Row="0" Grid.Column="0" Header="Item 1" Style="{StaticResource MenuItem1}">
<MenuItem.Icon>
<Image Source="/res/Image.png"/>
</MenuItem.Icon>
</MenuItem>
<MenuItem Grid.Row="1" Grid.Column="0" Header="Item 2" Style="{StaticResource MenuItem1}">
<MenuItem.Icon>
<Image Source="/res/Image.png"/>
</MenuItem.Icon>
</MenuItem>
<MenuItem Grid.Row="2" Grid.Column="0" Header="Item 3" Style="{StaticResource MenuItem1}"></MenuItem>
<MenuItem Grid.Row="3" Grid.Column="0" Header="Item 4" Style="{StaticResource MenuItem1}"></MenuItem>
<MenuItem Grid.Row="0" Grid.Column="1" Header="Item 5" Style="{StaticResource MenuItem1}">
<MenuItem.Icon>
<Image Source="/res/Image.png"/>
</MenuItem.Icon>
</MenuItem>
<MenuItem Grid.Row="1" Grid.Column="1" Header="Item 6" Style="{StaticResource MenuItem1}">
<MenuItem.Icon>
<Image Source="/res/Image.png"/>
</MenuItem.Icon>
</MenuItem>
<MenuItem Grid.Row="2" Grid.Column="1" Header="Item 7" Style="{StaticResource MenuItem1}">
<MenuItem.Icon>
<Image Source="/res/Image.png"/>
</MenuItem.Icon>
</MenuItem>
<MenuItem Grid.Row="3" Grid.Column="1" Header="Item 8" Style="{StaticResource MenuItem1}"></MenuItem>
<MenuItem Grid.Row="0" Grid.Column="2" Header="Item 9" Style="{StaticResource MenuItem1}"></MenuItem>
<MenuItem Grid.Row="1" Grid.Column="2" Header="Item 10" Style="{StaticResource MenuItem1}"></MenuItem>
</MenuItem>
</Menu>
</Window>
Define a custom ControlTemplate for the root MenuItem. This is the default one except for the Width of the Rectange which I have changed from 1 to 0:
<MenuItem x:Name="tesst" Header="nane" >
<MenuItem.Template>
<ControlTemplate TargetType="{x:Type MenuItem}">
<Border x:Name="templateRoot" SnapsToDevicePixels="true"
BorderThickness="{TemplateBinding Control.BorderThickness}"
Background="{TemplateBinding Control.Background}"
BorderBrush="{TemplateBinding Control.BorderBrush}">
<Grid VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ContentPresenter x:Name="Icon" ContentSource="Icon"
SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" VerticalAlignment="Center"
HorizontalAlignment="Center" Width="16" Height="16" Margin="3"/>
<Path x:Name="GlyphPanel" Data="M 0,0 L 4,3.5 L 0,7 Z" FlowDirection="LeftToRight" Margin="3"
Visibility="Collapsed" VerticalAlignment="Center" Fill="{TemplateBinding Control.Foreground}"/>
<ContentPresenter Grid.Column="1" ContentSource="Header" RecognizesAccessKey="true"
Margin="{TemplateBinding Control.Padding}"
SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"/>
<Popup x:Name="PART_Popup" AllowsTransparency="true" Focusable="false"
PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}"
Placement="Bottom"
IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}"
PlacementTarget="{Binding ElementName=templateRoot}">
<Border x:Name="SubMenuBorder" Background="#FFF0F0F0" BorderBrush="#FF999999" BorderThickness="1" Padding="2">
<ScrollViewer x:Name="SubMenuScrollViewer" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}">
<Grid RenderOptions.ClearTypeHint="Enabled">
<Canvas Height="0" Width="0" HorizontalAlignment="Left" VerticalAlignment="Top">
<Rectangle Name="OpaqueRect" Height="{Binding ElementName=SubMenuBorder, Path=ActualHeight}"
Width="{Binding ElementName=SubMenuBorder, Path=ActualWidth}"
Fill="{Binding ElementName=SubMenuBorder, Path=Background}"/>
</Canvas>
<Rectangle HorizontalAlignment="Left" Width="0" Margin="29,2,0,2" Fill="#FFD7D7D7"/>
<ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle"
KeyboardNavigation.TabNavigation="Cycle" Grid.IsSharedSizeScope="true"
SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"/>
</Grid>
</ScrollViewer>
</Border>
</Popup>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="MenuItem.IsSuspendingPopupAnimation" Value="true">
<Setter TargetName="PART_Popup" Property="Popup.PopupAnimation" Value="None"/>
</Trigger>
<Trigger Value="{x:Null}" Property="MenuItem.Icon">
<Setter TargetName="Icon" Property="UIElement.Visibility" Value="Collapsed"/>
</Trigger>
<Trigger Property="MenuItem.IsChecked" Value="true">
<Setter TargetName="GlyphPanel" Property="UIElement.Visibility" Value="Visible"/>
<Setter TargetName="Icon" Property="UIElement.Visibility" Value="Collapsed"/>
</Trigger>
<Trigger Property="MenuItem.IsHighlighted" Value="true">
<Setter TargetName="templateRoot" Value="#3D26A0DA" Property="Border.Background"/>
<Setter TargetName="templateRoot" Value="#FF26A0DA" Property="Border.BorderBrush"/>
</Trigger>
<Trigger Property="UIElement.IsEnabled" Value="false">
<Setter TargetName="templateRoot" Value="#FF707070" Property="TextElement.Foreground"/>
<Setter TargetName="GlyphPanel" Value="#FF707070" Property="Shape.Fill"/>
</Trigger>
<Trigger SourceName="SubMenuScrollViewer" Property="ScrollViewer.CanContentScroll" Value="false">
<Setter TargetName="OpaqueRect" Value="{Binding ElementName=SubMenuScrollViewer, Path=VerticalOffset}" Property="Canvas.Top"/>
<Setter TargetName="OpaqueRect" Value="{Binding ElementName=SubMenuScrollViewer, Path=HorizontalOffset}" Property="Canvas.Left"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</MenuItem.Template>
<MenuItem.ItemsPanel>
...

How to change a resource templates' child value in XAML?

I have a custom button Style written in XAML. It is a button with image and text.
But the Image should be customizable. I need to change the Source property in designer.
My code:
<Window.Resources>
<ResourceDictionary>
<Style x:Key="SSbutton" TargetType="{x:Type Button}">
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Background" Value="Green"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Viewbox Stretch="Uniform">
<Border Background="{TemplateBinding Background}" Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center">
<!--I want to change this Source property-->
<Image Source="img/desktop.png" Width="30" HorizontalAlignment="Left" />
<TextBlock Margin="3,0,0,0" HorizontalAlignment="Right" VerticalAlignment="Center"
Text="{TemplateBinding Content}" FontSize="{TemplateBinding FontSize}"/>
</StackPanel>
</Border>
</Viewbox>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="90" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border Grid.Column="0" Grid.Row="1" Background="LightGreen">
<StackPanel >
<Button Style="{StaticResource SSbutton}" Width="90" Height="30" Content="Desktop" FontSize="13"
Foreground="White"/>
</StackPanel>
</Border>
</Grid>
How can I do that?
Piggy back in to the property using an arbitrary template binding with the handy dandy Tag property;
<Style x:Key="SSbutton" TargetType="{x:Type Button}">
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Background" Value="Green"/>
<!-- Set a default -->
<Setter Property="Tag" Value="img/desktop.png"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Viewbox Stretch="Uniform">
<Border Background="{TemplateBinding Background}" Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center">
<!--I want to change this Source property-->
<Image Source="{Binding Path=Tag, RelativeSource={RelativeSource TemplatedParent}}" Width="30" HorizontalAlignment="Left" />
<TextBlock Margin="3,0,0,0" HorizontalAlignment="Right" VerticalAlignment="Center"
Text="{TemplateBinding Content}" FontSize="{TemplateBinding FontSize}"/>
</StackPanel>
</Border>
</Viewbox>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then at the instance;
<Button Style="{StaticResource SSbutton}"
Tag="Some/Other/Image.png"
Width="90" Height="30"
Content="Desktop"
FontSize="13" Foreground="White"/>
Hope this helps, cheers.
Edit: Updated to reflect path considerations for templatebinding in wpf as per OP's comments.

Inheritance of templates in WPF

I'm trying to make sure that every child of a given element (MPF.MWindow) gets custom templates. For instance, the button should get the template defined in resMButton.xaml. As of now I'm using the following code on: (resMWindow.xaml)
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:MPF">
<Style x:Key="SystemKeyAnimations" TargetType="{x:Type Button}">
<Setter Property="Opacity" Value="0.5" />
<Setter Property="Background" Value="Transparent" />
<Style.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1.0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="0.5" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
<Style TargetType="{x:Type local:MWindow}">
<!-- Remove default frame appearance -->
<Setter Property="WindowStyle" Value="None" />
<Setter Property="AllowsTransparency" Value="True" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:MWindow}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" x:Name="ChromeBorder">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4" />
<ColumnDefinition />
<ColumnDefinition Width="4" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="4" />
<RowDefinition />
<RowDefinition Height="4" />
</Grid.RowDefinitions>
<Thumb Grid.Row="0" Grid.Column="1" x:Name="TopThumb" Cursor="SizeNS" BorderThickness="4" BorderBrush="Transparent" />
<Thumb Grid.Row="2" Grid.Column="1" x:Name="BottomThumb" Cursor="SizeNS" BorderThickness="4" BorderBrush="Transparent" />
<Thumb Grid.Row="1" Grid.Column="0" x:Name="LeftThumb" Cursor="SizeWE" BorderThickness="4" BorderBrush="Transparent" />
<Thumb Grid.Row="1" Grid.Column="2" x:Name="RightThumb" Cursor="SizeWE" BorderThickness="4" BorderBrush="Transparent" />
<Thumb Grid.Row="0" Grid.Column="0" x:Name="TopLeftThumb" Cursor="SizeNWSE" BorderThickness="5" BorderBrush="Transparent" />
<Thumb Grid.Row="0" Grid.Column="2" x:Name="TopRightThumb" Cursor="SizeNESW" BorderThickness="5" BorderBrush="Transparent" />
<Thumb Grid.Row="2" Grid.Column="0" x:Name="BottomLeftThumb" Cursor="SizeNESW" BorderThickness="5" BorderBrush="Transparent" />
<Thumb Grid.Row="2" Grid.Column="2" x:Name="BottomRightThumb" Cursor="SizeNWSE" BorderThickness="5" BorderBrush="Transparent" />
<Grid Grid.Row="1" Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" Grid.Column="1">
<Button Command="local:WindowCommands.Minimize" Style="{StaticResource ResourceKey=SystemKeyAnimations}">
<Button.Template>
<ControlTemplate>
<Canvas Width="10" Height="10" Margin="5" Background="Transparent">
<Line X1="0" X2="10" Y1="5" Y2="5" Stroke="White" StrokeThickness="2" />
</Canvas>
</ControlTemplate>
</Button.Template>
</Button>
<Button Command="local:WindowCommands.Maximize" x:Name="MaximizeButton" Style="{StaticResource ResourceKey=SystemKeyAnimations}">
<Button.Template>
<ControlTemplate>
<Canvas Width="10" Height="10" Margin="5" Background="Transparent">
<Rectangle Width="10" Height="10" Stroke="White" StrokeThickness="2" />
</Canvas>
</ControlTemplate>
</Button.Template>
</Button>
<Button Command="ApplicationCommands.Close" Style="{StaticResource ResourceKey=SystemKeyAnimations}">
<Button.Template>
<ControlTemplate>
<Canvas Width="10" Height="10" Margin="5" Background="Transparent">
<Line X1="0" X2="10" Y1="0" Y2="10" Stroke="White" StrokeThickness="2" />
<Line X1="10" X2="0" Y1="0" Y2="10" Stroke="White" StrokeThickness="2" />
</Canvas>
</ControlTemplate>
</Button.Template>
</Button>
</StackPanel>
<ContentControl x:Name="TitleContentControl">
<TextBlock Text="{TemplateBinding Title}" Foreground="DarkGray" Margin="5,0" />
</ContentControl>
</Grid>
<ContentPresenter Content="{TemplateBinding Content}" Grid.Row="1">
<ContentPresenter.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/MPF;component/Themes/resMWindowContent.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</ContentPresenter.Resources>
</ContentPresenter>
</Grid>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
As you can see during the ContentPresenter which gets the content of the window I merge in a dicrionary called resMWindowContent.xaml. The resMWindowContent.xaml looks as following:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:MPF">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/MPF;component/Themes/resMButton.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
It simply merges in the resMButton.xaml dictionary (this is done because in the feature I will have MTextBox, mList... and I want to separate them).
The resMButton.xaml looks as following:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:MPF">
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Background="Transparent">
<Rectangle Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}"
Fill="{TemplateBinding Background}" />
<ContentPresenter Content="{TemplateBinding Content}" Margin="3" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
A simple template drawing a square button. However, it isn't applied at all. My buttons remain normal, and I don't understand what I'm doing wrong. I just want every button inside the MWindow to get a special style (and in time every textbox and so forth). How do I achieve this?
One note though: It's important that the styles doesn't apply to elements outside an MWindow.
Remove the x:Key = "SystemKeyAnimations" from the Style Element.
Are you sure what resMButton.xaml is loaded?

Resources