Question

我已经创建了一个按钮控件模板，我希望在xaml级别更改按钮的发光颜色。这就是我的意思。

<Button x:Name="btnClose" Template="{DynamicResource GlassButton}" Width="32" Height="32" GlowStartColor="Red" GlowEndColor="DarkRed">Button1</Button>

GlowStartColor和GlowEndColor是我想在控件模板上更改的属性。

这是我的控制模板

    <ControlTemplate x:Key="DefaultGlassButton" TargetType="{x:Type Button}">
    <!-- Internal Resources -->
    <ControlTemplate.Resources>
        <Storyboard x:Key="Storyboard1" RepeatBehavior="Forever" AutoReverse="True">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Glow" Storyboard.TargetProperty="(UIElement.Opacity)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1"/>
                <SplineDoubleKeyFrame KeyTime="00:00:00.7000000" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Glow" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                <SplineColorKeyFrame KeyTime="00:00:00.3000000" Value="#00C080FF"/>
                <SplineColorKeyFrame KeyTime="00:00:00.7000000" Value="#00C080FF"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="Storyboard2">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Glow" Storyboard.TargetProperty="(UIElement.Opacity)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0.745"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </ControlTemplate.Resources>

    <!-- Actual Control Template-->
    <Border x:Name="OuterBorder" BorderBrush="#FFFFFFFF" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4">
        <Border x:Name="InnerBorder" Background="#7F000000" BorderBrush="#FF000000" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4">
            <Grid x:Name="MainGrid">
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.5*"/>
                    <RowDefinition Height="0.5*"/>
                </Grid.RowDefinitions>
                <Border x:Name="Glow" HorizontalAlignment="Stretch" Width="Auto" Opacity="0" Grid.RowSpan="2" CornerRadius="4,4,4,4">
                    <Border.Background>
                        <RadialGradientBrush>
                            <RadialGradientBrush.RelativeTransform>
                                <TransformGroup>
                                    <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.852" ScaleY="2.281"/>
                                    <SkewTransform AngleX="0" AngleY="0" CenterX="0.5" CenterY="0.5"/>
                                    <RotateTransform Angle="0" CenterX="0.5" CenterY="0.5"/>
                                    <TranslateTransform X="0.014" Y="0.458"/>
                                </TransformGroup>
                            </RadialGradientBrush.RelativeTransform>
                            <GradientStop x:Name="GlowStartColor" Color="#B1FF80FF" Offset="0"/>
                            <GradientStop x:Name="GlowEndColor" Color="#00C080FF" Offset="1"/>
                        </RadialGradientBrush>
                    </Border.Background>
                </Border>
                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Grid.RowSpan="2"/>
                <Border x:Name="Shine" HorizontalAlignment="Stretch" Margin="0,0,0,0" CornerRadius="4,4,0,0">
                    <Border.Background>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop x:Name="ShineStartColor" Color="#99FFFFFF" Offset="0"/>
                            <GradientStop x:Name="ShineEndColor" Color="#26FFFFFF" Offset="1"/>
                        </LinearGradientBrush>
                    </Border.Background>
                </Border>
            </Grid>
        </Border>
    </Border>

    <!-- Triggers -->
    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
        </Trigger>
        <Trigger Property="IsMouseOver" Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
            </Trigger.EnterActions>
            <Trigger.ExitActions>
                <BeginStoryboard x:Name="Storyboard2_BeginStoryboard" Storyboard="{StaticResource Storyboard2}"/>
            </Trigger.ExitActions>
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
            <Setter Property="Opacity" TargetName="Shine" Value="0.4"/>
            <Setter Property="Background" TargetName="InnerBorder" Value="#CC000000"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

这是正确的方法，还是有更好的方法？对于WPF和XAML来说还是比较新的，所以仍然有很多学习要做。

Answer 1

您需要将Button子类化并添加这两个属性，或者将这两个属性添加为附加属性（通过创建具有两个附加依赖项属性的新类）。

Answer 2

我最近不得不做类似的事情。事实证明，您可以捎带已在控件上定义的其他属性。因此，如果您的新模板没有使用TemplateBinding代替Foreground和Background，那么您可以将开始/停止发光颜色粘贴在那里。所有控件上的Tag属性通常都是空的。

值得研究这些选项作为子类化控件的替代方法。如果控件模板只有一个自定义参数，则重用现有属性通常很简单且通常很自然。

Answer 3

据我所知，您希望在模板中绑定发光颜色以在控件上发光属性。你可以这样做：

<GradientStop x:Name="GlowStartColor" Color="{TemplateBinding GlowStartColor}" Offset="0"/>
<GradientStop x:Name="GlowEndColor" Color="{TemplateBinding GlowEndColor}" Offset="1"/>

Answer 4

我也无法使上述工作正常。我认为它在正确的轨道上。我只想在定义按钮时能够设置发光属性。唯一的另一种方法是对按钮进行自定义控制，但添加一些额外的属性似乎有点过分。

在XAML中设置控件模板的属性

4 个答案: