WPF Button MouseOver 시 하위 컨트롤도 같이 색상변경 질문드립니다.

🖥️ UI/UX 프로그래밍 Q&A WPF Q&A
1

제가 Xaml에서

<Button Style="{StaticResource Button_130x93}">
    <Grid>
        <Image Source="/Images/Test.png" Width="26" Margin="0,0,0,20"/>
        <Label Content="Test이미지" Style="{StaticResource Label_Size20}" FontSize="16" Margin="0,40,0,0"/>
    </Grid>
</Button>

이런식으로 버튼 아래에 이미지와 Label을 넣어놓았는데

Button에 있는 Trigger를 통해 IsMouseOver시 Button의 Background와 BorderBrush 등을 바뀌게 해놨습니다.

<ControlTemplate x:Key="ButtonTemplat" TargetType="Button">
    <Border x:Name="border"
    CornerRadius="3"                
    BorderThickness="1"
    BorderBrush="White"
    Background="Black"
    Padding="0"
        Margin="0,-1"
    SnapsToDevicePixels="true">
        <ContentPresenter x:Name="contentPresenter"
                  Focusable="False"
                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                  Margin="{TemplateBinding Padding}"
                  RecognizesAccessKey="True"
                  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="IsDefaulted" Value="true">
            <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
        </Trigger>
        <Trigger Property="IsMouseOver" Value="true">
            <Setter Property="Background" TargetName="border" Value="red"/>
            <Setter Property="BorderBrush" TargetName="border" Value="red"/>
            <Setter Property="Background" TargetName="border" Value="red"/>
        </Trigger>
        <Trigger Property="IsPressed" Value="true">
            <Setter Property="Background" TargetName="border" Value="#FFC4E5F6"/>
            <Setter Property="BorderBrush" TargetName="border" Value="#FF2C628B"/>
        </Trigger>
        <Trigger Property="IsEnabled" Value="false">
            <Setter Property="Background" TargetName="border" Value="#212730"/>
            <Setter Property="BorderBrush" TargetName="border" Value="#020B11"/>
            <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="#FF838383"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

위에 스타일을 이용해 마우스 오버등을 받고있는데 혹시 버튼 안에 있는 Image와 Label 등의 색상도 button이랑 같이 색상변경하는 방법이 있을까요?

2개의 좋아요
2

현재 구조적으로는 다른 방안으로 접근해야할것같습니다!

<Window
    x:Class="WpfApp6.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="800"
    Height="450"
    mc:Ignorable="d">
    <Window.Resources>
        <ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}">
            <Border
                x:Name="border"
                Margin="0,-1"
                Padding="0"
                Background="{TemplateBinding Background}"
                BorderBrush="White"
                BorderThickness="1"
                CornerRadius="3"
                SnapsToDevicePixels="true">
                <ContentPresenter
                    x:Name="contentPresenter"
                    Margin="{TemplateBinding Padding}"
                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                    Focusable="False"
                    RecognizesAccessKey="True"
                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
            </Border>
            <ControlTemplate.Triggers>
                <!--<Trigger Property="IsDefaulted" Value="true">
                <Setter TargetName="border" Property="BorderBrush" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
                </Trigger>-->
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter Property="Background" Value="red" />
                    <Setter TargetName="border" Property="BorderBrush" Value="red" />
                    <Setter TargetName="border" Property="Background" Value="red" />
                </Trigger>
                <Trigger Property="IsPressed" Value="true">
                    <Setter Property="Background" Value="#FFC4E5F6" />
                    <Setter TargetName="border" Property="BorderBrush" Value="#FF2C628B" />
                </Trigger>
                <Trigger Property="IsEnabled" Value="false">
                    <Setter Property="Background" Value="#212730" />
                    <Setter TargetName="border" Property="BorderBrush" Value="#020B11" />
                    <Setter TargetName="contentPresenter" Property="TextElement.Foreground" Value="#FF838383" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Window.Resources>
    <Grid>
        <Button x:Name="btn" Template="{StaticResource ButtonTemplate}">
            <Label
                Width="100"
                Height="59"
                Background="Blue"
                Content="hihi"
                Foreground="{Binding ElementName=btn, Path=Background, Mode=TwoWay}"
                IsHitTestVisible="False" />
        </Button>
    </Grid>
</Window>

ElementName를 통해 접근하는 방법이 있습니다.
변경되는 것을 보여드리기 위해 Foreground에 바인딩하였습니다. Background로 변경하시면됩니다.!

git repo : https://github.com/lukewire129/WpfApp6.git

3개의 좋아요
3

아! 감사합니다 Foreground를 바인딩해서 가져오는 방법이 있었네요!

2개의 좋아요