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

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

▶ 예제 코드 (XAML)


<StackPanel
    xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
    HorizontalAlignment="Center"
    Margin="30"
    Orientation="Horizontal">
    <StackPanel.Resources>
        <Style x:Key="CheckBoxStyleKey"
            TargetType="CheckBox">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="CheckBox">
                        <Grid x:Name="rootGrid">
                            <vsm:VisualStateManager.VisualStateGroups>
                                <vsm:VisualStateGroup x:Name="CommonStates">
                                    <vsm:VisualState x:Name="Normal" />
                                    <vsm:VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimation
                                                Storyboard.TargetName="glowRectangle"
                                                Storyboard.TargetProperty="Opacity"
                                                Duration="0"
                                                To="1" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <DoubleAnimation
                                                Storyboard.TargetName="darkenRectangle"
                                                Storyboard.TargetProperty="Opacity"
                                                Duration="0"
                                                To="1" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <DoubleAnimation
                                                Storyboard.TargetName="rootGrid"
                                                Storyboard.TargetProperty="Opacity"
                                                Duration="0"
                                                To="0.7" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                </vsm:VisualStateGroup>
                                <vsm:VisualStateGroup x:Name="CheckStates">
                                    <vsm:VisualStateGroup.Transitions>
                                        <vsm:VisualTransition GeneratedDuration="0:0:0.2" />
                                    </vsm:VisualStateGroup.Transitions>
                                    <vsm:VisualState x:Name="Unchecked" />
                                    <vsm:VisualState x:Name="Checked">
                                        <Storyboard>
                                            <DoubleAnimation
                                                Storyboard.TargetName="checkMarkPath"
                                                Storyboard.TargetProperty="Opacity"
                                                Duration="0"
                                                To="1" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="Indeterminate">
                                        <Storyboard>
                                            <DoubleAnimation
                                                Storyboard.TargetName="indeterminateEllipse"
                                                Storyboard.TargetProperty="Opacity"
                                                Duration="0"
                                                To="1" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                </vsm:VisualStateGroup>
                            </vsm:VisualStateManager.VisualStateGroups>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="30" />
                                <ColumnDefinition Width="5"  />
                                <ColumnDefinition Width="*"  />
                            </Grid.ColumnDefinitions>
                            <Border
                                Grid.Column="0"
                                VerticalAlignment="Center"
                                Width="30"
                                Height="30"
                                CornerRadius="3"
                                BorderThickness="3"
                                BorderBrush="Black"
                                Padding="3"
                                Background="{TemplateBinding Background}">
                                <Grid>
                                    <Rectangle x:Name="glowRectangle"
                                        Fill="#3f60c8fd"
                                        Opacity="0" />
                                    <Path x:Name="checkMarkPath"
                                        Margin="-10 -5 -10 -5"
                                        Stretch="Fill"
                                        Fill="#ffe0e0e0"
                                        Stroke="#ff313030"
                                        Opacity="0"
                                        RenderTransformOrigin="0.5 0.5"
                                        Data="M 103 240 L 111 240, 119 248, 127 240, 135 240, 123 252, 135 264, 127 264, 119 257, 111 264, 103 264, 114 252 Z">
                                        <Path.RenderTransform>
                                            <TransformGroup>
                                                <ScaleTransform
                                                    ScaleX="0.5"
                                                    ScaleY="0.5" />
                                            </TransformGroup>
                                        </Path.RenderTransform>
                                    </Path>
                                    <Ellipse x:Name="indeterminateEllipse"
                                        Margin="2 2 2 2"
                                        Fill="#ffe0e0e0"
                                        Stroke="#ff313030"
                                        StrokeThickness="0.5"
                                        Opacity="0" />
                                    <Rectangle x:Name="darkenRectangle"
                                        Fill="#30545454"
                                        Opacity="0" />
                                </Grid>
                            </Border>
                            <ContentPresenter
                                Grid.Column="2"
                                HorizontalAlignment="Left"
                                VerticalAlignment="Center" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </StackPanel.Resources>
    <CheckBox
        Style="{StaticResource CheckBoxStyleKey}"
        Width="500"
        IsChecked="true"
        IsThreeState="True"
        Background="Red"
        FontSize="16">
        <CheckBox.Content>
            <TextBlock TextWrapping="Wrap">
                CheckBox with a custom ControlTemplate
            </TextBlock>
        </CheckBox.Content>
    </CheckBox>
</StackPanel>

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

<StackPanel

xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"

HorizontalAlignment="Center"

Margin="30"

Orientation="Horizontal">

<StackPanel.Resources>

<Style x:Key="CheckBoxStyleKey"

TargetType="CheckBox">

<Setter.Value>

<vsm:VisualStateManager.VisualStateGroups>

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

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

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

<DoubleAnimation

Storyboard.TargetName="glowRectangle"

Storyboard.TargetProperty="Opacity"

Duration="0"

To="1" />

</Storyboard>

</vsm:VisualState>

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

<DoubleAnimation

Storyboard.TargetName="darkenRectangle"

Storyboard.TargetProperty="Opacity"

Duration="0"

To="1" />

</Storyboard>

</vsm:VisualState>

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

<DoubleAnimation

Storyboard.TargetName="rootGrid"

Storyboard.TargetProperty="Opacity"

Duration="0"

To="0.7" />

</Storyboard>

</vsm:VisualState>

</vsm:VisualStateGroup>

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

<vsm:VisualStateGroup.Transitions>

<vsm:VisualTransition GeneratedDuration="0:0:0.2" />

</vsm:VisualStateGroup.Transitions>

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

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

<DoubleAnimation

Storyboard.TargetName="checkMarkPath"

Storyboard.TargetProperty="Opacity"

Duration="0"

To="1" />

</Storyboard>

</vsm:VisualState>

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

<DoubleAnimation

Storyboard.TargetName="indeterminateEllipse"

Storyboard.TargetProperty="Opacity"

Duration="0"

To="1" />

</Storyboard>

</vsm:VisualState>

</vsm:VisualStateGroup>

</vsm:VisualStateManager.VisualStateGroups>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Border

Grid.Column="0"

VerticalAlignment="Center"

Width="30"

Height="30"

CornerRadius="3"

BorderThickness="3"

BorderBrush="Black"

Padding="3"

Background="{TemplateBinding Background}">

<Grid>

<Rectangle x:Name="glowRectangle"

Fill="#3f60c8fd"

Opacity="0" />

<Path x:Name="checkMarkPath"

Margin="-10 -5 -10 -5"

Stretch="Fill"

Fill="#ffe0e0e0"

Stroke="#ff313030"

Opacity="0"

RenderTransformOrigin="0.5 0.5"

Data="M 103 240 L 111 240, 119 248, 127 240, 135 240, 123 252, 135 264, 127 264, 119 257, 111 264, 103 264, 114 252 Z">

<Path.RenderTransform>

<ScaleTransform

ScaleX="0.5"

ScaleY="0.5" />

</TransformGroup>

</Path.RenderTransform>

</Path>

<Ellipse x:Name="indeterminateEllipse"

Margin="2 2 2 2"

Fill="#ffe0e0e0"

Stroke="#ff313030"

StrokeThickness="0.5"

Opacity="0" />

<Rectangle x:Name="darkenRectangle"

Fill="#30545454"

Opacity="0" />

</Grid>

</Border>

<ContentPresenter

Grid.Column="2"

HorizontalAlignment="Left"

VerticalAlignment="Center" />

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</StackPanel.Resources>

<CheckBox

Style="{StaticResource CheckBoxStyleKey}"

Width="500"

IsChecked="true"

IsThreeState="True"

Background="Red"

FontSize="16">

<CheckBox.Content>

CheckBox with a custom ControlTemplate

</TextBlock>

</CheckBox.Content>

</CheckBox>

</StackPanel>

.NETFRAMEWORK C# CONTROL MICROSOFT SILVERLIGHT STYLE TEMPLATE

icodebroker

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