Question

首先，请注意我在Silverlight中执行此操作，因此样式触发器不可用。

我正在尝试创建自定义Button模板。我过去一直避免这样做，所以这是我第一次尝试这样的事情。我想要一个基本透明的按钮。鼠标悬停时，应显示按钮边框。当我点击时，我希望背景变暗。我现在遇到的麻烦就是让BorderBrush在鼠标悬停时改变。

请注意，在我的测试代码中，我开始使用borderbrush，并尝试在鼠标悬停时使其不可见，这与我最终要完成的操作相反。

<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="BorderBrush" />

是我最好的尝试，但我只是收到错误消息“无法解析TargetName BorderBrush。”

另外，我如何从我的LinearGradient开始为我的界面画定义它，但只是将不透明度设置为0（这样我可以在想要它时将其设置为1）。

以下是我的整个模板：

<Style x:Key="ButtonStyle_menu" TargetType="Button">
        <Setter Property="Foreground" Value="#000000"/>
        <Setter Property="Padding" Value="3"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="BorderBrush" >
            <Setter.Value>
                <!--Value="#FF000000"-->
                <LinearGradientBrush>
                    <GradientStop Color="#FFA3AEB9" Offset="0" />
                    <GradientStop Color="#FF8399A9" Offset="0.375" />
                    <GradientStop Color="#FF718597" Offset="0.375" />
                    <GradientStop Color="#FF3C4400" Offset="1" />
                </LinearGradientBrush>
            </Setter.Value>

        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <!--<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="BorderBrush" />-->
                                        <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(frameworkelement.Opacity)" Storyboard.TargetName="BorderBrush" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed"/>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="0.4" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualElement"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unfocused"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                            <Border.Background>
                                <SolidColorBrush Opacity="0" />
                                <!--
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="#FF707070" Offset="0"/>
                                    <GradientStop Color="#FF666666" Offset="0.49"/>
                                    <GradientStop Color="#FF5e5e5e" Offset="0.51"/>
                                    <GradientStop Color="#FF535353" Offset="1"/>
                                </LinearGradientBrush>-->
                            </Border.Background>
                        </Border>
                        <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                            <ContentPresenter.Effect>
                                <DropShadowEffect BlurRadius="3" ShadowDepth="2" Opacity="0.5"/>
                            </ContentPresenter.Effect>
                        </ContentPresenter>
                        <Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" IsHitTestVisible="false" Opacity="0"/>
                        <Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Margin="1" Opacity="0" Stroke="#FF6DBDD1" StrokeThickness="1"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Answer 1

我有类似的东西，鼠标悬停时会出现白色边框，可以轻松修改按下的视觉状态，以便在按钮点击时显示较暗的背景。

 <Style TargetType="Button" x:Name="ButtonStyle4">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Canvas Height="15" VerticalAlignment="Top" Margin="0,0,21,0">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Pressed"/>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ColorAnimation Duration="0" To="#FFFFF6F6" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="Disabled"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Rectangle x:Name="rectangle" Stroke="{StaticResource MenuBarBackground}" Width="84" Height="25">
                            <Rectangle.OpacityMask>
                                <RadialGradientBrush>
                                    <GradientStop Color="Black" Offset="0"/>
                                    <GradientStop Color="White" Offset="1"/>
                                </RadialGradientBrush>
                            </Rectangle.OpacityMask>
                        </Rectangle>
                        <TextBlock x:Name="UnderlineTextBlock" Text="Manage Apps" Margin="2,0,21,0" TextDecorations="Underline"/>
                        <!--<ContentPresenter Name="btnManageApps" Height="25" Width="170" RenderTransformOrigin="0.5,1.367" Content="Manage Apps"/>-->
                    </Canvas>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Foreground" Value="{StaticResource MenuBarButtonTextColour}"/>
    </Style>

希望这有帮助！

Answer 2

我有类似的东西。您遇到的“无法解析TargetName BorderBrush”的问题是因为您没有名为 BorderBrush的元素。 TargetName应该引用元素的名称，而不是属性名称。

这个例子很基本，只是改变了一个元素的一个属性......

<Style x:Key="ButtonStyle" TargetType="Button"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid Height="24" MinHeight="24" MaxHeight="24"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualStateGroup.Transitions> <VisualTransition GeneratedDuration="0:0:0.1"/> </VisualStateGroup.Transitions> <VisualState x:Name="Disabled"/> <VisualState x:Name="Normal"/> <VisualState x:Name="MouseOver"> <Storyboard> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="rectangle" /> </Storyboard> </VisualState> <VisualState x:Name="Pressed"> <Storyboard> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="rectangle" /> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Rectangle x:Name="rectangle" Margin="0" StrokeThickness="0" RadiusX="5" RadiusY="5" Height="24" MinHeight="24" MaxHeight="24" Opacity="0"> <Rectangle.Fill> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FF00A4CB" Offset="0"/> <GradientStop Color="#FF006BA2" Offset="0.991"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <TextBlock x:Name="textBlock" Margin="10,5,10,6" TextWrapping="Wrap" Text="{TemplateBinding Content}" Foreground="White" HorizontalAlignment="Center"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>

当按钮收到mouseover或pressed事件时，这会将名为“rectangle”的元素的opacity属性更改为1。

在ControlTemplate中，只需添加您想要的任何元素（为它们命名），然后连接事件以更改这些元素的属性。

Answer 3

如果要为Background元素的边框粗细设置动画，请尝试以下操作：

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.BorderThickness)">
    <DiscreteObjectKeyFrame KeyTime="00:00:00">
        <DiscreteObjectKeyFrame.Value>
            <Thickness>0</Thickness>
        </DiscreteObjectKeyFrame.Value>
    </DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>

在MouseOver期间更改按钮的BorderBrush

3 个答案: