첨부 실행 코드는 나눔고딕코딩 폰트를 사용합니다.
본 블로그는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 블로그 콘텐츠 향상을 위해 쓰여집니다.

728x90
반응형
728x170

TestProject.zip
0.01MB

▶ 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>
728x90
반응형
그리드형(광고전용)
Posted by 사용자 icodebroker

댓글을 달아 주세요