Logo
programming4us
programming4us
programming4us
programming4us
Home
programming4us
XP
programming4us
Windows Vista
programming4us
Windows 7
programming4us
Windows Azure
programming4us
Windows Server
programming4us
Windows Phone
 
Windows Phone

The Two Templates : Custom Controls in a Library

- Windows 10 Product Activation Keys Free 2019
- How to active Windows 8 without product key
- Malwarebytes Premium 3.7.1 Serial Keys (LifeTime) 2019
4/16/2011 3:32:54 PM
Generally when you create a custom control, you define some new properties for the control as well as a default Style and ControlTemplate, and you put that new control in a DLL for sharing among multiple applications. You can couple the code and Style as shown in the FlipToggleButton example, but a more standard approach for Silverlight libraries involves defining the Style in a special file named generic.xaml located in a directory named Themes. This generic.xaml file has a root element of ResourceDictionary.

Let’s look at an example.

Suppose you conceive of a ToggleButton template something like the one in the CustomButtonTemplate project but much more generalized. Rather than just switch between two hard-coded text strings, you want to switch between two objects of any type. And not just switch—you want an object associated with the Checked state and an object associated with the Unchecked state to fade from one to the other. Your name for this new button is called FadableToggleButton.

As you think about it, you realize that the control needs to define a new property named CheckedContent, similar to the normal Content property. The Content property is the object displayed for the button’s Unchecked state, and CheckedContent is displayed for the Checked state.

I defined this class in the Petzold.Phone.Silverlight library. The complete code for FadableToggleButton is here:

Example 1. Silverlight Project: Petzold.Phone.Silverlight File: FadableToggleButton.cs
using System.Windows;
using System.Windows.Controls.Primitives;

namespace Petzold.Phone.Silverlight
{
public class FadableToggleButton : ToggleButton
{
public static readonly DependencyProperty CheckedContentProperty =
DependencyProperty.Register("CheckedContent",
typeof(object),
typeof(FadableToggleButton),
new PropertyMetadata(null));

public FadableToggleButton()
{
this.DefaultStyleKey = typeof(FadableToggleButton);
}

public object CheckedContent
{
set { SetValue(CheckedContentProperty, value); }
get { return (object)GetValue(CheckedContentProperty); }
}
}
}


This is the only C# code required to implement this control! There’s not even a property-changed handler for this new CheckedContent property. It’s just a DependencyProperty definition and a CLR property definition. Everything else is XAML.

But notice the constructor. If this code file were a partial class definition partnered with a XAML file, you’d see a call to InitializeComponent in the constructor. Instead, there’s the following:

this.DefaultStyleKey = typeof(FadableToggleButton);

This statement indicates that this class has a default Style definition, and the TargetType of this Style definition is FadableToggleButton. To apply a default Style to instances of this class, Silverlight needs to find that Style definition. Where does it search?

Silverlight looks in a very special XAML file in the library. This XAML file is always named generic.xaml and it is always located in a directory named Themes of the DLL project. This is how a control gets a default theme style and template.

This generic.xaml file has a root element of ResourceDictionary. However the file is special in another way: The contents are regarded as resources but the Style elements don’t require x:Key or x:Name attributes because they are referenced via the TargetType.

Here’s the portion of the generic.xaml file in the Themes directory of Petzold.Phone.Silverlight that contains the default Style definition of the FadableToggleButton class:

Example 2. Silverlight Project: Petzold.Phone.Silverlight File: Themes/generic.xaml (excerpt)
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Petzold.Phone.Silverlight">

<Style TargetType="local:FadableToggleButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:FadableToggleButton">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver" />
<VisualState x:Name="Pressed" />

<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="disableRect"
Storyboard.TargetProperty="Opacity"
To="0.6" Duration="0:0:0" />
</Storyboard>
</VisualState>
</VisualStateGroup>

<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="uncheckedContent"
Storyboard.TargetProperty="Opacity"
To="0" Duration="0:0:0.5" />
<DoubleAnimation Storyboard.TargetName="checkedContent"
Storyboard.TargetProperty="Opacity"
To="1" Duration="0:0:0.5" />
</Storyboard>
</VisualState>

