windows presentation foundation

HO CHI MINH UNIVERSITY OF INDUSTRY

What's New in WPF Version 4.5?


1 Windows Presentation Foundation

2 Benefits

3 Tools

4 Discussion of WPF applicability


What is WPF?
WPF is a new API for building Windows applications
The goal of Windows Presentation Foundation
(WPF) is to provide these advances for
Windows. Included in version 4.0 of the
Microsoft .NET Framework, WPF allows
building interfaces that incorporate
documents, media, two- and three-dimensional
graphics, animations, Web-like
characteristics, and much more.


What Windows Presentation Foundation
Provides?
Three most important:
 a unified platform for modern user interfaces
 the ability for developers and designers to
work together,
 and a common technology for Windows and
Web browser user interfaces.


What is WPF good for?
To enable designers and developers to work
together
To allow an easy way to customize the look
of controls without changing its behavior
To allow 3D graphics more easily in
Windows applications
To allow an easy way to do animations in
Windows applications
To enable the creation of applications which
scale nicely to high resolution screens


Which of these UI have you worked with?
GDI (20 years), GDI+, WinForms
DirectX (11 years), Direct3D
Quartz, DirectShow (8 years)
– Problems:
• Showing their age
• Each API is different
• Mixing APIs is challenging


Next Gen

 WPF – replaces GDI
 Direct3D – large games, used by WPF
 Media Foundation – ultimately will replace
DirectShow
 MCML –markup language for Media
Center Edition applications
 XNA – small games


WPF
Declarative programming with XAML markup
For Designers and Developers
Rewritten from scratch
– Built on top of Direct3D
– Hardware accelerated
– Vector based
– Resolution independent (1/96 inch)
– Retained graphics

Overview of WPF Architecture

Most of WPF is
written in managed
code
milcore is the only
unmanaged
component of
WPF


XAML: Extensible Application Markup Language
 Declarative object instantiation
 Not exclusive to WPF
 Separates UI and logic
– Common language for Designers and Developers
• Demo: Blend and VS
– Parallel development
– Localization, Branding
– Targeted UI (devices, users, …)
 Tool support
 Supports C# and VB.NET


Benefits
 Markup/code-behind model (like ASP.NET)
 Excellent layout options and text flow features
 Access to powerful graphics hardware
 Certain otherwise-impossible effects are
made easy (skewing and rotating
textboxes, etc.)


Tools
• Cider
• XAML Pad
• 3D tools such as Light wave can generate
XAML.
– Electric Rain Zam 3D
– Mobiform Aurora
– Cinema 4D
• Microsoft Expression
– Graphics Designer
– Interactive Designer


Comparisons: WPF vs. DirectX and GDI+


WPF Build Pipeline


Basic topics in WPF

WPF code and XAML
Property & object in XAML: syntax
Layout
Basic control
Basic property
WPF Concepts


1. WPF code and XAML: first app
WPF code
– New consoles project (or Windows Apps)
– Reference:
PresentationCore, PresentationFramework, a
nd WindowsBase

How to create this
window?

using System.Windows;
using System.Windows.Controls;
namespace StudyWPFApplication
{ public class Class1
{
[STAThread]//Must insert before Main
public static void Main(string[] aargs){
Window w = new Window();
Button btn = new Button();
btn.Width = btn.Height = 100;
btn.Content = "Click Me!";
w.Content = btn;
w.Title = "Khoa Công Nghệ Thông Tin";
Application A = new Application();
A.Run(w);}
}
}


From VS template
Window1 is inherited from Window

App is inherited from Application

From VS template Write 2 example: code and Xaml


2. Basic Window properties
 Title
 WindowStyle
 Content Brush
 Foreground
 Background
SolidColorBrush GradientBrush TileBrush

LinearGradientBrush RadialGradientBrush


SolidColorBrush
using System.Windows.Media

Color cr = new Color();
cr.B = cr.R = cr.G = 122;
cr.A = 255;
SolidColorBrush br = new SolidColorBrush(cr);
button1.Background = br;


SolidColorBrush

SolidColorBrush brush=
new SolidColorBrush(Colors.Red);
rect1.Fill = brush;
XAML CODE


SolidColorBrush

XAML


GradientBrush


LinearGradientBrush
Point p1 = new Point(0, 0);
Point p2 = new Point(1, 1);
LinearGradientBrush br = new
LinearGradientBrush
(Colors.Red,Colors.White, p1, p2);
rect1.Fill = br;


