Style - <Checkbox>

Eden·2023년 2월 9일
0
    <Style x:Key="CheckBox.Style" TargetType="{x:Type CheckBox}">
        <Setter Property="FontFamily" Value=""/>
        <Setter Property="FontSize" Value=""/>
        <Setter Property="FontWeight" Value=""/>
        <Setter Property="Background" Value=""/>
        <Setter Property="BorderBrush" Value=""/>
        <Setter Property="Foreground" Value=""/>
        <Setter Property="BorderThickness" Value=""/>
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/> // 포커스 사각형 지우는 property
        <Setter Property="HorizontalContentAlignment" Value=""/>
        <Setter Property="VerticalContentAlignment" Value=""/>
        <Setter Property="Padding" Value=""/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type CheckBox}">
                    <Grid x:Name="Root" Background="">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <VisualStateManager.VisualStateGroups> // 컨트롤의 상태 간 전환에 사용되는 상태 및 논리 관리
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="IsFocused"/> //그리드 Field의 IsFocused Border의 투명도를 0에서 1로 
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unfocused"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        
                        <Grid x:Name="Field" Grid.ColumnSpan="1" Grid.Column="0" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Height="14" Margin="0,1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Width="14"> // 체크박스의 박스에 해당하는 부분
                            <Border x:Name="IsDefault" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="2"/> //체크박스 테두리 기본
                            <Border x:Name="IsFocused" BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" Opacity="0" CornerRadius="2"/> // 체크박스 테두리 강조색 위의 storyboard 효과로 포커스시 테두리가 강조되도록함
                            <Path x:Name="Indeterminate" Visibility="Collapsed" Style="{DynamicResource CheckBox.Indeterminate}"/> // Checkbox의 ischecked가 null 일때 Path
                            <Path x:Name="Checked" Visibility="Collapsed" Style="{DynamicResource CheckBox.Checked}"/> // Checkbox의 체크 모양 Path
                        </Grid>
                        <ContentPresenter x:Name="contentPresenter" Grid.ColumnSpan="1" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="4,0,0,0" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsFocused" Value="True">// 포커스시 강조색 도시되도록 기존 색 가림
                            <Setter Property="Opacity" TargetName="IsFocused" Value="0"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="True">// 체크되었을때 Check Path 표시
                            <Setter Property="BorderThickness" Value="0"/>
                            <Setter Property="Visibility" TargetName="Checked" Value="Visible"/>
                            <Setter Property="Background" Value=""/>
                        </Trigger>
                        <!--<Trigger Property="IsChecked" Value="False"> 체크가 아닐시
                            <Setter Property="BorderBrush" Value=""/>
                        </Trigger>-->
                        <Trigger Property="IsChecked" Value="{x:Null}"> //체크박스 상태가 null일때 - 표시
                            <Setter Property="Visibility" TargetName="Indeterminate" Value="Visible"/>
                        </Trigger>
                        <Trigger Property="FlowDirection" Value="RightToLeft"> // 컨트롤 배치의 방향이 바뀌면 반대쪽에 체크 박스가 생기도록
                            <Setter Property="LayoutTransform" TargetName="Field">
                                <Setter.Value>
                                    <ScaleTransform CenterY="0.5" CenterX="0.5" ScaleY="1" ScaleX="-1"/>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        
                        <MultiTrigger>
                            <MultiTrigger.Conditions>// 포커스 상태에 마우스가 올라갔을때
                                <Condition Property="IsMouseOver" Value="True"/> 
                                <Condition Property="IsFocused" Value="True"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Opacity" TargetName="IsFocused" Value="0"/>
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsPressed" Value="True"/> // 눌리고 포커스돼있을때
                                <Condition Property="IsFocused" Value="True"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Opacity" TargetName="IsFocused" Value="0"/>
                        </MultiTrigger>
                        <Trigger Property="IsEnabled" Value="False"> // 체크박스 비활성화 상태일때 
                            <Setter Property="Foreground" Value=""/>
                            <Setter Property="BorderBrush" Value=""/>
                            <Setter Property="Background" Value=""/>
                            <Setter Property="Fill" TargetName="Checked" Value=""/>
                            <Setter Property="Fill" TargetName="Indeterminate" Value=""/>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions> // 체크가 안돼있고 사용 불가일때
                                <Condition Property="IsEnabled" Value="False"/>
                                <Condition Property="IsChecked" Value="False"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Background" Value=""/>
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsMouseOver" Value="True"/>
                                <Condition Property="IsChecked" Value="False"/>
                            </MultiTrigger.Conditions> // 체크가 안돼있고 마우스가 올라갔을때
                            <Setter Property="BorderBrush" Value=""/>
                            <Setter Property="Foreground" Value=""/>
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions> 
                                <Condition Property="IsMouseOver" Value="True"/>
                                <Condition Property="IsChecked" Value="True"/>
                            </MultiTrigger.Conditions>  // 체크가 되어있고 마우스가 올라갔을때
                            <Setter Property="Background" Value=""/>
                            <Setter Property="Foreground" Value=""/>
                        </MultiTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    
    <Style x:Key="CheckBox.Indeterminate" TargetType="{x:Type Path}"> // 체크 박스  null일때 style 
            <Setter Property="Data" Value="F1M0,0L8,0 8,8 0,8 0,0z"/>
            <Setter Property="Fill" Value="Red"/>
            <Setter Property="Height" Value="2"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="Margin" Value="2"/>
            <Setter Property="SnapsToDevicePixels" Value="True"/>
            <Setter Property="Stretch" Value="Fill"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Width" Value="16"/>
        </Style>
        <Style x:Key="CheckBox.Checked" TargetType="{x:Type Path}"> // 체크 박스 check일때 style
            <Setter Property="Data" Value="M0.999,1.999 L0.0,3.0 L2.999,6.0 L8.0,0.999 L7.0,0.0 L2.999,4.0 L0.999,1.999 Z"/>
            <!--<Setter Property="Data" Value="F1M0,3L0,5 3,8 8,3 8,1 3,6 0,3z"/>-->
            <Setter Property="Fill" Value="Blue"/>
            <Setter Property="Height" Value="6"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="Margin" Value="2"/>
            <Setter Property="SnapsToDevicePixels" Value="True"/>
            <Setter Property="Stretch" Value="Fill"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Width" Value="16"/>
        </Style>
profile
주섬주섬..

0개의 댓글