Style the Mouse Over / User Clicked on Button

Question

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

I want a color fading effect, when the user rolls over fade to black, and when the user clicks, fade to white. Here is what I have so far

<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 this =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 little short code to the button there

Style="{StaticResource CustomButtonStyle}"

Now only found at the metro aps sample there...

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>