所以我在Silverlight中有一些按钮是用图片制作的。在每种情况下,按钮都有一个常规图像和一个悬停图像。我用Blend让悬停图像在悬停时淡入超过.15秒。
问题是我再也无法理解如何访问这些图像,因为它们嵌入在样式中。
因此,我为每个按钮都有一个单独的样式,而不是一个带有两个可交换图像的用户控件。
我还有一组两个按钮:全屏和退出全屏。在这种情况下,悬停图像会卡住:
-
按全屏。退出全屏按钮现在位于不同的位置。
-
按退出全屏。全屏按钮回到原来的位置。即使鼠标不在按钮上,也会显示悬停动画。
代码:
<Style x:Key="ExitFullScreenButton" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused"/>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="00:00:00.1500000" To="MouseOver"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Image Source="Images/ControlBar/exitFullScreenButton.png"/>
<Image x:Name="image" Opacity="0" Source="Images/ControlBar/exitFullScreenButtonHover.png"/>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="" ToolTipService.ToolTip="Full Screen"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Button x:Name="ExitFullScreenButton" Click="ExitFullScreenButton_Click" Canvas.Top="14"
Style="{StaticResource ExitFullScreenButton}"
Width="32" Content="Button" Visibility="Collapsed"/>