Tech/Silverlight2009. 6. 11. 16:37
참고 자료 _ [강좌] 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));

'Tech > Silverlight' 카테고리의 다른 글

Deep Zoom Composer 에서 개별 이미지 요소 정보 얻기  (0) 2009.08.03
Silverlight 3 _ 3D  (0) 2009.06.18
Silverlight2 Unit Test  (0) 2009.05.19
Rhino Mocks in Silverlight  (2) 2009.05.15
Posted by 알 수 없는 사용자