Используя WPF, как лучше всего обновить фон для пользовательской кнопки?

Question

В WPF мы создаем собственные элементы управления, которые наследуются от кнопки с полностью нарисованной с нуля графикой XAML.У нас есть граница вокруг всего xaml кнопки, и мы хотели бы использовать ее в качестве места для обновления фона, когда MouseOver=True в триггере.Что нам нужно знать, так это как обновить фон границы этой кнопки градиентом при наведении на нее курсора мыши?

Answer 1

В вашей ControlTemplate, дай Border а 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>

Пожалуйста, дайте мне знать, если вам нужна дополнительная помощь в этом вопросе.