我正在使用自定义模板创建多个按钮。每个按钮都绑定到不同的缩略图图像,但我希望它们都具有相同的视觉状态。我创建了 customButtonStyle 样式,并且每个其他按钮都将继承此样式。然而,似乎视觉状态不是从 customButtonStyle 继承的。
关于为什么它不会继承视觉状态的任何想法?以及如何将每个按钮设置为自己的缩略图?
提前致谢。
以下是我的代码:
<Style x:Key="customButtonStyle" TargetType="Button">
<Setter Property="Background" Value="{StaticResource ApplicationButtonBackgroundBrush}"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="ControlRoot" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<!--Take one half second to transition to the MouseOver state.-->
<VisualTransition To="MouseOver" GeneratedDuration="0:0:0.3"/>
<!-- From Button Press to Normal -->
<VisualTransition From="Pressed" To="Normal">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="ControlRoot">
<EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="0.85"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.367" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<ExponentialEase EasingMode="EaseOut" Exponent="3"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="ControlRoot">
<EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="0.85"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.367" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<ExponentialEase EasingMode="EaseOut" Exponent="3"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<!-- Dpad focus on button-->
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="ControlRoot">
<EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="0.85"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.367" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<ExponentialEase EasingMode="EaseOut" Exponent="3"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="ControlRoot">
<EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="0.85"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.367" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<ExponentialEase EasingMode="EaseOut" Exponent="3"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<!-- Button Press-->
<VisualState x:Name="Pressed"/>
<!-- Disabled -->
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ControlRoot"/>
</Storyboard>
</VisualState>
<!-- End of stateGrouop -->
</VisualStateGroup>
<!-- Focus states -->
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="FocusVisualElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="FocusFill">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<!-- Draw border around button that is in focus -->
<Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<Grid>
<!--<Image x:Name="ButtonImage" Width="208" Height="156" Source="{Binding tile1}"/>-->
<Rectangle x:Name="FocusFill" Fill="{StaticResource ApplicationButtonHoverBackgroundBrush}" Visibility="Collapsed"/>
<Rectangle x:Name="MouseOverFill" Fill="{StaticResource ApplicationButtonHoverBackgroundBrush}" Visibility="Collapsed"/>
</Grid>
</Border>
<Border x:Name="FocusVisualElement" IsHitTestVisible="false" Visibility="Collapsed" BorderBrush="{StaticResource ApplicationButtonFocusBackgroundBrush}" BorderThickness="5" Margin="-2.5"/>
<Border x:Name="MouseOverVisualElement" IsHitTestVisible="false" Visibility="Collapsed" BorderBrush="{StaticResource ApplicationButtonFocusBackgroundBrush}" BorderThickness="5" Margin="-2.5"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
///////////////////////////
<Style x:Key="tile6" TargetType="Button" BasedOn="{StaticResource customButtonStyle}">
<Setter Property="BorderThickness" Value="3"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="0,0,1,1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Image x:Name="ButtonImage" Width="208" Height="156" Source="{Binding tile1}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
答案 0 :(得分:1)
没有。正如您自己可以看到的那样,视觉状态存在于控件模板中,并且您提供了一个全新的视觉状态。
您可以尝试将状态作为资源放置并从每个模板引用它们,但我会建议不要这样做。由于您有两个单独的模板,因此它们很可能在某个阶段进行分叉,其中重用将不是一个选项。恕我直言,最好只复制它们。也会让Blend的生活变得更轻松。