[C#/WPF] ControlTemplate 엘리먼트 : Expander 엘리먼트 정의하기

■ ControlTemplate 엘리먼트를 사용해 Expander 엘리먼트를 정의하는 방법을 보여준다.

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="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <Color x:Key="ContentAreaDarkColorKey">#ff7381f9</Color>
        <Color x:Key="DisabledControlDarkColorKey">#ffc5cbf9</Color>
        <Color x:Key="ControlLightColorKey">White</Color>
        <Color x:Key="ControlMediumColorKey">#ff7381f9</Color>
        <Color x:Key="ControlDarkColorKey">#ff211aa9</Color>
        <Color x:Key="ControlMouseOverColorKey">#ff3843c4</Color>
        <Color x:Key="ControlPressedColorKey">#ff211aa9</Color>
        <Color x:Key="GlyphColorKey">#ff444444</Color>
        <Color x:Key="BorderLightColorKey">#ffcccccc</Color>
        <Color x:Key="BorderMediumColorKey">#ff888888</Color>
        <Color x:Key="BorderDarkColorKey">#ff444444</Color>
        <Color x:Key="DisabledBorderLightColorKey">#ffaaaaaa</Color>
        <ControlTemplate x:Key="ExpanderToggleButtonTemplateKey" TargetType="{x:Type ToggleButton}">
            <Border Name="border"
                CornerRadius="2 0 0 0"
                BorderThickness="0 0 1 0">
                <Border.Background>
                    <LinearGradientBrush
                        StartPoint="0.5 0"
                        EndPoint="0.5 1">
                        <GradientStop            Color="{DynamicResource ControlLightColorKey }" />
                        <GradientStop Offset="1" Color="{DynamicResource ControlMediumColorKey}" />
                    </LinearGradientBrush>
                </Border.Background>
                <Border.BorderBrush>
                    <LinearGradientBrush
                        StartPoint="0 0"
                        EndPoint="0 1">
                        <LinearGradientBrush.GradientStops>
                            <GradientStopCollection>
                                <GradientStop Offset="0.0" Color="{DynamicResource BorderLightColorKey}" />
                                <GradientStop Offset="1.0" Color="{DynamicResource BorderDarkColorKey }" />
                            </GradientStopCollection>
                        </LinearGradientBrush.GradientStops>
                    </LinearGradientBrush>
                </Border.BorderBrush>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup Name="CommonStates">
                        <VisualState Name="Normal" />
                        <VisualState Name="MouseOver">
                            <Storyboard>
                                <ColorAnimationUsingKeyFrames
                                    Storyboard.TargetName="border"
                                    Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                    <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMouseOverColorKey}" />
                                </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState Name="Pressed">
                            <Storyboard>
                                <ColorAnimationUsingKeyFrames
                                    Storyboard.TargetName="border"
                                    Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                    <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlPressedColorKey}" />
                                </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState Name="Disabled">
                            <Storyboard>
                                <ColorAnimationUsingKeyFrames
                                    Storyboard.TargetName="border"
                                    Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                    <EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledControlDarkColorKey}" />
                                </ColorAnimationUsingKeyFrames>
                                <ColorAnimationUsingKeyFrames
                                    Storyboard.TargetName="border"
                                    Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                    <EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledBorderLightColorKey}" />
                                </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                    <VisualStateGroup Name="CheckStates">
                        <VisualState Name="Checked">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames
                                    Storyboard.TargetName="collapsedArrowPath"
                                    Storyboard.TargetProperty="(UIElement.Visibility)">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Hidden}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames
                                    Storyboard.TargetName="expandededArrowPath"
                                    Storyboard.TargetProperty="(UIElement.Visibility)">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState Name="Unchecked"     />
                        <VisualState Name="Indeterminate" />
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Grid>
                    <Path Name="collapsedArrowPath"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Data="M 0 0 L 4 4 L 8 0 Z">
                        <Path.Fill>
                            <SolidColorBrush Color="{DynamicResource GlyphColorKey}" />
                        </Path.Fill>
                    </Path>
                    <Path Name="expandededArrowPath"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Visibility="Collapsed"
                        Data="M 0 4 L 4 0 L 8 4 Z">
                        <Path.Fill>
                            <SolidColorBrush Color="{DynamicResource GlyphColorKey}" />
                        </Path.Fill>
                    </Path>
                </Grid>
            </Border>
        </ControlTemplate>
        <Style x:Key="ExpanderStyleKey" TargetType="{x:Type Expander}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Expander}">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition                               Height="Auto" />
                                <RowDefinition x:Name="contentRowDefinition" Height="0"    />
                            </Grid.RowDefinitions>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup Name="CommonStates">
                                    <VisualState Name="Normal"    />
                                    <VisualState Name="MouseOver" />
                                    <VisualState Name="Disabled">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="border"
                                                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledControlDarkColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="border"
                                                Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledBorderLightColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border Name="border" Grid.Row="0"
                                CornerRadius="2 2 0 0"
                                BorderThickness="1">
                                <Border.BorderBrush>
                                    <LinearGradientBrush
                                        StartPoint="0 0"
                                        EndPoint="0 1">
                                        <GradientStop Offset="0" Color="{DynamicResource BorderLightColorKey}" />
                                        <GradientStop Offset="1" Color="{DynamicResource BorderDarkColorKey }" />
                                    </LinearGradientBrush>
                                </Border.BorderBrush>
                                <Border.Background>
                                    <LinearGradientBrush
                                        StartPoint="0 0"
                                        EndPoint="0 1">
                                        <LinearGradientBrush.GradientStops>
                                            <GradientStopCollection>
                                                <GradientStop Offset="0.0" Color="{DynamicResource ControlLightColorKey }" />
                                                <GradientStop Offset="1.0" Color="{DynamicResource ControlMediumColorKey}" />
                                            </GradientStopCollection>
                                        </LinearGradientBrush.GradientStops>
                                    </LinearGradientBrush>
                                </Border.Background>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="20" />
                                        <ColumnDefinition Width="*"  />
                                    </Grid.ColumnDefinitions>
                                    <ToggleButton
                                        Template="{StaticResource ExpanderToggleButtonTemplateKey}"
                                        OverridesDefaultStyle="True"
                                        IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
                                        <ToggleButton.Background>
                                            <LinearGradientBrush
                                                StartPoint="0.5 0"
                                                EndPoint="0.5 1">
                                                <GradientStop Offset="0" Color="{DynamicResource ControlLightColorKey }" />
                                                <GradientStop Offset="1" Color="{DynamicResource ControlMediumColorKey}" />
                                            </LinearGradientBrush>
                                        </ToggleButton.Background>
                                    </ToggleButton>
                                    <ContentPresenter Grid.Column="1"
                                        Margin="4"
                                        ContentSource="Header"
                                        RecognizesAccessKey="True" />
                                </Grid>
                            </Border>
                            <Border Name="contentBorder" Grid.Row="1"
                                CornerRadius="0 0 2 2"
                                BorderThickness="1 0 1 1">
                                <Border.BorderBrush>
                                    <SolidColorBrush Color="{DynamicResource BorderMediumColorKey}" />
                                </Border.BorderBrush>
                                <Border.Background>
                                    <SolidColorBrush Color="{DynamicResource ContentAreaDarkColorKey}" />
                                </Border.Background>
                                <ContentPresenter Margin="4" />
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsExpanded" Value="True">
                                <Setter
                                    TargetName="contentRowDefinition"
                                    Property="Height"
                                    Value="{Binding Height, ElementName=contentBorder}" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Orientation="Horizontal">
        <Expander
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Width="200"
            ExpandDirection="Down"
            IsExpanded="True">
            <Expander.Header>
                <Bold>Test</Bold>
            </Expander.Header>
            <Expander.Content>
                <TextBlock TextWrapping="Wrap">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
                </TextBlock>
            </Expander.Content>
        </Expander>
        <Expander
            Style="{StaticResource ExpanderStyleKey}"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Margin="10 0 0 0"
            Width="200"
            ExpandDirection="Down"
            IsExpanded="True">
            <Expander.Header>
                <Bold>Test</Bold>
            </Expander.Header>
            <Expander.Content>
                <TextBlock TextWrapping="Wrap">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
                </TextBlock>
            </Expander.Content>
        </Expander>
    </StackPanel>
</Window>