WPF에서 트리거에 따라 다른 이미지를 가지는 버튼 구현하기.

WPF에서 버튼 구현하는 방법.

 

버튼은 4가지 상태(Normal, Disabled, Mouse over, Pressed)에 대한 트리거를 가지고 있으며,

 

각각에 트리거에 따라 서로 다른 이미지를 디스플레이 함.

 

트리거에 따라 이미지를 교체하는 방법에 대해 정리함.

 

 

각 상태에 따른 이미지는 다음과 같다고 가정

상태	이미지 이름
Normal	Image.png
Disabled	Image_d.png
Mouse over	Image_m.png
Pressed	Image_p.png

이 이미지 이름의 공통된 값은 런타임 인스턴스의 Tag 값에 삽입될 예정이고,

템플릿에서 런타임 인스턴스의 Tag 값과 바인딩하여 원하는 경로로 Convert 한 값을

Image의 Source 값으로 이용할 겁니다.

 

---

1. ResourceDictionary 파일 추가 및 ControlTemplate 구현

    <ControlTemplate x:Key="BASEBTN" TargetType="{x:Type Button}">
        <Grid>
            <Image Name="img" Source="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}, Converter={local:CvrtNomral}}" Stretch="None">
            </Image>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsEnabled" Value="False">
                <Setter TargetName="img" Property="Source" Value="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}, Converter={local:CvrtDisabled}}"/>
            </Trigger>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter TargetName="img" Property="Source" Value="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}, Converter={local:CvrtMover}}"/>
            </Trigger>
            <Trigger Property="IsPressed" Value="True">
                <Setter TargetName="img" Property="Source" Value="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}, Converter={local:CvrtPressed}}"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

 

2. ResourceDictionary를 프로그램 전반에서 사용할 수 있도록 App.xaml에 등록

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Template/ControlTemplate.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

 

3. 버튼 선언 시 Template 이용하면 됩니다.

<Button Name="버튼 식별자" Template="{StaticResource BASEBTN}" Tag="공통 이미지 이름"/>

 

이 때 Converter는 특정 인터페이스를 구현한 상태이고 (OnewayConverter)

 

공통 이미지 이름을 받아서

 

경로+공통이미지이름+트리거에 따른 식별자+확장자 값을 조합하여

 

리턴하는 함수를 가지고 있음.

 

4. 코드(*.cs)에서 OnewayConverter 구현.

    public abstract class OnewayConverter : MarkupExtension, IValueConverter
    {
        public OnewayConverter() { }
        public abstract object Convert(object value, Type targetType, object parameter, CultureInfo culture);
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return new NotImplementedException();
        }
        public override object ProvideValue(IServiceProvider serviceProvider)
        {
            return this;
        }
    }

    public class CvrtNormal : OnewayConverter
    {
        public override object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return "경로+공통이미지이름+트리거에 따른 식별자+확장자 값";
        }
    }
    
    ...

- OnewayConverter 출처 : https://medium.com/@Rando209/wpf-data-binding-with-ivalueconverter-f5e459e03f8e

 

끝.