Click here to Skip to main content
Click here to Skip to main content
Add your own
alternative version

Catel - Part 4 of n: Unit testing with Catel

, 28 Jan 2011 CPOL
This article explains how to write unit tests for MVVM using Catel.
Catel-04_01-unittesting.zip
src
Catel.Articles.04 - Unit testing
Models
Properties
Settings.settings
Resources
Images
add.png
delete.png
edit.png
group.png
UI
Data
Converters
ViewModels
Windows
Catel.Articles.04 - Unit testing.Test
Models
Properties
UI
ViewModels
Catel.Articles.Base
Data
Attributes
Properties
Settings.settings
Resources
Images
CatenaLogic.png
Preview.png
Run.png
ShowCode.png
UI
Controls
Helpers
ViewModels
Windows
Catel.Core
Attributes
ClassDiagrams
DataObjectBase.cd
SavableDataObjectBase.cd
Collections
Helpers
ComponentModel
Data
Attributes
Exceptions
Interfaces
Diagnostics
Extensions
Helpers
Exceptions
Helpers
IO
Exceptions
IoC
LLBLGen
Log4net
Appender
Extensions
Helpers
MVVM
Commands
Interfaces
Exceptions
Services
EventArgs
Exceptions
Interfaces
ViewModels
Attributes
Interfaces
Properties
Reflection
Exceptions
Extensions
Helpers
Runtime
Serialization
Attributes
Helpers
Security
Cryptography
Helpers
Catel.Examples.Models
Properties
Catel.Examples.PersonApplication
Properties
Settings.settings
Resources
Images
add.png
delete.png
edit.png
group.png
UI
Data
Converters
ViewModels
Windows
Catel.Examples.Silverlight
Properties
Resources
Images
add.png
delete.png
edit.png
group.png
UI
Data
Converters
Pages
ViewModels
Windows
Catel.Examples.Silverlight.Web
Catel.Examples.Silverlight.Web.csproj.user
ClientBin
Properties
Catel.FxCop
Catel.Silverlight
Diagnostics
log4net
Core
MVVM
Commands
Services
ViewModels
Properties
Catel.Core
Catel.Windows
Reflection
Themes
Generic
Assets
Old
Windows
Controls
Data
Converters
Helpers
Helpers
Catel.Silverlight.Test
Properties
Catel.Silverlight.Test.Web
Catel.Silverlight.Test.Web.csproj.user
ClientBin
Properties
Catel.snk
Catel.Templates.WpfApplication
Properties
Settings.settings
UI
Controls
ViewModels
Windows
Catel.Templates.WpfItemTemplates
Properties
UI
Controls
ViewModels
Windows
Catel.Test
Collections
Convert
Data
Helpers
IO
MVVM
UI
ViewModels
Properties
Reflection
Runtime
Serialization
Security
Cryptography
Test References
Catel.Windows.accessor
Windows
Data
Converters
Catel.vsmdi
Catel.Windows
ClassDiagrams
ViewModelBase.cd
Collections
Extensions
Helpers
MVVM
Commands
Services
Test
UI
ViewModels
Properties
Settings.settings
Resources
Images
Add.png
ClearOutput.png
Edit.png
Error.png
Loading.gif
Preview.png
Remove.png
Save.png
TipOfTheDay.png
Warning.png
Themes
Aero
ExpressionDark
Assets
Generic
Assets
Controls
Jetpack
Assets
background.png
Old
SunnyOrange
Assets
Windows
Controls
Extensions
LinkLabel
StackGrid
Data
Converters
Helpers
Documents
Extensions
Extensions
Helpers
Input
Markup
Media
Effects
EmptyEffect
EmptyEffect.fx
EmptyEffect.ps
EmptyEffect.fx
GrayscaleEffect
GrayscaleEffect.fx
GrayscaleEffect.ps
Extensions
Imaging
Extensions
Windows
DataWindow
TipOfTheDay
Local.testsettings
Settings.StyleCop
TraceAndTestImpact.testsettings
<ResourceDictionary
	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" mc:Ignorable="d">