LinearGradientBrush
LinearGradientBrush br = new
LinearGradientBrush();
br.GradientStops.Add(
new GradientStop(Colors.Yellow, 0.0));
new GradientStop(Colors.Orange, 0.5));
new GradientStop(Colors.Red, 1.0));
rect1.Fill = br;


LinearGradientBrush

XAML


RadialGradientBrush

RadialGradientBrush br = new
RadialGradientBrush(Colors.Blue,Colors.White);


RadialGradientBrush
RadialGradientBrush(Colors.Blue,Colors.Yellow);
rect1.Fill = br;


RadialGradientBrush
RadialGradientBrush();
br.GradientOrigin = new Point(0.75, 0.25);
new GradientStop(Colors.Yellow, 0.0));
new GradientStop(Colors.Orange, 0.5));
new GradientStop(Colors.Blue, 1.0));
rect1.Fill = br;


RadialGradientBrush

XAML


ImageBrush
ImageBrush myBrush = new ImageBrush();
myBrush.ImageSource =new BitmapImage(
new Uri(@"E:PicturesIC151762.jpg", UriKind.Relative));
rect1.Fill = myBrush;


Config Brush from VS design

2. Handling Application Events
From Code


2. Handling Application Events
From XAML


2.Code-Behind and Object Names
 Classes have a Name property
<Button Name="myButton">Hello</Button>

 Classes don’t have a Name property
<Button x:Name="myButton">Hello</Button>


2. Logical Trees and Visual Trees
Logical tree comprises the elements
as they are listed in the XAML. These
include panels and controls you will
generally use.
Visual tree includes the parts that
make up the controls and panels.


2.Top-Level Elements
 Three classes are used by WPF
programs as top-level elements
– Application
– Page
– Window
• Only one Content


3. Syntax for Object

One element

Empty element tag


3. Syntax for Object
Nested- Multi elements

Logical tree with
four WFP objects

XAML Tree With
Four Elements


3. Syntax for Attribute
Object element syntax
– Like object syntax
• <button> FIT HUI </button>
Attribute syntax
Property Element Syntax
Attached Property Syntax


– Some properties are too complex to be set
with a simple string
– Does not produce an object, sets a property
on an object



<Button >
<Button.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Red" Offset="0.0"/>
<GradientStop Color="Blue" Offset="1.0"/>
</LinearGradientBrush>
</Button.Background>
Click me
</Button>


Attached Property Syntax
– Attached properties are a special type of
property that is defined in one class but used
in another.


Reviewing the XAML Syntax

<Window> HO CHI MINH UNIVERSITY OF INDUSTRY
<StackPanel >
<StackPanel.Background>
4. Example
<RadialGradientBrush>
<GradientStop Color="Black" Offset="0" />
<GradientStop Color="#FF56933A" Offset="1" />
<GradientStop Color="#FF2B2B2B" Offset="0.169" />
</RadialGradientBrush>
</StackPanel.Background>
<Grid Height="141" Name="grid1" Width="260">
<Grid.RowDefinitions>
<RowDefinition Height="61*" />
<RowDefinition Height="80*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="118*" />
<ColumnDefinition Width="142*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.RowSpan="2" Height="23" />
<Button Content="Button" Grid.Row="1">
<Button.BorderBrush>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FFB44E4E" Offset="1" />
</Button.BorderBrush>
</Button>
<CheckBox Content="CheckBox" Grid.Column="1" Grid.Row="1" />
</Grid>
</StackPanel>
</Window>


5. XAML Namespace
To create objects of these types, the XAML
parser must know where to find their definitions


5. XAML Namespace


5. XAML Namespace: Classes from
Other Namespaces


using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
{
public class MyButton:Button{
public MyButton(){
Background = new LinearGradientBrush(
Colors.Yellow,Colors.Blue,
new Point(0,0),new Point(1,1));
}
} Create MyButton extend from class Button
}


In XAML

Declare prefix:

xmlns:local="clr-namespace:StudyWPFApplication"
Instantiate the button:

<local:MyButton Content="Hello" ></local:MyButton>


5. Markup Extension
 hook to a class outside the XAML
 class designed to be used by a markup extension is
called an extension class
xmlns:local="clr-namespace:StudyWPFApplication"
<TextBox Name="txt" Text="{local:MyMarkupExtension}"/>

using System;
using System.Windows.Markup;
{
public class MyMarkupExtension:MarkupExtension{
public MyMarkupExtension() { }
public override object ProvideValue
(IServiceProvider serviceProvider) {
return DateTime.Now.ToShortDateString();
}
}
}


6. Layout: Layout in WPF
Before WPF, user interfaces generally
consisted of windows with statically placed
controls.
WPF: layout system
consist of one or more panels that contain
visual elements


