Silverlight Animation style From Resource File - c#

I want to animate button shadow effect color when mouse enter border.
I try this code and is not working for me.
And I don't know where is the problem is?
<Style x:Name="HeaderButton" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="Border" BorderBrush="#FF550211" BorderThickness="0" CornerRadius="4">
<Border.Triggers>
<EventTrigger RoutedEvent="Border.MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="Color" Storyboard.TargetName="MenuButtonShadow"
From="#FFFFFFFF" To="#FF000000" Duration="0:0:0.3"></ColorAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Border.Triggers>
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFAF1232" Offset="0" />
<GradientStop Color="#FFB60329" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<ContentPresenter Margin="8, 0" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect x:Name="MenuButtonShadow" ShadowDepth="0" BlurRadius="4"></DropShadowEffect>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="White"></Setter>
<Setter Property="Margin" Value="4"></Setter>
</Style>


From MSDN:
In Silverlight, the only event that you can use for an EventTrigger is the Loaded event. For other events, you should declare a storyboard in the Resources property, provide a Name value for the storyboard, and write an event handler that calls the Begin method on the named storyboard.
I imagine you could do something like this in your XAML (though I haven't tested it):
<Storyboard x:Name="MenuButtonShadowStoryboard">
<ColorAnimation Storyboard.TargetProperty="Color" Storyboard.TargetName="MenuButtonShadow"
From="#FFFFFFFF" To="#FF000000" Duration="0:0:0.3">
</ColorAnimation>
</Storyboard>
<ControlTemplate TargetType="Button">
<Border x:Name="Border" MouseEnter="Border_MouseEnter">
<!-- omitted for brevity -->
</Border>
</ControlTemplate>
And then your event handler would call the Begin method on the storyboard:
private void Border_MouseEnter(object sender, MouseEventArgs e)
{
MenuButtonShadowStoryboard.Begin();
}
You'll probably want to add something similar for the MouseLeave event, which makes the color go back to #FFFFFFFF.

Related

Animate button background image on IsMouseOver in WPF/XAML/C#

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>

Transparent background and mouseEnter of a button - WPF

I have to create a button with an image and when I pass the cursor on it, the account icon has to change color, but I don't know how to do it, because for now when I pass on the button it changes the entire background.
Image without cursor
Image with cursor
There's my button's code:
<Style TargetType="{x:Type Button}" x:Key="TestAccountButton" BasedOn="{StaticResource Hoverless }" >
<Setter Property="WindowChrome.IsHitTestVisibleInChrome" Value="True"/>
<Setter Property="Padding" Value="10"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ButtonBase}">
<Border Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}">
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<!--MouseEnter-->
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="#3a3a3a" Duration="0:0:0.3" Storyboard.TargetProperty="Background.Color"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<!--MouseLeave-->
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="White" Duration="0:0:0.3" Storyboard.TargetProperty="Background.Color"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Hoverless button:
<Style TargetType="{x:Type Button}" x:Key="Hoverless">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}">
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

WPF combie 3 objects into a area button

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>

How to update the color of the ToggleButton content?

For my WP7 app, when a ToggleButton is in a checked state, I expect the content color to reverse (button turns from black to white and text from white to black). This work great when the content is text since the ToggleButton takes care of changing the color. However, this isn’t the case for other type of content such as a Patch object. I replaced the content of my ToggleButton with a Path object and it’s color isn’t changing (when in a checked state, the ToggleButton background turns from black to white and the Path object stays white instead of turning black).
The first thing I did is to bind the Fill property of the Path object to it's parent foreground color. But that didn't work either. I could be trying to use DataTrigger, but Silverlight/WP doesn't support them.
I updated the text to use a Path (drawing of pause symbol) and the color of the path doesn't follow the same behavior of the text. Any idea why? How could I fix that?
<ToggleButton Grid.Column="0" x:Name="PauseButton">
<ToggleButton.Content>
<Path Name="PauseIcon" Fill="White"
Data="M0,0 0,27 8,27 8,0z M14,0 14,27 22,27 22,0" />
</ToggleButton.Content>
</ToggleButton>

Use Checked and Unchecked events:
<ToggleButton Grid.Column="0" x:Name="PauseButton"
Background="Black"
Checked="PauseButton_Checked"
Unchecked="PauseButton_Unchecked"
Style="{DynamicResource ToggleButtonStyle}">
<Path x:Name="PauseIcon" Fill="White"
Data="M0,0 0,27 8,27 8,0z M14,0 14,27 22,27 22,0" />
</ToggleButton>
And apply the ToogleButton background and the Path fill:
private void PauseButton_Checked(object sender, RoutedEventArgs e)
{
(sender as ToggleButton).Background = Brushes.White;
PauseIcon.Fill = Brushes.Black;
}
private void PauseButton_Unchecked(object sender, RoutedEventArgs e)
{
(sender as ToggleButton).Background = Brushes.Black;
PauseIcon.Fill = Brushes.White;
}
The ToggleButtonStyle is used (if you want) to disable the Microsoft_Windows_Themes:ButtonChrome behavior when the cursor is over the button, or it's pressed:
<Style x:Key="ButtonFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Stroke="Black" StrokeDashArray="1 2"
StrokeThickness="1" Margin="2"
SnapsToDevicePixels="true"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#F3F3F3" Offset="0"/>
<GradientStop Color="#EBEBEB" Offset="0.5"/>
<GradientStop Color="#DDDDDD" Offset="0.5"/>
<GradientStop Color="#CDCDCD" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF707070"/>
<Style x:Key="ToggleButtonStyle" TargetType="{x:Type ToggleButton}">
<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
<Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
<Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" SnapsToDevicePixels="true"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
RenderDefaulted="{TemplateBinding Button.IsDefaulted}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
RecognizesAccessKey="True"/>
</Microsoft_Windows_Themes:ButtonChrome>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

