wpf - WPF を使用して、カスタム ボタン コントロールの背景を更新する最良の方法は何ですか?

Question

WPF では、完全にゼロから描画された xaml グラフィックを使用して、ボタンから継承するカスタム コントロールを作成しています。ボタン xaml 全体を囲む境界線があり、トリガーで MouseOver=True のときに背景を更新する場所としてそれを使用したいと考えています。知っておく必要があるのは、このボタンの上にマウスを置いたときに、このボタンの境界線の背景をグラデーションで更新する方法です。

Answer 1

で、ControlTemplateにBorderaを指定するNameと、トリガーでビジュアルツリーのその部分を参照できます。これは、通常のスタイルを変更する非常に簡単な例ですButton。

<Style
    TargetType="{x:Type Button}">
    <Setter
        Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Name="customBorder"
                    CornerRadius="5"
                    BorderThickness="1"
                    BorderBrush="Black"
                    Background="{StaticResource normalButtonBG}">
                    <ContentPresenter
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center" />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger
                        Property="IsMouseOver"
                        Value="True">
                        <Setter
                            TargetName="customBorder"
                            Property="Background"
                            Value="{StaticResource hoverButtonBG}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

それでも問題が解決しない場合は、さらに詳しく知る必要があります。おそらく、独自のXAMLを確認する必要があります。あなたの説明は、あなたの実際のビジュアルツリーが何であるかを私にはあまり明確にしません。

Answer 2

このようなトリガーを追加したいと思うでしょう...

次のようなスタイルを作成します。

<Style x:Key="ButtonTemplate"
             TargetType="{x:Type Button}">
    <Setter Property="Foreground"
                    Value="{StaticResource ButtonForeground}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate
                TargetType="{x:Type Button}">
                <Grid
                    SnapsToDevicePixels="True"
                    Margin="0,0,0,0">
                    <Border Height="20"
                                    x:Name="ButtonBorder"
                                    BorderBrush="{DynamicResource BlackBorderBrush}">
                        <TextBlock x:Name="button"
                                             TextWrapping="Wrap"
                                             Text="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}"
                                             SnapsToDevicePixels="True"
                                             Foreground="#FFFFFFFF"
                                             Margin="6,0,0,0"
                                             VerticalAlignment="Center"/>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <!-- Disabled -->
                    <Trigger Property="IsMouseOver"
                                     Value="True">
                        <Setter TargetName="ButtonBorder"
                                        Property="Background"
                                        Value="{DynamicResource ButtonBackgroundMouseOver}" />
                        <Setter TargetName="ButtonBorder"
                                        Property="BorderBrush"
                                        Value="{DynamicResource ButtonBorderMouseOver}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

次に、グラデーション用のリソースを次のように追加します。

<LinearGradientBrush x:Key="ButtonBackgroundMouseOver"
                                         EndPoint="0.5,1"
                                         StartPoint="0.5,0">
    <GradientStop Color="#FF000000"
                                Offset="0.432"/>
    <GradientStop Color="#FF808080"
                                Offset="0.9"/>
    <GradientStop Color="#FF848484"
                                Offset="0.044"/>
    <GradientStop Color="#FF787878"
                                Offset="0.308"/>
    <GradientStop Color="#FF212121"
                                Offset="0.676"/>
</LinearGradientBrush>

これについてさらにサポートが必要な場合はお知らせください。