Inheritance of templates in WPF - 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?

Related

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:

Binding to nested control in WPF

I have used a custom data grid control that adds a TextBox to the column headers for filtering. Unfortunately, i have faced a problem when i tried to bind Visiblilty property of DataGridRow to Text property of TextBox (called filterTextBox); see the bellow code. The object received in the converter method "SearchColumnToVisibilityConverter" has the value "DependencyProperty.UnsetValue".
<ControlTemplate TargetType="{x:Type local:SimpuDataGrid}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<StackPanel Orientation="Vertical" DataContext="{TemplateBinding DataContext}">
<TextBox Width="200" Margin="2" HorizontalAlignment="Left" x:Name="txtFullTextSearch"
Visibility="{TemplateBinding EnableFullTextSearch,
Converter={StaticResource BooleanToVisibilityConverter}}" />
<DataGrid x:Name="simpuGrid"
ItemsSource="{TemplateBinding ItemsSource}" CanUserAddRows="{TemplateBinding CanUserAddRows}"
CanUserDeleteRows="{TemplateBinding CanUserDeleteRows}"
AutoGenerateColumns="{TemplateBinding AutoGenerateColumns}">
<DataGrid.Resources>
<!--Custom Column Header template to show extra elements in the header-->
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<!--Let's keep the top section grid to contain the DataGridHeaderBorder, and left+right thumbs.-->
<Grid x:Name="fullHeader" Background="{StaticResource normalBrushBack}">
<!--Here is the theme based DataGridHeaderBorder. I've used Aero here.-->
<aero:DataGridHeaderBorder x:Name='HeaderBorder' SortDirection="{TemplateBinding SortDirection}" IsHovered="{TemplateBinding IsMouseOver}" IsPressed="{TemplateBinding IsPressed}" IsClickable="{TemplateBinding CanUserSort}" BorderThickness="0,0,1,1" BorderBrush="{TemplateBinding Foreground}" Background="Transparent" SeparatorVisibility="{TemplateBinding SeparatorVisibility}" SeparatorBrush="#FFC9CACA">
<!--We will put 3 elements inside the border: Content of header, a drop down button, and a sort order indicator.-->
<Grid Margin="0,0,0,0">
<Grid.RowDefinitions>
<!--For ContentPresenter-->
<RowDefinition Height="*" />
<!--For drop down button-->
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<!--For ContentPresenter-->
<ColumnDefinition Width="*" />
<!--For sort order indicator-->
<ColumnDefinition Width="12" />
</Grid.ColumnDefinitions>
<!--Content of the header.-->
<ContentPresenter Grid.Row="0" Grid.Column="0" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Cursor="{TemplateBinding Cursor}" >
<ContentPresenter.Content>
<MultiBinding Converter="{StaticResource headerConverter}">
<MultiBinding.Bindings>
<Binding ElementName="filterTextBox" Path="Text" />
<Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Content" />
</MultiBinding.Bindings>
</MultiBinding>
</ContentPresenter.Content>
</ContentPresenter>
<!--A textbox filter-->
<TextBox x:Name="filterTextBox" Background="White" Grid.Row="1" Grid.ColumnSpan="2" />
<!--A sort order arrow icon.-->
<Path x:Name="SortArrow" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" Width="8" RenderTransformOrigin=".5,.5" Visibility="Visible" Fill="{TemplateBinding Foreground}" Stretch="Uniform" Data="F1 M -5.215,6.099L 5.215,6.099L 0,0L -5.215,6.099 Z" />
</Grid>
</aero:DataGridHeaderBorder>
<Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Style="{StaticResource ColumnHeaderGripperStyle}" />
<Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Style="{StaticResource ColumnHeaderGripperStyle}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="SortDirection" Value="Descending">
<Setter TargetName="SortArrow" Property="RenderTransform">
<Setter.Value>
<RotateTransform Angle="180" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property='IsMouseOver' SourceName="fullHeader" Value='True'>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.20000"
Storyboard.TargetName="HoverRectangle"
Storyboard.TargetProperty="(UIElement.Opacity)"
To='1.0' />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.20000"
Storyboard.TargetName="HoverRectangle"
Storyboard.TargetProperty="(UIElement.Opacity)"
To='0' />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--End of custom DataGridColumnHeader template-->
</DataGrid.Resources>
<DataGrid.ItemContainerStyle>
<Style TargetType="{x:Type DataGridRow}">
<Setter Property="Visibility">
<Setter.Value>
<MultiBinding Converter="{StaticResource SearchColumnToVisibilityConverter}">
<Binding ElementName="filterTextBox" Path="Text"/>
<Binding BindsDirectlyToSource="True"/>
</MultiBinding>
</Setter.Value>
</Setter>
</Style>
</DataGrid.ItemContainerStyle>
</DataGrid>
</StackPanel>
</Border>
</ControlTemplate>
I hope someone could help me!
Thanks

