Mouse Button / Button Style Pressed Button

Question

I have a button and I want to create a rollover animation effect and color on it. But I could not open the file using Expression Blend. Is there a way to style a button on the current XAML page instead of pasting everything into the control base?

I want the color fade effect when the user rolls to black, and when the user clicks, disappears to white. That's what i still have

<Button Content="SOS" Foreground="White" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Width="400" Margin="10,0,0,0" Background="#AE193E" Padding="0" BorderThickness="0" FontSize="36" FontFamily="Calibri" FontWeight="Normal" /> 

Answer 1

Well, I found it = D

 <Page.Resources> <Style x:Key="CustomButtonStyle" TargetType="Button"> <Setter Property="Background" Value="Orange"/> <Setter Property="Foreground" Value="Black"/> <Setter Property="FontFamily" Value="Comic Sans MS"/> <Setter Property="FontSize" Value="30"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"/> <VisualState x:Name="PointerOver"> <Storyboard> <ColorAnimation Duration="0" To="LightGray" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Border" /> </Storyboard> </VisualState> <VisualState x:Name="Pressed"> <Storyboard> <ColorAnimation Duration="0" To="Black" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Border" /> <ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Content" /> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Grid> <Rectangle x:Name="Border" Stroke="Black" Fill="Orange" Margin="-5"/> <ContentPresenter x:Name="Content"/> </Grid> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </Page.Resources> 

and add this short short code to the button there

 Style="{StaticResource CustomButtonStyle}" 

Now only on the example of the aps metro ...

Answer 2

 <Button Content="SOS" Foreground="White" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Width="400" Margin="10,0,0,0" Background="#AE193E" Padding="0" BorderThickness="0" FontSize="36" FontFamily="Calibri" FontWeight="Normal"> <Button.Style> <Style TargetType="{x:Type Button}"> <Style.Triggers> <!--user rollover fade to black--> <EventTrigger RoutedEvent="MouseEnter"> <BeginStoryboard> <Storyboard> <ColorAnimation Storyboard.TargetProperty="Background.Color" From="#AE193E" To="Black" Duration="0:0:1" /> </Storyboard> </BeginStoryboard> </EventTrigger> <!--when user click, fade to white....--> <EventTrigger RoutedEvent="MouseDown"> <BeginStoryboard> <Storyboard> <ColorAnimation Storyboard.TargetProperty="Background.Color" From="Black" To="White" Duration="0:0:0.1" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Style.Triggers> </Style> </Button.Style> </Button>