WPF - кнопка с рамкой, изображением и триггером на IsPressed - PullRequest
Новая
       27

WPF - кнопка с рамкой, изображением и триггером на IsPressed

1 голос
/ 02 марта 2020

Я пытаюсь реализовать кнопку с рамкой и изображением внутри: 

      <Button Style="StaticResource HomeButton}">
        <Image Source="{StaticResource icon_1}" Stretch="Uniform" Margin="10"/>
    </Button>

, и это стиль (HomeBorder просто устанавливает BorderBru sh, BorderThickness и CornerRadius): 

<Style TargetType="{x:Type Button}" x:Key="HomeButton">
    <Setter Property="Background" Value="Black" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Style="{StaticResource HomeBorder}" x:Name="ButtonBorder">
                        <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}"
                                      Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" 
                                      Margin="{TemplateBinding Margin}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                        </ContentPresenter>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="Button.IsPressed" Value="True">
                        <Setter TargetName="ButtonBorder" Property="Background"
                                    Value="{StaticResource  HMIOrange}" />
                    </Trigger>
                    <Trigger Property="Button.IsMouseOver" Value="True">
                        <Setter TargetName="ButtonBorder" Property="Background"
                                    Value="{StaticResource  HMIOrange}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Проблема в том, что он меняет цвет фона, только если я щелкаю (или я go с помощью мыши) линию границы или изображение. Я пробовал множество обходных путей, таких как: 

<Button x:Name="btnProva" Background="Transparent"
            HorizontalContentAlignment="Stretch"
            VerticalContentAlignment="Stretch">
        <Border>
            <Image Source="{StaticResource icon_1}" Stretch="Uniform" Margin="10"/>
            <Border.Style>
                <Style TargetType="{x:Type Border}" >
                    <Setter Property="Background" Value="Transparent"/>
                    <Setter Property="BorderBrush" Value="White"/>
                    <Setter Property="BorderThickness" Value="2"/>
                    <Setter Property="CornerRadius" Value="20"/>
                    <Style.Triggers>
                        <Trigger Property="Button.IsPressed" Value="True">
                            <Setter Property="Background" Value="Yellow"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Border.Style>
        </Border>
    </Button>

... в этом случае IsMouseOver работает, но триггер IsPressed меняет цвет в пределах границы.

1 Ответ

1 голос
/ 02 марта 2020

Вам необходимо обновить ButtonBorder с привязкой свойства Background: 

<Border x:Name="ButtonBorder"
    Background="{TemplateBinding Background}" <--- RIGHT HERE
    Style="{StaticResource HomeBorder}">
    <ContentPresenter x:Name="contentPresenter"
        Margin="{TemplateBinding Margin}"
        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
        VerticalAlignment="{TemplateBinding VerticalAlignment}"
        Content="{TemplateBinding Content}"
        ContentTemplate="{TemplateBinding ContentTemplate}" />
</Border>
...