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

WPF Expression Blend 2 Tutorial: WPF Manufacturing Gauge Fan Custom Control

Rate me:
Please Sign up or sign in to vote.
3.84/5 (12 votes)
23 Feb 2009CPOL2 min read 61.6K   1.4K   51  
Step by step WPF Expression Blend2 tutorial on how to draw and animate a WPF Fan Control in Manufacturing Gauge using Expression Blend 2. Only XAML code is used, so all effects are done in markup.
<Window
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	x:Class="FanTutorial.Window1"
	x:Name="Window"
	Title="WPF Fan Tutorial"
	Width="268" Height="480" ResizeMode="NoResize">
	<Window.Resources>
		<Style x:Key="Template" TargetType="{x:Type ContentControl}">
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="{x:Type ContentControl}">
						<Rectangle Width="136" Height="184" Fill="#FFFFFFFF" Stroke="#FF000000"/>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
		<Storyboard x:Key="TurningFan">
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="FanCanvas" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" RepeatBehavior="Forever">
				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
				<SplineDoubleKeyFrame KeyTime="00:00:00.10000" Value="360"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
	</Window.Resources>
	<Window.Background>
		<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
			<GradientStop Color="#FF000000" Offset="1"/>
			<GradientStop Color="#FFFFFFFF" Offset="0"/>
		</LinearGradientBrush>
	</Window.Background>
	<Window.Triggers>
		<EventTrigger RoutedEvent="FrameworkElement.Loaded">
			<BeginStoryboard x:Name="TurningFan_BeginStoryboard1" Storyboard="{StaticResource TurningFan}"/>
		</EventTrigger>
	</Window.Triggers>

	<Grid x:Name="LayoutRoot">
		<Grid HorizontalAlignment="Left" Width="Auto" x:Name="MainGrid">
			<Canvas HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="48,192,-48,-192" x:Name="StandCanvas">
				<Rectangle Stroke="{x:Null}" Width="176" Height="13" RadiusX="7.5" RadiusY="7.5" Canvas.Top="245" x:Name="HorizontalStand">
					<Rectangle.Fill>
						<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
							<GradientStop Color="#FF000000" Offset="0"/>
							<GradientStop Color="#FFFFFFFF" Offset="0.996"/>
						</LinearGradientBrush>
					</Rectangle.Fill>
				</Rectangle>
				<Rectangle Width="176" Height="10" Stroke="{x:Null}" Canvas.Top="252" x:Name="HorizontalBottomStand">
					<Rectangle.Fill>
						<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
							<GradientStop Color="#FF7E7E7E" Offset="0.004"/>
							<GradientStop Color="#FF000000" Offset="0.987"/>
						</LinearGradientBrush>
					</Rectangle.Fill>
				</Rectangle>
				<Rectangle Fill="#FF535353" Width="8" Height="245" Stroke="{x:Null}" Canvas.Left="82" x:Name="VerticalStand"/>
			</Canvas>
			<Canvas Margin="87,95.215,-183,173" x:Name="FanCanvas" RenderTransformOrigin="0.5,0.5">
				<Canvas.RenderTransform>
					<TransformGroup>
						<ScaleTransform ScaleX="1" ScaleY="1"/>
						<SkewTransform AngleX="0" AngleY="0"/>
						<RotateTransform Angle="0"/>
						<TranslateTransform X="0" Y="0"/>
					</TransformGroup>
				</Canvas.RenderTransform>
				<Ellipse Width="10" Height="10" Stroke="{x:Null}" Canvas.Left="43" Canvas.Top="88" x:Name="CenterCap">
					<Ellipse.Fill>
						<RadialGradientBrush>
							<GradientStop Color="#FF000000" Offset="0"/>
							<GradientStop Color="#FF000000" Offset="1"/>
							<GradientStop Color="#FFF4EDED" Offset="0.462"/>
						</RadialGradientBrush>
					</Ellipse.Fill>
				</Ellipse>
				<Ellipse Width="16" Height="88" Stroke="{x:Null}" Canvas.Left="40" x:Name="Wing1">
					<Ellipse.Fill>
						<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
							<GradientStop Color="#FF000000" Offset="0"/>
							<GradientStop Color="#FFC4C3C3" Offset="1"/>
						</LinearGradientBrush>
					</Ellipse.Fill>
				</Ellipse>
				<Ellipse Stroke="{x:Null}" RenderTransformOrigin="0.5,0.5" Width="16" Height="88" Canvas.Top="77" x:Name="Wing2">
					<Ellipse.Fill>
						<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
							<GradientStop Color="#FF000000" Offset="0"/>
							<GradientStop Color="#FFABAAAA" Offset="1"/>
						</LinearGradientBrush>
					</Ellipse.Fill>
					<Ellipse.RenderTransform>
						<TransformGroup>
							<ScaleTransform ScaleX="1" ScaleY="1"/>
							<SkewTransform AngleX="0" AngleY="0"/>
							<RotateTransform Angle="-125.579"/>
							<TranslateTransform X="0" Y="0"/>
						</TransformGroup>
					</Ellipse.RenderTransform>
				</Ellipse>
				<Ellipse Stroke="{x:Null}" RenderTransformOrigin="0.5,0.5" Width="16" Height="88" Canvas.Left="82" Canvas.Top="75" x:Name="Wing3">
					<Ellipse.Fill>
						<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
							<GradientStop Color="#FF000000" Offset="0"/>
							<GradientStop Color="#FFBDBDBD" Offset="1"/>
						</LinearGradientBrush>
					</Ellipse.Fill>
					<Ellipse.RenderTransform>
						<TransformGroup>
							<ScaleTransform ScaleX="1" ScaleY="1"/>
							<SkewTransform AngleX="0" AngleY="0"/>
							<RotateTransform Angle="122.554"/>
							<TranslateTransform X="0" Y="0"/>
						</TransformGroup>
					</Ellipse.RenderTransform>
				</Ellipse>
			</Canvas>
		</Grid>
	</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
Software Developer (Senior) www.nextwavesoft.com
United States United States
Senior Software Developer at nextwavesoft

Comments and Discussions