在PointerOver上更改Button的边框颜色

时间:2014-12-09 19:06:58

标签: wpf windows-8.1

我有一个带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>

但它返回的错误太多了。例如,&#34;属性VisualTree只能定义一次&#34;。我该如何解决?

1 个答案:

答案 0 :(得分:1)

您收到错误,因为ControlTemplate有两个根元素BorderVisualStateManager。您需要设置VisualStateManager,而不是VisualStateManager.VisualStateGroups,而是需要根据ControlTemplate的根元素进行设置,以便将其移至Border或创建,例如Grid 1}}围绕BorderVisualStateManager.VisualStateGroups

<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>