Develop Reference

wpf controltemplate is applied to window,and how to add controls

i have defined a controltemplate that is used to windows ,then windows have the same view as basically.
after that ,i should add different controls in different windows. and i have no idea how to add the elements' host in controltemplate to hold different parts of controls which likes the picture bellow.
and one more thing, how to access the controls and how to set the buttons' actions in controltemplate of different window? it should be use a windowBase class to do that ?
first .the screen picture
and the control template file
<ImageSource x:Key="BtnCloseNormal">../images/others/popup_btn_reduction_normal.png</ImageSource>
<ImageSource x:Key="BtnCloseMouseOver">../images/others/popup_btn_reduction_mouseover.png</ImageSource>
<ImageSource x:Key="BtnClosePressed">../images/others/popup_btn_reduction_selected.png</ImageSource>
<Style x:Key="StatedButtonStyle" TargetType="{x:Type c:StatedButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type c:StatedButton}" >
<Grid>
<Border>
<Image x:Name ="btnImg" Source="{Binding NormalBackground ,RelativeSource={RelativeSource TemplatedParent}}" Stretch="Fill"/>
</Border>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"></ContentPresenter>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="btnImg" Property="Source" Value="{Binding MouseOverBackground ,RelativeSource={RelativeSource TemplatedParent}}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="btnImg" Property="Source" Value="{Binding PressedBackground ,RelativeSource={RelativeSource TemplatedParent}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="WindowBaseStyle" TargetType="{x:Type Window}">
<Setter Property="Background" Value="{x:Null}"></Setter>
<Setter Property="AllowsTransparency" Value="True"></Setter>
<Setter Property="WindowStyle" Value="None"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<Grid Background="{x:Null}">
<Border CornerRadius="10" Background="White" Margin="20">
<Border.Effect>
<DropShadowEffect BlurRadius="10" Color="Black" Direction="270" ShadowDepth="5" RenderingBias="Quality" Opacity="0.6"></DropShadowEffect>
</Border.Effect>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="10"/>
<RowDefinition/>
<RowDefinition Height="40"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="60"/>
</Grid.ColumnDefinitions>
<Label x:Name="lblTitle" Grid.Column="0" Margin="20,6,0,0" FontSize="18" FontWeight="Bold"
Content="{TemplateBinding Title}">
</Label>
<c:StatedButton Grid.Column="2" Width="30" Height="30" Style="{StaticResource StatedButtonStyle}"
NormalBackground="{StaticResource BtnCloseNormal}"
MouseOverBackground="{DynamicResource BtnCloseMouseOver}"
PressedBackground="{StaticResource BtnClosePressed}"/>
<c:StatedButton Grid.Column="3" Width="30" Height="30" Style="{StaticResource StatedButtonStyle}"
NormalBackground="{StaticResource BtnCloseNormal}"
MouseOverBackground="{DynamicResource BtnCloseMouseOver}"
PressedBackground="{StaticResource BtnClosePressed}"/>
<c:StatedButton Grid.Column="4" Width="30" Height="30" Style="{StaticResource StatedButtonStyle}"
NormalBackground="{StaticResource BtnCloseNormal}"
MouseOverBackground="{DynamicResource BtnCloseMouseOver}"
PressedBackground="{StaticResource BtnClosePressed}"/>
</Grid>
<Separator Background="LightGray" Grid.Row="1" Height="2"></Separator>
<Grid Grid.Row="2">
<!--some controls will be insert here-->
</Grid>
<Grid Grid.Row="3" Background="Red" >
<!--some controls will be insert here-->
<ContentControl Content="{Binding }"></ContentControl>
</Grid>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and the window.xaml
<Window x:Class="WpfApp1.Window1"
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:WpfApp1"
xmlns:uctrls="clr-namespace:WpfApp1.Uctrls"
mc:Ignorable="d"
Style="{StaticResource WindowBaseStyle}"
Title="Window1 -- title" Height="300" Width="500">
<Grid>
<Label x:Name="lblTitle" Content="title"></Label>
<Button x:Name="BtnTest" Content="Get TextBox1" Click="BtnTestClick"></Button>
<uctrls:UserControlBase>
<Grid>
<Button Content="what "></Button>
</Grid>
</uctrls:UserControlBase>
</Grid>

i have done it myself.
just use code bellow to host new controls
<AdornerDecorator>
<contentpresenter/>
</AdornerDecorator>
and create a windowBase as parent class of new windows.

Button inside Usercontrol not firing properly in WPF