6. Layout Basic Principle
 Layout in Windows From
Control have fix coordinates: X,Y
Dock, Anchor
Using FlowLayoutPanel to arrange
controls in a flow panel
Using TableLaoutPanel to arrange
controls in table format


6. Layout Basic Principle
XAML Layout
Flow-based layout
• Support coordinate
Contain is organizaed into containers
Resolution and size independent interfaces
Automatically adjust if screen resolution
changes


6. Layout in WPF
Layout in WPF
Alignment
Padding and Margins
Containers (Panels)
StackPanel
WrapPanel
DockPanel
Grid
Canvas
UniformGrid


6. XAML Layout: Align & Padding

Alignment describes how child elements
should be posisioned within parent’s space
HorizontalAlignment: Left, Center, Right,
or Stretch
VerticalAlignment: Top, Center, Bottom, or
Stretch


Margin
Distance between an elenment and its
child or peers
Left, top, right, bottom, or uniform
(Margin=―5‖)
Padding
Enlarges a child element by specified
thickness


6. Layout Panels
 Canvas
for specific (X,Y) positioning


6. Layout Panels
 StackPanel
Arranges content either horizontally or
vertically


6. Layout Panels
 WrapPanel
Arranges item sequentially


6. Layout Panels
 DockPanel
Anchor elements to the edges of the
container

6. Layout Panels
 Grid
Table-style layout of rows and columns

6. Layout Panels
 UniformGrid
All rows and columns are the same size
Contains two properties, Rows and Columns


Types of Containers
Basic controls
Resource
Style
Control template
Binding
Graphic element


 Types of Containers


 Types of Containers : Example
Single item <Button>Click me</Button>

<ListBox >
Collection items <ListBoxItem>a</ListBoxItem>
<ListBoxItem>b</ListBoxItem>
<ListBoxItem>c</ListBoxItem>
</ListBox>
Single item and Collection items
<ListBox>
<ListBoxItem>a</ListBoxItem>
<TextBox>FIT HUI</TextBox>
<Button>Click me</Button>
</ListBox>


7. Basic controls

 Simplest controls
 Border
 CheckBox
 Button
 RadioButton
 More controls


7.1 Border control
Container control can contains controls
Without border  using Border control
Accept single child control
Display border around child control
Property
Backgound : Brush
BorderBrush
BorderThickness
CornerRadius


7.1 Border control

<Border Margin="20,20,20,20" BorderBrush="Blue"
BorderThickness="1,1,2,2"
CornerRadius="20" Height="88"
Background="WhiteSmoke">
<Button Height="32" Width="76">Border</Button>
</Border>

How to make border???


7.1 RadioButton -CheckBox
 RadioButton Properties
GroupName
IsChecked
<StackPanel>
<RadioButton GroupName="Os"
Content="Windows 7"
IsChecked="True"/>
<RadioButton GroupName="Os"
Content="Windows 8" />
<RadioButton GroupName="Office"
Content="Microsoft Office 2010"
IsChecked="True"/>
<RadioButton GroupName="Office"
Content="Open Office"/>
</StackPanel>


7.1 RadioButton -CheckBox
 Checkbox Properties
IsChecked
<Border Margin="20,20,20,20" BorderBrush="Red"
BorderThickness="1,1,2,2" CornerRadius="25"
Height="88" Background="Lavender">
<StackPanel>
<CheckBox IsChecked="True" Content="Rất Hài
Lòng" Height="21" Width="145"></CheckBox>
<CheckBox Content="Hài Lòng" Height="21"
Width="145"></CheckBox>
<CheckBox Content="Tạm Chấp Nhận" Height="21"
<CheckBox Content="Không Chấp Nhận" Height="21"
</StackPanel>
</Border>


7.1 Basic Controls: Text, date, misc
Text entry controls
TextBlock, Label, Textbox, PasswordBox
• View – edit text
TextBlock vs Label
TextBlock: Static text, standard font properties:
FontFamily, FontSize, FontStyle, FontWeight: for
using simple static text
• <LineBreak/> to inject line break
• Using <Run> : each run have its own formatting
<TextBlock>FIT <LineBreak/>HUI
<Run Background="Blue" FontSize="20"
Foreground="red"> Hello. </Run> H.a.you?
</TextBlock>


7.1 Basic Controls: Text, date, misc

How to fill background for result text???
And How to change font style when
mouse down???


7.1 Basic Controls: Label
Label: target, underscore _, content
When you want to display text by itself use
the TextBlock. The benefit is a
light, performant way to display text.
When you want to associate text with
another control like a TextBox use the
Label control. The benefits are access keys
and references to target control.


