Create a WPF Custom Control, Part 1

David Veeneman

Rate me:

4.76/5 (45 votes)

31 Dec 2009CPOL16 min read

157.9K

7.1K

143

How to create a WPF custom control, using Expression Blend and Visual Studio.

outlook_2010taskbuttonpart1.zip
- Outlook 2010TaskButton
  - _ReSharper.Outlook 2010 Task Button
    - CachesImage.bin
    - ProjectModel
      - ProjectModel.dat
    - TodoCache
      - .version
    - WebsiteFileReferences
      - .version
    - WordIndex.New
      - .version
    - Xaml
      - CacheProvider.dat
  - _ReSharper.Outlook2010TaskButton
    - CachesImage.bin
    - ProjectModel
      - ProjectModel.dat
    - TodoCache
      - .version
      - 6
        
        6700eacc.dat
    - WebsiteFileReferences
      - .version
    - WordIndex.New
      - .version
      - 4
        
        5ab7f026.dat
    - Xaml
      - CacheProvider.dat
  - Outlook 2010 Task Button.4.5.resharper.user
  - Outlook 2010 Task Button.sln.cache
  - Outlook 2010TaskButton
    - App.xaml
    - App.xaml.cs
    - Application.ico
    - bin
      - Debug
        
        Outlook 2010 Task Button.exe
        
        Outlook 2010 Task Button.pdb
        
        Outlook 2010 Task Button.vshost.exe
        
        Outlook 2010 Task Button.vshost.exe.manifest
    - BrightnessValueConverter.cs
    - Button Color Specs.txt
    - calendar.png
    - MainWindow.xaml
    - MainWindow.xaml.cs
    - obj
      - Debug
        
        App.g.cs
        
        MainWindow.baml
        
        MainWindow.g.cs
        
        Office2010ResourceDictionary.baml
        
        Outlook 2010 Task Button.csproj.FileListAbsolute.txt
        
        Outlook 2010 Task Button.exe
        
        Outlook 2010 Task Button.g.resources
        
        Outlook 2010 Task Button.pdb
        
        Outlook 2010 Task Button_MarkupCompile.cache
        
        Outlook 2010 Task Button_MarkupCompile.lref
        
        Outlook2010TaskButton.csproj.FileListAbsolute.txt
        
        Refactor
        
        TempPE
    - Office2010ResourceDictionary.xaml
    - Outlook2010TaskButton.csproj
    - Properties
      - AssemblyInfo.cs
  - Outlook2010TaskButton.4.5.resharper.user
  - Outlook2010TaskButton.sln
  - Outlook2010TaskButton.sln.cache

<Window
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	xmlns:local="clr-namespace:Outlook2010TaskButton"
	x:Class="Outlook_2010_Task_Button.MainWindow"
	x:Name="Window"
	Title="MainWindow"
	Width="640" Height="480" Background="#FFB2C5DD" mc:Ignorable="d">
	<Window.Resources>
	
		<ControlTemplate x:Key="TaskButtonTemplate" TargetType="{x:Type RadioButton}">
			<ControlTemplate.Resources>
				<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"/>
				<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>
			<Grid x:Name="LayoutRoot" Margin="0" Width="150" Height="28" Background="#FFB2C5DD">
				<Grid x:Name="BorderGrid" Margin="0" Background="#FFB2C5DD" Opacity="0">
					<Grid.Effect>
						<DropShadowEffect ShadowDepth="4" Opacity="0.1"/>
					</Grid.Effect>
					<Rectangle x:Name="OuterStroke" Stroke="#FF859EBF" Margin="0"/>
					<Rectangle x:Name="InnerStroke" Stroke="#FFD9E7F5" Margin="1" Opacity="1"/>
				</Grid>
				<Grid x:Name="IsPressedGrid" Margin="0" Background="#FF9FB7D6" Visibility="Hidden">
					<Rectangle x:Name="InnerShadow" Margin="3,3,0,0" Stroke="#FFA6A6A6" OpacityMask="#19A6A6A6"/>
					<Rectangle x:Name="MiddleShadow" Margin="2,2,0,0" Opacity="1" Stroke="#FF737373" OpacityMask="#19737373"/>
					<Rectangle x:Name="OuterShadow" Stroke="#FF3F3F3F" Margin="1,1,0,0" OpacityMask="#19404040"/>
					<Rectangle x:Name="BorderRect" Stroke="#FF859EBF" Margin="0"/>
				</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>
				<StackPanel HorizontalAlignment="Stretch" Margin="0" Grid.RowSpan="1" Orientation="Horizontal">
					<Image Height="24" HorizontalAlignment="Left" Margin="4,0,0,0" Source="calendar.png"/>
					<TextBlock Text="Calendar" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Segoe UI" FontWeight="Bold" Margin="6,0,0,0" Foreground="#FF1E395B" />
				</StackPanel>
				<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>
			<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>
	</Window.Resources>

	<Grid x:Name="LayoutRoot">
		<RadioButton HorizontalAlignment="Center" VerticalAlignment="Center" Content="RadioButton" Template="{DynamicResource TaskButtonTemplate}"/>
	</Grid>
</Window>

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

David Veeneman

Software Developer (Senior) Foresight Systems

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.

Create a WPF Custom Control, Part 1

License

Comments and Discussions