Movable WPF Borderless Window

I have a WPF Mdi Window with border-less design and I want it to be movable.
I tried everything I found on Google, But nothing goes right to my case. Is that possible in a WPF border-less window? Thanks =)
This is how I make my window border-less.
<pbwpf:Window x:Class="w_main" x:ClassModifier="internal" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:pbwpf="clr-namespace:Sybase.PowerBuilder.WPF.Controls;assembly=Sybase.PowerBuilder.WPF.Controls" Uid="30" WindowStyle="None" AllowsTransparency="True" Background="Transparent" MenuName="m_menu" WindowType="Mdi" xmlns:my="http://schemas.microsoft.com/winfx/2006/xaml/presentation/ribbon" VirtualizingStackPanel.VirtualizationMode="Recycling" xmlns:sys="clr-namespace:System;assembly=mscorlib" Center="True" ResizeMode="CanResize" Height="740" Width="1024" WindowState="Maximized" Resizable="True" ControlMenu="True">
<Grid SnapsToDevicePixels="True" Height="700" Width="1009">
<Grid.Effect>
<DropShadowEffect Color="Black" BlurRadius="15" Direction="721" ShadowDepth="1" RenderingBias="Quality" />
</Grid.Effect>
<Border Background="White" />
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="90" />
<ColumnDefinition Width="680" />
<ColumnDefinition Width="69" />
<ColumnDefinition Width="170" />
</Grid.ColumnDefinitions>
<Border Grid.Column="0" Grid.Row="0">
<Image Source="Images/sample_bms.png" VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
</Border>
<Border UseLayoutRounding="True" Grid.Row="0" Grid.Column="2" Background="#2cb6d9" BorderBrush="#25a6c7" BorderThickness="1,0,1,1">
<Grid>
<Button Name="button_lgout" IsCancel="True">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter TextElement.Foreground="{TemplateBinding Foreground}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="#2000" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
<StackPanel HorizontalAlignment="Center">
<Image Source="Images/logout.png" Height="21" HorizontalAlignment="Center" Margin="0,5,0,0" />
<Label Name="lbl_lgout" Content="LOGOUT" FontSize="12" Foreground="White" FontFamily="Calibri" HorizontalAlignment="Center" Height="27" />
</StackPanel>
</Button>
</Grid>
</Border>
<Border Grid.Row="0" Grid.Column="3" Background="#2cb6d9" BorderBrush="#25a6c7" BorderThickness="0,0,0,1">
<Grid VerticalAlignment="Center">
<Image Source="Images/user_male2-32.png" UseLayoutRounding="True" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,18,0" Height="25" />
<pbwpf:SingleLineEdit Name="txt_user" FontFamily="Calibri" FontSize="22" Foreground="White" Background="Transparent" BorderBrush="Transparent" BorderThickness="0" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,52,0" Width="98" Height="30" PBHeight="120" DisplayOnly="True" />
</Grid>
</Border>
<Border Grid.Row="0" Grid.Column="1" Background="#2cb6d9" BorderBrush="#25a6c7" BorderThickness="0,0,0,1" />
<Border Grid.Row="1" Grid.Column="0" Background="#dedede" BorderBrush="#d9dcdf" BorderThickness="0,0,1,0">
<StackPanel Orientation="Vertical" Height="750" Background="#111111">
<StackPanel.Resources>
<Style TargetType="my:RibbonButton">
<Style.Resources>
<sys:Double x:Key="buttonSize">60</sys:Double>
<CornerRadius x:Key="buttonRadius">30</CornerRadius>
<sys:Double x:Key="scaleOffset">30</sys:Double>
</Style.Resources>
<Setter Property="Margin" Value="0,10,0,0" />
<Setter Property="Foreground" Value="White" />
<Setter Property="FontSize" Value="20" />
<Setter Property="FontWeight" Value="SemiBold" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="my:RibbonButton">
<Border Background="Transparent" Width="{StaticResource buttonSize}" Height="{StaticResource buttonSize}" CornerRadius="{StaticResource buttonRadius}">
<Grid>
<Border Background="#22ffffff" CornerRadius="{StaticResource buttonRadius}" x:Name="content">
<Image Height="27" x:Name="image" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5" Source="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}"></Image>
</Border>
<Ellipse x:Name="ring" StrokeThickness="15" Opacity="0" IsHitTestVisible="False">
<Ellipse.Stroke>
<RadialGradientBrush>
<GradientStop Color="Transparent" Offset="0.83" />
<GradientStop Color="LightGray" Offset="0.84" />
<GradientStop Color="Transparent" Offset="0.85" />
<GradientStop Color="Transparent" Offset=".93" />
<GradientStop Color="#55ffffff" Offset=".97" />
<GradientStop Color="#55ffffff" Offset="1" />
</RadialGradientBrush>
</Ellipse.Stroke>
<Ellipse.RenderTransform>
<ScaleTransform CenterX="{StaticResource scaleOffset}" CenterY="{StaticResource scaleOffset}" x:Name="ringScale" />
</Ellipse.RenderTransform>
</Ellipse>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Opacity" Value="0.2" />
<Setter TargetName="content" Property="RenderTransform">
<Setter.Value>
<ScaleTransform CenterX="{StaticResource scaleOffset}" CenterY="{StaticResource scaleOffset}" ScaleX=".9" ScaleY=".9" />
</Setter.Value>
</Setter>
<Setter Property="Opacity" Value="1" />
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard Duration="0:0:2">
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ring" To="1" Duration="0:0:0" />
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ring" From="1" To="0" />
<DoubleAnimation Storyboard.TargetProperty="ScaleX" Storyboard.TargetName="ringScale" From="1" To="1.5" />
<DoubleAnimation Storyboard.TargetProperty="ScaleY" Storyboard.TargetName="ringScale" From="1" To="1.5" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</StackPanel.Resources>
<my:RibbonButton Name="rb_new" Margin="0,50,0,0" Content="Images/new_light.png" KeyTip="N" />
<pbwpf:StaticText Name="st_new" Text="_New" Foreground="#eeeeee" Margin="33,-20,0,0" FontFamily="Calibri" />
<my:RibbonButton Name="rb_edit" Margin="0,10,0,0" Content="Images/edit_light.png" KeyTip="E" />
<pbwpf:StaticText Name="st_edit" Text="_Edit" Foreground="#eeeeee" Margin="33,-20,0,0" FontFamily="Calibri" PBWidth="402" Width="88" PBHeight="84" Height="21" />
<my:RibbonButton Name="rb_save" Margin="0,10,0,0" Content="Images/save_light.png" KeyTip="S" />
<pbwpf:StaticText Name="st_save" Text="_Save" Foreground="#eeeeee" Margin="33,-20,0,0" FontFamily="Calibri" PBWidth="402" Width="88" PBHeight="84" Height="21" />
<my:RibbonButton Name="rb_abort" Margin="0,10,0,0" Content="Images/cancel_light.png" KeyTip="A" />
<pbwpf:StaticText Name="st_abort" Text="_Abort" Foreground="#eeeeee" Margin="33,-21,0,0" FontFamily="Calibri" PBWidth="402" Width="88" PBHeight="84" Height="21" />
<my:RibbonButton Name="rb_trash" Margin="0,10,0,0" Content="Images/delete_light.png" KeyTip="D" />
<pbwpf:StaticText Name="st_trash" Text="_Trash" Foreground="#eeeeee" Margin="33,-21,0,0" FontFamily="Calibri" PBHeight="84" PBWidth="402" Width="88" />
<my:RibbonButton Name="rb_print" Margin="0,10,0,0" Content="Images/print_light.png" KeyTip="P" />
<pbwpf:StaticText Name="st_print" Text="_Print" Foreground="#eeeeee" Margin="33,-21,0,0" FontFamily="Calibri" PBHeight="84" PBWidth="0" Width="Auto" />
<my:RibbonButton Name="rb_search" Margin="0,10,0,0" Content="Images/search_light.png" Visibility="Hidden" />
</StackPanel>
</Border>
<Border Grid.Row="1" Grid.Column="1">
<pbwpf:MDIClient Visibility="Visible" Name="mdi_1" Margin="0" Background="#ffffff" Width="920" />
</Border>
</Grid>
</Grid>
</pbwpf:Window>
This is how I have done it.
Jim
In the XAML
WindowStyle="None" AllowsTransparency="False" MouseDown="Window_MouseDown" ResizeMode="NoResize"
The the code behind
private void Window_MouseDown(object sender, MouseButtonEventArgs e)
{
if (e.LeftButton == MouseButtonState.Pressed)
{
DragMove();
}
}
I have full source code to a working WPF Borderless window that I wrote just recently on another article. Please check out my answer on this thread.
WPF Borderless Window issues: Aero Snap & Maximizing
As my case I'm using a PowerBuilder 12.5 . So here's a quick tip if you want to make your WPF Borderless window be movable.
Just put this code in the Mousedown Event :
Send(handle(this), 274, 61458, 0)
If the control doesn't have a mousedown event then define the event as:
ue_mousedown pbm_lbuttondown
This answer is token from http://eric.aling.tripod.com/PB/pbfaq.htm .
Happy Coding =)))

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

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>

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