Click here to Skip to main content
15,885,855 members
Articles / Desktop Programming / WPF

WPF Control Composition (Part 2 of 2)

Rate me:
Please Sign up or sign in to vote.
4.86/5 (12 votes)
21 Mar 2012CPOL6 min read 44.7K   1.6K   36  
Theming an existing user control adds flexibilty at the application side without changing the original implementation. This article gives an example by theming a user control that was previously not fully themeable.
<ResourceDictionary
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006">

  <!-- Add resources for FolderTreeView control -->
  <ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="Shared.xaml" />
  </ResourceDictionary.MergedDictionaries>

  <Style TargetType="{x:Type ProgressBar}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ProgressBar}">
          <ControlTemplate.Resources>
            <Storyboard x:Key="ValueChangedOn">
              <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PART_Track" Storyboard.TargetProperty="(UIElement.BitmapEffect).(OuterGlowBitmapEffect.Opacity)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1" />
                <SplineDoubleKeyFrame KeyTime="00:00:02" Value="0" />
              </DoubleAnimationUsingKeyFrames>
            </Storyboard>
            <Storyboard x:Key="IndeterminateOn">
              <DoubleAnimationUsingKeyFrames Storyboard.TargetName="IndeterminateGradientFill" Storyboard.TargetProperty="(Shape.Fill).(LinearGradientBrush.Transform).(TransformGroup.Children)[0].X" RepeatBehavior="Forever">
                <SplineDoubleKeyFrame KeyTime="0" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:2.4" Value="145" />
              </DoubleAnimationUsingKeyFrames>

            </Storyboard>
          </ControlTemplate.Resources>
          <Grid>
            <Border x:Name="PART_Track" BorderBrush="{DynamicResource SolidBorderBrush}" BorderThickness="1" CornerRadius="0,0,0,0" Background="{DynamicResource LightBrush}">
              <Border.BitmapEffect>
                <OuterGlowBitmapEffect Opacity="0" GlowColor="{DynamicResource WhiteColor}" GlowSize="3" />
              </Border.BitmapEffect>
            </Border>
            <Border HorizontalAlignment="Left" x:Name="PART_Indicator" BorderBrush="{DynamicResource NormalBorderBrush}" BorderThickness="1" CornerRadius="0,0,0,0">
              <Border.Background>
                <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
                  <GradientStop Color="#B2FFFFFF" Offset="0" />
                  <GradientStop Color="#C6FFFFFF" Offset="0.15" />
                  <GradientStop Color="#D1FFFFFF" Offset="0.275" />
                  <GradientStop Color="#C6FFFFFF" Offset="0.4" />
                  <GradientStop Color="#BFFFFFFF" Offset="0.65" />
                  <GradientStop Color="#A5FFFFFF" Offset="0.75" />
                  <GradientStop Color="#91FFFFFF" Offset="0.85" />
                  <GradientStop Color="#72FFFFFF" Offset="1" />
                </LinearGradientBrush>
              </Border.Background>
            </Border>
            <Grid x:Name="IndeterminateRoot" Visibility="Collapsed">
              <Rectangle Margin="{TemplateBinding BorderThickness}" x:Name="IndeterminateSolidFill" Opacity="1" RenderTransformOrigin="0.5,0.5" RadiusX="2" RadiusY="2" Fill="{DynamicResource ControlBackgroundBrush}" Stroke="#FF448DCA" StrokeThickness="0" />
              <Rectangle Margin="{TemplateBinding BorderThickness}" x:Name="IndeterminateGradientFill" RadiusX="2" RadiusY="2" StrokeThickness="1">
                <Rectangle.Fill>
                  <LinearGradientBrush EndPoint="0.508,1.394" StartPoint="0.401,-0.394" SpreadMethod="Repeat">
                    <GradientStop Color="#00FFFFFF" />
                    <GradientStop Color="#FEA1A1A1" Offset="1" />
                    <GradientStop Color="#00FEFEFE" Offset="0.517" />
                    <GradientStop Color="#FEA1A1A1" Offset="0.517" />
                    <LinearGradientBrush.Transform>
                      <TransformGroup>
                        <TranslateTransform X="0" />
                      </TransformGroup>
                    </LinearGradientBrush.Transform>
                  </LinearGradientBrush>
                </Rectangle.Fill>
              </Rectangle>
            </Grid>
            <Border Background="{DynamicResource DisabledBackgroundBrush}" Opacity="0" BorderThickness="1,1,1,1" BorderBrush="{DynamicResource DisabledBorderBrush}" x:Name="border"/>
          </Grid>
          <ControlTemplate.Triggers>
            <Trigger Property="IsEnabled" Value="False">
              <Setter Property="Opacity" TargetName="border" Value="0.8"/>
            </Trigger>
<!--
  http://social.msdn.microsoft.com/Forums/eu/wpf/thread/c0d45ef7-e086-43f5-8581-2048e605ef32
            <EventTrigger RoutedEvent="RangeBase.ValueChanged">
              <BeginStoryboard Storyboard="{StaticResource ValueChangedOn}" />
            </EventTrigger>
-->            <Trigger Property="IsIndeterminate" Value="True">
              <Trigger.EnterActions>
                <BeginStoryboard Storyboard="{StaticResource IndeterminateOn}" />
              </Trigger.EnterActions>
              <Setter Property="Visibility" TargetName="IndeterminateRoot" Value="Visible"/>
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

</ResourceDictionary>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Germany Germany
The Windows Presentation Foundation (WPF) and C# are among my favorites and so I developed Edi

and a few other projects on GitHub. I am normally an algorithms and structure type but WPF has such interesting UI sides that I cannot help myself but get into it.

https://de.linkedin.com/in/dirkbahle

Comments and Discussions