<VisualState x:Name="Unchecked">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="uncheckedContent"
Storyboard.TargetProperty="Opacity"
Duration="0:0:0.5" />
<DoubleAnimation Storyboard.TargetName="checkedContent"
Storyboard.TargetProperty="Opacity"
Duration="0:0:0.5" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

<Border BorderBrush="{StaticResource PhoneForegroundBrush}"
BorderThickness="{StaticResource PhoneBorderThickness}"
Background="{TemplateBinding Background}">

<Grid Margin="{TemplateBinding Padding}">
<ContentPresenter
Name="uncheckedContent"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
HorizontalAlignment="{TemplateBinding
HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding
VerticalContentAlignment}" />

<ContentPresenter
Name="checkedContent"
Opacity="0"
Content="{TemplateBinding CheckedContent}"
ContentTemplate="{TemplateBinding ContentTemplate}"
HorizontalAlignment="{TemplateBinding
HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding
VerticalContentAlignment}" />
</Grid>
</Border>

<Rectangle Name="disableRect"
Fill="{StaticResource PhoneBackgroundBrush}"
Opacity="0" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

. . .

</ResourceDictionary>


The TargetType for the Style is FadableToggleButton, and that’s enough to allow Silverlight to find this Style definition that becomes the default theme for the FadableToggleButton. Within the Border is a single-cell Grid with two ContentPresenter elements, one with a TemplateBinding referencing the normal Content property, the other referencing the CheckedContent property. The ContentPresenter referencing the CheckedContent property has an initial Opacity of zero. The animations for the Checked and Unchecked states target the Opacity property of the ContentPresenter so that one fades out as the other fades in.

Although the Content properties of the two ContentPresenter elements are bound to two different properties of the FadableToggleButton, the ContentTemplate properties of both are bound to the same ContentTemplate property originally defined by ContentControl. If you set a DataTemplate to the ContentTemplate property of FadableToggleButton, then that same DataTemplate must apply to both the Content property and the CheckedContent property. In other words, this template implicitly assumes that the Content property and CheckedContent property are of the same types.

To test out this new control, I created a FadableToggleDemo program. The project contains a reference to the Petzold.Phone.Silverlight library and an XML namespace declaration for the library in MainPage.xaml. I added two bitmaps of the same size to an Images directory in the project. These bitmaps are referenced by Image elements set to the Content and CheckedContent properties of the button:

Example 3. Silverlight Project: FadableToggleDemo File: MainPage.xaml (excerpt)
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

<petzold:FadableToggleButton HorizontalAlignment="Center"
VerticalAlignment="Center">

<petzold:FadableToggleButton.Content>
<Image Source="Images/MunchScream.jpg"
Stretch="None" />
</petzold:FadableToggleButton.Content>

<petzold:FadableToggleButton.CheckedContent>
<Image Source="Images/BotticelliVenus.jpg"
Stretch="None" />
</petzold:FadableToggleButton.CheckedContent>

</petzold:FadableToggleButton>

</Grid>

The Content property is set to an image from Edvard Munch’s painting The Scream:



The CheckedContent property uses Botticelli’s Birth of Venus:


Other -----------------
- The Two Templates : Sharing and Reusing Styles and Templates
- The Two Templates : The Visual State Manager
- The Two Templates : ControlTemplate Basics
- The Two Templates : Examining the Visual Tree
- The Two Templates : ContentControl and DataTemplate
- Animations : Animations and Property Precedence
- Animations : Animating Perspective Transforms
- Animations : The Easing Functions
- Animations : The Bouncing Ball Problem
- Animations : Splines and Key Frames
 
 
Top 10
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
Popular tags
Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 windows Phone 7 windows Phone 8
programming4us programming4us
Celebrity Style, Fashion Trends, Beauty and Makeup Tips.
 
programming4us
Windows Vista
programming4us
Windows 7
programming4us
Windows Azure
programming4us
Windows Server