silverlightxamlbackground-imageonmouseoverimagebrush

Silverlight Button Background ImageBrush


I have an image

http://savepic.su/2317454.htm

but wnen i try to set button's background like

<UserControl x:Class="System.Windows.Controls.UserControl" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Button x:Name="plus_button" Width="30" Height="25">
    <Button.Background>
        <ImageBrush AlignmentY="Top" Stretch="None" ImageSource="plus_unhover.jpg"></ImageBrush>
    </Button.Background>
</Button>
</UserControl>  

i have
http://savepic.su/2309262.htm
those image in all browsers...
how can i set normal image to background of the button?

and how i can set another image to backgroun onmouseover event of this button in xaml?


Solution

  • I use a style for buttons, like this:

    <Style x:Key="minusButtonStyle" TargetType="Button">
     <Setter Property="ToolTipService.ToolTip" Value="Уменьшить масштаб графика, Ctrl + вниз" />
     <Setter Property="Width" Value="35"/>
     <Setter Property="Template">
      <Setter.Value>
       <ControlTemplate TargetType="Button">
        <Grid>
         <vsm:VisualStateManager.VisualStateGroups>
          <vsm:VisualStateGroup x:Name="CommonStates">
           <vsm:VisualState x:Name="Normal"/>
           <vsm:VisualState x:Name="MouseOver">
            <Storyboard>
             <DoubleAnimation Duration="0" Storyboard.TargetName="hoverImage" Storyboard.TargetProperty="Opacity" To="1"/>
            </Storyboard>
           </vsm:VisualState>
           <vsm:VisualState x:Name="Pressed">
            <Storyboard>
             <DoubleAnimation Duration="0" Storyboard.TargetName="pressedImage" Storyboard.TargetProperty="Opacity" To="1"/>
            </Storyboard>
           </vsm:VisualState>
           <vsm:VisualState x:Name="Disabled">
            <Storyboard>
             <DoubleAnimation Duration="0" Storyboard.TargetName="unactiveImage" Storyboard.TargetProperty="Opacity" To="1"/>
            </Storyboard>
           </vsm:VisualState>
          </vsm:VisualStateGroup>
          <vsm:VisualStateGroup x:Name="FocusStates">
           <vsm:VisualState x:Name="Focused"/>
           <vsm:VisualState x:Name="Unfocused" />
          </vsm:VisualStateGroup>
         </vsm:VisualStateManager.VisualStateGroups>
         <Border x:Name="normalImage" Opacity="1">
          <Border.Background>
           <ImageBrush AlignmentY="Top" Stretch="None" ImageSource="Images/minus_unhover.png" Opacity="1.0"></ImageBrush>
          </Border.Background>
         </Border>
         <Border x:Name="hoverImage" Opacity="0">
          <Border.Background>
           <ImageBrush AlignmentY="Top" Stretch="None" ImageSource="Images/minus_hover.png" Opacity="1.0"></ImageBrush>
          </Border.Background>
         </Border>
         <Border x:Name="pressedImage" Opacity="0">
          <Border.Background>
           <ImageBrush AlignmentY="Top" Stretch="None" ImageSource="Images/minus_pressed.png" Opacity="1.0"></ImageBrush>
          </Border.Background>
         </Border>
         <Border x:Name="unactiveImage" Opacity="0">
          <Border.Background>
           <ImageBrush AlignmentY="Top" Stretch="None" ImageSource="Images/minus_unactive.png" Opacity="1.0"></ImageBrush>
          </Border.Background>
         </Border>
         <ContentPresenter x:Name="contentPresenter" Content="{TemplateBinding Content}"/>
        </Grid>
       </ControlTemplate>
      </Setter.Value>
     </Setter>
    </Style>  
    

    And applying this style to the button:

    <Button x:Name="minus_button" Style="{StaticResource minusButtonStyle}" ClickMode="Release"></Button>  
    

    I think its a best solution, cause you can display what you want on another states and control visible effects.