I have a Image buttton kind of usercontrol, which has two textblocks and an image inside button, but button is firing click only when I click on textblock or image part. just to do quick debug I have set button's cursor to Hand, strangely its showing Hand cursor only when mouse is over texblocks/Image but not on any part of the button. Here is my code
Name="Tiles" Background="Green"
d:DesignHeight="300" d:DesignWidth="300" Margin="10,10,10,10">
<UserControl.Resources>
<BooleanToVisibilityConverter x:Key="booleanVisibleConverter" />
<!-- This style is used for buttons, to remove the WPF default 'animated' mouse over effect -->
<Style x:Key="ImgBtnStyle" TargetType="{x:Type Button}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate x:Name="ImgBtnStyle" TargetType="{x:Type Button}">
<Border Name="border"
BorderThickness="1"
Padding="0"
BorderBrush="DarkGray"
CornerRadius="1"
Background="{TemplateBinding Background}">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="White" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Button Cursor="Hand" Style="{StaticResource ImgBtnStyle}" Command="{Binding TestClick, ElementName=Tiles}" CommandParameter="{Binding ElementName=Tiles, Path=TestName}" >
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding ElementName=Tiles, Path=ResultValue}" Style="{StaticResource txtblck}" Grid.Column="1" Grid.Row="1"/>
<TextBlock Text="{Binding ElementName=Tiles, Path=TestName}" Style="{StaticResource txtblck}" Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2" VerticalAlignment="Bottom" TextAlignment="Left" Padding="5,0,0,5"/>
<Image Source="/resources/Icons/tickBlack.png" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Visibility="{Binding Path= TestDone, ElementName=Tiles, Converter={StaticResource booleanVisibleConverter}}"/>
</Grid>
</Button>

Set Grid's Background to Transparent like below :
<Button Cursor="Hand" Style="{StaticResource ImgBtnStyle}" Command="{Binding TestClick, ElementName=Tiles}" CommandParameter="{Binding ElementName=Tiles, Path=TestName}" >
<Grid Background="Transparent">
...
</Button>
I made above changes and it worked fine for me.

Textblocks overlapping each other in XAML

This is what I am trying to obtain:
Name
Date
This is the XAML I have. But in the result, both the texts Name & Date are overlapping each other.
<DataTemplate>
<Grid x:Name="showGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel>
<Grid Height="{Binding widthMA}" Width="{Binding widthMA}">
<Grid Margin="3.5" Background="White">
<Grid VerticalAlignment="Bottom" Background="Black" Height="30">
<TextBlock Text="{Binding strName}" Style="{StaticResource AlbumTitleText}" Grid.Row="0" />
<TextBlock Text="{Binding dateCreated}" Style="{StaticResource ArtistTitleText}" Grid.Row="1" />
</Grid>
</Grid>
</Grid>
</StackPanel>
</Grid>
</DataTemplate>
And the styles AlbumTitleText and ArtistTitleText are here
<Style x:Key="AlbumTitleText" TargetType="TextBlock">
<Setter Property="Foreground" Value="White" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="FontSize" Value="18" />
<Setter Property="FontFamily" Value="Fonts/Gotham-Bold.ttf#Gotham Bold" />
<Setter Property="TextTrimming" Value="CharacterEllipsis" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Margin" Value="10,-2,10,7"></Setter>
</Style>
<Style x:Key="ArtistTitleText" TargetType="TextBlock">
<Setter Property="Foreground" Value="White" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="FontSize" Value="16" />
<Setter Property="FontFamily" Value="Fonts/Gotham-Bold.ttf#Gotham Bold" />
<Setter Property="TextTrimming" Value="CharacterEllipsis" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="Margin" Value="10,7,10,0"></Setter>
</Style>

I think your row definitions are in the wrong place. Try ...
<DataTemplate>
<Grid x:Name="showGrid">
<StackPanel>
<Grid Height="{Binding widthMA}" Width="{Binding widthMA}">
<Grid Margin="3.5" Background="White">
<Grid VerticalAlignment="Bottom" Background="Black" Height="30">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding strName}" Style="{StaticResource AlbumTitleText}" Grid.Row="0" />
<TextBlock Text="{Binding dateCreated}" Style="{StaticResource ArtistTitleText}" Grid.Row="1" />
</Grid>
</Grid>
</Grid>
</StackPanel>
</Grid>
</DataTemplate>

Blurry BitmapCache

