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

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

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>
        <XmlDataProvider x:Key="XmlDataProviderKey" XPath="/Info">
            <x:XData>
                <Info xmlns="">
                    <Song Name="Song1" Time="3:54" Artist="Singer1" Rating="3" Disk="Disk1" />
                    <Song Name="Song2" Time="4:31" Artist="Singer2" Rating="4" Disk="Disk3" />
                    <Song Name="Song3" Time="5:06" Artist="Singer3" Rating="5" Disk="Disk1" />
                    <Song Name="Song4" Time="4:18" Artist="Singer3" Rating="2" Disk="Disk2" />
                    <Song Name="Song5" Time="6:15" Artist="Singer1" Rating="5" Disk="Disk3" />
                </Info>
            </x:XData>
        </XmlDataProvider>
        <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="ControlMouseOverColorKey">#ff3843c4</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>
        <Style x:Key="{x:Static GridView.GridViewScrollViewerStyleKey}" TargetType="ScrollViewer">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ScrollViewer">
                        <Grid Background="{TemplateBinding Background}">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"    />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"    />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <DockPanel Margin="{TemplateBinding Padding}">
                                <ScrollViewer DockPanel.Dock="Top"
                                    HorizontalScrollBarVisibility="Hidden"
                                    VerticalScrollBarVisibility="Hidden"
                                    Focusable="false">
                                    <GridViewHeaderRowPresenter
                                        ColumnHeaderTemplate="{Binding Path=TemplatedParent.View.ColumnHeaderTemplate, RelativeSource={RelativeSource TemplatedParent}}"
                                        ColumnHeaderTemplateSelector="{Binding Path=TemplatedParent.View.ColumnHeaderTemplateSelector,
                                            RelativeSource={RelativeSource TemplatedParent}}"
                                        ColumnHeaderContainerStyle="{Binding Path=TemplatedParent.View.ColumnHeaderContainerStyle,
                                            RelativeSource={RelativeSource TemplatedParent}}"
                                        Margin="2 0 2 0"
                                        AllowsColumnReorder="{Binding Path=TemplatedParent.View.AllowsColumnReorder, RelativeSource={RelativeSource TemplatedParent}}"
                                        ColumnHeaderContextMenu="{Binding Path=TemplatedParent.View.ColumnHeaderContextMenu, RelativeSource={RelativeSource TemplatedParent}}"
                                        ColumnHeaderToolTip="{Binding Path=TemplatedParent.View.ColumnHeaderToolTip, RelativeSource={RelativeSource TemplatedParent}}"
                                        Columns="{Binding Path=TemplatedParent.View.Columns, RelativeSource={RelativeSource TemplatedParent}}"
                                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                                </ScrollViewer>
                                <ScrollContentPresenter Name="PART_ScrollContentPresenter"
                                    CanHorizontallyScroll="False"
                                    CanVerticallyScroll="False"
                                    CanContentScroll="True"
                                    KeyboardNavigation.DirectionalNavigation="Local" />
                            </DockPanel>
                            <ScrollBar Name="PART_HorizontalScrollBar" Grid.Row="1"
                                Orientation="Horizontal"
                                ViewportSize="{TemplateBinding ViewportWidth}"
                                Maximum="{TemplateBinding ScrollableWidth}"
                                Value="{TemplateBinding HorizontalOffset}"
                                Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" />
                            <ScrollBar Name="PART_VerticalScrollBar" Grid.Column="1"
                                ViewportSize="{TemplateBinding ViewportHeight}"
                                Maximum="{TemplateBinding ScrollableHeight}"
                                Value="{TemplateBinding VerticalOffset}"
                                Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="GridViewColumnHeaderGripperKey" TargetType="Thumb">
            <Setter Property="Width" Value="18" />
            <Setter Property="Background">
                <Setter.Value>
                    <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>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Thumb}">
                        <Border
                            Padding="{TemplateBinding Padding}"
                            Background="Transparent">
                            <Rectangle
                                HorizontalAlignment="Center"
                                Width="1"
                                Fill="{TemplateBinding Background}" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="BorderBrush">
                <Setter.Value>
                    <LinearGradientBrush
                        StartPoint="0.5 0"
                        EndPoint="0.5 1">
                        <GradientStop Offset="0" Color="Black" />
                        <GradientStop Offset="1" Color="White" />
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="{x:Type GridViewColumnHeader}" TargetType="GridViewColumnHeader">
            <Setter Property="HorizontalContentAlignment" Value="Center" />
            <Setter Property="VerticalContentAlignment"   Value="Center" />
            <Setter Property="Foreground"                 Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="GridViewColumnHeader">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup Name="CommonStates">
                                    <VisualState Name="Normal" />
                                    <VisualState Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="headerBorder"
                                                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMouseOverColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState Name="Pressed"  />
                                    <VisualState Name="Disabled" />
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border Name="headerBorder"
                                BorderThickness="0 1 0 1"
                                Padding="2 0 2 0">
                                <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>
                                <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>
                                <ContentPresenter
                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                    Margin="0 0 0 1"
                                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                    RecognizesAccessKey="True" />
                            </Border>
                            <Thumb Name="PART_HeaderGripper"
                                Style="{StaticResource GridViewColumnHeaderGripperKey}"
                                HorizontalAlignment="Right"
                                Margin="0 0 -9 0" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="Role" Value="Floating">
                    <Setter Property="Opacity" Value="0.7" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="GridViewColumnHeader">
                                <Canvas Name="PART_FloatingHeaderCanvas">
                                    <Rectangle
                                        Width="{TemplateBinding ActualWidth}"
                                        Height="{TemplateBinding ActualHeight}"
                                        Fill="#60000000" />
                                </Canvas>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Trigger>
                <Trigger Property="Role" Value="Padding">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="GridViewColumnHeader">
                                <Border Name="headerBorder"
                                    BorderThickness="0 1 0 1">
                                    <Border.Background>
                                        <SolidColorBrush Color="{DynamicResource ControlLightColorKey}" />
                                    </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>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
        <Style x:Key="{x:Type ListView}" TargetType="ListView">
            <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="VerticalContentAlignment"                   Value="Center" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListView">
                        <Border Name="border"
                            BorderThickness="1">
                            <Border.Background>
                                <SolidColorBrush Color="{StaticResource ControlLightColorKey}" />
                            </Border.Background>
                            <Border.BorderBrush>
                                <SolidColorBrush Color="{StaticResource BorderMediumColorKey}" />
                            </Border.BorderBrush>
                            <ScrollViewer Style="{DynamicResource {x:Static GridView.GridViewScrollViewerStyleKey}}">
                                <ItemsPresenter />
                            </ScrollViewer>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsGrouping" Value="true">
                                <Setter Property="ScrollViewer.CanContentScroll" Value="false" />
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter
                                    TargetName="border"
                                    Property="Background">
                                    <Setter.Value>
                                        <SolidColorBrush Color="{DynamicResource DisabledBorderLightColorKey}" />
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="{x:Type ListViewItem}" TargetType="ListViewItem">
            <Setter Property="SnapsToDevicePixels"   Value="true" />
            <Setter Property="OverridesDefaultStyle" Value="true" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Border Name="border"
                            Padding="2"
                            Background="Transparent"
                            SnapsToDevicePixels="true">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup Name="CommonStates">
                                    <VisualState Name="Normal"    />
                                    <VisualState Name="MouseOver" />
                                    <VisualState Name="Disabled"  />
                                </VisualStateGroup>
                                <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>
                            <GridViewRowPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <ListView
        Margin="10"
        BorderBrush="Black"
        BorderThickness="1"
        ItemsSource="{Binding Source={StaticResource XmlDataProviderKey}, XPath=Song}">
        <ListView.View>
            <GridView>
                <GridViewColumn Header="곡명"
                        Width="100"
                        DisplayMemberBinding="{Binding XPath=@Name}" />
                <GridViewColumn Header="재생 시간"
                        Width="80"
                        DisplayMemberBinding="{Binding XPath=@Time}" />
                <GridViewColumn Header="연주자"
                        Width="80"
                        DisplayMemberBinding="{Binding XPath=@Artist}" />
                <GridViewColumn Header="디스크"
                        Width="100"
                        DisplayMemberBinding="{Binding XPath=@Disk}" />
            </GridView>
        </ListView.View>
    </ListView>
</Window>