7.1 Basic Controls: Label
Label: target, underscore _, content
<StackPanel>
<Label Target="txta">Nhập _a</Label>
<TextBox Name="txta"></TextBox>
<Label Target="{Binding
ElementName=txtb, Mode=Default}">
Nhập _b</Label>
<TextBox Name="txtb"></TextBox>
</StackPanel>


7.1 Basic Controls: Textbox control
Properties
TextWrapping
AccepsReturn
IsEnabled
ReadOnly
VerticalScrollbarVisibility, HortizontalScr
ollbarVisibility
SpellCheck.IsEnabled (Language)
Events
– KeyDown, KeyUp, TextChanged


7.1 Basic Controls: Textbox control
 Examples

<TextBox
VerticalScrollBarVisibility="Visible"
TextWrapping="Wrap"
Margin="0,0,0,0"
SpellCheck.IsEnabled="True"
AcceptsReturn="True" Text="FIT HUI"
Height="41" Width="276">
</TextBox>


7.1 Basic Controls: Passwordbox
Like Textbox
Property: PasswordChar
No Text property, rereive Password
Do not support clipboard
<PasswordBox Name="txtPassword"
ToolTip="Password"
PasswordChar="*" Height="30"
Width="224" />


7.1 Date control: Calendar control
Tag <Calendar>
SelectionMode: select single day, range
date..
DiplayMode: Month, Year, Decade
BlackOutDates : set black out dates
DisplayDateStart, DisplayDateEnd: range
of available dates


7.1 Date control: Calendar control
<Calendar DisplayDateStart="2012-01-1"
DisplayDateEnd="2012-1-30">
<Calendar.BlackoutDates>
<CalendarDateRange Start="2012-1-5"
End="2012-1-10"/>
</Calendar.BlackoutDates>
</Calendar>


7.1 Date control: DatePicker control

Allow to select a single date using dropdown
calendar
IsDropDownOpen
SelectedDateFormat, BlackOutDates, Displa
yDateStart, DisplayDateEnd
SelectedDateChanged event


7.1 Date control: DatePicker control
<DatePicker DisplayDateStart="2012-1-1"
DisplayDateEnd="2012-1-31"
SelectedDate="2012-1-15">
<DatePicker.BlackoutDates>
<CalendarDateRange
Start="1/1/2012"
End="1/5/2012" />
</DatePicker.BlackoutDates>
</DatePicker>


7.1 Miscellaneous control
Slider, ProgressBar, MediaElement
Slider
Minimum, Maximum, Orientation, Value, SmallCha
nge, LargeChange, IsDerectionReversed
ProgressBar
Minimun, Maximun
Change Value, or using IsInDeterminate property
Check out
System.Windows.Threading.DispatcherTimer to
run code at regular intervals • Demo
Image
Source
Stretch


<StackPanel>
<Slider Minimum="0" Maximum="10" Value="5"></Slider>
<ProgressBar Minimum="0" Maximum="100" Name="prb"
Height="20"/>
<Image Source="E:Picturesa.jpg" Height="120.83"
Stretch="Fill" Width="129.846" />
<Button Click="btn_Click" >Demo progressbar</Button>
<Button Click="btn1_Click" >Demo gressbar –
IsInDetermine</Button>
</StackPanel>

XAML


System.Windows.Threading.DispatcherTimer timer;
private void btn_Click(object sender, RoutedEventArgs e)
{
timer=new System.Windows.Threading.DispatcherTimer();
timer.Tick += new EventHandler(my_tick);
timer.Interval = new TimeSpan(0, 0, 1);
timer.Start();
}
public void my_tick(object sender, EventArgs e)
{
if (prb.Value >= prb.Maximum)
timer.Stop();
prb.Value += 1;
}

Example code 1


private void btn_Click
(object sender, RoutedEventArgs e)
{
System.Windows.Threading.DispatcherTimer timer =
new System.Windows.Threading.DispatcherTimer();
timer.Tick += delegate
{
if (prb.Value >= prb.Maximum)
timer.Stop();
prb.Value += 10;
};
timer.Interval = new TimeSpan(0, 0, 1);//h,m,s
timer.Start();
} Example code 2


MediaElement
Display media
Souce property: URI
LoadedBehavior="Manual― for using
control methods
IsMuted
Position, Volume
Call Play, Pause, Stop methods
Invisible until playing video file


MediaElement
This program loads the media file and
immediately starts playing it.
<Window …>
<StackPanel>
<MediaElement Source="music.mp3"/>
</StackPanel>
</Window>

