Click here to Skip to main content
15,895,084 members
Search within:


Articles / Desktop Programming / WPF
 

ListBox Styling (Part 3 - Additional Templates) in Expression Blend and Silverlight

Rate me:
Please Sign up or sign in to vote.
5.00/5 (38 votes)
6 May 2010CPOL20 min read 128.9K   5.2K   49  
Explanation and examples of Additional Templates and Generated Content of a ListBox. Covering Layout, Transitions, and Animation.
 
<ResourceDictionary
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
	<Style x:Key="GridSplitterRivet" TargetType="ContentControl">
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="ContentControl">
					<Grid>
						<Ellipse x:Name="RivetBGround" Fill="{TemplateBinding Background}" StrokeThickness="0" Stroke="{TemplateBinding BorderBrush}"/>
						<Ellipse x:Name="RivetProfile" StrokeThickness="0" Opacity="0.6">
							<Ellipse.Fill>
								<RadialGradientBrush Center="0.455,0.445" GradientOrigin="0.455,0.445" RadiusY="0.575" RadiusX="0.575">
									<GradientStop Color="Black" Offset="1"/>
									<GradientStop Color="Transparent"/>
								</RadialGradientBrush>
							</Ellipse.Fill>
						</Ellipse>
						<Ellipse x:Name="RivetHighlight" StrokeThickness="0" Opacity="0.4">
							<Ellipse.Fill>
								<RadialGradientBrush Center="0.387,0.361" GradientOrigin="0.387,0.361" RadiusY="0.575" RadiusX="0.575">
									<GradientStop Color="White"/>
									<GradientStop Color="Transparent" Offset="1"/>
								</RadialGradientBrush>
							</Ellipse.Fill>
						</Ellipse>
					</Grid>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
		<Setter Property="Background" Value="#FF862727"/>
		<Setter Property="BorderBrush" Value="Black"/>
	</Style>
	<Style x:Key="GridSplitterStyleVerticalOnly" TargetType="sdk:GridSplitter">
		<Setter Property="Background" Value="#FF24579B"/>
		<Setter Property="IsTabStop" Value="true"/>
		<Setter Property="HorizontalAlignment" Value="Right"/>
		<Setter Property="PreviewStyle">
			<Setter.Value>
				<Style TargetType="Control">
					<Setter Property="Background" Value="#FF868686"/>
					<Setter Property="Template">
						<Setter.Value>
							<ControlTemplate TargetType="Control">
								<Grid x:Name="Root" Opacity=".5">
									<Rectangle Fill="{TemplateBinding Background}"/>
									<Grid x:Name="HorizontalTemplate" Height="6"/>
									<Grid x:Name="VerticalTemplate" Visibility="Collapsed" Width="6"/>
								</Grid>
							</ControlTemplate>
						</Setter.Value>
					</Setter>
				</Style>
			</Setter.Value>
		</Setter>
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="sdk:GridSplitter">
					<Grid x:Name="Root" IsHitTestVisible="{TemplateBinding IsEnabled}">
						<VisualStateManager.VisualStateGroups>
							<VisualStateGroup x:Name="CommonStates">
								<VisualStateGroup.Transitions>
									<VisualTransition GeneratedDuration="0:0:0.4">
										<VisualTransition.GeneratedEasingFunction>
											<BackEase EasingMode="EaseOut"/>
										</VisualTransition.GeneratedEasingFunction>
									</VisualTransition>
								</VisualStateGroup.Transitions>
								<VisualState x:Name="Normal"/>
								<VisualState x:Name="MouseOver">
									<Storyboard>
										<DoubleAnimation Duration="0" To="1.2" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="VerticalTemplate" d:IsOptimized="True"/>
										<DoubleAnimation Duration="0" To="1.2" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="VerticalTemplate" d:IsOptimized="True"/>
										<DoubleAnimation Duration="0" To="0.3" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="MouseOverGlow" d:IsOptimized="True"/>
									</Storyboard>
								</VisualState>
								<VisualState x:Name="Disabled">
									<Storyboard>
										<DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>
									</Storyboard>
								</VisualState>
							</VisualStateGroup>
							<VisualStateGroup x:Name="FocusStates">
								<VisualStateGroup.Transitions>
									<VisualTransition GeneratedDuration="0:0:0.1"/>
								</VisualStateGroup.Transitions>
								<VisualState x:Name="Unfocused"/>
								<VisualState x:Name="Focused">
									<Storyboard>
										<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="border" d:IsOptimized="True"/>
										<DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[1].(GradientStop.Offset)" Storyboard.TargetName="border" d:IsOptimized="True"/>
										<ColorAnimation Duration="0" To="#CCFFFFFF" Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="border" d:IsOptimized="True"/>
									</Storyboard>
								</VisualState>
							</VisualStateGroup>
						</VisualStateManager.VisualStateGroups>
						<Rectangle Fill="{TemplateBinding Background}"/>
						<Rectangle x:Name="MouseOverGlow" StrokeThickness="3" Opacity="0">
							<Rectangle.Fill>
								<RadialGradientBrush>
									<GradientStop Color="Transparent" Offset="1"/>
									<GradientStop Color="White" Offset="0.184"/>
								</RadialGradientBrush>
							</Rectangle.Fill>
						</Rectangle>
						<Grid x:Name="Overlays">
							<Grid.ColumnDefinitions>
								<ColumnDefinition Width="0.25*"/>
								<ColumnDefinition Width="0.519*"/>
								<ColumnDefinition Width="0.231*"/>
							</Grid.ColumnDefinitions>
							<Grid.RowDefinitions>
								<RowDefinition Height="0.011*"/>
								<RowDefinition Height="0.978*"/>
								<RowDefinition Height="0.011*"/>
							</Grid.RowDefinitions>
							<Rectangle x:Name="MainOverlay" Opacity="0.3" Grid.Row="1" Grid.ColumnSpan="3" Margin="0">
								<Rectangle.Fill>
									<LinearGradientBrush EndPoint="0.5,0.5" StartPoint="0,0.5" SpreadMethod="Reflect">
										<GradientStop Color="Black" Offset="0"/>
										<GradientStop Color="White" Offset="0.5"/>
									</LinearGradientBrush>
								</Rectangle.Fill>
							</Rectangle>
							<Path x:Name="TopLeft" Data="M0.0099999998,0 L0.0099999998,0.0099999998 L0,0.0099999998 z" Opacity="0.3" Stretch="Fill" UseLayoutRounding="False" RenderTransformOrigin="0.5,0.5">
								<Path.RenderTransform>
									<CompositeTransform ScaleX="-1" Rotation="90"/>
								</Path.RenderTransform>
								<Path.Fill>
									<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
										<GradientStop Color="Black" Offset="0"/>
										<GradientStop Color="White" Offset="1"/>
									</LinearGradientBrush>
								</Path.Fill>
							</Path>
							<Path x:Name="LeftTop" Data="M0.0099999998,0 L0.0099999998,0.0099999998 L0,0.0099999998 z" Opacity="0.3" Stretch="Fill" UseLayoutRounding="False">
								<Path.Fill>
									<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
										<GradientStop Color="Black" Offset="0"/>
										<GradientStop Color="White" Offset="1"/>
									</LinearGradientBrush>
								</Path.Fill>
							</Path>
							<Path x:Name="TopRight" Data="M0.0099999998,0 L0.0099999998,0.0099999998 L0,0.0099999998 z" Opacity="0.3" Stretch="Fill" UseLayoutRounding="False" RenderTransformOrigin="0.5,0.5" Grid.Column="2">
								<Path.RenderTransform>
									<CompositeTransform ScaleY="-1" ScaleX="-1" Rotation="90"/>
								</Path.RenderTransform>
								<Path.Fill>
									<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
										<GradientStop Color="Black" Offset="0"/>
										<GradientStop Color="White" Offset="1"/>
									</LinearGradientBrush>
								</Path.Fill>
							</Path>
							<Path x:Name="RightTop" Data="M0.0099999998,0 L0.0099999998,0.0099999998 L0,0.0099999998 z" Opacity="0.3" Stretch="Fill" UseLayoutRounding="False" RenderTransformOrigin="0.5,0.5" Grid.Column="2">
								<Path.RenderTransform>
									<CompositeTransform ScaleX="-1"/>
								</Path.RenderTransform>
								<Path.Fill>
									<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
										<GradientStop Color="Black" Offset="0"/>
										<GradientStop Color="White" Offset="1"/>
									</LinearGradientBrush>
								</Path.Fill>
							</Path>
							<Rectangle x:Name="TopCentre" Fill="White" Opacity="0.3" Grid.Column="1"/>
							<Path x:Name="BottomLeft" Data="M0.0099999998,0 L0.0099999998,0.0099999998 L0,0.0099999998 z" Opacity="0.3" Stretch="Fill" UseLayoutRounding="False" RenderTransformOrigin="0.5,0.5" Grid.Row="2">
								<Path.RenderTransform>
									<CompositeTransform Rotation="-90" ScaleY="-1" ScaleX="-1"/>
								</Path.RenderTransform>
								<Path.Fill>
									<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
										<GradientStop Color="Black" Offset="0"/>
										<GradientStop Color="White" Offset="1"/>
									</LinearGradientBrush>
								</Path.Fill>
							</Path>
							<Path x:Name="LeftBottom" Data="M0.0099999998,0 L0.0099999998,0.0099999998 L0,0.0099999998 z" Opacity="0.3" Stretch="Fill" UseLayoutRounding="False" Grid.Row="2" RenderTransformOrigin="0.5,0.5">
								<Path.RenderTransform>
									<CompositeTransform ScaleY="-1"/>
								</Path.RenderTransform>
								<Path.Fill>
									<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
										<GradientStop Color="Black" Offset="0"/>
										<GradientStop Color="White" Offset="1"/>
									</LinearGradientBrush>
								</Path.Fill>
							</Path>
							<Path x:Name="BottomRight" Data="M0.0099999998,0 L0.0099999998,0.0099999998 L0,0.0099999998 z" Opacity="0.3" Stretch="Fill" UseLayoutRounding="False" RenderTransformOrigin="0.5,0.5" Grid.Column="2" Grid.Row="2">
								<Path.RenderTransform>
									<CompositeTransform Rotation="-90" ScaleX="-1"/>
								</Path.RenderTransform>
								<Path.Fill>
									<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
										<GradientStop Color="Black" Offset="0"/>
										<GradientStop Color="White" Offset="1"/>
									</LinearGradientBrush>
								</Path.Fill>
							</Path>
							<Path x:Name="RightBottom" Data="M0.0099999998,0 L0.0099999998,0.0099999998 L0,0.0099999998 z" Opacity="0.3" Stretch="Fill" UseLayoutRounding="False" RenderTransformOrigin="0.5,0.5" Grid.Column="2" Grid.Row="2">
								<Path.RenderTransform>
									<CompositeTransform ScaleY="-1" ScaleX="-1"/>
								</Path.RenderTransform>
								<Path.Fill>
									<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
										<GradientStop Color="Black" Offset="0"/>
										<GradientStop Color="White" Offset="1"/>
									</LinearGradientBrush>
								</Path.Fill>
							</Path>
							<Rectangle x:Name="BottomCentre" Fill="White" Opacity="0.3" Grid.Column="1" Grid.Row="2" RenderTransformOrigin="0.5,0.5">
								<Rectangle.RenderTransform>
									<CompositeTransform ScaleY="-1"/>
								</Rectangle.RenderTransform>
							</Rectangle>
						</Grid>
						<Grid x:Name="HorizontalTemplate" Height="10">
							<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Orientation="Horizontal" Height="8">
								<ContentControl x:Name="Rivet1" Style="{StaticResource GridSplitterRivet}" Width="6" Background="{TemplateBinding BorderBrush}" Height="6" Margin="0,0,20,0" HorizontalAlignment="Center" VerticalAlignment="Center"/>
								<ContentControl x:Name="Rivet_Copy4" Style="{StaticResource GridSplitterRivet}" Width="6" Background="{TemplateBinding BorderBrush}" Height="6" Margin="0,0,20,0" VerticalAlignment="Center" HorizontalAlignment="Center"/>
								<ContentControl x:Name="Rivet_Copy5" Style="{StaticResource GridSplitterRivet}" Width="8" Background="{TemplateBinding BorderBrush}" Height="8" Margin="0,0,20,0" HorizontalAlignment="Center" VerticalAlignment="Center"/>
								<ContentControl x:Name="Rivet_Copy6" Style="{StaticResource GridSplitterRivet}" Width="6" Background="{TemplateBinding BorderBrush}" Height="6" Margin="0,0,20,0" HorizontalAlignment="Center" VerticalAlignment="Center"/>
								<ContentControl x:Name="Rivet_Copy7" Style="{StaticResource GridSplitterRivet}" Width="6" Background="{TemplateBinding BorderBrush}" Height="6" Margin="0" HorizontalAlignment="Center" VerticalAlignment="Center"/>
							</StackPanel>
						</Grid>
						<Grid x:Name="VerticalTemplate" Visibility="Collapsed" Width="10" RenderTransformOrigin="0.5,0.5">
							<Grid.RenderTransform>
								<CompositeTransform/>
							</Grid.RenderTransform>
							<StackPanel VerticalAlignment="Center" Width="8" HorizontalAlignment="Center">
								<ContentControl x:Name="Rivet" Style="{StaticResource GridSplitterRivet}" Width="6" Background="{TemplateBinding BorderBrush}" Height="6" Margin="0,0,0,20" HorizontalAlignment="Center" VerticalAlignment="Center"/>
								<ContentControl x:Name="Rivet_Copy" Style="{StaticResource GridSplitterRivet}" Width="6" Background="{TemplateBinding BorderBrush}" Height="6" Margin="0,0,0,20" VerticalAlignment="Center" HorizontalAlignment="Center"/>
								<ContentControl x:Name="Rivet_Copy1" Style="{StaticResource GridSplitterRivet}" Width="8" Background="{TemplateBinding BorderBrush}" Height="8" Margin="0,0,0,20" HorizontalAlignment="Center" VerticalAlignment="Center"/>
								<ContentControl x:Name="Rivet_Copy2" Style="{StaticResource GridSplitterRivet}" Width="6" Background="{TemplateBinding BorderBrush}" Height="6" Margin="0,0,0,20" HorizontalAlignment="Center" VerticalAlignment="Center"/>
								<ContentControl x:Name="Rivet_Copy3" Style="{StaticResource GridSplitterRivet}" Width="6" Background="{TemplateBinding BorderBrush}" Height="6" Margin="0" HorizontalAlignment="Center" VerticalAlignment="Center"/>
							</StackPanel>
						</Grid>
						<Border x:Name="border" BorderThickness="1,0" Margin="-1,4" Opacity="0">
							<Border.BorderBrush>
								<LinearGradientBrush EndPoint="0.5,0.5" StartPoint="0.5,0" SpreadMethod="Reflect">
									<GradientStop Color="Transparent"/>
									<GradientStop Color="White" Offset="1"/>
								</LinearGradientBrush>
							</Border.BorderBrush>
						</Border>
					</Grid>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
		<Setter Property="BorderBrush" Value="#FF5A7781"/>
		<Setter Property="Margin" Value="-5,-4,0,-4"/>
		<Setter Property="Width" Value="16"/>
	</Style>
	<!-- Resource dictionary entries should be defined here. -->
</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
Alan Beasley
User Interface Analyst
United Kingdom United Kingdom
I've been playing with computers since my first Acorn Electron, & after blowing up a few ZX Spectrums. I moved on to the C64 & Amiga, & eventually reluctantly on to the PC.

I have learnt a wide set of skills during my 38 years of existence, living in the UK, on the sunny south coast.

My main area of expertise is Graphic/Visual Design, Usability & UI Design. I am not a programmer, but am fairly technically minded due to studying Mechanical Engineering at Uni.

I have work both Freelance & for IBM as a Graphic Designer, & am skilled in the usual graphics packages like, PhotoShop, CorelDraw or Illustrator, Premier, Dreamweaver, Flash etc.
But I originally started with Lightwave & 3D animation.

Comments and Discussions

Permalink
Advertise
Privacy
Cookies
Terms of Use
Layout: fixed | fluid

Posted 5 May 2010

Article Copyright 2010 by Alan Beasley
Everything else Copyright © CodeProject, 1999-2024

Web04 2.8:2024-04-02:1