I would have to guess that there is a style somewhere defining the behavior for the text (TextBlock).
You can achieve the same by using the following style for the path:
<ToggleButton Grid.Column="0" x:Name="PauseButton">
<ToggleButton.Content>
<Path Name="PauseIcon" Data="M0,0 0,27 8,27 8,0z M14,0 14,27 22,27 22,0">
<Path.Style>
<Style TargetType="{x:Type Path}">
<Setter Property="Fill" Value="White"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=PauseButton, Path=IsChecked}" Value="True">
<Setter Property="Fill" Value="Black"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Path.Style>
</Path>
</ToggleButton.Content>
</ToggleButton>

Try using VisualStates in your style, You can do it very easily with Expression Blend.
At the end of my post is an example of my style where I put the foreground of my content presenter on another color when it is disabled.
The single difference between a Button and ToggleButton is that is has a Toggled-state where you'll have to add a state and change your foreground.
The state will look somewhat like this :
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
<EasingColorKeyFrame KeyTime="0" Value="#FF7052A8"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimation Duration="0" To="#FFbab0c7" Storyboard.TargetName="contentPresenter"
Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" />
</Storyboard>
</VisualState>
So this a an example of my Button-style. Just create your own and assign it to your ToggleButton.
<Style TargetType="{x:Type Button}">
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<ColorAnimation Duration="0" To="White" Storyboard.TargetName="contentPresenter"
Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" />
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
<EasingColorKeyFrame KeyTime="0" Value="#FF532B8C"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)" Storyboard.TargetName="contentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static HorizontalAlignment.Center}"/>
</ObjectAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
<EasingColorKeyFrame KeyTime="0" Value="#FF6137ae"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
<EasingColorKeyFrame KeyTime="0" Value="#FF7052A8"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimation Duration="0" To="#FFbab0c7" Storyboard.TargetName="contentPresenter"
Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="rectangle" Fill="#FF371C69" RadiusX="10" RadiusY="10"/>
<ContentPresenter x:Name="contentPresenter" HorizontalAlignment="Center" Margin="0" VerticalAlignment="Center"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" Value="true"/>
<Trigger Property="ToggleButton.IsChecked" Value="true"/>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Try do next:
<ToggleButton Grid.Column="0" x:Name="PauseButton">
<ToggleButton.Content>
<Path Name="PauseIcon" Fill="{Binding ElementName=PauseButton, Path=Foreground}"
Data="M0,0 0,27 8,27 8,0z M14,0 14,27 22,27 22,0" />
</ToggleButton.Content>
</ToggleButton>
It should work.

WPF: Change background color of border on left mouse button down

Below is a style I use for buttons in my application. Now I'm trying to change the background color of the Border element that has the name "Background" when the user clicks the button with the left mouse button.
How do I do that?
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border BorderBrush="#6e6964" BorderThickness="1" CornerRadius="1" Margin="{TemplateBinding Margin}" SnapsToDevicePixels="True">
<Border BorderBrush="White" BorderThickness="1" CornerRadius="1" SnapsToDevicePixels="True">
<Border Padding="12,4,12,4" SnapsToDevicePixels="True" Name="Background">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="#f1f1f1" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</Border>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="#edf8fb"/>
<GradientStop Offset="1" Color="#e2edf0"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

You just need the following property trigger:
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" TargetName="Background" Value="Red"/>
</Trigger>
</ControlTemplate.Triggers>

You need an EventTrigger
Give one or both of your Border's GradientStops a name (not the ones in your Trigger):
<GradientStop Color="#f1f1f1" Offset="1" x:Name="Stop2" />
And add in the following EventTrigger to your ControlTemplate.Triggers:
<EventTrigger RoutedEvent="Button.Click">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="Stop2" Storyboard.TargetProperty="Color" To="Red" Duration="0" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
If you want to modify both of your gradient stops be sure to give them both a name and perform a ColorAnimation on each one individually (I think you can do them both in the same storyboard)
Hope it helps!
Edit: This will make the change permanent on a Click event (I tested with VS 2010 Beta 2 and Button.MouseLeftButtonDown doesn't work but Button.Click only works for mouse left button down but not mouse right button down). If you only wish to have the change while the mouse is down... but return to a normal value when the button is no longer pressed... then you should use the IsPressed Property Trigger as noted in the another answer.

Categories

Resources