Example 1


<StackPanel>
<MediaElement Name="player"
LoadedBehavior="Manual" />
<StackPanel Orientation="Horizontal"
VerticalAlignment="Top">
<Button Click="Play_Click" Margin="3"
Padding="6,3">Play</Button>
<Button Click="Pause_Click" Margin="3"
Padding="6,3">Pause</Button>
<Button Click="Stop_Click" Margin="3"
Padding="6,3">Stop</Button>
</StackPanel>
</StackPanel> Example 2 - XAML


public partial class SampleMediaElement : Window
{
public SampleMediaElement()
{
InitializeComponent();
player.Source = new Uri(@"Hello.mp3");
}
private void Play_Click(object sender, RoutedEventArgs e)
{
player.Play();
}
private void Pause_Click(object sender, RoutedEventArgs e)
{
player.Pause();
}
private void Stop_Click(object sender, RoutedEventArgs e)
{
player.Stop();
} Example 2 - Code
}


7.2 List controls
Listbox/Combobox
Are container elements: <ListBoxItem>
SelectedIndex
SelectedItem (return element type)
SelectionChanged event
(Listbox) SelectionMode: single,
expand…
Can contains others control: textbox,
image…


7.2 List controls Example
<ListBox Name="lst" Width="374">
<ListBoxItem>a</ListBoxItem>
<ListBoxItem>c</ListBoxItem>
<TextBox>Hello</TextBox>
<Button>Button here</Button>
<StackPanel Orientation="Horizontal">
<Image Width="71" Height="84"
Source="E:a.jpg" Stretch="Fill">
</Image>
<Label Background="Wheat">Hình nè</Label>
</StackPanel>
</ListBox>


7.3 TreeView
 Contains TreeViewItems
 TreeViewItem
– Header
– Tag
 SelectedItemChanged event: when select
node
 Can contain image, text
 Demo: item with text & image


7.3 TreeView


7.4 Menu
 Place everywhere you want
Use Grid of DockPanel
Set IsMainMenu = true when Top level menu
MenuItem
• Container control
• Header property
• Icon property
• Click event


7.4 Menu
<StackPanel Margin="0" >
<Menu Name="cm">
<MenuItem Header="File">
<MenuItem Header="open"/>
<MenuItem Header="exit"/>
<MenuItem Header="Last open">
<MenuItem Header="file1" IsCheckable="True"/>
<MenuItem Header="file2" IsCheckable="True"/>
</MenuItem>
</MenuItem>
</Menu>
</StackPanel>


7.5 Context Menu : ContextMenu property
<Button>Button with Context menu
<Button.ContextMenu>
<ContextMenu Name="cmd">
<MenuItem Header="Copy" >
<MenuItem.Icon>
<Image Source="copy.png"></Image>
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="Paste" >
<MenuItem.Icon>
<Image Source="paste.png"></Image>
</MenuItem.Icon>
</MenuItem>
</ContextMenu>
</Button.ContextMenu>
</Button>


7.6 ScrollViewer
 Contain control with both horizontal and
vertical bars built-in
 Use it when content may not fir a window
and you want to enable scrolling
(example: StackPanel)
 VerticalScrollBar and HorizontalScrollBar
– Auto: scroll bar auto apprear


7.6 ScrollViewer


7.6 ScrollViewer
<ScrollViewer
HorizontalScrollBarVisibility="Auto"
Width="800" Height="500">
<StackPanel VerticalAlignment="Top"
HorizontalAlignment="Left" >
<Image Source="baby1.jpg" />
<Image Source="bird1.jpg" />
</StackPanel>
</ScrollViewer>


7.7 TabControl and TabItem
Separate pages
TabItem
– Header property
<TabControl>
<TabItem Header="tabpage 1">
<Button>Tab 1 nè</Button>
</TabItem>
<TabItem Header="tabpage 2">
<WrapPanel>
<Button>Tab 2 nè</Button>
<TextBlock>Thông tin ở đay</TextBlock>
</WrapPanel>
</TabItem>
</TabControl>


7.8 GroupBox
Header property
Common: contains checkbox, radio buttons.
<GroupBox Header="Student information"
BorderBrush="Red" BorderThickness="2">
<StackPanel>
<WrapPanel>
<TextBlock Width="90">Student ID:</TextBlock>
<TextBox Width="150"></TextBox>
<TextBlock Width="90">Student Name:</TextBlock>
<TextBox Width="150"></TextBox>
</WrapPanel>
</StackPanel>
</GroupBox>


