Question

I’m a beginner with this and trying to understand how WPF and XAML work. The following snippet is (a trivial modification) from Nathans Unleashed 4.0 book. I inserted it into an Ok button:

<Button.Style>
 <Style TargetType=”{x:Type Button}”>
  <Style.Triggers>
   <Trigger Property=”IsMouseOver” Value=”True”>
    <Setter Property=”Background” Value=”Yellow”/>
   </Trigger>
  </Style.Triggers>
 </Style>
</Button.Style>

When I run this in XAML crunsher and move the mouse over the Ok button, the button does change it’s background color to yellow (fine), but immediately resets the color to it’s original value, even if the mouse stays over the button — why is this? I’d expect it to stay yellow until the mouse is moved away from the button. Is this a problem with XAML crunsher, or is my expectation wrong?

Edit (responding to a comment): here is the complete window, which is taken from Nathan’s book, too:

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="About WPF Unleashed" SizeToContent="WidthAndHeight"
    Background="OrangeRed">
  <StackPanel>
   <Label FontWeight="Bold" FontSize="20" Foreground="White">
    WPF Unleashed (Version 3.0)
   </Label>
   <Label>© 2006 SAMS Publishing</Label>
   <Label>Installed Chapters:</Label>
   <ListBox>
    <ListBoxItem>Chapter 1</ListBoxItem>
    <ListBoxItem>Chapter 2</ListBoxItem>
   </ListBox>
   <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
   <Button MinWidth="75" Margin="10">Help</Button>
   <Button MinWidth="75" Margin="10">
    <Button.Style>
     <Style TargetType="{x:Type Button}">
      <Style.Triggers>
       <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="Background" Value="Yellow"/>
       </Trigger>
      </Style.Triggers>
     </Style>
     </Button.Style>
     OK
     </Button>
    </StackPanel>
   <StatusBar>You have successfully registered this product.</StatusBar>
  </StackPanel>
</Window>

Answer 1

Unfortunatly the fancy hover over animation is built-in to the Button, you will have to override the ControlTemplate to stop this from happening.

 <Button MinWidth="75" Margin="10" FocusVisualStyle="{x:Null}" Content="OK">
            <Button.Style>
                <Style TargetType="{x:Type Button}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type Button}">
                                <Border Name="border" BorderThickness="1" Padding="4,2" BorderBrush="DarkGray" CornerRadius="3" Background="{TemplateBinding Background}">
                                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Name="content"/>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="Yellow"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Button.Style>
        </Button>