<SolidColorBrush x:Key="Normal_Background" Color="#FFF46B00"/>
    <RadialGradientBrush x:Key="RadialBackGround_Orange" GradientOrigin="0.5,0.5">
        <GradientStop Color="#FFF46B00" Offset="1"/>
        <GradientStop Color="#FFF9FE30" Offset="0"/>
    </RadialGradientBrush>
    <LinearGradientBrush x:Key="Stroke_Gradient" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF6E6E6E" Offset="0"/>
        <GradientStop Color="#FFFFFFFF" Offset="0.496"/>
        <GradientStop Color="#FF6E6E6E" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="Stroke_Gradient_Horizontal" EndPoint="1,0" StartPoint="0,0">
        <GradientStop Color="#FF454545" Offset="0"/>
        <GradientStop Color="#FFFFFFFF" Offset="0.5"/>
        <GradientStop Color="#FF3B3B3B" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="Overlay_Fade_Gradient" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#4CFFFFFF" Offset="1"/>
        <GradientStop Color="#FFFFFFFF" Offset="0"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="LinearGradient_Orange" EndPoint="1,0" StartPoint="0,0" >
        <GradientStop Color="#FFF9FF09" Offset="0"/>
        <GradientStop Color="#FFF7DE25" Offset="0.959"/>
        <GradientStop Color="#FFFF7000" Offset="0.033"/>
        <GradientStop Color="#FFFF7200" Offset="1"/>
    </LinearGradientBrush>
	  
	<LinearGradientBrush x:Key="LinearGradient_Orange_H" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#FFF9FF09" Offset="0"/>
        <GradientStop Color="#FFF7DE25" Offset="0.959"/>
        <GradientStop Color="#FFFF7000" Offset="0.033"/>
        <GradientStop Color="#FFFF7200" Offset="1"/>
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="Horizontal_Gradient" EndPoint="1,0" StartPoint="0,0">
    	<GradientStop Color="#CCC" Offset="0.0"/>
    	<GradientStop Color="#444" Offset="1.0"/>
    </LinearGradientBrush>
	    <LinearGradientBrush x:Key="Vertical_Gradient" EndPoint="0,1" StartPoint="0,0">
    	<GradientStop Color="#CCC" Offset="0.0"/>
    	<GradientStop Color="#444" Offset="1.0"/>
    </LinearGradientBrush>

    <!-- MouseOverBrush is used for MouseOver in Button, Radio Button, CheckBox -->
    <LinearGradientBrush x:Key="MouseOverBrush" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#FFF" Offset="0.0"/>
        <GradientStop Color="#AAA" Offset="1.0"/>
    </LinearGradientBrush>
    <!-- LightBrush is used for content areas such as Menu, Tab Control background -->
    <LinearGradientBrush EndPoint="0,1" StartPoint="0,0" x:Key="LightBrush">
    	<GradientStop Color="#FFF" Offset="0.0"/>
    	<GradientStop Color="#EEE" Offset="1.0"/>
    </LinearGradientBrush>

    <Style x:Key="{x:Type Button}" TargetType="{x:Type Button}" BasedOn="{x:Null}">
		<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type Button}">
					<Border>
						<Grid>
							<Grid.RowDefinitions>
								<RowDefinition Height="0.5*"/>
								<RowDefinition Height="0.5*"/>
							</Grid.RowDefinitions>
							<Rectangle VerticalAlignment="Stretch" Grid.ColumnSpan="3" Grid.RowSpan="5" x:Name="ellipse" RadiusX="4" RadiusY="4" Stroke="{DynamicResource Stroke_Gradient}" Fill="{DynamicResource RadialBackGround_Orange}" StrokeThickness="2"/>
							<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Grid.ColumnSpan="1" Grid.RowSpan="2" Grid.Row="0" Grid.Column="0"/>
							<Rectangle HorizontalAlignment="Stretch" Margin="1,0,1,0" VerticalAlignment="Stretch" Width="Auto" Height="Auto" Grid.Column="0" Grid.Row="0" x:Name="ellipse1" Grid.RowSpan="1" Opacity="0.9" Grid.ColumnSpan="1" RadiusX="3" RadiusY="3" Fill="{DynamicResource Overlay_Fade_Gradient}"/>
						</Grid>
					</Border>
					<ControlTemplate.Triggers>
						<Trigger Property="IsMouseOver" Value="True">
							<Setter Property="Opacity" TargetName="ellipse1" Value="0.4"/>
							<Setter Property="Margin" TargetName="ellipse" Value="0,0,0,1"/>
						</Trigger>
						<Trigger Property="IsPressed" Value="True">
							<Setter Property="StrokeThickness" TargetName="ellipse" Value="3"/>
						</Trigger>
						<Trigger Property="IsEnabled" Value="False">
							<Setter Property="Fill" TargetName="ellipse" Value="LightGray"/>
						</Trigger>
					</ControlTemplate.Triggers>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>

	<Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">
		<Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type ScrollBar}">
					<Grid x:Name="GridRoot">
						<Grid.RowDefinitions>
							<RowDefinition MaxHeight="18"/>
							<RowDefinition Height="0.00001*"/>
							<RowDefinition MaxHeight="18"/>
						</Grid.RowDefinitions>
						
						<Rectangle x:Name="backrect" Width="10" Height="Auto" Grid.Row="0" Grid.RowSpan="3" Margin="2,3,2,3" StrokeThickness="1" Fill="{DynamicResource Horizontal_Gradient}" Stroke="{DynamicResource Stroke_Gradient}"/>
						
						<RepeatButton x:Name="DecreaseRepeat"  Command="ScrollBar.LineUpCommand">
							<Grid>
								<Path x:Name="DecreaseArrow" Fill="{TemplateBinding Foreground}" Data="M 0 6 L 12 6 L 6 0 Z"/>
							</Grid>
						</RepeatButton>
						
