IT tutorials
 
Mobile
 

Windows Phone 8 : Controls - Data Binding (part 4) - Control Templates

3/4/2013 6:48:51 PM
- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire

Control Templates

Although property-based styling is very powerful, it may not let you change the look of the controls in dramatic ways. That is where control templates come in. Every control has XAML that defines how a control is drawn. For example, the humble button uses this XAML to draw itself:

<Grid Background="Transparent">
  ...
  <Border x:Name="ButtonBackground"
          BorderBrush="{TemplateBinding BorderBrush}"
          BorderThickness="{TemplateBinding BorderThickness}"
          Background="{TemplateBinding Background}"
          CornerRadius="0"
          Margin="{StaticResource PhoneTouchTargetOverhang}">
    <ContentControl x:Name="ContentContainer"
                    ContentTemplate="{TemplateBinding
                                                     ContentTemplate}"
                    Content="{TemplateBinding Content}"
                    Foreground="{TemplateBinding Foreground}"
                    HorizontalAlignment="{TemplateBinding
                                          HorizontalContentAlignment}"
                    Padding="{TemplateBinding Padding}"
                    VerticalAlignment="{TemplateBinding
                                          VerticalContentAlignment}" />
  </Border>
</Grid>

Even though you think of controls as atomic elements, there is XAML inside the control to define the look and feel of the control. Control templates are used to redefine this XAML for any control.

Control templates are part of the style that is applied to a control. The ControlTemplate is the value of the Template property of any control. For example:

<Style x:Key="ButtonStyle1"
        TargetType="Button">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="Button">
        <Grid Background="Transparent">
          ...
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

The contents of the ControlTemplate contain the XAML that the particular control should use (i.e., Button in this case). As you define the XAML that makes up the look of a particular control, you can use a markup extension called a template binding to pull the value of a property into your XAML. For example:

<ControlTemplate TargetType="Button">
  <Grid Background="Transparent">
    <Border x:Name="ButtonBackground"
            BorderBrush="{TemplateBinding BorderBrush}"
            Background="{TemplateBinding Background}">
      ...
    </Border>
  </Grid>
</ControlTemplate>

By using template bindings, the natural value of the property will be used as the value inside the control template. This value could come from the default value in the control or from a style setter, or it could specifically be set on an instance of the control. Template bindings allow you to use whatever property value is supposed to be shown in the control.

For some controls, the XAML must have certain elements to make sure the control still works. For example, the WebBrowser control requires that part of the XAML be a Border element named PresentationContainer. That way, the control knows where to show the Web content. This contract between you and the control author is called a template part (many controls do not have any template parts). The template parts that are required are documented as attributes on the controls themselves (as shown in Figure 6).

Figure 6. TemplatePart attribute

Image

The structure of the XAML in a control template represents the look of the control, but in addition you can specify the feel of an application. The feel of an application is the way the control can interact with the users. For example, the Button class changes its appearance when pressed to give feedback to the user that she has correctly pressed the button. This is how the feel of an application works.

You can create the feel of an application using a structure called the visual state manager. With the visual state manager you can define animations that represent a state the control can be in. The control uses the visual state manager to go into specific states as the user interacts with it. As the application designer, you can define these states to change the way the control interacts with the user. These states are broken up into groups so that a single control can be in more than one state. For example, two of the visual state manager groups that the TextBox has are CommonStates (which represent states such as Disabled and ReadOnly) and FocusStates (which represent whether the control has focus or not). The groups define a set of states where only one state can be active at a time. For example, you can have your control be Disabled and Focused, but not Disabled and ReadOnly. The states in a group are mutually exclusive.

To define the groups and states for the visual state manager, the XAML can contain a VisualStateManager.VisualStateGroups property (as an attached property):

<ControlTemplate TargetType="Button">
  <Grid Background="Transparent">
    <VisualStateManager.VisualStateGroups>
      <VisualStateGroup x:Name="CommonStates">
        <VisualState x:Name="Normal" />
        <VisualState x:Name="MouseOver" />
        <VisualState x:Name="Pressed">
          <Storyboard>
            <ObjectAnimationUsingKeyFrames
                Storyboard.TargetProperty="Foreground"
                Storyboard.TargetName="ContentContainer">
              <DiscreteObjectKeyFrame KeyTime="0"
                                      Value="{StaticResource
                                              PhoneBackgroundBrush}" />
            </ObjectAnimationUsingKeyFrames>
            ...
          </Storyboard>
        </VisualState>
        <VisualState x:Name="Disabled">
          <Storyboard>
            <ObjectAnimationUsingKeyFrames
                 Storyboard.TargetProperty="Foreground"
                 Storyboard.TargetName="ContentContainer">
              <DiscreteObjectKeyFrame KeyTime="0"
                                      Value="{StaticResource
                                              PhoneDisabledBrush}" />
            </ObjectAnimationUsingKeyFrames>
            ...
          </Storyboard>
        </VisualState>
      </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    ...
  </Grid>
</ControlTemplate>

As this example shows, the VisualStateManager.VisualStateGroups attached property contains one (or more) VisualStateGroup objects. Inside the group is a list of VisualState objects that represent a storyboard that shows how to go to a specific state. The empty VisualState objects mean the state should look exactly like the natural state of the object.

The visual states and groups that a control supports are also specified as attributes on the control classes, as shown in Figure 7.

Figure 7. TemplateVisualState attribute

Image

When creating your own control templates you will need to be aware of the template parts and template visual states, as that is the contract between you and the control author. You must implement these states and parts if you expect the controls to continue to operate correctly.

 
Others
 
- Windows Phone 8 : Controls - Data Binding (part 3) - Data Binding Errors
- Windows Phone 8 : Controls - Data Binding (part 2) - Improving Scrolling Performance, Binding Formatting, Converters
- Windows Phone 8 : Controls - Data Binding (part 1) - Simple Data Binding, Using a DataTemplate
- iPhone SDK 3 : Making Connections with GameKit and Bonjour - iPhone to iPhone Gaming Via BonjourHelper
- iPhone SDK 3 : Making Connections with GameKit and Bonjour - Working Around Real-World GameKit Limitations
- Android : Getting Fancy with Lists - Interactive Rows
- Android : Getting Fancy with Lists - Better. Stronger. Faster.
- Windows Phone 7 : Designing the Game Framework (part 3) - The GameHost Class
- Windows Phone 7 : Designing the Game Framework (part 2) - The TextObject Class
- Windows Phone 7 : Designing the Game Framework (part 1) - The GameObjectBase Class, The SpriteObject Class
 
 
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
programming4us programming4us
 
Popular tags
 
Video Tutorail 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 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS
Celebrity Style, Fashion Trends, Beauty and Makeup Tips.