WPF를 사용하면 사용자 정의 버튼 컨트롤의 배경을 업데이트하는 가장 좋은 방법은 무엇입니까?

Question

WPF에서는 스크래치 XAML 그래픽으로 완전히 그려진 버튼에서 상속되는 사용자 정의 컨트롤을 만들고 있습니다. 전체 버튼 XAML 주위에 테두리가 있으며 마우스 오버 = 트리거에서 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>

더 많은 도움이 필요하면 알려주세요.