[C#] WPF Button 이미지

 

WPF Button에 이미지 설정하는 방법

WPF Button 이미지 설정하기

안녕하세요~

WPF에서 버튼의 상태에 따라 이미지가 변경되도록 설정할 수 있습니다. Trigger를 사용하면 버튼에 마우스를 올리거나 클릭하거나 비활성화되는 상태에 따라 별도의 이미지를 적용할 수 있습니다.

Trigger를 사용한 이미지 변경

다음은 각 상태에 맞는 이미지를 버튼에 적용하는 방법입니다. 버튼의 IsMouseOver, IsPressed, IsEnabled</strong 속성을 트리거로 사용하여 이미지 소스를 변경합니다.

<Trigger Property="IsMouseOver" Value="True">
    <Setter Property="Source" Value="/sample;component/close_over.png" TargetName="buttonClose"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
    <Setter Property="Source" Value="/sample;component/close_press.png" TargetName="buttonClose"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
    <Setter Property="Source" Value="/sample;component/close_disable.png" TargetName="buttonClose"/>
</Trigger>

위 예제에서 IsMouseOver가 True일 때, 버튼에 마우스를 올리면 close_over.png 이미지가 버튼에 표시됩니다.

전체 코드 예시

아래는 위의 트리거를 적용한 전체 코드 예시입니다.

<Button Content="x" Height="10" HorizontalAlignment="Left" Margin="5,5,0,0" Name="close" VerticalAlignment="Top" Width="10">
	<Button.Style>
		<Style TargetType="{x:Type Button}">
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="{x:Type Button}">
						<StackPanel Orientation="Horizontal" >
							<Image Name="buttonClose" Source="/sample;component/close_normal.png" />
						</StackPanel>
						<ControlTemplate.Triggers>
							<Trigger Property="IsMouseOver" Value="True">
								<Setter Property="Source" Value="/sample;component/close_over.png" TargetName="buttonClose"/>
							</Trigger>
							<Trigger Property="IsPressed" Value="True">
								<Setter Property="Source" Value="/sample;component/close_press.png" TargetName="buttonClose"/>
							</Trigger>
							<Trigger Property="IsEnabled" Value="False">
								<Setter Property="Source" Value="/sample;component/close_disable.png" TargetName="buttonClose"/>
							</Trigger>
						</ControlTemplate.Triggers>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
	</Button.Style>
</Button>

위 코드는 버튼의 각 상태에 맞는 이미지를 설정하며, IsMouseOver가 True일 때, IsPressed가 True일 때, IsEnabled가 False일 때 각각 다른 이미지를 설정합니다.

Property Trigger 종류

다음은 WPF에서 자주 사용하는 트리거 종류입니다.

<Trigger Property="IsMouseOver" Value="True">
    <Setter Property="Background" Value="Blue"/>
</Trigger>

<Trigger Property="IsPressed" Value="True">
    <Setter Property="Background" Value="Green"/>
</Trigger>


<Trigger Property="IsEnabled" Value="False">
    <Setter Property="Opacity" Value="0.5"/>
</Trigger>


<Trigger Property="IsFocused" Value="True">
    <Setter Property="BorderBrush" Value="Red"/>
</Trigger>


<Trigger Property="IsDefault" Value="True">
    <Setter Property="FontWeight" Value="Bold"/>
</Trigger>

각 트리거는 버튼의 다양한 상태에 맞춰 버튼의 스타일을 동적으로 변경하는 데 유용합니다.