Question

我创建了带有样式的按钮但是在创建按钮样式后它失去了按钮的默认效果，当我直接将属性放在按钮中时，我会得到那些默认效果，就像我点击时我可以看到蓝色背景。我也试着放可视化管理器，但它无法正常工作。请有人帮助我知道我做错了什么

我的按钮样式：

<Style TargetType="Button" x:Key="MenuButtonStyle">
  <Setter Property="HorizontalAlignment" Value="Stretch"/>
  <Setter Property="Foreground" Value="Black"/>
  <Setter Property="FontFamily" Value="Sitka Heading"/>
  <Setter Property="FontSize" Value="20"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="Button">
        <Grid>
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
              <VisualState x:Name="Normal"/>
              <VisualState x:Name="Pressed">
                <Storyboard>
                  <ColorAnimation Duration="0" Storyboard.TargetName="ButtonTextElement"
                                  Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
                                  To="Blue"/>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" 
                                                 Storyboard.TargetName="normalImage">
                    <DiscreteObjectKeyFrame KeyTime="0">
                      <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                      </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" 
                                                 Storyboard.TargetName="mouseOverImage">
                    <DiscreteObjectKeyFrame KeyTime="0">
                      <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                      </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="MouseOver">
                <Storyboard>
                  <ColorAnimation Duration="0" Storyboard.TargetName="ButtonTextElement"
                                  Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
                                  To="Blue"/>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" 
                                                 Storyboard.TargetName="normalImage">
                    <DiscreteObjectKeyFrame KeyTime="0">
                      <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                      </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" 
                                                 Storyboard.TargetName="mouseOverImage">
                    <DiscreteObjectKeyFrame KeyTime="0">
                      <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                      </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
          <Border BorderBrush="Black" BorderThickness="0,0,0,0.5" Margin="30,0,0,0"
                  Grid.ColumnSpan="2"/>
          <TextBlock x:Name="ButtonTextElement" 
                     Text="{TemplateBinding Content}" Margin="30,0"
                     Foreground="{TemplateBinding Foreground}" Grid.Column="0" 
                     VerticalAlignment="{TemplateBinding VerticalAlignment}" />
          <Image x:Name="normalImage" Source="/Assets/menu-arrow-left.png" 
                 Grid.Column="1" Stretch="None" HorizontalAlignment="Right"
                 Margin="0,0,30,0" />
          <Image x:Name="mouseOverImage" Source="/Assets/menu-arrow-left-hover.png"
                 Grid.Column="1" Stretch="None" HorizontalAlignment="Right" 
                 Visibility="Collapsed" Margin="0,0,30,0" />
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

我也像这样改变VisualStateManager

<ColorAnimation Storyboard.TargetName="MouseOverVisualElement" 
                            Storyboard.TargetProperty="TextBlock.Foreground" To="Red" />

My Button Tag

<Button Style="{StaticResource MenuButtonStyle}" Content="Home"/>

Answer 1

请参阅此页：

https://msdn.microsoft.com/en-us/library/cc278069(VS.95).aspx

并看到此页面： http://samples.msdn.microsoft.com/Silverlight/SampleBrowser/index.htm#/?sref=CustomTemplateSamples&id=4

有一个带有模板的鼠标悬停的样本

Answer 2

确保VisualStateManager.VisualStateGroups是ControlTemplate的根元素的直接子元素。在您的示例中，您的根元素是Border，因此将VisualStateManager内容直接放在Border标记下。

Silverlight按钮Mouse Over就像悬停效果一样

2 个答案: