We Keep Coding

WPF InputSimulator not working on a User Control

The goal is to make a User Control Keyboard so I installed InputSimulator from NuGet, I tried it with a button and it's working well of course after setting the property Focusable of that button to False, but when I created a keyboard as a UserControl, the keyboard not working (not typing characters).
Here is the code from the xaml.cs of the User Control:
private void clickAlphabet(VirtualKeyCode virtualKey)
{
var inputSim = new InputSimulator();
inputSim.Keyboard.KeyPress(virtualKey);
}
private void Button_Click(object sender, RoutedEventArgs e)
{
clickAlphabet(VirtualKeyCode.VK_A);
}
Xaml of user control(one button):
<Button Content="a" Click="Button_Click"/>
This code is from App.xaml:
<Style TargetType="Button">
<Setter Property="Focusable" Value="False"/>
</Style>
Here is how I called the keyboard User Control:
<controls:ucKeyboard Margin="7 300"></controls:ucKeyboard>
This is the whole xaml of the user control:
<UserControl x:Class="SmartCaisse.PL.UserControls.ucKeyboard"
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:local="clr-namespace:SmartCaisse.PL.UserControls"
mc:Ignorable="d"
d:DesignHeight="268" d:DesignWidth="797">
<Border CornerRadius="0 0 15 15" Background="green">
<Grid Width="797">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="7"/>
<RowDefinition Height="60"/>
<RowDefinition Height="7"/>
<RowDefinition Height="60"/>
<RowDefinition Height="7"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<Grid.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Margin" Value="0,0,7,0"/>
<Setter Property="Width" Value="60"/>
<Setter Property="Height" Value="60"/>
<Setter Property="Background" Value="{x:Null}"/>
<Setter Property="Foreground" Value="#fff"/>
<Setter Property="FontFamily" Value="Tahoma"/>
<Setter Property="FontSize" Value="20"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}" BorderBrush="#fff" BorderThickness="2" Focusable="False">
<ContentPresenter HorizontalAlignment="center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="StackPanel">
<Setter Property="Orientation" Value="Horizontal"/>
</Style>
</Grid.Resources>
<StackPanel Grid.Row="0">
<Button Content="a" Click="Button_Click"/>
<Button Content="z"/>
<Button Content="e"/>
<Button Content="r"/>
<Button Content="t"/>
<Button Content="y"/>
<Button Content="u"/>
<Button Content="i"/>
<Button Content="o"/>
<Button Content="p"/>
<Button Width="127 ">
<Image Source="/assets/Icons/VirtualKeyboardIcons/backspace.png" Width="24" Height="24"></Image>
</Button>
</StackPanel>
<StackPanel Grid.Row="2" HorizontalAlignment="Right">
<Button Content="q"/>
<Button Content="s"/>
<Button Content="d"/>
<Button Content="f"/>
<Button Content="g"/>
<Button Content="h"/>
<Button Content="j"/>
<Button Content="k"/>
<Button Content="l"/>
<Button Content="m"/>
<Button Content="Entrée" Width="103" Margin="0"/>
</StackPanel>
<StackPanel Grid.Row="4">
<Button>
<Image Source="/assets/Icons/VirtualKeyboardIcons/arrow-up.png" Width="24" Height="24"></Image>
</Button>
<Button Content="w"/>
<Button Content="x"/>
<Button Content="c"/>
<Button Content="v"/>
<Button Content="b"/>
<Button Content="n"/>
<Button Content=","/>
<Button Content="."/>
<Button Content="-"/>
<Button Content="_"/>
<Button>
<Image Source="/assets/Icons/VirtualKeyboardIcons/arrow-up.png" Width="24" Height="24"></Image>
</Button>
</StackPanel>
<Border Grid.Row="6" CornerRadius="0 0 15 15">
<StackPanel>
<Button Content="&123" FontSize="18"/>
<Button Content="#"/>
<Button Width="529"/>
<Button>
<Image Source="/assets/Icons/VirtualKeyboardIcons/arrow-left.png" Width="24" Height="24"></Image>
</Button>
<Button>
<Image Source="/assets/Icons/VirtualKeyboardIcons/arrow-right.png" Width="24" Height="24"></Image>
</Button>
</StackPanel>
</Border>
</Grid>
</Border>
Update: I found that this code (in App.XAML file) doesn't take effect on buttons in the user control:
<Style TargetType="Button">
<Setter Property="Focusable" Value="False"/>
</Style>
So I rewrite it in the XAML file of the user control, this is not a problem.
The problem is, I found out that if I click on the text of the button (property Content) it work but if I click in the rest space of the button it doesn't work, see this image:
I found the code that created this problem, this block of code from XAML file of the user control, I added it to remove the default hover effect of buttons:
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}" BorderBrush="#fff" BorderThickness="2" Focusable="False">
<ContentPresenter HorizontalAlignment="center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
So I guess the solution is to find another way to remove the hover effect, any other way to remove it ??

I update your Button Style as below, it can work for click whole button.
<Style TargetType="{x:Type Button}">
<Setter Property="Margin" Value="0,0,7,0"/>
<Setter Property="Width" Value="60"/>
<Setter Property="Height" Value="60"/>
<Setter Property="Background" Value="{x:Null}"/>
<Setter Property="Foreground" Value="#fff"/>
<Setter Property="FontFamily" Value="Tahoma"/>
<Setter Property="FontSize" Value="20"/>
<Setter Property="BorderBrush" Value="#fff"></Setter>
<Setter Property="BorderThickness" Value="2"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Transparent"/>
</Trigger>
</Style.Triggers>
</Style>

XAML TabControl Border Issues

I am trying to make a custom TabControl that supports scrolling but keeps the original look and feel of the TabControl, obviously with the exception that it scrolls.
To begin I chose to edit a copy of the original template TabControl used.
Then I put a ScrollViewer around the TabPanel. However, this has caused a minor issue where the tabs now have a border at the bottom of them when they are selected. This can be seen below by comparing the normal TabControl and the styled TabControl in the image.
At first I assumed this was the z indexing of the scroll viewer but after trying different values and making sure the z index of the scroll viewer and TabPanel are both explicitly higher than the Border's z index, it made no difference.
How can I achieve the same effect where there is no border at the bottom of the selected tab, whilst it is wrapped in a ScrollViewer?
MainWindow.xaml
<Window x:Class="ScrollableTabControl.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"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<SolidColorBrush x:Key="TabItem.Selected.Background" Color="#FFFFFF"/>
<SolidColorBrush x:Key="TabItem.Selected.Border" Color="#ACACAC"/>
<Style x:Key="TabControlStyle1" TargetType="{x:Type TabControl}">
<Setter Property="Padding" Value="2"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Background" Value="{StaticResource TabItem.Selected.Background}"/>
<Setter Property="BorderBrush" Value="{StaticResource TabItem.Selected.Border}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid x:Name="templateRoot" ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="ColumnDefinition0"/>
<ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition x:Name="RowDefinition0" Height="Auto"/>
<RowDefinition x:Name="RowDefinition1" Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer VerticalScrollBarVisibility="Disabled"
HorizontalScrollBarVisibility="Disabled"
Grid.Column="0"
Grid.Row="0"
Panel.ZIndex="1"
Background="Transparent">
<TabPanel IsItemsHost="true"
Margin="2,2,2,0"
Panel.ZIndex="2"
Background="Transparent"
KeyboardNavigation.TabIndex="1"
x:Name="headerPanel"/>
</ScrollViewer>
<Border x:Name="contentPanel"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Grid.Column="0"
Panel.ZIndex="0"
KeyboardNavigation.DirectionalNavigation="Contained"
Grid.Row="1"
KeyboardNavigation.TabIndex="2"
KeyboardNavigation.TabNavigation="Local">
<ContentPresenter x:Name="PART_SelectedContentHost"
ContentSource="SelectedContent"
Margin="{TemplateBinding Padding}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TabControl Margin="5"
Grid.Row="0">
<TabItem Header="Tab 1"/>
<TabItem Header="Tab 2"/>
<TabItem Header="Tab 3"/>
</TabControl>
<TabControl Margin="5"
Grid.Row="1"
Style="{DynamicResource TabControlStyle1}">
<TabItem Header="Tab 1"/>
<TabItem Header="Tab 2"/>
<TabItem Header="Tab 3"/>
</TabControl>
</Grid>
</Window>

So if we go take a look at a ScrollViewer style template notice there's a Border in there with a set color for it which is the artifact you're seeing.
We could go in and edit a Style template of ScrollViewer and remove that....or for this instance we could just let it keep its Border and override the style inheritance so in your template you could do something like;
<ScrollViewer ...>
<ScrollViewer.Resources>
<Color x:Key="BorderMediumColor">#FFFFFFFF</Color>
</ScrollViewer.Resources>
....
</ScrollViewer>
Wherein it should inherit that new color for the Border in there which in this case I just made white, or you could change the alpha channel too '00' so it's just transparent. Or you could do the previously mentioned and define a new style template without the hardcoded border values.
Hope this helps, cheers!
ADDENDUM : If you can't find the culprit causing the visual border line you can always sort of cheat with the layout of elements within the DOM and utilize margins to overlay the line and achieve the same desired visual result. The line may still technically exist but the illusion that it doesn't can suffice just the same. :)
Working code example
<Window x:Class="ScrollableTabControl.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"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<SolidColorBrush x:Key="TabItem.Selected.Background" Color="#FFFFFF"/>
<SolidColorBrush x:Key="TabItem.Selected.Border" Color="#ACACAC"/>
<Style x:Key="TabControlStyle1" TargetType="{x:Type TabControl}">
<Setter Property="Padding" Value="2"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Background" Value="{StaticResource TabItem.Selected.Background}"/>
<Setter Property="BorderBrush" Value="{StaticResource TabItem.Selected.Border}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid x:Name="templateRoot"
ClipToBounds="true"
SnapsToDevicePixels="true"
KeyboardNavigation.TabNavigation="Local"
UseLayoutRounding="True"> <!-- Gets rid of pixel rounding errors which cause small bugs when window is a certain size -->
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="ColumnDefinition0"/>
<ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition x:Name="RowDefinition0" Height="Auto"/>
<RowDefinition x:Name="RowDefinition1" Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto"
Grid.Column="0"
Grid.Row="0"
Panel.ZIndex="1"
Margin="0, 0, 0, -1.25"
Background="Transparent"> <!-- +- 1.25 seems to be required when mixed with the ZIndex to hide the border underneath the selected tab -->
<TabPanel IsItemsHost="true"
Margin="2,2,2,1.25"
Background="Transparent"
KeyboardNavigation.TabIndex="1"
x:Name="headerPanel"/>
</ScrollViewer>
<Border x:Name="contentPanel"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Grid.Column="0"
KeyboardNavigation.DirectionalNavigation="Contained"
Grid.Row="1"
KeyboardNavigation.TabIndex="2"
KeyboardNavigation.TabNavigation="Local">
<ContentPresenter x:Name="PART_SelectedContentHost"
ContentSource="SelectedContent"
Margin="{TemplateBinding Padding}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TabControl Margin="5"
Grid.Row="0">
<TabItem Header="Tab 1"/>
<TabItem Header="Tab 2"/>
<TabItem Header="Tab 3"/>
</TabControl>
<TabControl Margin="5"
Grid.Row="1"
Style="{DynamicResource TabControlStyle1}">
<TabItem Header="Tab 1"/>
<TabItem Header="Tab 2"/>
<TabItem Header="Tab 3"/>
</TabControl>
</Grid>
</Window>

You can try this to get custom rounded tabs with blue background
As for scrolling, scrollviewer should do the job
<TabControl.Resources>
<Style TargetType="TabItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Border Name="Border" BorderThickness="1,1,1,1" CornerRadius="4,4,0,0" Margin="2,0" Background="#252e37">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="10,2"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Border" Property="Background" Value="LightSkyBlue" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Border" Property="Background" Value="GhostWhite" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>

change color of the tab control panel background

I have a TabControl like so:
<TabControl ItemsSource="{Binding TabItems, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
SelectedIndex="0"
BorderThickness="0"
TabStripPlacement="Left"
Padding="10,0,0,10">
<TabControl.ItemContainerStyle>
<Style TargetType="TabItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Grid Name="Panel">
<ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" Margin="20,5"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Panel" Property="Background" Value="#d9534f" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Panel" Property="Background" Value="#E6E3DB" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Header" Value="{Binding Header, Mode=OneTime}"/>
<Setter Property="Content" Value="{Binding Content, Mode=OneTime}"/>
</Style>
</TabControl.ItemContainerStyle>
</TabControl>
Is there a way to change the color of the Panel where TabItems are located:
Thank you for any suggestions.

EDIT after OP clarified the question.
The are you refer to has nothing to do with the TabItem or even the TabControl. It's simply the control where the TabControl resides in.
Please see the following simple example:
<Window x:Class="StackOverflowWPF.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:StackOverflowWPF"
mc:Ignorable="d"
Title="MainWindow" Height="200" Width="300">
<Grid Background="LightSeaGreen">
<TabControl Background="Red">
<TabItem Header="Tab1" Background="Yellow">
</TabItem>
<TabItem Header="Tab1" Background="Green">
</TabItem>
</TabControl>
</Grid>
</Window>
And this is what it looks like in the designer:
So going back to your example, I'm assuming you want to set the color of area pointed to by an arrow, while keeping the rest of the form in a different color. I'd make use of the Grid control for that.
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="LightGreen">
<TabControl Grid.Row="0" Background="Red" Height="100">
<TabItem Header="Tab1" Background="Yellow">
</TabItem>
<TabItem Header="Tab1" Background="Green">
</TabItem>
</TabControl>
</Grid>
<Grid Grid.Row="1"/>
</Grid>
And it will look like this:

WPF Databinding in ControlTemplate not working C#

I try to bind a simple bool to a checkbox and a datatrigger in a controltemplate, but nothing is working. The checkbox is only for test purpose. I already went through the posts here, but most problems are caused by setting a property directly and not in the style, thus overwriting it. The datatrigger using the mouseover property is working just fine. Its only the binding to the bool which doesn't work.
My Code so far:
cs:
public partial class HostFrame : UserControl
{
public bool test { get; set; }
public HostFrame()
{
test = true;
InitializeComponent();
}
}
Xaml:
<UserControl x:Class="OwnDrawingv2.Elements.HostFrame"
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:local="clr-namespace:OwnDrawingv2.Elements"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<UserControl.Resources>
<Style TargetType="{x:Type local:HostFrame}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:HostFrame}">
<Grid Background="LightBlue" Name="host_grid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<ContentPresenter Name="content" Grid.Row="1" Grid.Column="1" />
<CheckBox Grid.Column="0" Grid.Row="0" IsChecked="{Binding Path=test}"> <!--Test prupose-->
</CheckBox>
<Image Grid.Column="1" Grid.Row="0" Name="attention" Width="30" Height="30" Source="/attention_icon.png">
<Image.Style>
<Style TargetType="Image">
<Setter Property="Visibility" Value="Visible"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=test}" Value="true">
<Setter Property="Visibility" Value="Hidden"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
<Ellipse Grid.Column="0" Grid.Row="1" Width="10" Height="10" Fill="Black">
<Ellipse.Style>
<Style TargetType="Ellipse">
<Setter Property="Visibility" Value="Hidden"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=content, Path=IsMouseOver}" Value="true">
<Setter Property="Visibility" Value="Visible"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Ellipse.Style>
</Ellipse>
<Ellipse Grid.Column="2" Grid.Row="1" Width="10" Height="10" Fill="Black">
<Ellipse.Style>
<Style TargetType="Ellipse">
<Setter Property="Visibility" Value="Hidden"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=content, Path=IsMouseOver}" Value="true">
<Setter Property="Visibility" Value="Visible"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Ellipse.Style>
</Ellipse>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
</UserControl>
UPDATE: I got an answer for my original question and I understand this. But why are there tutorials in the web, which seem to work without the relativesource?
UPDATE2: I missed one answers information about Datacontext, thank you. The problem is solved.

You have not set a Datacontext for your UserControl therefore i assume it will be null. You should see the binding error in your output.
On the other hand, your property test doesnt't notify changes. You should declare it as a dependency property if it belongs to the UserControl (instead of being part of the ViewModel)

if you do the following IsChecked="{Binding Path=test}" that means your UserControl class is the DataContext of it self (or you didn't say that).
So you have 2 solutions (I guess)
1- Move your Test property to your ViewModel and do your Binding.
2- Use RelativeResource and FindAncestor method ({Binding Path=PathToProperty, RelativeSource={RelativeSource AncestorType={x:Type typeOfAncestor}}})
PS: IF your HostFrame inherits from Control,UIELement..., It would be better to define a DependencyProperty and do a TemplateBinding

changing background color of togglebutton when checked

I am trying the distinguish the state of the toggle button when clicked. I have the snippet below
<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 x:Key="OnOffToggleImageStyle" TargetType="ToggleButton">
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" Value="DimGray"/>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<ToggleButton Height="60" Content="Text" Style="{StaticResource OnOffToggleImageStyle}">
</ToggleButton>
</Grid>
</Window>
However this does not work when IsChecked value is set to "True" in the style. When set to false it works.
I wonder why. Any answers!

When running your code sample, it appears the style is conflicting with the 'chrome' of the ToggleButton (i.e. the original style of the button).
It would probably be better in this situation to override the template of the ToggleButton to behave in the manner you desire. An ugly example can be found below:
<Style x:Key="myToggleButton" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border x:Name="outer"
BorderBrush="White"
BorderThickness="2"
Opacity=".9"
Background="Transparent">
<Border x:Name="inner"
Margin="8"
BorderThickness="0"
Background="{
Binding Background,
RelativeSource={RelativeSource TemplatedParent}}">
<Grid x:Name="container">
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock x:Name="display"
Grid.Row="1"
Text="{Binding Content, RelativeSource={
RelativeSource TemplatedParent}}"
Foreground="White"
FontSize="11"
FontFamily="Segoe UI"
FontStyle="Normal"
FontWeight="Normal"
Margin="8,0,0,4"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"/>
</Grid>
</Border>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsChecked" Value="True">
<Setter TargetName="outer" Property="Background" Value="LightBlue"/>
<Setter TargetName="outer" Property="BorderBrush" Value="Transparent"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>