ImageButton 만들기

참고 자료 _ [강좌] ImageButton 만들기, Dependency Property의 이해

1. Blend를 통한 Image 버튼 만들기

2. 동적으로 Image 변경이 가능한 ImageButton 클래스 만들기

3. ImageButton 클래스를 사용하기

1. Blend를 통한 image 버튼 만들기

---

- 참고 자료에 있는 강좌를 보면 Blend를 사용해 손쉽게 Image 버튼을 생성할 수 있다. 생성한 코드를 살펴보면 다음과 같다.

Page.xaml

<UserControl.Resources>

<ControlTemplate x:Key="ImageButtonTemplate" TargetType="Button">

<Grid>

<vsm:VisualStateManager.VisualStateGroups>

<vsm:VisualStateGroup x:Name="FocusStates">

<vsm:VisualState x:Name="Unfocused"/>

<vsm:VisualState x:Name="Focused"/>

</vsm:VisualStateGroup>

<vsm:VisualStateGroup x:Name="CommonStates">

<vsm:VisualState x:Name="MouseOver">

<Storyboard>

<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="NormalButton" Storyboard.TargetProperty="(UIElement.Visibility)">

<DiscreteObjectKeyFrame KeyTime="00:00:00">

<DiscreteObjectKeyFrame.Value>

<Visibility>Collapsed</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="OverButton" Storyboard.TargetProperty="(UIElement.Visibility)">

<DiscreteObjectKeyFrame KeyTime="00:00:00">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</vsm:VisualState>

<vsm:VisualState x:Name="Normal"/>

<vsm:VisualState x:Name="Pressed">

<Storyboard>

<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="NormalButton" Storyboard.TargetProperty="(UIElement.Visibility)">

<DiscreteObjectKeyFrame KeyTime="00:00:00">

<DiscreteObjectKeyFrame.Value>

<Visibility>Collapsed</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="PressedButton" Storyboard.TargetProperty="(UIElement.Visibility)">

<DiscreteObjectKeyFrame KeyTime="00:00:00">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</vsm:VisualState>

<vsm:VisualState x:Name="Disabled"/>

</vsm:VisualStateGroup>

</vsm:VisualStateManager.VisualStateGroups>

<Image x:Name="NormalButton" Source="Normal.png" Stretch="Fill" />

<Image x:Name="OverButton" Source="Over.png" Stretch="Fill" Visibility="Collapsed" />

<Image x:Name="PressedButton" Source="Pressed.png" Stretch="Fill" Visibility="Collapsed" />

</Grid>

</ControlTemplate>

</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White">

<Button Template="{StaticResource ImageButtonTemplate}" Width="300" Height="100" />

</Grid>

- 위 코드를 보면 버튼의 각각의 상태를 정의할때 StoryBoard를 사용하는 것을 알 수 있으며, 차후 버튼에 효과를 줄때 해당 StordyBoard를 사용하면 된다.

2. 동적으로 Image 변경이 가능한 ImageButton 클래스 만들기

---

- Button 클래스를 상속받은 클래스를 만든다. (ImageButton.cs)

- xaml 에서 Property를 설정하면 동적으로 변경될 수 있게 DependencyProperty를 추가한다.

(버튼 상태에 따른 이미지를 설정할 수 있는 Property를 각각 NormalImageSource, OverImageSource, PressedImageSource 라고 이름을 짓는다.)

NormalImageSource DenpendencyProperty를 추가한 ImageButton.cs의 소스는 다음과 같다.

ImageButton.cs

public class ImageButton : Button

{

#region NormalImageSource

public ImageSource NormalImageSource

{

get { return (ImageSource)GetValue(NormalImageSourceProperty); }

set { SetValue(NormalImageSourceProperty, value); }

}

public static readonly DependencyProperty NormalImageSourceProperty =

DependencyProperty.Register(

  "NormalImageSource",

  typeof(ImageSource),

  typeof(ImageButton),

  null);

#endregion NormalImageSource

...

}

- OverImageSource, PressedImageSource도 같은 형태로 추가하면 xaml에서 사용할 수 있는 ImageButton 클래스의 제작이 끝난다.

3. ImageButton 클래스를 사용하기

---

- Page.xaml에서 사용하고 있는 Button을 ImageButton으로 바꾸기 위해서는 우선 xmlns를 추가해야 한다.

xmlns:test="clr-namespace:SilverlightApplication1;assembly=SilverlightApplication1"

- 사용하고 있는 ControlTemplate을 수정한다.

<ControlTemplate x:Key="ImageButtonTemplate" TargetType="test:ImageButton">
...

<Image x:Name="NormalButton" Source="{TemplateBinding NormalImageSource}" Stretch="Fill" />

<Image x:Name="OverButton" Source="{TemplateBinding OverImageSource}" Stretch="Fill" Visibility="Collapsed" />

<Image x:Name="PressedButton" Source="{TemplateBinding PressedImageSource}" Stretch="Fill" Visibility="Collapsed" />

- Button을 ImageButton으로 변경하고 각각의 상태에 따른 이미지를 설정한다.

<test:ImageButton x:Name="TestBtn" Template="{StaticResource ImageButtonTemplate}" Width="300" Height="100" NormalImageSource="Normal.png" OverImageSource="Over.png" PressedImageSource="Pressed.png" />

- 위에 정의된 Button의 이미지를 코드 내부에서 바꾸려면 다음과 같이 하면 된다.

TestBtn.NormalImageSource = new BitmapImage(new Uri("Normal.png", UriKind.Relative));