The Problem
As visible in the following picture, when I have the height of the ScrollViewer content set to 1056px (100%) the text and lines are sharp.
However, when I set the height of the content to 6336px (600%) the text and lines are really blurry.
I am setting the CacheMode property of the content to a BitmapCache with default settings. I'm not sure if this is applicable, but the height is controlled by a Binding.
The Question
Is there a way to somehow refresh the CacheMode? I understood that changes to child layout properties should trigger an automatic refresh, but for some reason this is not working in my case. Or is the problem maybe just the graphics card?
What I've Tried
I set the CacheMode to null and then to a new BitmapCache.
I set the RenderAtScale property of the BitmapCache.
I ran calls to InvalidateProperty(CacheModeProperty) and UpdateLayout.
The Code
<Friction:FrictionScrollViewerControl x:Class="App.Controls.Panes.Calendar.Day.HourlyClockChartDay"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:controls="clr-namespace:App.Controls.WeekView"
xmlns:Friction="clr-namespace:App.Controls.Friction" mc:Ignorable="d" d:DesignHeight="400"
d:DesignWidth="300" Loaded="ClockChart_Loaded" Focusable="False" VerticalScrollBarVisibility="Visible"
PreviewMouseWheel="scrollViewer_PreviewMouseWheel" VerticalSnapToValue="22">
<Grid x:Name="grid" Height="1056">
<Grid.CacheMode>
<BitmapCache />
</Grid.CacheMode>
<Grid x:Name="clockGrid" Height="{Binding Height, ElementName=grid, Mode=OneWay}" IsHitTestVisible="False">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="clockGridCol0" Width="50" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<controls:ClockGrid x:Name="clockGridBg" Grid.Column="1" Grid.RowSpan="96" />
</Grid>
<Grid x:Name="radioGrid" Height="{Binding Height, ElementName=grid, Mode=OneWay}" Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding Width, ElementName=clockGridCol0, Mode=OneWay}" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style TargetType="RadioButton">
<Setter Property="GroupName" Value="_dayGridRadios" />
<Setter Property="Margin" Value="0,0,0,1" />
<Setter Property="Grid.Column" Value="1" />
<Setter Property="ClickMode" Value="Press" />
<EventSetter Event="Checked" Handler="RadioButton_Checked" />
<EventSetter Event="PreviewMouseLeftButtonDown" Handler="RadioButton_PreviewMouseLeftButtonDown" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Rectangle x:Name="rect" Fill="Transparent" />
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Fill" TargetName="rect" Value="{DynamicResource CheckedDate}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
</Grid>
<Grid x:Name="itemsGrid" Height="{Binding Height, ElementName=grid, Mode=OneWay}" Margin="0,0,11,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding Width, ElementName=clockGridCol0, Mode=OneWay}" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
</Grid>
<Border x:Name="currentTime" Background="{DynamicResource TimeSliderBackground}"
BorderBrush="{DynamicResource TimeSliderBorder}" BorderThickness="0,1" Height="3"
VerticalAlignment="Top" Visibility="Collapsed" IsHitTestVisible="False" />
<Border BorderBrush="#FFE1E1E1" BorderThickness="0,0,1,0" IsHitTestVisible="False" />
</Grid>
</Friction:FrictionScrollViewerControl>
And the C# which sets the height:
grid.Height = (int)((int)(1056 * percent) / 528) * 528;

Restyling AvalonDock for high contrast themes?

I'm using AvalonDock in a project. For the sake of this example, it is structured as follows:
<ad:DockingManager>
<ad:DockablePane>
<ad:DockableContent Title="Test1">
</ad:DockableContent>
<ad:DockableContent Title="Test2">
</ad:DockableContent>
</ad:DockablePane>
</ad:DockingManager>
This is fine, but unfortunately the tabs don't look so good on high contrast themes as shown below.
Ideally I would like to restyle the tabs to use a system color for the background (e.g. Window color). Is this possible?
Thanks,
Alan

go to codeplex and download avalon bits. There you should be able to quickly find their XAML files for styles. Take one as a baseline and start mocking with it.
you should see something like this (I'll include only one style)
<!--DockingManager-->
<Style x:Key="{x:Type ad:DockingManager}" TargetType="{x:Type ad:DockingManager}">
<Setter Property="Background" Value="{StaticResource DockManagerBackground}"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ad:DockingManager}">
<Grid Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Name="PART_LeftAnchorTabPanel"
Grid.Column="0" Grid.Row="1" Orientation="Vertical">
<StackPanel.Resources>
<Style TargetType="{x:Type ad:DockablePaneAnchorTabGroup}">
<Setter Property="LayoutTransform">
<Setter.Value >
<RotateTransform Angle="90"/>
</Setter.Value>
</Setter>
<Setter Property="Margin" Value="0,2,2,0"/>
</Style>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="0,0,3,3"/>
</Style>
</StackPanel.Resources>
</StackPanel>
<StackPanel Name="PART_RightAnchorTabPanel" Grid.Column="2" Grid.Row="1" Orientation="Vertical">
<StackPanel.Resources>
<Style TargetType="{x:Type ad:DockablePaneAnchorTabGroup}">
<Setter Property="LayoutTransform">
<Setter.Value >
<RotateTransform Angle="90"/>
</Setter.Value>
</Setter>
<Setter Property="Margin" Value="2,2,0,0"/>
</Style>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="3,3,0,0"/>
</Style>
</StackPanel.Resources>
</StackPanel>
<StackPanel Name="PART_TopAnchorTabPanel" Grid.Column="1" Grid.Row="0" Orientation="Horizontal"/>
<StackPanel Name="PART_BottomAnchorTabPanel" Grid.Column="1" Grid.Row="2" Orientation="Horizontal"/>
<Border
x:Name="PART_InternalContainer"
Background="{StaticResource DockManagerBorderBackground}"
Grid.Column="1" Grid.Row="1"
Padding="2">
<ContentPresenter />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
note that right on top of the file there will be a bunch of brushes, start with them, then start digging dipper