WPF 버튼 호버, 클릭시 textblock 색 바꾸는 법

안녕하세요. WPF로 버튼을 만드는데 버튼 안에 스택패널로 Image랑 TextBlock을 넣었는데 마우스 호버, 마우스 클릭시 Textblock색과 이미지를 바꾸고 싶은데 어떻게 바꾸는지 모르겠습니다.

image
image

2개의 좋아요

Trigger로 검색해서 나오는 예제들을 위주로 살펴와요.

3개의 좋아요

@dimohy 님 말씀처럼,

WPF Button mouseover trigger 이런식으로 검색해보시면 참고할만한 좋은 내용들이 많이 나옵니다. :+1:

예를들어,


그리고 @gloomn 아래 리소스도 참고바랍니다! :smile:

리소스,

<Style TargetType="{x:Type Button}" x:Key="ButtonStyle1">
    <Setter Property="Background" Value="#FFFFFF"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{xType Button}">
                <Border Background="{TemplateBinding Background}">
                    <StackPanel Orientation="Horizontal">
                        <Image x:Name="img" .../>
                        <TextBlock x:Name="txt" .../>
                    </StackPanel>
                </Border>
                <ControlTemplate.Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="#F1F1F1"/>
                        <Setter TargetName="img" Property="ImageSource" 
                                Value="/Assets/computer.png"/>
                        <Setter TargetName="txt" Property="Text" 
                                Value="Computer"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="Background" Value="#EEEEEE"/>
                        <Setter TargetName="img" Property="ImageSource"
                                Value="/Assets/Desk.png"/>
                        <Setter TargetName="txt" Property="Text" Value="Desk"/>
                    </Trigger>
                </ControlTemplate.Trigger>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

ButtonStyle1 스타일은 App.xaml 같은 곳에서 작성해주시면 됩니다.


스타일 적용,

<Button Style="{StaticResource ButtonStyle1}"/>

이렇게 하시면 Custom 스타일이 적용됩니다!

그리고 제가 예전에 WPF 버튼에 대해 정리해 놓은 Repository도 링크 남겨둘게요.

감사합니다.

4개의 좋아요

그러면 버튼안에 스택패널로 textblock과image를 넣고 버튼을 템플릿을 만들때 트리거로 textblock과 image를 모두 컨트롤 할 수 있는건가요?? 만약 텍스트 색을 바꾼다면 targetname은txt, property를 Foreground로 잡아야 하나요??

2개의 좋아요

말씀하신 내용이 @jamesnet214 님께서 예시로 들어주신 내용으로 해결될 것 같아요.

3개의 좋아요