7.9 Expander control
Header and collapsible content region
Expanded and Collapsed events
ExpandDirection property:
Down, up, left, right

<Expander Header="expander FIT HUI example"
ExpandDirection="Down">
<TabControl>
<TabItem Header="tabpage1">
<Button>Hello</Button>
</TabItem>
</TabControl>
</Expander>


8. Resources
Type of resouces
Assembly resources (binary resources)
• compiled into the binary
• Example: image, icon…
• Resource—not Embedded Resource
Logical resources (object
resources, XAML resources)
• associated with XAML markup

<StackPanel Name="sp">
<TextBlock FontFamily="Arial Black" Margin="7">
Some Buttons</TextBlock>
<Button Height="40" Name="btn1" FontWeight="Bold">
<Button.Background>← Defining the Background
<LinearGradientBrush StartPoint="0, 0" EndPoint="1,1">
<GradientStop Color="White" Offset="0" />
<GradientStop Color="Blue" Offset="1"/>
</Button.Background>
Button 1
</Button>
<Button Height="40" Name="btn2" FontWeight="Bold">
<Button.Background>← Defining the Background Again
<LinearGradientBrush StartPoint="0, 0" EndPoint="1,1">
<GradientStop Color="White" Offset="0" />
<GradientStop Color="Blue" Offset="1"/>
</Button.Background> Button 2 Why ???
</Button>
</StackPanel>


8. Resources
Resources store reference to an object
within a collection
most objects in the WPF framework have a
Resources collection:
Application, Window, Button, …
A resource can be anything: Brush, a
control template …
Find resource: navigates up


8. Resources: Example
<Window …>
<Window.Resources>
<RadialGradientBrush x:Key="btnbrush">
<RadialGradientBrush.GradientStops>
<GradientStop Color="Yellow" Offset="0"/>
<GradientStop Color="Red" Offset="0.25"/>
<GradientStop Color="Blue" Offset="0.75"/>
<GradientStop Color="LimeGreen" Offset="0.8"/>
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Window.Resources>
<Button
Background="{DynamicResource ResourceKey=btnbrush}"
Width="100" Height="100"></Button>
</Window>


8. Resources: Example
 StaticResource vs DynamicResource
Static resources are resolved at compile
time, whereas dynamic resources are
resolved at runtime.
Use DynamicResources when the value of
the resource could change during the
lifetime of the Application.
Use StaticResources when it’s clear that
you don’t need your resource re-evaluated
when fetching it – static resources perform
better than dynamic resources.


8. Resources: Visual Tree Dynamic
Background="{DynamicResource ResourceKey=keyBrush}"


8. Resources: Visual Tree Static
Background="{StaticResource ResourceKey=gradBrush}"


8. Resources dictionary
Stored in a central place (file)
Is a collection of resources that can be
easily incorporated into an application
Can be used to contain a single reference
to all the assemblies in a single or multiple
applications  better for re_using

Example in next slide


<ResourceDictionary …>
<LinearGradientBrush x:Key="btnbrush">
<GradientStop Color="AliceBlue" Offset="0" />
<GradientStop Color="Blue" Offset=".7" />
</ResourceDictionary> Dictionary2.xaml

<Window.Resources>
Using Dictionary2.xaml
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Dictionary2.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Button Background="{DynamicResource ResourceKey=
btnbrush}" Width="100" Height="50">Hello</Button>


9. Style
group of property settings
apply that style to many different elements
set the inner properties of a XAML element
using setters
– Setters require two attributes
Property & Value
Can set event triggers
– applies itself whenever a target condition is
evaluated to true


9. Style: named style
Key Style Name Suffix
↓ ↓
<Style x:Key="buttonStyle">
<Setter Property="Button.Height" Value="40" />
<Setter Property="Button.Width" Value="110"/>
<Setter Property="Button.FontSize" Value="16"/>
<Setter Property="Button.FontWeight" Value="Bold"/>
</Style> ↑ ↑ ↑
Property Setters for a Named Value
Attribute Style Must Include a Attribute
Class Name

<Button Style="{StaticResource buttonStyle}">Button 1</Button>


9. Style
<Button Content="Button 1">
<Button.Style>
<Style>
<Setter Property="Button.Height" Value="40" />
<Setter Property="Button.Width" Value="110" />
<Setter Property="Button.FontSize" Value="16" />
<Setter Property="Button.FontWeight" Value="Bold" />
</Style>
</Button.Style>
</Button>

<Window.Resources>
<Style …>
<Setter …/>
<Setter …/>
</Style>
</Window.Resources>


9. Style
Declare in Resource
Two ways
Named styles
–give the style a name when declare.
Targeted styles
–give the style a target type when declare.
The style is then automatically applied to
elements of that type.


9. Style: example TargetType
<ResourceDictionary …> targetstyle.xaml
<Style TargetType="{x:Type Button}">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="AliceBlue" Offset="0" />
<GradientStop Color="Blue" Offset="1" />
</Setter.Value>
</Setter>
<Setter Property="FontSize" Value="20" />
<Setter Property="Width" Value="150"/>
<Setter Property="Height" Value="50"/>
</Style>


9. Style: example TargetType
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="targetstyle.xaml"/>
</ResourceDictionary.MergedDictionaries>
</Window.Resources>
<Button Content="FIT HUI"/>


9. Style: named style


9. Style: Targeted Styles

Set TargetType attribute to the exact type
of the elements on which to apply the style.
– The style will not be applied to elements of
types derived from the specified type.
Do not set the x:Key attribute.
The Setters do not require a class name
with the property name.


9. Style: Targeted Styles
<Window.Resources>
Set the target type.
↓
<Style TargetType="Button">
<Setter Property="FontSize" Value="16" />
<Setter Property="FontWeight" Value="Bold"/>
</Style> ↑
No Class Name
</Window.Resources>
<GroupBox Header="Some Buttons" BorderBrush="Black" Margin="5">
<StackPanel>
<Button>Button 1</Button> ← No Explicit Application of the Style
<Button>Button 2</Button> ← No Explicit Application of the Style
</StackPanel>
</GroupBox>


9. Style: Comparing


9. Style: The Collections in a Style
 Trigger: ―conditional‖ styles
 Resources property to store logical
resources used by the Setters and Triggers.


9. Style: Property Triggers
The condition is based on the value of a
property. When (and while) that property
has a certain value, the style is applied
<Window.Resources>
<EventSetter Event="Click" Handler="btn_click"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="Red"/>
<Setter Property="FontWeight" Value="Bold"/>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Button Content="Hello" ></Button>


9. Style: EventSetters
EventSetters allow to attach event
handlers to a style
<Window.Resources>
<EventSetter Event="Click" Handler="btn_click"/>
</Style>
</Window.Resources>

public void btn_click
(object o, RoutedEventArgs e)
{
((Button)o).Content = "Clicked";
}


10. Control template
Override the default user interface for
common Windows controls
are XAML declarations of a "visual tree"
for a control
replace the default look & feel
define the functionality behind the control


10. Control template: example
<Window.Resources>
<ControlTemplate x:Key= "tmpl" TargetType="{x:Type Button}">
<Border BorderBrush="Navy" BorderThickness="1" CornerRadius="5"
Background="CornflowerBlue">
<Border BorderBrush="White" BorderThickness="3">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Label Content="My button" Grid.Row="0" Margin="0" />
<ContentPresenter Grid.Row="1"/>
</Grid>
</Border>
</Border>
</ControlTemplate>
</Window.Resources>

<Button Content="More text" Template="{DynamicResource tmpl}"/>


11. Data binding
Is the process that establishes a connection
between the application UI and businesslogic.
Automatically updated to reflect the change


11. Simple binding
Binding from one control to another
Property to property
– ElementName, Path
Example
<StackPanel>
<TextBox Name="txt"
Text="{Binding ElementName=slider , Path=Value}"/>
<Label Content ="{Binding ElementName=txt , Path=Text}"/>
<Slider Name="slider"></Slider>
</StackPanel>


11. Binding structure


11. Simple binding: example 2
<StackPanel><TextBlock Text="Colors:"/>
<ListBox x:Name="lbColor">
<ListBoxItem Content="Blue"/>
<ListBoxItem Content="Green"/>
<ListBoxItem Content="Red"/>
</ListBox>
<TextBlock Text="You selected color:"/>
<TextBlock
Background="{Binding ElementName=lbColor,
Path =SelectedItem.Content}">
<TextBlock.Text>
<Binding ElementName="lbColor"
Path="SelectedItem.Content"/>
</TextBlock.Text>
</TextBlock>
</StackPanel>


11. Binding Direction
OneWay: Updates the target when the source
changes.
TwoWay: Updates in both directions. Updates the
target when the source changes and updates the
source when the target changes.
OneWayToSource: Updates the source when the
target changes.
OneTime: Updates the target property once, with
the source’s initial value. After that, the target isn’t
updated again.
Default: Uses the default binding mode of the
target.


11. Binding Direction


11. Binding Direction:Triggers
The behavior for updating depends on
the direction of the update, as follows:
 When the direction of the update is from
the source to the target, the update
always happens immediately.
 When the direction of the update is from
the target to the source, then when the
update occurs depends on the value of
the UpdateSourceTrigger property of the
Binding.


Summary of the update behavior based on direction
of the update


12. Graphic objects
Transforms
– Transforms allow you to modify the
appearance of an element in specific ways.
BitmapEffects
Shapes


12. Graphic objects
RotateTransform

<Button Content="Rotate Me" >
<Button.RenderTransform>
<RotateTransform Angle="45"/>
</Button.RenderTransform>
</Button>


12. Graphic objects
TranslateTransform
Moves an element to a different position
<StackPanel HorizontalAlignment="Center">
<Button Width="70">Button 1</Button>
<Button Width="70">
Move Right 30
<Button.RenderTransform>↓
<TranslateTransform X="30" Y="10"/>
</Button.RenderTransform> ↑
Move Down 10
Button 2
</Button>
</StackPanel>


12. Graphic objects
SkewTransform
Skews an element at an angle. Can skew
the X or Y coordinates


12. Graphic objects
SkewTransform
<Button>No Skew</Button>
<Button Width="90" FontWeight="Bold" Margin="2">
<SkewTransform AngleX="30"/>
AngleX="30"
</Button>
<Button Width="90" FontWeight="Bold" Margin="2">
<SkewTransform AngleY="30"/>
AngleY="30"
</Button>
</StackPanel>


12. Graphic objects
SkewTransform
<Button Name="SkewButton" Width="122"
Content="Skew Me!" Click="btn_click">
<SkewTransform x:Name="Trans_SkewButton"
CenterX="75" CenterY="37" AngleX="0"
AngleY="0" />
</Button>
public void btn_click
(object sender, System.Windows.RoutedEventArgs e){
double skew = 30;
if (Trans_SkewButton.AngleX == 30) skew = 0;
Trans_SkewButton.AngleX = skew;
Trans_SkewButton.AngleY = skew;}


12. Graphic objects
ScaleTransform
Transform changes the size of an element
<Button Width="70">
<Button.LayoutTransform>
<ScaleTransform ScaleX="1.75" ScaleY="1.5"/>
</Button.LayoutTransform>
Button 2
</Button>
</StackPanel>


12. Graphic objects: BitmapEffects
<Button Content="Button">
<Button.BitmapEffect>
<EmbossBitmapEffect />
</Button.BitmapEffect>
</Button>


12. Graphic objects: Shapes
6 basic typed

12. Graphic objects: Shapes
<StackPanel Orientation="Vertical"
HorizontalAlignment="Center">
<Rectangle Stroke="Black" StrokeThickness="2"
Margin="10" Height="30" Width="40"Fill="AliceBlue"/>
<Ellipse Stroke="Black" StrokeThickness="2"
Margin="10"
Height="30" Width="40" Fill="AliceBlue"/>
<Line Stroke="Black" StrokeThickness="2"
Margin="10"
X1="0" Y1="0" X2="40" Y2="30"/>
<Polyline Stroke="Black"
StrokeThickness="2" Margin="10"
Points="0,0 30,0 10,30 40,30"/>
<Polygon Stroke="Black" StrokeThickness="2"
Margin="10" Points="0,0 30,0 10,30 40,30"/>
</StackPanel>


13. MS Expression Blend
Introdution
Microsoft Expression Blend 4 Step by Step
http://www.mediafire.com/?ckv9wv1qkdnl45a


Exercise WPF:
1. Tạo contact application
– Sử dụng VS kết hợp Blend thiết kế giao diện
• Listbox danh sách /button: thêm, sửa, xóa,lưu
• Dùng style để thay đổi giao diện tất cả button
giống nhau, tất cả textbox giống nhau.
• Dùng Style/trigger thay đổi giao diện các textbox
(background, fontsize) khi di chuyển chuột trên các
textbox này
• Dùng Trigger để màu các textbox thay đổi khi thay
đổi chế độ soạn thảo
• Thay đổi Style, transform, BitmapEffect thay đổi
giao diện button
• Bổ sung một đồng hồ kim giờ - phút – giây phía
trái màn hình


Exercise WPF:
 Using WPF app (con’t)
– Display contact app.
– Next/Pre/First/Last menu using icon
– Display contact list with same icon in
Listbox, Treeview

 Using Expression Blend
– Change Style
– Change template
– Using transform, BitmapEffect for buttons


END

windows presentation foundation

More Related Content

Similar to windows presentation foundation

Recently uploaded

windows presentation foundation