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

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

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="DisabledControlLightColorKey">#ffe8edf9</Color>
        <Color x:Key="SelectedBackgroundColorKey">#ffc5cbf9</Color>
        <Color x:Key="SelectedUnfocusedColorKey">#ffdddddd</Color>
        <Color x:Key="ControlLightColorKey">White</Color>
        <Color x:Key="ControlMediumColorKey">#ff7381f9</Color>
        <Color x:Key="BorderMediumColorKey">#ff888888</Color>
        <Color x:Key="DisabledBorderLightColorKey">#ffaaaaaa</Color>
        <Style x:Key="{x:Type ListBox}" TargetType="ListBox">
            <Setter Property="MinWidth"                                   Value="120"  />
            <Setter Property="MinHeight"                                  Value="95"   />
            <Setter Property="OverridesDefaultStyle"                      Value="true" />
            <Setter Property="SnapsToDevicePixels"                        Value="true" />
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility"   Value="Auto" />
            <Setter Property="ScrollViewer.CanContentScroll"              Value="true" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBox">
                        <Border Name="border"
                            CornerRadius="2"
                            BorderThickness="1">
                            <Border.Background>
                                <SolidColorBrush Color="{StaticResource ControlLightColorKey}" />
                            </Border.Background>
                            <Border.BorderBrush>
                                <SolidColorBrush Color="{StaticResource BorderMediumColorKey}" />
                            </Border.BorderBrush>
                            <ScrollViewer
                                Margin="0"
                                Focusable="false">
                                <StackPanel
                                    Margin="2"
                                    IsItemsHost="True" />
                            </ScrollViewer>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter
                                    TargetName="border"
                                    Property="Background">
                                    <Setter.Value>
                                        <SolidColorBrush Color="{StaticResource DisabledControlLightColorKey}" />
                                    </Setter.Value>
                                </Setter>
                                <Setter
                                    TargetName="border"
                                    Property="BorderBrush">
                                    <Setter.Value>
                                        <SolidColorBrush Color="{DynamicResource DisabledBorderLightColorKey}" />
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsGrouping" Value="true">
                                <Setter Property="ScrollViewer.CanContentScroll" Value="false" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="{x:Type ListBoxItem}" TargetType="ListBoxItem">
            <Setter Property="SnapsToDevicePixels"   Value="true" />
            <Setter Property="OverridesDefaultStyle" Value="true" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Border Name="border"
                            Padding="2"
                            SnapsToDevicePixels="true">
                            <Border.Background>
                                <SolidColorBrush Color="Transparent" />
                            </Border.Background>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup Name="SelectionStates">
                                    <VisualState Name="Unselected" />
                                    <VisualState Name="Selected">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="border"
                                                Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource SelectedBackgroundColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState Name="SelectedUnfocused">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="border"
                                                Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource SelectedUnfocusedColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ContentPresenter />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <ListBox
        Width="100"
        Height="100">
        <ListBoxItem>Sunday</ListBoxItem>
        <ListBoxItem>Monday</ListBoxItem>
        <ListBoxItem>Tuesday</ListBoxItem>
        <ListBoxItem>Wednesday</ListBoxItem>
        <ListBoxItem>Thursday</ListBoxItem>
        <ListBoxItem>Friday</ListBoxItem>
        <ListBoxItem>Saturday</ListBoxItem>
    </ListBox>
</Window>