참고 자료 _ [강좌] ImageButton 만들기, Dependency Property의 이해
- 참고 자료에 있는 강좌를 보면 Blend를 사용해 손쉽게 Image 버튼을 생성할 수 있다. 생성한 코드를 살펴보면 다음과 같다.
- Button 클래스를 상속받은 클래스를 만든다. (ImageButton.cs)
- Page.xaml에서 사용하고 있는 Button을 ImageButton으로 바꾸기 위해서는 우선 xmlns를 추가해야 한다.
1. Blend를 통한 Image 버튼 만들기
2. 동적으로 Image 변경이 가능한 ImageButton 클래스 만들기
3. ImageButton 클래스를 사용하기
1. 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 클래스 만들기
- 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 클래스를 사용하기
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 |