<!-- Track is a special layout container which sizes the thumb and the repeat button which do jump scrolling either side of it -->
						<Track Grid.Row="1" x:Name="PART_Track" Orientation="Vertical" IsDirectionReversed="true">
							<Track.Thumb>
								<Thumb />
							</Track.Thumb>
							<Track.IncreaseRepeatButton>
								<RepeatButton x:Name="PageUp" Style="{DynamicResource ScrollBar_RepeatButtonStyle1}" Command="ScrollBar.PageDownCommand"/>
							</Track.IncreaseRepeatButton>
							<Track.DecreaseRepeatButton>
								<RepeatButton x:Name="PageDown" Style="{DynamicResource ScrollBar_RepeatButtonStyle1}" Command="ScrollBar.PageUpCommand"/>
							</Track.DecreaseRepeatButton>
						</Track>
						
						<RepeatButton Grid.Row="2" x:Name="IncreaseRepeat"  Command="ScrollBar.LineDownCommand">
							<Grid>
								<Path x:Name="IncreaseArrow"  Data="M 0 0 L 6 6 L 12 0 Z" Fill="{TemplateBinding Foreground}"/>
							</Grid>
						</RepeatButton>
					</Grid>
					
					<!-- This uses a single template for ScrollBar and rotate it to be Horizontal
					It also changes the commands so that the it does Left and Right instead of Up and Down Commands -->
					<ControlTemplate.Triggers>
						<Trigger Property="Orientation" Value="Horizontal">

							<!-- Rotate the ScrollBar from Vertical to Horizontal -->
							<Setter Property="LayoutTransform" TargetName="GridRoot">
								<Setter.Value>
									<RotateTransform Angle="-90"/>
								</Setter.Value>
							</Setter>
							
							<!-- Track is bound to Orientation internally, so we need to rotate it back to Vertical -->
							<Setter TargetName="PART_Track" Property="Orientation" Value="Vertical"/>
					
							<!-- Change the commands to do Horizontal commands -->
							<Setter Property="Command" Value="ScrollBar.LineLeftCommand" TargetName="DecreaseRepeat"/>
							<Setter Property="Command" Value="ScrollBar.LineRightCommand" TargetName="IncreaseRepeat"/>
							<Setter Property="Command" Value="ScrollBar.PageLeftCommand" TargetName="PageDown"/>
							<Setter Property="Command" Value="ScrollBar.PageRightCommand" TargetName="PageUp"/>
							
						</Trigger>
						<Trigger Property="IsEnabled" Value="False">
							<Setter Property="Fill" TargetName="backrect" Value="LightGray"/>
						</Trigger>
					</ControlTemplate.Triggers>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>
	<!-- Resource dictionary entries should be defined here. -->
	
	<!-- Simple Repeat Button - This is used by Simple ScrollBar for the up and down buttons -->
	<Style x:Key="{x:Type RepeatButton}" d:IsControlPart="True" TargetType="{x:Type RepeatButton}" BasedOn="{x:Null}">
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="0.5*"/>
                            <RowDefinition Height="0.5*"/>
                        </Grid.RowDefinitions>
                        <Rectangle VerticalAlignment="Stretch" Grid.ColumnSpan="3" Grid.RowSpan="5" x:Name="ellipse"  Stroke="{DynamicResource Stroke_Gradient}" Fill="{DynamicResource Normal_Background}" RadiusX="3" RadiusY="3"/>
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Grid.ColumnSpan="1" Grid.RowSpan="2" Grid.Row="0" Grid.Column="0"/>
                        <Rectangle StrokeThickness="0" HorizontalAlignment="Stretch" Margin="1,0,1,0" VerticalAlignment="Stretch" Width="Auto" Height="Auto" Grid.Column="0" Grid.Row="0" x:Name="ellipse1" Grid.RowSpan="1" Opacity="0.9" Grid.ColumnSpan="1" RadiusX="3" RadiusY="3" Fill="{DynamicResource Overlay_Fade_Gradient}"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Opacity" TargetName="ellipse1" Value="0.4"/>
                            <Setter Property="Margin" TargetName="ellipse" Value="0,0,0,1"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="StrokeThickness" TargetName="ellipse" Value="2"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Fill" TargetName="ellipse" Value="LightGray"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>
	
	<Style x:Key="{x:Type Thumb}" d:IsControlPart="True" TargetType="{x:Type Thumb}" BasedOn="{x:Null}">
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type Thumb}">
					 <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="0.5*"/>
                            <RowDefinition Height="0.5*"/>
                        </Grid.RowDefinitions>
                        <Rectangle VerticalAlignment="Stretch" Grid.ColumnSpan="1" Grid.RowSpan="2" x:Name="ellipse" RadiusX="1" RadiusY="1" Stroke="{DynamicResource Stroke_Gradient}" Fill="{DynamicResource Normal_Background}"/>
                        <Rectangle StrokeThickness="0" HorizontalAlignment="Stretch" Margin="1,0,1,0" VerticalAlignment="Stretch" Width="Auto" Height="Auto" Grid.Column="0" Grid.Row="0" x:Name="ellipse1" Grid.RowSpan="1" Opacity="0.9" Grid.ColumnSpan="1" RadiusX="1" RadiusY="1" Fill="{DynamicResource Overlay_Fade_Gradient}"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Opacity" TargetName="ellipse1" Value="0.4"/>
                            <Setter Property="StrokeThickness" TargetName="ellipse" Value="2"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Fill" TargetName="ellipse" Value="Gray"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>

	<Style x:Key="{x:Type ScrollViewer}" TargetType="{x:Type ScrollViewer}" BasedOn="{x:Null}">
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type ScrollViewer}">
					<Grid Background="{TemplateBinding Background}">
						<Grid.ColumnDefinitions>
							<ColumnDefinition Width="*"/>
							<ColumnDefinition Width="Auto"/>
						</Grid.ColumnDefinitions>
						<Grid.RowDefinitions>
							<RowDefinition Height="*"/>
							<RowDefinition Height="Auto"/>
						</Grid.RowDefinitions>
						<ScrollContentPresenter Grid.Column="0" Grid.Row="0" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" CanContentScroll="{TemplateBinding CanContentScroll}"/>
						
						<!-- The visibility of the ScrollBars is controlled by the implementation fo the control -->
						<ScrollBar Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Grid.Column="0" Grid.Row="1" x:Name="PART_HorizontalScrollBar"  Orientation="Horizontal" Value="{Binding Path=HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}" Minimum="0" Maximum="{TemplateBinding ScrollableWidth}" AutomationProperties.AutomationId="HorizontalScrollBar"/>
						<ScrollBar Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Grid.Column="1" Grid.Row="0" x:Name="PART_VerticalScrollBar" Orientation="Vertical" Value="{Binding Path=VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}" Minimum="0" Maximum="{TemplateBinding ScrollableHeight}" AutomationProperties.AutomationId="VerticalScrollBar"/>
					</Grid>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>

	<Style x:Key="{x:Type ListBox}" TargetType="{x:Type ListBox}">
		<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
		<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
		<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
		<Setter Property="VerticalContentAlignment" Value="Center"/>
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type ListBox}">
					<Grid Width="Auto" Height="Auto">
						<Border x:Name="Bd" SnapsToDevicePixels="true" CornerRadius="4,4,4,4" Background="{DynamicResource GlyphBrush}" BorderBrush="{DynamicResource Stroke_Gradient}" BorderThickness="2,2,2,2" d:LayoutOverrides="Width, Height" Margin="0,0,10,0"/>
						<ScrollViewer Padding="{TemplateBinding Padding}" Focusable="false" Margin="4,4,4,4">
							<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
						</ScrollViewer>
					</Grid>
					<ControlTemplate.Triggers>
						<Trigger Property="IsEnabled" Value="false">
							<Setter Property="Background" TargetName="Bd" Value="LightGray"/>
						</Trigger>
						<Trigger Property="IsGrouping" Value="true">
							<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
						</Trigger>
					</ControlTemplate.Triggers>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
		<Setter Property="BorderThickness" Value="0,0,0,0"/>
	</Style>
	
	<Style x:Key="ComboBox_ToggleButtonStyle1" TargetType="{x:Type ToggleButton}">
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type ToggleButton}">
					<Grid>
						<Grid.ColumnDefinitions>
							<ColumnDefinition Width="*"/>
							<ColumnDefinition Width="22"/>
						</Grid.ColumnDefinitions>
						<Grid.RowDefinitions>
							<RowDefinition Height="0.5*"/>
							<RowDefinition Height="0.5*"/>
						</Grid.RowDefinitions>
						<Rectangle x:Name="ellipse_Copy" Fill="{DynamicResource Stroke_Gradient}" RadiusX="4" RadiusY="4" VerticalAlignment="Stretch" Grid.ColumnSpan="2" Grid.RowSpan="2" StrokeThickness="0"/>
						<Rectangle x:Name="ellipse" Fill="{DynamicResource RadialBackGround_Orange}" Stroke="{DynamicResource Stroke_Gradient}" RadiusX="4" RadiusY="4" VerticalAlignment="Stretch" Grid.ColumnSpan="1" Grid.RowSpan="2" StrokeThickness="1" Margin="1,1,0,1"/>
						<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="2" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
						<Rectangle x:Name="ellipse1" Fill="{DynamicResource Overlay_Fade_Gradient}" StrokeThickness="0" RadiusX="3" RadiusY="3" HorizontalAlignment="Stretch" Margin="1,0,1,0" VerticalAlignment="Stretch" Width="Auto" Height="Auto" Opacity="0.9" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Grid.RowSpan="1"/>
						<Path x:Name="ArrowPanelPath" VerticalAlignment="Center" Fill="{TemplateBinding Foreground}" Data="M0,0 L14,0 L7,10 z" StrokeThickness="0" Grid.Column="1" Grid.RowSpan="2" HorizontalAlignment="Center"/>
					</Grid>
					<ControlTemplate.Triggers>
						<Trigger Property="IsMouseOver" Value="True">
							<Setter Property="Margin" TargetName="ellipse_Copy" Value="0,0,0,1"/>
							<Setter Property="Opacity" TargetName="ellipse1" Value="0.5"/>
						</Trigger>
						<Trigger Property="IsPressed" Value="True">
							<Setter Property="StrokeThickness" TargetName="ellipse" Value="2"/>
						</Trigger>
						<Trigger Property="IsChecked" Value="True">
							<Setter Property="StrokeThickness" TargetName="ellipse" Value="3"/>
							<Setter Property="Fill" TargetName="ellipse" Value="#FFF46B00"/>
							<Setter Property="Data" TargetName="ArrowPanelPath" Value="M 0 10 L 14 10 L 7 0 Z"/>
						</Trigger>
						<Trigger Property="IsEnabled" Value="False">
							<Setter Property="Fill" TargetName="ellipse" Value="#FFD3D3D3"/>
						</Trigger>
					</ControlTemplate.Triggers>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>


	<Style x:Key="{x:Type ComboBox}" TargetType="{x:Type ComboBox}">
		<Setter Property="SnapsToDevicePixels" Value="true"/>
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type ComboBox}">
					<Grid>
						<!-- The ToggleButton is databound to the ComboBox itself to toggle IsDropDownOpen -->
						<ToggleButton Grid.Column="2"  x:Name="ToggleButton" Focusable="false" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press" Style="{DynamicResource ComboBox_ToggleButtonStyle1}"/>
						<ContentPresenter HorizontalAlignment="Left" Margin="4,3,25,3" x:Name="ContentSite" VerticalAlignment="Center" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" IsHitTestVisible="False"/>
						
						<!-- The TextBox must be named PART_EditableTextBox or ComboBox will not recognize it -->
						<TextBox Visibility="Hidden" Template="{DynamicResource ComboBoxTextBox}" HorizontalAlignment="Left" Margin="3,3,23,3" x:Name="PART_EditableTextBox" Style="{x:Null}" VerticalAlignment="Center" Focusable="True" Background="Transparent" IsReadOnly="{TemplateBinding IsReadOnly}"/>
						
						<!-- The Popup shows the list of items in the ComboBox. IsOpen is databound to IsDropDownOpen which is toggled via the ComboBoxToggleButton -->
						<Popup IsOpen="{TemplateBinding IsDropDownOpen}" Placement="Bottom" x:Name="Popup" Focusable="False" AllowsTransparency="True" PopupAnimation="Slide">
							<Grid MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{TemplateBinding ActualWidth}" x:Name="DropDown" SnapsToDevicePixels="True">
								<Border x:Name="DropDownBorder" Background="{DynamicResource Normal_Background}" BorderBrush="{DynamicResource Stroke_Gradient}" BorderThickness="2,1,2,1" CornerRadius="4,4,4,4"/>
								<ScrollViewer Margin="4,4,4,4"  SnapsToDevicePixels="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" CanContentScroll="True">
							
									<!-- The StackPanel is used to display the children by setting IsItemsHost to be True -->
									<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained"/>
								
								</ScrollViewer>
							</Grid>
						</Popup>
					</Grid>
					<ControlTemplate.Triggers>						
						<!-- This forces the DropDown to have a minimum size if it is empty -->
						<Trigger Property="HasItems" Value="false">
							<Setter Property="MinHeight" Value="95" TargetName="DropDownBorder"/>
						</Trigger>
						<Trigger Property="IsEnabled" Value="false">
							<Setter Property="Foreground" Value="{DynamicResource Vertical_Gradient}"/>
						</Trigger>
						<Trigger Property="IsGrouping" Value="true">
							<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
						</Trigger>
						<Trigger Property="AllowsTransparency" SourceName="Popup" Value="true">
							<Setter Property="CornerRadius" Value="4" TargetName="DropDownBorder"/>
							<Setter Property="Margin" Value="0,2,0,0" TargetName="DropDownBorder"/>
						</Trigger>
						<Trigger Property="IsEditable" Value="true">
							<Setter Property="IsTabStop" Value="false"/>
							<Setter Property="Visibility" Value="Visible" TargetName="PART_EditableTextBox"/>
							<Setter Property="Visibility" Value="Hidden" TargetName="ContentSite"/>
						</Trigger>
					</ControlTemplate.Triggers>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
		<Setter Property="Foreground" Value="#FF000000"/>
	</Style>
	<Style x:Key="{x:Type ToggleButton}" TargetType="{x:Type ToggleButton}">
		<Setter Property="Template">
		<Setter.Value>
		<ControlTemplate TargetType="{x:Type ToggleButton}">
			  <Grid>
					<Grid.RowDefinitions>
						<RowDefinition Height="0.5*"/>
						<RowDefinition Height="0.5*"/>
					</Grid.RowDefinitions>
					<Rectangle VerticalAlignment="Stretch" Grid.ColumnSpan="3" Grid.RowSpan="5" x:Name="ellipse" RadiusX="4" RadiusY="4" Stroke="{DynamicResource Stroke_Gradient}" Fill="{DynamicResource RadialBackGround_Orange}" StrokeThickness="2"/>
					<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Grid.ColumnSpan="1" Grid.RowSpan="2" Grid.Row="0" Grid.Column="0"/>
					<Rectangle StrokeThickness="0" HorizontalAlignment="Stretch" Margin="1,0,1,0" VerticalAlignment="Stretch" Width="Auto" Height="Auto" Grid.Column="0" Grid.Row="0" x:Name="ellipse1" Grid.RowSpan="1" Opacity="0.9" Grid.ColumnSpan="1" RadiusX="3" RadiusY="3" Fill="{DynamicResource Overlay_Fade_Gradient}"/>
				</Grid>
                  	<ControlTemplate.Triggers>
						<Trigger Property="IsMouseOver" Value="True">
							<Setter Property="Opacity" TargetName="ellipse1" Value="0.4"/>
							<Setter Property="Margin" TargetName="ellipse" Value="0,0,0,1"/>
						</Trigger>
						<Trigger Property="IsPressed" Value="True">
							<Setter Property="StrokeThickness" TargetName="ellipse" Value="2"/>
						</Trigger>
						<Trigger Property="IsChecked" Value="True">
							<Setter Property="StrokeThickness" TargetName="ellipse" Value="4"/>
							<Setter Property="Fill" TargetName="ellipse" Value="{StaticResource Normal_Background}"/>
						</Trigger>
						<Trigger Property="IsEnabled" Value="False">
							<Setter Property="Fill" TargetName="ellipse" Value="{StaticResource Vertical_Gradient}"/>
						</Trigger>
					</ControlTemplate.Triggers>
             </ControlTemplate>
		</Setter.Value>
		</Setter>
	</Style>
	<Style x:Key="{x:Type RadioButton}" TargetType="{x:Type RadioButton}">
		<Setter Property="SnapsToDevicePixels" Value="true"/>
		<Setter Property="FocusVisualStyle" Value="{DynamicResource RadioButtonFocusVisual}"/>
		<Setter Property="Background" Value="{DynamicResource Vertical_Gradient}"/>
		<Setter Property="BorderBrush" Value="{DynamicResource Stroke_Gradient}"/>
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type RadioButton}">
				
					<!-- BulletDecorator is used to provide baseline alignment between the checkmark and the Content -->
					<BulletDecorator Background="Transparent">
						<BulletDecorator.Bullet>
							<Grid Width="15" Height="15">
								<Rectangle x:Name="Ellipse_Border" Fill="{DynamicResource LightBrush}" Stroke="{DynamicResource Stroke_Gradient}" StrokeThickness="1" HorizontalAlignment="Stretch" RadiusX="4" RadiusY="4"/>
								<Rectangle Margin="3,3,3,3" x:Name="CheckMark" Fill="{DynamicResource Normal_Background}" RadiusX="4" RadiusY="4"/>
							</Grid>
						</BulletDecorator.Bullet>
						<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
					</BulletDecorator>
					
					<ControlTemplate.Triggers>
						<Trigger Property="IsChecked" Value="false">
							<Setter Property="Visibility" Value="Collapsed" TargetName="CheckMark"/>
						</Trigger>
						<Trigger Property="IsMouseOver" Value="true">
							<Setter Property="Fill" Value="{DynamicResource MouseOverBrush}" TargetName="Ellipse_Border"/>
						</Trigger>
						<Trigger Property="IsPressed" Value="true">
							<Setter Property="Fill" Value="{DynamicResource Normal_Background}" TargetName="Ellipse_Border"/>
							<Setter Property="Stroke" Value="{DynamicResource Stroke_Gradient}" TargetName="Ellipse_Border"/>
						</Trigger>
						<Trigger Property="IsEnabled" Value="false">
							<Setter Property="Fill" Value="{DynamicResource Vertical_Gradient}" TargetName="Ellipse_Border"/>
							<Setter Property="Stroke" Value="#40000000" TargetName="Ellipse_Border"/>
							<Setter Property="Foreground" Value="#80000000"/>
						</Trigger>
						
					</ControlTemplate.Triggers>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>
	<Style x:Key="{x:Type Slider}" TargetType="{x:Type Slider}">
		<Setter Property="Background" Value="{DynamicResource Vertical_Gradient}"/>
		<Setter Property="BorderBrush" Value="{DynamicResource Stroke_Gradient}"/>
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type Slider}">
					<Grid x:Name="GridRoot">
						<Grid.RowDefinitions>
							<RowDefinition Height="Auto"/>
							<RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}"/>
							<RowDefinition Height="Auto"/>
						</Grid.RowDefinitions>
						
						<!-- TickBar shows the ticks for Slider -->
						<TickBar Visibility="Collapsed" x:Name="TopTick" Height="4" SnapsToDevicePixels="True" Placement="Top" Fill="{DynamicResource GlyphBrush}"/>
						<Border Grid.Row="1" Margin="0" x:Name="Border" Height="4" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/>
						
						<!-- The Track lays out the repeat buttons and thumb -->
						<Track Grid.Row="1" x:Name="PART_Track">
							<Track.Thumb>
								<Thumb Width="15" Height="18" />
							</Track.Thumb>
							<Track.IncreaseRepeatButton>
								<RepeatButton Style="{DynamicResource ScrollBar_RepeatButtonStyle1}" Command="Slider.IncreaseLarge"/>
							</Track.IncreaseRepeatButton>
							<Track.DecreaseRepeatButton>
								<RepeatButton Style="{DynamicResource ScrollBar_RepeatButtonStyle1}" Command="Slider.DecreaseLarge"/>
							</Track.DecreaseRepeatButton>
						</Track>
						
						<TickBar Visibility="Collapsed" Grid.Row="2" x:Name="BottomTick" Height="4" SnapsToDevicePixels="True" Placement="Bottom" Fill="{TemplateBinding Foreground}"/>
					</Grid>
					<ControlTemplate.Triggers>
						<Trigger Property="TickPlacement" Value="TopLeft">
							<Setter Property="Visibility" Value="Visible" TargetName="TopTick"/>
						</Trigger>
						<Trigger Property="TickPlacement" Value="BottomRight">
							<Setter Property="Visibility" Value="Visible" TargetName="BottomTick"/>
						</Trigger>
						<Trigger Property="TickPlacement" Value="Both">
							<Setter Property="Visibility" Value="Visible" TargetName="TopTick"/>
							<Setter Property="Visibility" Value="Visible" TargetName="BottomTick"/>
						</Trigger>
						<Trigger Property="IsEnabled" Value="false">
							<Setter Property="Background" Value="{DynamicResource Vertical_Gradient}" TargetName="Border"/>
							<Setter Property="BorderBrush" Value="{DynamicResource DisabledBorderBrush}" TargetName="Border"/>
						</Trigger>
						
						<!-- Use a rotation to create a Vertical Slider form the default Horizontal -->
						<Trigger Property="Orientation" Value="Vertical">
							<Setter Property="LayoutTransform" TargetName="GridRoot">
								<Setter.Value>
									<RotateTransform Angle="-90"/>
								</Setter.Value>
							</Setter>
							<!-- Track rotates itself based on orientation so need to force it back -->
							<Setter TargetName="PART_Track" Property="Orientation" Value="Horizontal"/>
						</Trigger>
						
					</ControlTemplate.Triggers>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>
	<Style x:Key="{x:Type ProgressBar}" TargetType="{x:Type ProgressBar}">
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type ProgressBar}">
					<Grid>
						<Grid.RowDefinitions>
							<RowDefinition Height="0.514*"/>
							<RowDefinition Height="0.486*"/>
						</Grid.RowDefinitions>
					
						<!-- This Border is the track. It must be named PART_Track -->
						<Border x:Name="PART_Track" Background="{DynamicResource GlyphBrush}" BorderBrush="{DynamicResource Stroke_Gradient}" BorderThickness="2,2,2,2" CornerRadius="3,3,3,3" Grid.RowSpan="2"/>
						
						<!-- This Border shows progress. It must be named PART_Indicator for the control to function -->
						<Border HorizontalAlignment="Left" x:Name="PART_Indicator" Background="{DynamicResource RadialBackGround_Orange}" BorderBrush="{DynamicResource Stroke_Gradient}" BorderThickness="1" CornerRadius="2" Grid.RowSpan="2"/>
					<Rectangle HorizontalAlignment="Stretch" Margin="1,0,1,0" VerticalAlignment="Stretch" Width="Auto" Height="Auto" Grid.Column="0" Grid.Row="0" x:Name="ellipse1" Grid.RowSpan="1" Opacity="0.75" Grid.ColumnSpan="1" RadiusX="3" RadiusY="3" Fill="{DynamicResource Overlay_Fade_Gradient}"/>
					</Grid>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>
	<Style x:Key="{x:Type TextBox}" TargetType="{x:Type TextBox}">
		<Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
		<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
		<Setter Property="AllowDrop" Value="true"/>
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type TextBox}">
					<Grid Width="Auto" Height="Auto">
						<Grid.RowDefinitions>
							<RowDefinition Height="0.5*"/>
							<RowDefinition Height="0.5*"/>
						</Grid.RowDefinitions>
						<Border x:Name="Border" Background="{DynamicResource Normal_Background}" CornerRadius="4,4,4,4" Grid.RowSpan="2" BorderBrush="{DynamicResource Stroke_Gradient}" BorderThickness="2,2,2,2">							
							<ScrollViewer Margin="1,1,1,1" x:Name="PART_ContentHost"  VerticalAlignment="Center" VerticalContentAlignment="Stretch"/>						
						</Border>
						<Rectangle x:Name="rect" Fill="{DynamicResource Overlay_Fade_Gradient}" StrokeThickness="0" RadiusX="3" RadiusY="3" HorizontalAlignment="Stretch" Margin="1,0,1,0" VerticalAlignment="Stretch" Width="Auto" Height="Auto" Opacity="0.315" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Grid.RowSpan="1" IsHitTestVisible="False"/>
					</Grid>
					<ControlTemplate.Triggers>
						<Trigger Property="IsMouseOver" Value="true">
							<Setter Property="Opacity" Value="0" TargetName="rect"/>
						</Trigger>
						<Trigger Property="IsEnabled" Value="False">
							<Setter Property="Background" Value="{DynamicResource Vertical_Gradient}" TargetName="Border"/>
						</Trigger>
					</ControlTemplate.Triggers>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>
	<Style x:Key="ScrollBar_RepeatButtonStyle1" d:IsControlPart="True" TargetType="{x:Type RepeatButton}">
		<Setter Property="Background" Value="Transparent"/>
		<Setter Property="BorderBrush" Value="Transparent"/>
		<Setter Property="IsTabStop" Value="false"/>
		<Setter Property="Focusable" Value="false"/>
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type RepeatButton}">
					<Grid>
						<Rectangle Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}"/>
					</Grid>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>
	<Style x:Key="{x:Type CheckBox}" TargetType="{x:Type CheckBox}">
		<Setter Property="SnapsToDevicePixels" Value="true"/>
		<Setter Property="FocusVisualStyle" Value="{DynamicResource CheckBoxFocusVisual}"/>
		<Setter Property="Background" Value="{DynamicResource NormalBrush}"/>
		<Setter Property="BorderBrush" Value="{DynamicResource NormalBorderBrush}"/>
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type CheckBox}">
					
					<!-- BulletDecorator is used to provide baseline alignment between the checkmark and the Content -->
					<BulletDecorator Background="Transparent">
						<BulletDecorator.Bullet>
							<Grid Width="13" Height="13">
								<Border x:Name="Border" Background="{DynamicResource LightBrush}" BorderBrush="{DynamicResource Stroke_Gradient}" BorderThickness="1,1,1,1" CornerRadius="1,1,1,1"/>
								<Path x:Name="CheckMark" Stroke="{DynamicResource Normal_Background}" StrokeThickness="3" SnapsToDevicePixels="False" Data="M1.5000001,1.5833334 L9.7920001,9.6666667 M1.5420001,9.6666667 L9.7083333,1.5000001" Margin="0.875,0.895,0.833,0.938" ClipToBounds="False" StrokeEndLineCap="Round" StrokeStartLineCap="Round"/>
							</Grid>
						</BulletDecorator.Bullet>
						<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
					</BulletDecorator>
					
					<!-- This uses Visibility to hide and show the CheckMark on IsChecked -->
					<ControlTemplate.Triggers>
						<Trigger Property="IsChecked" Value="false">
							<Setter Property="Visibility" Value="Collapsed" TargetName="CheckMark"/>
						</Trigger>
						<Trigger Property="IsMouseOver" Value="true">
							<Setter Property="Background" Value="{DynamicResource MouseOverBrush}" TargetName="Border"/>
						</Trigger>
						<Trigger Property="IsPressed" Value="true">
							<Setter Property="Background" Value="{DynamicResource Normal_Background}" TargetName="Border"/>
							<Setter Property="BorderBrush" Value="{DynamicResource PressedBorderBrush}" TargetName="Border"/>
						</Trigger>
						<Trigger Property="IsEnabled" Value="false">
							<Setter Property="Background" Value="{DynamicResource Vertical_Gradient}" TargetName="Border"/>
							<Setter Property="BorderBrush" Value="{DynamicResource DisabledBorderBrush}" TargetName="Border"/>
						</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)

Share

About the Author

Geert van Horrik
Software Developer CatenaLogic
Netherlands Netherlands
I am Geert van Horrik, and I have studied Computer Science in the Netherlands.
 
I love to write software using .NET (especially the combination of WPF and C#). I am also the lead developer of Catel, an open-source application development framework for WPF, Silverlight, WP7 and WinRT with the focus on MVVM.
 
I have my own company since January 1st 2007, called CatenaLogic. This company develops commercial and non-commercial software.
 
To download (or buy) applications I have written, visit my website: http://www.catenalogic.com
Follow on   Twitter

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.141220.1 | Last Updated 28 Jan 2011
Article Copyright 2011 by Geert van Horrik
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid