Windows Presentation Foundation Introduction(III) - User Interfaces Part II

/*by Jiangong SUN*/

Resources:
WPF resources enable you to reuse commonly defined objects and values. You canseparate these resources into separate XAML files or into separate assemblies. This separationenables you to share resources across applications and makes it easier to localize the resources for your applications.


Resources levels: Application scope, Window or Page scope, Element level scope
In this example, a resource called greenButton is defined in Application, Page and Window scope:

<Application.Resources>
<Style TargetType="Button" x:Key="greenButton">
   <Setter Property="Background" Value="Green"/>
</Style>
</Application.Resources>
<Page.Resources>
<Style TargetType="Button" x:Key="greenButton">
   <Setter Property="Background" Value="Green"/>
</Style>
</Page.Resources>
<Window.Resources>
<Style TargetType="Button" x:Key="greenButton">
   <Setter Property="Background" Value="Green"/>
</Style>
</Window.Resources>

This button can exist in page or window xaml:

<Button Style="{StaticResource greenButton}" Content="Good"  />

All resources must have a unique key. You assign the unique key by using the x:Key attribute when you define your resources by using XAML. Typically, the key is a string, although you can also set it to other object types, most notably for styles, component resources, and data styling.


Referencing Resources Mode: Reference a resource statically, Reference a resource dynamically


Static references work best for the following circumstances:
You do not intend to change the value of the resource after it is referenced for the first time.
You are creating a resource dictionary that you will compile into a dynamic-link library (DLL).


Dynamic references work best for the following circumstances:
The value of the resource depends on conditions that are not known until run time.
You intend to adjust the contents of the resource dictionary during the lifetimeof an application.

The following restrictions apply to dynamic resource references:
The property must be a property on a FrameworkElement or FrameworkContentElement. That property must be backed by a DependencyProperty.
The reference is for a value within a Style Setter.
The property being set must be a property on a Freezable class that is provided as a value of a FrameworkElement or FrameworkContentElement property or of a Setter value.


Window1.xaml:

    <Window.Resources>
        <Style TargetType="Button" x:Key="greenButton">
            <Setter Property="Background" Value="Green"/>
        </Style>
        <SolidColorBrush x:Key="redBrush" Color="Red" />
    </Window.Resources>
    <StackPanel Name="Sp" HorizontalAlignment="Center">
		<!--Static Resource-->
        <Button x:Name="staBtn" Style="{StaticResource greenButton}" Content="Static Resource Button" />
        <!--Dynamic Resource-->
		<Button x:Name="dynBtn" Background="{DynamicResource redBrush}" Content="Dynamic Resource Button" />
    </StackPanel>

Code behind Window1.xaml.cs:

public Window1()
{
	Sp.Resources["redBrush"] = Brushes.Yellow;
}

WPF provides several ways for you to reference resources programmatically:

FindResource Method
You use the keys that identify resources by using XAML to retrieve resources programmatically. You then use the FindResourceor TryFindResource methods from framework-level objects in your application to perform this retrieval. 

The FindResource method raises an exception if the specified resource cannot be found; however, theTryFindResource method returns nullinstead of raising an exception.

SetResourceReference Method
You can assign a resource reference by using the SetResourceReference method, which takes two parameters. The parameters are the identifier for a dependency property and the key of the resource.


Merged Dictionary:
Example:

<Page.Resources>
  <ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="Resources\MyResources1.xaml" />
    <ResourceDictionary Source="Resources\MyResources2.xaml" />
  </ResourceDictionary.MergedDictionaries>
</Page.Resources>

Localization :
Localization is the translation of application resources into localized versions for the specific cultures that the application supports. You use the WPF application programming interfaces (APIs) that are defined in the System.Windows.Markup.Localizer namespace to localize your WPF applications.


Best Practices for WPF UI Design
Write your UI in XAML; avoid creating UI in code. When you create your UI by using XAML, you expose it through built-in localization APIs. 
Avoid using absolute positions and fixed sizes to lay out content; instead, use relative or automatic sizing. 
Use SizeToContent; and keep widths and heights set to Auto.
Avoid using Canvas to lay out UIs.
Use Grid and its size-sharing feature.
Provide extra space in margins because localized text often requires more space. Extra space allows for possible overhanging characters.
Enable TextWrapping on TextBlock to avoid clipping.
Set the xml:lang attribute. This attribute describes the culture of a specific element and its child elements. The value of this property changes the behavior of several features in WPF. For example, it changes the behavior of hyphenation, spell checking, number substitution, complex script shaping, and font fallback. See Globalization for WPF for more information about setting the xml:lang Handling in XAML.
Create a customized composite font to obtain better control of fonts that are used for different languages. By default, WPF uses the GlobalUserInterface.composite font in your Windows\Fonts directory. 
When you create navigation applications that may be localized in a culture that presents text in a right-to-left format, explicitly set the FlowDirection of every page to ensure the page does not inherit FlowDirection from the NavigationWindow.
When you create stand-alone navigation applications that are hosted outside a browser, s et the StartupUri for your initial application to a NavigationWindow instead of to a page (for example, <Application StartupUri="NavigationWindow.xaml">). This design enables you to change the FlowDirection of the Window and the navigation bar. For more information and an example, see Globalization Homepage Sample.
(Reference: http://msdn.microsoft.com/en-us/library/ms788718.aspx)


Styles:
WPF styles provide a convenient way to apply a set of property values to more than one element. Styles are defined in the Resources section and enable you to share properties, resources, and event handlers between multiple controls.
You can style any framework-level element; that is, you can style any element that derives from the FrameworkElement or FrameworkContentElement classes.


Extending Styles:
By extending styles, you can share some properties across all elements of a particular type and define or change some additional properties for specific elements of the same type.


Control Templates:
In WPF, the ControlTemplate of a control defines the appearance of that control. You can change the structure and appearance of a control by defining a new ControlTemplate. The default look of a control, such as a button, is defined in the default template that matches the system theme. In many cases, this gives you sufficient flexibility so that you do not have to implement your own custom controls.
When you set the Template property of a Control to a new ControlTemplate, you are replacing the entire template.


WPF defines the following types of triggers:
EventTrigger. Event triggers enable you to apply changes to property values in response to events.
PropertyTrigger. Property triggers enable you to apply changes to property values in response to the change in value of another property.
MultiTrigger. Multi-triggers enable you to apply changes to property values based on the state of multiple properties.
DataTrigger and MultiDataTrigger. Data triggers and multi-data triggers enable you to apply changes to property values in response to changes in data-bound property values.


Trigger Actions:
The Trigger class exposes the EnterActions and ExitActions properties that enable a trigger to perform actions when the trigger object becomes active and inactive respectively.
The EnterActions and ExitActions properties contain a collection of trigger actions that enable you to control a Storyboard such as BeginStoryboard, PauseStoryboard, and StopStoryboard.


For you to animate a property, it must meet the following three requirements:
It must be a dependency property.
It must belong to a class that inherits from DependencyObject and implements the IAnimatable interface.
There must be a compatible animation type available.


WPF animations generate property values, so WPF provides the following animation types for different property types:
ColorAnimation. You use a ColorAnimation to animate the Color of a SolidColorBrush or a GradientStop.
DoubleAnimation. You use a DoubleAnimation to animate a Double value, such as the Width or Height of a Button.
PointAnimation. You use a PointAnimation to animate a Point value, such as the Center position of an EllipseGeometry.

Hope this helps, enjoy coding !