Click here to Skip to main content
15,884,298 members
Articles / Desktop Programming / WPF

Create a WPF Custom Control, Part 2

Rate me:
Please Sign up or sign in to vote.
4.90/5 (40 votes)
13 Oct 2010CPOL18 min read 204.1K   8.5K   137  
How to create a WPF custom control, using Expression Blend and Visual Studio
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Outlook2010TaskButton">
    <Style TargetType="{x:Type local:TaskButton}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:TaskButton}">
                    
                    <ControlTemplate.Resources>
                        
                        <!-- Value Converters -->
                        <local:HlsValueConverter x:Key="ColorConverter" />
                        
                        <!-- Animation Storyboards -->
                        <Storyboard x:Key="MouseOverOn">
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="BorderGrid" Storyboard.TargetProperty="(UIElement.Opacity)">
                                <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="IsMouseOverGlow" Storyboard.TargetProperty="(UIElement.Opacity)">
                                <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Shine" Storyboard.TargetProperty="(UIElement.Opacity)">
                                <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                        <Storyboard x:Key="MouseOverOff">
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="BorderGrid" Storyboard.TargetProperty="(UIElement.Opacity)">
                                <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="IsMouseOverGlow" Storyboard.TargetProperty="(UIElement.Opacity)">
                                <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Shine" Storyboard.TargetProperty="(UIElement.Opacity)">
                                <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                        <Storyboard x:Key="CheckedOn">
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="IsCheckedGlow" Storyboard.TargetProperty="(UIElement.Opacity)">
                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Shine" Storyboard.TargetProperty="(UIElement.Opacity)">
                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="BorderGrid" Storyboard.TargetProperty="(UIElement.Opacity)">
                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                        <Storyboard x:Key="CheckedOff">
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="BorderGrid" Storyboard.TargetProperty="(UIElement.Opacity)">
                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="IsCheckedGlow" Storyboard.TargetProperty="(UIElement.Opacity)">
                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Shine" Storyboard.TargetProperty="(UIElement.Opacity)">
                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                        <Storyboard x:Key="PressedOn">
                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="BorderGrid" Storyboard.TargetProperty="(UIElement.Visibility)">
                                <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Hidden}"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="IsPressedGrid" Storyboard.TargetProperty="(UIElement.Visibility)">
                                <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="IsCheckedGlow" Storyboard.TargetProperty="(UIElement.Visibility)">
                                <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Hidden}"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="IsMouseOverGlow" Storyboard.TargetProperty="(UIElement.Visibility)">
                                <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Hidden}"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Shine" Storyboard.TargetProperty="(UIElement.Visibility)">
                                <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Hidden}"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                        <Storyboard x:Key="PressedOff">
                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="BorderGrid" Storyboard.TargetProperty="(UIElement.Visibility)">
                                <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="IsPressedGrid" Storyboard.TargetProperty="(UIElement.Visibility)">
                                <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Hidden}"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="IsCheckedGlow" Storyboard.TargetProperty="(UIElement.Visibility)">
                                <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="IsMouseOverGlow" Storyboard.TargetProperty="(UIElement.Visibility)">
                                <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Shine" Storyboard.TargetProperty="(UIElement.Visibility)">
                                <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </ControlTemplate.Resources>
                    
                    <!-- Control Layout -->
                    <Grid x:Name="LayoutRoot" Margin="0" Width="150" Height="28" Background="{TemplateBinding Background}">
                        
                        <!-- Button FX Displayed Behind Content -->
                        <Grid x:Name="BorderGrid" Margin="0" Background="{TemplateBinding Background}" Opacity="0">
                            <Grid.Effect>
                                <DropShadowEffect ShadowDepth="4" Opacity="0.1"/>
                            </Grid.Effect>
                            <Rectangle x:Name="OuterStroke" Stroke="{TemplateBinding Background, Converter={StaticResource ColorConverter}, ConverterParameter='0.5'}" Margin="0" />
                            <Rectangle x:Name="InnerStroke" Stroke="{TemplateBinding Background, Converter={StaticResource ColorConverter}, ConverterParameter='1.2'}" Margin="1" />
                        </Grid>
                        <Grid x:Name="IsPressedGrid" Margin="0" Background="{TemplateBinding Background, Converter={StaticResource ColorConverter}, ConverterParameter='0.85'}" Visibility="Hidden">
                            <Rectangle x:Name="InnerShadow" Margin="3,3,0,0" Stroke="{TemplateBinding Background, Converter={StaticResource ColorConverter}, ConverterParameter='0.8'}" Opacity="0.5" />
                            <Rectangle x:Name="MiddleShadow" Margin="2,2,0,0" Stroke="{TemplateBinding Background, Converter={StaticResource ColorConverter}, ConverterParameter='0.75'}" Opacity="0.5" />
                            <Rectangle x:Name="OuterShadow" Margin="1,1,0,0" Stroke="{TemplateBinding Background, Converter={StaticResource ColorConverter}, ConverterParameter='0.7'}" Opacity="0.5" />
                            <Rectangle x:Name="BorderRect" Margin="0" Stroke="{TemplateBinding Background, Converter={StaticResource ColorConverter}, ConverterParameter='0.5'}" />
                        </Grid>
                        <Rectangle x:Name="IsCheckedGlow" Margin="0,0.225,0,-0.225" VerticalAlignment="Stretch" Width="Auto" Opacity="0">
                            <Rectangle.Fill>
                                <RadialGradientBrush Center="0.502,0.922" GradientOrigin="0.502,0.922" RadiusY="0.453" RadiusX="0.717">
                                    <GradientStop Color="#7FFFFFFF" Offset="0"/>
                                    <GradientStop Offset="1"/>
                                </RadialGradientBrush>
                            </Rectangle.Fill>
                        </Rectangle>
                        <Rectangle x:Name="IsMouseOverGlow" Margin="0,0.225,0,-0.225" VerticalAlignment="Stretch" Width="Auto" Opacity="0">
                            <Rectangle.Fill>
                                <RadialGradientBrush Center="0.502,0.922" GradientOrigin="0.502,0.922" RadiusY="0.722" RadiusX="0.717">
                                    <GradientStop Color="#7FFFFFFF" Offset="0"/>
                                    <GradientStop Offset="1"/>
                                </RadialGradientBrush>
                            </Rectangle.Fill>
                        </Rectangle>
                        
                        <!-- Button Content -->
                        <StackPanel HorizontalAlignment="Stretch" Margin="0" Grid.RowSpan="1" Orientation="Horizontal">
                            <Image Source="{Binding Path=ImagePath, RelativeSource={RelativeSource TemplatedParent}}" 
                                Width="24" Height="24" Stretch="Fill" Margin="10,0,0,0" />
                            <TextBlock Text="{TemplateBinding Text}" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Segoe UI" FontWeight="Bold" Margin="6,0,0,0" 
                                Foreground="{TemplateBinding Background, Converter={StaticResource ColorConverter}, ConverterParameter='0.5'}" />
                        </StackPanel>

                        <!-- Button FX Displayed Over Content -->
                        <Rectangle x:Name="Shine" Margin="0" Opacity="0">
                            <Rectangle.Fill>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="#53FFFFFF" Offset="0"/>
                                    <GradientStop Offset="0.33"/>
                                </LinearGradientBrush>
                            </Rectangle.Fill>
                        </Rectangle>
                    </Grid>
                    
                    <!-- FX Triggers -->
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsPressed" Value="True">
                            <Trigger.ExitActions>
                                <BeginStoryboard x:Name="PressedOff_BeginStoryboard" Storyboard="{StaticResource PressedOff}"/>
                            </Trigger.ExitActions>
                            <Trigger.EnterActions>
                                <BeginStoryboard x:Name="PressedOn_BeginStoryboard" Storyboard="{StaticResource PressedOn}"/>
                            </Trigger.EnterActions>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Trigger.ExitActions>
                                <BeginStoryboard x:Name="MouseOverOff_BeginStoryboard" Storyboard="{StaticResource MouseOverOff}"/>
                            </Trigger.ExitActions>
                            <Trigger.EnterActions>
                                <BeginStoryboard x:Name="MouseOverOn_BeginStoryboard1" Storyboard="{StaticResource MouseOverOn}"/>
                            </Trigger.EnterActions>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="True">
                            <Trigger.ExitActions>
                                <BeginStoryboard x:Name="CheckedOff_BeginStoryboard" Storyboard="{StaticResource CheckedOff}"/>
                            </Trigger.ExitActions>
                            <Trigger.EnterActions>
                                <BeginStoryboard x:Name="CheckedOn_BeginStoryboard" Storyboard="{StaticResource CheckedOn}"/>
                            </Trigger.EnterActions>
                        </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
Software Developer (Senior) Foresight Systems
United States United States
David Veeneman is a financial planner and software developer. He is the author of "The Fortune in Your Future" (McGraw-Hill 1998). His company, Foresight Systems, develops planning and financial software.

Comments and Discussions