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

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

▶ 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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

<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="BorderLightColorKey">#ffcccccc</Color>

<LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFillBrushKey"

StartPoint="0 0"

EndPoint="1 0">

<LinearGradientBrush.GradientStops>

</GradientStopCollection>

</LinearGradientBrush.GradientStops>

</LinearGradientBrush>

<Setter.Value>

<Grid

MinWidth="200"

MinHeight="14"

Background="{TemplateBinding Background}">

<VisualStateManager.VisualStateGroups>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_Indicator"

Storyboard.TargetProperty="Background"

Duration="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>

</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>

</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.Value>

<LinearGradientBrush

StartPoint="0 0"

EndPoint="0 1">

</LinearGradientBrush>

</Setter.Value>

</Setter>

<Setter.Value>

<LinearGradientBrush

StartPoint="0.5 0"

EndPoint="0.5 1">

</LinearGradientBrush>

</Setter.Value>

</Setter>

</Style>

</Window.Resources>

<ProgressBar

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="300"

Height="20"

Value="50" />

</Window>

TestProject.zip