You could define attached properties for the background images for states Normal, MouseOver and Pressed (and maybe more). You would use these attached properties for the Source
property of separate Image controls in a control template and modify e.g. the Image's Opacity when the VisualState changes.
An example style:
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="mouseOverBackgroundImage" Storyboard.TargetProperty="Opacity" Duration="0:0:0.1" To="1"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="pressedBackgroundImage" Storyboard.TargetProperty="Opacity" Duration="0:0:0.1" To="1"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Image Name="normalBackgroundImage" Source="{TemplateBinding local:BackgroundImages.NormalBackgroundImage}"/>
<Image Name="mouseOverBackgroundImage" Source="{TemplateBinding local:BackgroundImages.MouseOverBackgroundImage}" Opacity="0"/>
<Image Name="pressedBackgroundImage" Source="{TemplateBinding local:BackgroundImages.PressedBackgroundImage}" Opacity="0"/>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
used in a Button with the attached properties set:
<Button local:BackgroundImages.NormalBackgroundImage="C:UsersPublicPicturesSample PicturesTulips.jpg"
local:BackgroundImages.MouseOverBackgroundImage="C:UsersPublicPicturesSample PicturesDesert.jpg"
local:BackgroundImages.PressedBackgroundImage="C:UsersPublicPicturesSample PicturesPenguins.jpg"
Content="Hello"/>
And finally the definition of those attached properties:
public static class BackgroundImages
{
public static readonly DependencyProperty NormalBackgroundImageProperty =
DependencyProperty.RegisterAttached("NormalBackgroundImage", typeof(ImageSource), typeof(BackgroundImages));
public static readonly DependencyProperty MouseOverBackgroundImageProperty =
DependencyProperty.RegisterAttached("MouseOverBackgroundImage", typeof(ImageSource), typeof(BackgroundImages));
public static readonly DependencyProperty PressedBackgroundImageProperty =
DependencyProperty.RegisterAttached("PressedBackgroundImage", typeof(ImageSource), typeof(BackgroundImages));
public static ImageSource GetNormalBackgroundImage(DependencyObject obj)
{
return (ImageSource)obj.GetValue(NormalBackgroundImageProperty);
}
public static void SetNormalBackgroundImage(DependencyObject obj, ImageSource value)
{
obj.SetValue(NormalBackgroundImageProperty, value);
}
public static ImageSource GetMouseOverBackgroundImage(DependencyObject obj)
{
return (ImageSource)obj.GetValue(MouseOverBackgroundImageProperty);
}
public static void SetMouseOverBackgroundImage(DependencyObject obj, ImageSource value)
{
obj.SetValue(MouseOverBackgroundImageProperty, value);
}
public static ImageSource GetPressedBackgroundImage(DependencyObject obj)
{
return (ImageSource)obj.GetValue(PressedBackgroundImageProperty);
}
public static void SetPressedBackgroundImage(DependencyObject obj, ImageSource value)
{
obj.SetValue(PressedBackgroundImageProperty, value);
}
}
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…