更改 PointerOver 上 Button 的边框颜色答案

【问题标题】：Change border color of Button on PointerOver更改 PointerOver 上 Button 的边框颜色
【发布时间】：2014-12-10 03:22:28
【问题描述】：

我有一个带有 ControlTemplate 的按钮：

<Page.Resources>
        <ControlTemplate x:Key="ButtonTemplate" TargetType="Button">
            <Border BorderBrush="Orange" BorderThickness="3" CornerRadius="2">
                <Border.Background>
                    <LinearGradientBrush>
                        <GradientStopCollection>
                            <GradientStop Offset="0" Color="LimeGreen"></GradientStop>
                            <GradientStop Offset="1" Color="LightBlue"></GradientStop>
                        </GradientStopCollection>
                    </LinearGradientBrush>
                </Border.Background>
                <ContentPresenter Content="{TemplateBinding Content}" />
            </Border>
        </ControlTemplate>
    </Page.Resources>

<Button Margin="10" Width="110" Padding="5" Height="30"                   
                    Template="{StaticResource ButtonTemplate}">Test</Button>

现在我想在鼠标指针悬停在按钮上时更改边框颜色。
这是我的版本：

<Page.Resources>
    <ControlTemplate x:Key="ButtonTemplate" TargetType="Button">
        <Border x:Name="Border"  BorderBrush="Orange" BorderThickness="3" CornerRadius="2">
            <Border.Background>
                <LinearGradientBrush>
                    <GradientStopCollection>
                        <GradientStop Offset="0" Color="LimeGreen"></GradientStop>
                        <GradientStop Offset="1" Color="LightBlue"></GradientStop>
                    </GradientStopCollection>
                </LinearGradientBrush>
            </Border.Background>
            <ContentPresenter Content="{TemplateBinding Content}" /> 
        </Border>
        <VisualStateManager>
            <VisualStateGroup>
                <VisualState x:Name="PointerOver">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames
                            Storyboard.TargetName="Border"
                            Storyboard.TargetProperty="BorderBrush">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Blue" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager>
    </ControlTemplate>
</Page.Resources>

但它返回的错误太多。例如，“属性 VisualTree 只能定义一次”。我该如何解决？

【问题讨论】：

它在抱怨，因为模板同时具有Border 和VisualStateManager。而不是VisualStateManager 标签尝试使用VisualStateManager.VisualStateGroups 标签
谢谢。错误消息消失了，但在这种情况下我看不到我的按钮。
VisualStateManager.VisualStateGroups 必须针对ControlTemplate 的根元素设置，因此需要将其移动到Border，或者，例如，在Border 和VisualStateManager.VisualStateGroups 周围创建一个Grid跨度>
谢谢。有用。你能把它写成答案，我会接受吗？

标签： wpf windows-8.1

【解决方案1】：

您收到错误是因为 ControlTemplate 有 2 个根元素 Border 和 VisualStateManager。而不是VisualStateManager，您需要设置VisualStateManager.VisualStateGroups，并且需要针对ControlTemplate 的根元素设置它，因此要么将其移动到Border，要么在Border 和@ 周围创建例如Grid 987654330@

<ControlTemplate x:Key="ButtonTemplate" TargetType="Button">
   <Grid>
      <Border x:Name="Border"  BorderBrush="Orange" BorderThickness="3" CornerRadius="2">
         <Border.Background>
            <LinearGradientBrush>
               <GradientStopCollection>
                  <GradientStop Offset="0" Color="LimeGreen"/>
                  <GradientStop Offset="1" Color="LightBlue"/>
               </GradientStopCollection>
            </LinearGradientBrush>
         </Border.Background>
         <ContentPresenter Content="{TemplateBinding Content}" /> 
      </Border>
      <VisualStateManager.VisualStateGroups>
         <VisualStateGroup>
            <VisualState x:Name="PointerOver">
               <Storyboard>
                  <ObjectAnimationUsingKeyFrames
                            Storyboard.TargetName="Border"
                            Storyboard.TargetProperty="BorderBrush">
                     <DiscreteObjectKeyFrame KeyTime="0" Value="Blue" />
                  </ObjectAnimationUsingKeyFrames>
               </Storyboard>
            </VisualState>
         </VisualStateGroup>
      </VisualStateManager.VisualStateGroups>
   </Grid>
</ControlTemplate>

【讨论】：