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

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

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"
    xmlns:local="clr-namespace:TestProject"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <Color x:Key="ControlLightColorKey">White</Color>
        <Color x:Key="ControlMediumColorKey">#ff7381f9</Color>
        <Color x:Key="ControlDarkColorKey">#ff211aa9</Color>
        <Color x:Key="BorderLightColorKey">#ffcccccc</Color>
        <Color x:Key="BorderMediumColorKey">#ff888888</Color>
        <LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFillBrushKey"
            StartPoint="0 0"
            EndPoint="1 0">
            <LinearGradientBrush.GradientStops>
                <GradientStopCollection>
                    <GradientStop Offset="0"   Color="#000000ff" />
                    <GradientStop Offset="0.4" Color="#600000ff" />
                    <GradientStop Offset="0.6" Color="#600000ff" />
                    <GradientStop Offset="1"   Color="#000000ff" />
                </GradientStopCollection>
            </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
        <Style x:Key="{x:Type ProgressBar}" TargetType="{x:Type ProgressBar}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ProgressBar}">
                        <Grid
                            MinWidth="200"
                            MinHeight="14"
                            Background="{TemplateBinding Background}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup Name="CommonStates">
                                    <VisualState Name="Determinate" />
                                    <VisualState Name="Indeterminate">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetName="PART_Indicator"
                                                Storyboard.TargetProperty="Background"
                                                Duration="00:00:00">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <SolidColorBrush>Transparent</SolidColorBrush>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border Name="PART_Track"
                                CornerRadius="2"
                                BorderThickness="1">
                                <Border.BorderBrush>
                                    <SolidColorBrush Color="{DynamicResource BorderMediumColorKey}" />
                                </Border.BorderBrush>
                            </Border>
                            <Border Name="PART_Indicator"
                                HorizontalAlignment="Left"
                                Margin="0 -1 0 1"
                                CornerRadius="2"
                                BorderThickness="1"
                                Background="{TemplateBinding Foreground}">
                                <Border.BorderBrush>
                                    <LinearGradientBrush
                                        StartPoint="0 0"
                                        EndPoint="0 1">
                                        <GradientBrush.GradientStops>
                                            <GradientStopCollection>
                                                <GradientStop Offset="0.0" Color="{DynamicResource BorderLightColorKey }" />
                                                <GradientStop Offset="1.0" Color="{DynamicResource BorderMediumColorKey}" />
                                            </GradientStopCollection>
                                        </GradientBrush.GradientStops>
                                    </LinearGradientBrush>
                                </Border.BorderBrush>
                                <Grid Name="animationGrid"
                                    ClipToBounds="True">
                                    <Rectangle Name="PART_GlowRect"
                                        HorizontalAlignment="Left"
                                        Margin="-100 0 0 0"
                                        Width="100"
                                        Fill="{DynamicResource ProgressBarIndicatorAnimatedFillBrushKey}" />
                                </Grid>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush
                        StartPoint="0 0"
                        EndPoint="0 1">
                        <GradientStop Offset="0" Color="{DynamicResource ControlLightColorKey }" />
                        <GradientStop Offset="1" Color="{DynamicResource ControlMediumColorKey}" />
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Foreground">
                <Setter.Value>
                    <LinearGradientBrush
                        StartPoint="0.5 0"
                        EndPoint="0.5 1">
                        <GradientStop Offset="0" Color="{DynamicResource ControlMediumColorKey}" />
                        <GradientStop Offset="1" Color="{DynamicResource ControlDarkColorKey  }" />
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <ProgressBar
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Width="300"
        Height="20"
        Value="50" />
</Window>