0

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 はまだかなり新しいので、まだ学ぶことがたくさんあります。

4

4 に答える 4

2

私は最近似たようなことをしなければなりませんでした。コントロールで既に定義されている他のプロパティをピギーバックできることがわかりました。TemplateBindingしたがって、たとえば、新しいテンプレートで s for を使用しない場合は、開始/停止のグロー カラーForegroundをBackgroundそこに貼り付けることができます。Tag通常は空のすべてのコントロールのプロパティもあります。

コントロールをサブクラス化する代わりに、これらのオプションを調べる価値があります。コントロール テンプレートへのカスタム パラメーターが 1 つしかない場合、通常は単純で、既存のプロパティを再利用するのが自然です。

于 2009-02-18T08:33:33.720 に答える
2

Button をサブクラス化してこれら 2 つのプロパティを追加するか、これら 2 つのプロパティを添付プロパティとして追加する必要があります (2 つの依存関係プロパティを持つ新しいクラスを作成することによって)。

于 2009-02-11T12:44:56.390 に答える
0

私が理解している限り、テンプレートのグローカラーをコントロールのグロープロパティにバインドする必要があります。あなたはこのようにそれを行うことができます：

<GradientStop x:Name="GlowStartColor" Color="{TemplateBinding GlowStartColor}" Offset="0"/>
<GradientStop x:Name="GlowEndColor" Color="{TemplateBinding GlowEndColor}" Offset="1"/>
于 2009-02-10T08:56:50.383 に答える
0

上記も正しく動作させることができませんでした。私が思うに、それは正しい軌道に乗っています。ボタンを定義するときにグロー プロパティを設定できるようにしたかっただけです。これを行う唯一の他の方法は、ボタンのカスタム コントロールを作成することですが、いくつかの追加のプロパティを追加するだけでは少し過剰に思えます。

于 2009-02-10T11:45:55.743 に答える