The focus visual hint that wpf provides on Windows 7 is a dashed line, as such this:
Now, how can I change the way it looks? How can I control its appearence?
Thanks!
Try something like following
<Window x:Class="FocusVisualStyle.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="MyFocusVisualStyle">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="-2" StrokeThickness="1" Stroke="Red"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<StackPanel Orientation="Horizontal" Height="24">
<TextBox Width="96"/>
<Button Content="Yes" Width="64" FocusVisualStyle="{DynamicResource MyFocusVisualStyle}"/>
<Button Content="No" Width="64" FocusVisualStyle="{DynamicResource MyFocusVisualStyle}"/>
</StackPanel>
You can customise to suit your liking. This is just a starting point.
Edit: Since so many people have liked this solution here is another example which changes focus visual style for all buttons and textboxes without explicit setting of FocusVisualStyle property for each control (see that DynamicResource thingy?) in xaml
Also it uses animation to change the colour of the focus rectangle.
Enjoy :)
<Window x:Class="FocusVisualStyle.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="MyFocusVisualStyle">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate >
<Rectangle Margin="-2" StrokeThickness="2" RadiusX="2" RadiusY="2" >
<Rectangle.Stroke>
<SolidColorBrush Color="Red" x:Name="RectangleStroke" />
</Rectangle.Stroke>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded" >
<BeginStoryboard>
<Storyboard>
<ColorAnimation From="Red"
To="Orange"
Duration="0:0:0.5"
RepeatBehavior="Forever"
Storyboard.TargetName="RectangleStroke"
Storyboard.TargetProperty="Color"/>
<DoubleAnimation To="3"
Duration="0:0:0.5"
RepeatBehavior="Forever"
Storyboard.TargetProperty="StrokeDashOffset" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource MyFocusVisualStyle}" />
</Style>
<Style TargetType="{x:Type TextBox}">
<Setter Property="FocusVisualStyle" Value="{StaticResource MyFocusVisualStyle}" />
</Style>
</Window.Resources>
<StackPanel Orientation="Horizontal" Height="24">
<TextBox Width="96"/>
<Button Content="Yes" Width="64" />
<Button Content="No" Width="64" />
</StackPanel>
Here you see that I have styles for Button and TextBox which set the property FocusVisualStyle for all the buttons and text boxes in this window.
Related
i am trying to include XAML-Files(some styles) as Resources in my project.
But i want them to be interchangable. So i dont want the Build Action "Page" but simply copy them to the output-folder and use the styles from there.
I am using SharpVectors in the XAML-Files.
The problem is, that if i load a style, an exception is thrown: "Can not create unknown type"{http://sharpvectors.codeplex.com/runtime/}EmbeddedBitmapSource"
Maybe some reference is missing?
XAML-File:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Aufwerter"
xmlns:c1="clr-namespace:Aufwerter.Converter"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:svg="http://sharpvectors.codeplex.com/runtime/"
>
<Style x:Key="RevaluatorBildCashOnly" TargetType="UserControl">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Control">
<Border>
<Grid>
<Image HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="1,1,1,1" x:Name="IsExpandedPath">
<Image.Source>
<DrawingImage xmlns:svg="http://sharpvectors.codeplex.com/runtime/">
<DrawingImage.Drawing>
<DrawingGroup ClipGeometry="M0,0 V1957 H575 V0 H0 Z">
<DrawingGroup Opacity="1" Transform="1,0,0,1,6,5">
<DrawingGroup.ClipGeometry>
<RectangleGeometry RadiusX="0" RadiusY="0" Rect="-6,-5,575,1957" />
</DrawingGroup.ClipGeometry>
<DrawingGroup Transform="1,0,0,1,-6,-5" Opacity="1">
<ImageDrawing Rect="0,0,575,1957">
<ImageDrawing.ImageSource>
<svg:EmbeddedBitmapSource Data="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" MimeType="image/png" />
</ImageDrawing.ImageSource>
</ImageDrawing>
</DrawingGroup>
</DrawingGroup>
</DrawingGroup>
</DrawingImage.Drawing>
</DrawingImage>
</Image.Source>
</Image>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="RevaluatorVideoCashOnly-Cash" TargetType="UserControl">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Control">
<ControlTemplate.Resources>
<Storyboard x:Key="Animation0" BeginTime="00:00:00" RepeatBehavior="Forever" Duration="00:00:02">
<DoubleAnimation From="1" Duration="00:00:01" Storyboard.TargetName="ellipse0" Storyboard.TargetProperty="Opacity" To="0" />
</Storyboard>
</ControlTemplate.Resources>
<ControlTemplate.Triggers>
<Trigger Property="IsVisible" Value="true">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Animation0}" x:Name="Storyboard0" />
</Trigger.EnterActions>
<Trigger.ExitActions>
<StopStoryboard BeginStoryboardName="Storyboard0"/>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<Grid>
<Viewbox>
<Canvas Name="canvas" Height="450" Width="200">
<UserControl Style="{StaticResource RevaluatorBildCashOnly}" Height="{Binding ElementName=canvas, Path=ActualHeight}" Width="{Binding ElementName=canvas, Path=ActualWidth}" ></UserControl>
<Ellipse x:Name="ellipse0" Width="96" Height="65" Canvas.Left="52" Canvas.Top="242" StrokeThickness="6" Stroke="red" Visibility="Visible" HorizontalAlignment="Center" VerticalAlignment="Top"/>
</Canvas>
</Viewbox>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Adding Dictionary:
DirectoryInfo directoryInfo = new DirectoryInfo(Path.GetDirectoryName(Assembly.GetExecutingAssembly().Location) + #"/Resources/");
foreach (FileInfo item in directoryInfo.GetFiles())
{
ResourceDictionary myResourceDictionary = new ResourceDictionary();
myResourceDictionary.Source = new Uri(item.FullName, UriKind.Absolute);
Application.Current.Resources.MergedDictionaries.Add(myResourceDictionary);
}
View where style is used:
<Page x:Class="Aufwerter.Views.RevalueManual"
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"
xmlns:svg="http://sharpvectors.codeplex.com/runtime/"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:c1="clr-namespace:Aufwerter.Converter"
Title="MainWindow" d:DesignHeight="1200" d:DesignWidth="1920" xmlns:prism="http://prismlibrary.com/"
prism:ViewModelLocator.AutoWireViewModel="True"
xmlns:i="http://schemas.microsoft.com/xaml/behaviors" xmlns:viewmodels="clr-namespace:Aufwerter.ViewModels" d:DataContext="{d:DesignInstance Type=viewmodels:RevalueManualViewModel}" Unloaded="Page_Unloaded">
<UserControl Grid.Column="1" HorizontalAlignment="Stretch" Visibility="{Binding IsMediaElementPlaceCardVisible, Converter={StaticResource BoolToVis}}">
<UserControl.Style>
<Binding Converter="{StaticResource VideoSelectorConverter }">
<Binding.Source>
<sys:String>Cash</sys:String>
</Binding.Source>
</Binding>
</UserControl.Style>
</UserControl>
Converter that returns styles to Views:
return Application.Current.FindResource("RevaluatorVideoCashOnly-Cash") as Style;
How can i get this working?
You should inlude the actual namespace and assembly name in the loose (uncompiled) XAML, i.e. replace xmlns:svg="http://sharpvectors.codeplex.com/runtime/" with a namespace mapping for each type that you use.
For example, for EmbeddedBitmapSource it's:
xmlns:svg="clr-namespace:SharpVectors.Runtime;assembly=SharpVectors.Runtime.Wpf"
Based on the code below, is it possible to animate the transition from image1 to image2 on button IsMouseOverevent?
The following code works fine showing image1 as the upstate image and image2 as the hover image on a button but it does not animate the transition.
XAML Style
<Style x:Key="MainMenuButtonTemplate" TargetType="{x:Type Button}">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="button" CornerRadius="0"
Background="{TemplateBinding Background}"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}">
<TextBlock Text="{TemplateBinding Button.Content}"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="button" Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/App;component/Images/image2.png" Stretch="None"/>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
Usage
<Button x:Name="findRButton"
Style="{StaticResource MainMenuButtonTemplate}"
Margin="0,0,0,0"
Height="53"
Command="{Binding FindrViewCommand}" BorderBrush="{x:Null}" Foreground="White" BorderThickness="0">
<Button.Background>
<ImageBrush ImageSource="Images/image1.png" Stretch="None"/>
</Button.Background>
</Button>
Here is code that shows you how to do what you're looking for.
In order to use animations during triggers you must utilize the enter and exit actions of that trigger. You must also name BeginStoryboard so that you can stop it in other calls.
Review the code and if you have anymore questions let me know. This will fade from image1 to image2 and vice versa with mouse over / leave.
<Window x:Class="Question_Answer_WPF_App.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="MainWindow"
Height="400"
Width="500">
<Window.Resources>
<Storyboard x:Key="mouseOverStoryboard"
Duration="00:00:00.5">
<DoubleAnimation Storyboard.TargetName="image1"
Storyboard.TargetProperty="Opacity"
To="0"
Duration="00:00:00.5" />
<DoubleAnimation Storyboard.TargetName="image2"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="00:00:00.5" />
</Storyboard>
<Storyboard x:Key="mouseLeaveStoryboard"
Duration="00:00:00.5">
<DoubleAnimation Storyboard.TargetName="image1"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="00:00:00.5" />
<DoubleAnimation Storyboard.TargetName="image2"
Storyboard.TargetProperty="Opacity"
To="0"
Duration="00:00:00.5" />
</Storyboard>
<Style x:Key="MainMenuButtonStyle"
TargetType="{x:Type Button}">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Image x:Name="image1"
Source="Images/image1.png" />
<Image x:Name="image2"
Source="Images/image2.png"
Opacity="0" />
<ContentPresenter />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Trigger.EnterActions>
<StopStoryboard BeginStoryboardName="mouseLeaveStoryboard" />
<BeginStoryboard Name="mouseOverStoryboard"
Storyboard="{StaticResource mouseOverStoryboard}" />
</Trigger.EnterActions>
<Trigger.ExitActions>
<StopStoryboard BeginStoryboardName="mouseOverStoryboard" />
<BeginStoryboard Name="mouseLeaveStoryboard"
Storyboard="{StaticResource mouseLeaveStoryboard}" />
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
</Window.Resources>
<Grid>
<Button Style="{StaticResource MainMenuButtonStyle}"
Width="120"
Height="120" />
</Grid>
</Window>
I have a custom message box with two button 'Yes' and 'No'. Button 'Yes' is green and button 'No' is red.
I apply the same style for the two buttons through a xaml file defined separately as below:
MsgBoxButtonStyle.xaml:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="Button"
x:Key="MsgBoxButtonStyle">
<Setter Property="Background"
Value="Transparent" />
<Setter Property="TextBlock.TextAlignment"
Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="Border" CornerRadius="0"
BorderBrush="#000" BorderThickness="1,1,1,1"
Background="{TemplateBinding Background}">
<ContentPresenter x:Name="contentPresenter"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalAlignment}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
These two buttons are place in my WPF window as below:
<Window x:Class="My.XAML.Controls.Windows.WpfMessageBox"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/My.XAML;component/Styles/MsgBoxButtonStyle.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Button Name="btnYes" Content="Yes"
Click="Button_Click" Foreground="Black"
Style="{StaticResource MsgBoxButtonStyle}"
Background="#b6dbd6"
VerticalAlignment="Center" HorizontalAlignment="Stretch"
VerticalContentAlignment="Center" HorizontalContentAlignment="Center"/>
<Button Name="btnNo" Content="No"
Click="Button_Click" Foreground="Black"
Style="{StaticResource MsgBoxButtonStyle}"
Background="#dbb6b6"
VerticalAlignment="Center" HorizontalAlignment="Stretch"
VerticalContentAlignment="Center" HorizontalContentAlignment="Center" />
</Window>
Now, I would like to perform a nice effect when mouse is positioned over the buttons, some kind of blinking or whatever using storyboard and dependant on the color of the button.
Also I would like to put this storyboard within my existing style file MsgBoxButtonStyle.xaml and no put each storyboard in the window for each button, i want to share it.
How can I do this? some one can provide me a nice effect for buttons?
Just add triggers to the style. Here's an example to start you off.
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Duration="0:0:0.250" To="0"
Storyboard.TargetProperty="BorderThickness" />
<DoubleAnimation Duration="0:0:0.550" To="120"
Storyboard.TargetProperty="Height" />
<DoubleAnimation Duration="0:0:0.550" To="120"
Storyboard.TargetProperty="Width" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Duration="0:0:0.250" To="0"
Storyboard.TargetProperty="BorderThickness" />
<DoubleAnimation Duration="0:0:0.550" To="100"
Storyboard.TargetProperty="Height" />
<DoubleAnimation Duration="0:0:0.550" To="100"
Storyboard.TargetProperty="Width" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
first of all I apologize for my English.
I am making a simple C# WPF app. I've added an ellipse,label1,label2 onto my MainWindow.xaml.
I want to make these 3 objects (ellipse,label1,label2) into a button. I want this button to load my second wpf page, called "Size". As I understand it should be an area button. I've tried to use "border" (from WPF controls) with "MouseDown" (from event handler) but the effect is not that good. Any tips? What should I do?
The code I've used for event handler is:
private void Border_MouseDown(object sender, MouseButtonEventArgs e)
{
Size secondPage = new Size();
secondPage.Show();
this.Close();
}
You need to redefine button style, You can do it using ControlTemplate. Here is example how to write reusable style that redefines button.
I have added also an example how to implement color change on IsPressed event.
<Window x:Class="ColorTest.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>
<ResourceDictionary>
<LinearGradientBrush x:Key="ButtonBackground" StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="#FFD9EDFF" Offset="0"/>
<GradientStop Color="#FFC0DEFF" Offset="0.445"/>
<GradientStop Color="#FFAFD1F8" Offset="0.53"/>
</LinearGradientBrush>
<Style x:Key="SimpleButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Border Background="{StaticResource ButtonBackground}" VerticalAlignment="Stretch" CornerRadius="2" HorizontalAlignment="Stretch"/>
<Border x:Name="BorderPressed" Opacity="0" Background="Blue" VerticalAlignment="Stretch" CornerRadius="2" HorizontalAlignment="Stretch"/>
<Label Name="label1" Content="1" HorizontalAlignment="Left"></Label>
<Label Name="label2" Content="2" HorizontalAlignment="Right"></Label>
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" x:Name="MainContent" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="BorderPressed" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.2"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="BorderPressed" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.2"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</Window.Resources>
<DockPanel>
<Button Content="Button" Height="23" Name="button1" Width="75" Style="{StaticResource SimpleButtonStyle}" Click="button1_Click"/>
</DockPanel>
I have an application that will need to make the button text flash/blink depending on a dependency object (the sample XAML below uses check box's IsChecked). I've tried many different tricks I've seen on Google search, to no avail.
Below is the sample XAML code I created for this purpose, and there must be something I am missing. Can someone help on this?
=========================
<Window x:Class="WpfTestBed.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="414" Width="751">
<Window.Resources>
<Style x:Key="SB_BaseGradientButton" TargetType="Button">
<Style.Resources>
<Color x:Key="StartColor">Gray</Color>
<Color x:Key="EndColor">White</Color>
<SolidColorBrush x:Key="PressedForegroundColor" Color="Black"/>
</Style.Resources>
<Setter Property="Margin" Value="2,2,2,2" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="FontSize" Value="14" />
</Style>
<Storyboard x:Key="FlashBlockTextStoryBoard">
<ObjectAnimationUsingKeyFrames RepeatBehavior="Forever" Storyboard.TargetName="txtButtonFace" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="{x:Static Visibility.Hidden}" />
<DiscreteObjectKeyFrame KeyTime="0:0:1" Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Style BasedOn="{StaticResource {x:Type TextBlock}}" x:Key="FlashTextBlock" TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=checkBox1.IsChecked}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard Name="storyboard" Storyboard="{StaticResource FlashBlockTextStoryBoard}" />
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="storyboard" />
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid Margin="10,10,10,10" >
<Grid.RowDefinitions>
<RowDefinition Height="40*"/>
<RowDefinition Height="12*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="12*" MaxWidth="210"/>
<ColumnDefinition Width="20*"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="1" MaxHeight="70" MaxWidth="150"
FontSize="16" Style="{StaticResource SB_BaseGradientButton}" Margin="320,0,29,12" Grid.Row="1">
<TextBlock Name="txtButtonFace" TextAlignment="Center" Text="This Is Test"
Style="{StaticResource FlashTextBlock}">
</TextBlock>
</Button>
<CheckBox Content="Make button flash" Grid.Column="1" Height="16" HorizontalAlignment="Left" Margin="44,24,0,0"
Name="checkBox1" VerticalAlignment="Top" Grid.Row="1" />
</Grid>
</Window>
Two things and it will work:
your binding syntax is wrong. It has to be
Binding="{Binding Path=IsChecked, ElementName=checkBox1}"
and remove Storyboard.TargetName="txtButtonFace" from your Storyboard because you can't use a TargetName in a Style.