[C#/WPF] VisualStateManager 엘리먼트 : 커스텀 CheckBox 엘리먼트 정의하기

■ VisualStateManager 엘리먼트를 사용해 커스텀 CheckBox 엘리먼트를 정의하는 방법을 보여준다.

▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="VisualStateManager 엘리먼트 : 커스텀 CheckBox 엘리먼트 정의하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <Style x:Key="CheckBoxStyleKey" TargetType="CheckBox">
            <Setter Property="FocusVisualStyle" Value="{x:Null}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="CheckBox">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="20" />
                                <ColumnDefinition Width="*"  />
                            </Grid.ColumnDefinitions>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup Name="CommonStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition From="Pressed" To="Normal">
                                            <Storyboard>
                                                <ColorAnimation
                                                    Storyboard.TargetName="checkRectangle"
                                                    Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"
                                                    Duration="00:00:00.5"
                                                    To="Red" />
                                            </Storyboard>
                                        </VisualTransition>
                                    </VisualStateGroup.Transitions>
                                    <VisualState Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimation
                                                Storyboard.TargetName="checkRectangle"
                                                Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"
                                                Duration="00:00:00.5"
                                                To="PaleGreen" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState Name="Pressed">
                                        <Storyboard>
                                            <ColorAnimation
                                                Storyboard.TargetName="checkRectangle"
                                                Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"
                                                Duration="00:00:00.5"
                                                To="Navy" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState Name="Disabled">
                                        <Storyboard>
                                            <ColorAnimation
                                                Storyboard.TargetName="checkRectangle"
                                                Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"
                                                Duration="00:00:00.5"
                                                To="Gray" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState Name="Normal">
                                        <Storyboard>
                                            <ColorAnimation
                                                Storyboard.TargetName="checkRectangle"
                                                Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"
                                                Duration="00:00:00.5" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup Name="CheckStates">
                                    <VisualState Name="Checked">
                                        <Storyboard>
                                            <DoubleAnimation
                                                Storyboard.TargetName="tickPath"
                                                Storyboard.TargetProperty="Opacity"
                                                Duration="0"
                                                To="1" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState Name="Unchecked" />
                                </VisualStateGroup>
                                <VisualStateGroup Name="FocusStates">
                                    <VisualState Name="Unfocused" />
                                    <VisualState Name="Focused">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetName="focusRectangle"
                                                Storyboard.TargetProperty="Visibility"
                                                Duration="0">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="ContentFocused">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetName="focusRectangle"
                                                Storyboard.TargetProperty="Visibility"
                                                Duration="0">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Rectangle Name="checkRectangle" Grid.Row="0"
                                HorizontalAlignment="Left"
                                Width="12"
                                Height="12"
                                RadiusX="2"
                                RadiusY="2"
                                Stroke="Blue"
                                Fill="Aqua" />
                            <Path Name="tickPath" Grid.Row="0"
                                HorizontalAlignment="Left"
                                Width="12"
                                Height="12"
                                StrokeThickness="2"
                                Stroke="Black"
                                Opacity="0"
                                Data="M 3 6 L 5 9 9 2" />
                            <Rectangle Name="focusRectangle" Grid.Column="1"
                                Margin="-2 -2 0 -2"
                                StrokeDashArray=".2 2"
                                StrokeDashCap="Round"
                                Visibility="Collapsed"
                                IsHitTestVisible="false"
                                Stroke="#ff333333" />
                            <ContentPresenter Grid.Column="1"
                                VerticalAlignment="Center" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <StackPanel
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <CheckBox
                Style="{StaticResource CheckBoxStyleKey}"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Height="25"
                IsChecked="True"
                Content="체크 항목 1" />
            <CheckBox
                Style="{StaticResource CheckBoxStyleKey}"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Margin="0 10 0 0"
                Height="25"
                IsChecked="True"
                Content="체크 항목 2" />
        </StackPanel>
    </Grid>
</Window>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="800"

Height="600"

Title="VisualStateManager 엘리먼트 : 커스텀 CheckBox 엘리먼트 정의하기"

FontFamily="나눔고딕코딩"

FontSize="16">

<Window.Resources>

<Setter.Value>

<Grid>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup.Transitions>

<ColorAnimation

Storyboard.TargetName="checkRectangle"

Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"

Duration="00:00:00.5"

To="Red" />

</Storyboard>

</VisualTransition>

</VisualStateGroup.Transitions>

<ColorAnimation

Storyboard.TargetName="checkRectangle"

Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"

Duration="00:00:00.5"

To="PaleGreen" />

</Storyboard>

</VisualState>

<ColorAnimation

Storyboard.TargetName="checkRectangle"

Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"

Duration="00:00:00.5"

To="Navy" />

</Storyboard>

</VisualState>

<ColorAnimation

Storyboard.TargetName="checkRectangle"

Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"

Duration="00:00:00.5"

To="Gray" />

</Storyboard>

</VisualState>

<ColorAnimation

Storyboard.TargetName="checkRectangle"

Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"

Duration="00:00:00.5" />

</Storyboard>

</VisualState>

</VisualStateGroup>

<DoubleAnimation

Storyboard.TargetName="tickPath"

Storyboard.TargetProperty="Opacity"

Duration="0"

To="1" />

</Storyboard>

</VisualState>

</VisualStateGroup>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="focusRectangle"

Storyboard.TargetProperty="Visibility"

Duration="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="focusRectangle"

Storyboard.TargetProperty="Visibility"

Duration="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Rectangle Name="checkRectangle" Grid.Row="0"

HorizontalAlignment="Left"

Width="12"

Height="12"

RadiusX="2"

RadiusY="2"

Stroke="Blue"

Fill="Aqua" />

<Path Name="tickPath" Grid.Row="0"

HorizontalAlignment="Left"

Width="12"

Height="12"

StrokeThickness="2"

Stroke="Black"

Opacity="0"

Data="M 3 6 L 5 9 9 2" />

<Rectangle Name="focusRectangle" Grid.Column="1"

Margin="-2 -2 0 -2"

StrokeDashArray=".2 2"

StrokeDashCap="Round"

Visibility="Collapsed"

IsHitTestVisible="false"

Stroke="#ff333333" />

<ContentPresenter Grid.Column="1"

VerticalAlignment="Center" />

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</Window.Resources>

<Grid>

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<CheckBox

Style="{StaticResource CheckBoxStyleKey}"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Height="25"

IsChecked="True"

Content="체크 항목 1" />

<CheckBox

Style="{StaticResource CheckBoxStyleKey}"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Margin="0 10 0 0"

Height="25"

IsChecked="True"

Content="체크 항목 2" />

</StackPanel>

</Grid>

</Window>

TestProject.zip