SlideShare a Scribd company logo
1 of 160
Download to read offline
HO CHI MINH UNIVERSITY OF INDUSTRY




What's New in WPF Version 4.5?
HO CHI MINH UNIVERSITY OF INDUSTRY




1 Windows Presentation Foundation

2 Benefits

3 Tools

4 Discussion of WPF applicability
HO CHI MINH UNIVERSITY OF INDUSTRY


 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.
HO CHI MINH UNIVERSITY OF INDUSTRY



 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.
HO CHI MINH UNIVERSITY OF INDUSTRY



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
HO CHI MINH UNIVERSITY OF INDUSTRY


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
HO CHI MINH UNIVERSITY OF INDUSTRY



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
HO CHI MINH UNIVERSITY OF INDUSTRY



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
HO CHI MINH UNIVERSITY OF INDUSTRY
Overview of WPF Architecture




                   Most of WPF is
                    written in managed
                    code
                   milcore is the only
                    unmanaged
                    component of
                    WPF
HO CHI MINH UNIVERSITY OF INDUSTRY



 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
HO CHI MINH UNIVERSITY OF INDUSTRY



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.)
HO CHI MINH UNIVERSITY OF INDUSTRY


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
HO CHI MINH UNIVERSITY OF INDUSTRY




Comparisons: WPF vs. DirectX and GDI+
HO CHI MINH UNIVERSITY OF INDUSTRY

WPF Build Pipeline
HO CHI MINH UNIVERSITY OF INDUSTRY



Basic topics in WPF

WPF code and XAML
Property & object in XAML: syntax
Layout
Basic control
Basic property
WPF Concepts
HO CHI MINH UNIVERSITY OF INDUSTRY



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?
HO CHI MINH UNIVERSITY OF INDUSTRY
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);}
     }
}
HO CHI MINH UNIVERSITY OF INDUSTRY



1. WPF code and XAML: first app
From VS template
               Window1 is inherited from Window




App is inherited from Application
HO CHI MINH UNIVERSITY OF INDUSTRY
HO CHI MINH UNIVERSITY OF INDUSTRY
1. WPF code and XAML: first app
From VS template Write 2 example: code and Xaml
HO CHI MINH UNIVERSITY OF INDUSTRY
1. WPF code and XAML: first app
From VS template Write 2 example: code and Xaml
HO CHI MINH UNIVERSITY OF INDUSTRY



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



            LinearGradientBrush             RadialGradientBrush
HO CHI MINH UNIVERSITY OF INDUSTRY
HO CHI MINH UNIVERSITY OF INDUSTRY



 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;
HO CHI MINH UNIVERSITY OF INDUSTRY


SolidColorBrush




            SolidColorBrush brush=
            new SolidColorBrush(Colors.Red);
            rect1.Fill = brush;
 XAML                   CODE
HO CHI MINH UNIVERSITY OF INDUSTRY


SolidColorBrush




 XAML
HO CHI MINH UNIVERSITY OF INDUSTRY



GradientBrush
HO CHI MINH UNIVERSITY OF INDUSTRY


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;
HO CHI MINH UNIVERSITY OF INDUSTRY


LinearGradientBrush
LinearGradientBrush br = new
                 LinearGradientBrush();
br.GradientStops.Add(
     new GradientStop(Colors.Yellow, 0.0));
br.GradientStops.Add(
     new GradientStop(Colors.Orange, 0.5));
br.GradientStops.Add(
     new GradientStop(Colors.Red, 1.0));
rect1.Fill = br;
HO CHI MINH UNIVERSITY OF INDUSTRY



LinearGradientBrush




 XAML
HO CHI MINH UNIVERSITY OF INDUSTRY



 RadialGradientBrush




RadialGradientBrush br = new
RadialGradientBrush(Colors.Blue,Colors.White);
HO CHI MINH UNIVERSITY OF INDUSTRY



RadialGradientBrush
RadialGradientBrush br = new
RadialGradientBrush(Colors.Blue,Colors.Yellow);
rect1.Fill = br;
HO CHI MINH UNIVERSITY OF INDUSTRY

RadialGradientBrush
RadialGradientBrush br = new
RadialGradientBrush();
br.GradientOrigin = new Point(0.75, 0.25);
br.GradientStops.Add(
     new GradientStop(Colors.Yellow, 0.0));
br.GradientStops.Add(
     new GradientStop(Colors.Orange, 0.5));
br.GradientStops.Add(
     new GradientStop(Colors.Blue, 1.0));
rect1.Fill = br;
HO CHI MINH UNIVERSITY OF INDUSTRY


RadialGradientBrush




 XAML
HO CHI MINH UNIVERSITY OF INDUSTRY


 ImageBrush
ImageBrush myBrush = new ImageBrush();
myBrush.ImageSource =new BitmapImage(
    new Uri(@"E:PicturesIC151762.jpg", UriKind.Relative));
rect1.Fill = myBrush;
HO CHI MINH UNIVERSITY OF INDUSTRY



Config Brush from VS design
HO CHI MINH UNIVERSITY OF INDUSTRY
2. Handling Application Events
                         From Code
HO CHI MINH UNIVERSITY OF INDUSTRY



2. Handling Application Events
              From XAML
HO CHI MINH UNIVERSITY OF INDUSTRY



 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>
HO CHI MINH UNIVERSITY OF INDUSTRY



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.
HO CHI MINH UNIVERSITY OF INDUSTRY
HO CHI MINH UNIVERSITY OF INDUSTRY


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

3. Syntax for Object


One element




              Empty element tag
HO CHI MINH UNIVERSITY OF INDUSTRY

 3. Syntax for Object
 Nested- Multi elements




Logical tree with
four WFP objects

                          XAML Tree With
                          Four Elements
HO CHI MINH UNIVERSITY OF INDUSTRY



3. Syntax for Attribute
  Object element syntax
   – Like object syntax
   • <button> FIT HUI </button>
  Attribute syntax
  Property Element Syntax
  Attached Property Syntax
HO CHI MINH UNIVERSITY OF INDUSTRY

3. Syntax for Attribute
HO CHI MINH UNIVERSITY OF INDUSTRY

3. Syntax for Attribute
Property Element Syntax
– Some properties are too complex to be set
with a simple string
– Does not produce an object, sets a property
on an object
HO CHI MINH UNIVERSITY OF INDUSTRY



3. Syntax for Attribute
Property Element Syntax

 <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>
HO CHI MINH UNIVERSITY OF INDUSTRY



3. Syntax for Attribute
 Attached Property Syntax
 – Attached properties are a special type of
 property that is defined in one class but used
 in another.
HO CHI MINH UNIVERSITY OF INDUSTRY

3. Syntax for Attribute
  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="Black" Offset="0" />
                         <GradientStop Color="#FFB44E4E" Offset="1" />
                     </LinearGradientBrush>
                 </Button.BorderBrush>
             </Button>
             <CheckBox Content="CheckBox" Grid.Column="1" Grid.Row="1" />
         </Grid>
    </StackPanel>
</Window>
HO CHI MINH UNIVERSITY OF INDUSTRY

 5. XAML Namespace
To create objects of these types, the XAML
 parser must know where to find their definitions
HO CHI MINH UNIVERSITY OF INDUSTRY



5. XAML Namespace
HO CHI MINH UNIVERSITY OF INDUSTRY

5. XAML Namespace: Classes from
Other Namespaces
HO CHI MINH UNIVERSITY OF INDUSTRY

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
namespace StudyWPFApplication
{
  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
}
HO CHI MINH UNIVERSITY OF INDUSTRY

                           In XAML




 Declare prefix:

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

<local:MyButton Content="Hello" ></local:MyButton>
HO CHI MINH UNIVERSITY OF INDUSTRY

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;
namespace StudyWPFApplication
{
public class MyMarkupExtension:MarkupExtension{
public MyMarkupExtension() { }
public override object ProvideValue
       (IServiceProvider serviceProvider) {
            return DateTime.Now.ToShortDateString();
       }
  }
}
HO CHI MINH UNIVERSITY OF INDUSTRY



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
HO CHI MINH UNIVERSITY OF INDUSTRY



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
HO CHI MINH UNIVERSITY OF INDUSTRY



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
HO CHI MINH UNIVERSITY OF INDUSTRY


6. Layout in WPF
Layout in WPF
 Alignment
 Padding and Margins
Containers (Panels)
 StackPanel
 WrapPanel
 DockPanel
 Grid
 Canvas
 UniformGrid
HO CHI MINH UNIVERSITY OF INDUSTRY



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
HO CHI MINH UNIVERSITY OF INDUSTRY


6. XAML Layout: Align & Padding
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
HO CHI MINH UNIVERSITY OF INDUSTRY

6. XAML Layout: Align & Padding
HO CHI MINH UNIVERSITY OF INDUSTRY


6. Layout Panels
   Canvas
    for specific (X,Y) positioning
HO CHI MINH UNIVERSITY OF INDUSTRY



6. Layout Panels
  StackPanel
  Arranges content either horizontally or
   vertically
HO CHI MINH UNIVERSITY OF INDUSTRY


6. Layout Panels
  WrapPanel
   Arranges item sequentially
HO CHI MINH UNIVERSITY OF INDUSTRY

6. Layout Panels
  DockPanel
  Anchor elements to the edges of the
   container
HO CHI MINH UNIVERSITY OF INDUSTRY
6. Layout Panels
  Grid
 Table-style layout of rows and columns
HO CHI MINH UNIVERSITY OF INDUSTRY
6. Layout Panels
  UniformGrid
All rows and columns are the same size
Contains two properties, Rows and Columns
HO CHI MINH UNIVERSITY OF INDUSTRY



Types of Containers
Basic controls
Resource
Style
Control template
Binding
Graphic element
HO CHI MINH UNIVERSITY OF INDUSTRY



 Types of Containers
HO CHI MINH UNIVERSITY OF INDUSTRY

   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>
           <ListBoxItem>b</ListBoxItem>
           <TextBox>FIT HUI</TextBox>
           <Button>Click me</Button>
   </ListBox>
HO CHI MINH UNIVERSITY OF INDUSTRY


7. Basic controls

   Simplest controls
     Border
     CheckBox
     Button
     RadioButton
   More controls
HO CHI MINH UNIVERSITY OF INDUSTRY


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
HO CHI MINH UNIVERSITY OF INDUSTRY


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???
HO CHI MINH UNIVERSITY OF INDUSTRY

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>
HO CHI MINH UNIVERSITY OF INDUSTRY

 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"
     Width="145"></CheckBox>
   <CheckBox Content="Không Chấp Nhận" Height="21"
     Width="145"></CheckBox>
 </StackPanel>
</Border>
HO CHI MINH UNIVERSITY OF INDUSTRY

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>
HO CHI MINH UNIVERSITY OF INDUSTRY

7.1 Basic Controls: Text, date, misc




How to fill background for result text???
And How to change font style when
mouse down???
HO CHI MINH UNIVERSITY OF INDUSTRY

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.
HO CHI MINH UNIVERSITY OF INDUSTRY

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>
HO CHI MINH UNIVERSITY OF INDUSTRY


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


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>
HO CHI MINH UNIVERSITY OF INDUSTRY


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" />
HO CHI MINH UNIVERSITY OF INDUSTRY


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
HO CHI MINH UNIVERSITY OF INDUSTRY


 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>
HO CHI MINH UNIVERSITY OF INDUSTRY


7.1 Date control: DatePicker control

Allow to select a single date using dropdown
 calendar
IsDropDownOpen
SelectedDateFormat, BlackOutDates, Displa
 yDateStart, DisplayDateEnd
SelectedDateChanged event
HO CHI MINH UNIVERSITY OF INDUSTRY


 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>
HO CHI MINH UNIVERSITY OF INDUSTRY

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
HO CHI MINH UNIVERSITY OF INDUSTRY

7.1 Miscellaneous control
 <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
HO CHI MINH UNIVERSITY OF INDUSTRY

7.1 Miscellaneous control
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
HO CHI MINH UNIVERSITY OF INDUSTRY

7.1 Miscellaneous control
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
HO CHI MINH UNIVERSITY OF INDUSTRY


7.1 Miscellaneous control
 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
HO CHI MINH UNIVERSITY OF INDUSTRY


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

                 Example 1
HO CHI MINH UNIVERSITY OF INDUSTRY

7.1 Miscellaneous control
<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
HO CHI MINH UNIVERSITY OF INDUSTRY

 7.1 Miscellaneous control
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
   }
HO CHI MINH UNIVERSITY OF INDUSTRY


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…
HO CHI MINH UNIVERSITY OF INDUSTRY


 7.2 List controls Example
<ListBox Name="lst" Width="374">
  <ListBoxItem>a</ListBoxItem>
  <ListBoxItem>b</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>
HO CHI MINH UNIVERSITY OF INDUSTRY


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


7.3 TreeView
HO CHI MINH UNIVERSITY OF INDUSTRY


7.3 TreeView
HO CHI MINH UNIVERSITY OF INDUSTRY



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
HO CHI MINH UNIVERSITY OF INDUSTRY



 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>
HO CHI MINH UNIVERSITY OF INDUSTRY

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>
HO CHI MINH UNIVERSITY OF INDUSTRY


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
HO CHI MINH UNIVERSITY OF INDUSTRY


7.6 ScrollViewer
HO CHI MINH UNIVERSITY OF INDUSTRY


 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>
HO CHI MINH UNIVERSITY OF INDUSTRY


 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>
HO CHI MINH UNIVERSITY OF INDUSTRY


 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>
HO CHI MINH UNIVERSITY OF INDUSTRY


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>
HO CHI MINH UNIVERSITY OF INDUSTRY


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
HO CHI MINH UNIVERSITY OF INDUSTRY
<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"/>
     </LinearGradientBrush>
   </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"/>
      </LinearGradientBrush>
   </Button.Background> Button 2        Why ???
  </Button>
</StackPanel>
HO CHI MINH UNIVERSITY OF INDUSTRY


 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
HO CHI MINH UNIVERSITY OF INDUSTRY

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"/>
     <GradientStop Color="Black" Offset="1" />
   </RadialGradientBrush.GradientStops>
  </RadialGradientBrush>
</Window.Resources>
<Button
Background="{DynamicResource ResourceKey=btnbrush}"
Width="100" Height="100"></Button>
</Window>
HO CHI MINH UNIVERSITY OF INDUSTRY

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.
HO CHI MINH UNIVERSITY OF INDUSTRY

8. Resources: Visual Tree Dynamic
Background="{DynamicResource ResourceKey=keyBrush}"
HO CHI MINH UNIVERSITY OF INDUSTRY

8. Resources: Visual Tree Static
Background="{StaticResource ResourceKey=gradBrush}"
HO CHI MINH UNIVERSITY OF INDUSTRY



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
HO CHI MINH UNIVERSITY OF INDUSTRY

<ResourceDictionary …>
 <LinearGradientBrush x:Key="btnbrush">
    <GradientStop Color="AliceBlue" Offset="0" />
    <GradientStop Color="Blue" Offset=".7" />
 </LinearGradientBrush>
</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>
HO CHI MINH UNIVERSITY OF INDUSTRY



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
HO CHI MINH UNIVERSITY OF INDUSTRY


  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>
HO CHI MINH UNIVERSITY OF INDUSTRY


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>
HO CHI MINH UNIVERSITY OF INDUSTRY


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.
HO CHI MINH UNIVERSITY OF INDUSTRY


 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" />
     </LinearGradientBrush>
    </Setter.Value>
   </Setter>
  <Setter Property="FontSize" Value="20" />
  <Setter Property="Width" Value="150"/>
  <Setter Property="Height" Value="50"/>
 </Style>
</ResourceDictionary>
HO CHI MINH UNIVERSITY OF INDUSTRY


 9. Style: example TargetType
<Window.Resources>
 <ResourceDictionary>
  <ResourceDictionary.MergedDictionaries>
   <ResourceDictionary Source="targetstyle.xaml"/>
  </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>
</Window.Resources>
<Button Content="FIT HUI"/>
HO CHI MINH UNIVERSITY OF INDUSTRY


9. Style: named style
HO CHI MINH UNIVERSITY OF INDUSTRY


9. Style: named style
HO CHI MINH UNIVERSITY OF INDUSTRY


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.
HO CHI MINH UNIVERSITY OF INDUSTRY


 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>
HO CHI MINH UNIVERSITY OF INDUSTRY


9. Style: Comparing
HO CHI MINH UNIVERSITY OF INDUSTRY


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

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>
 <Style TargetType="Button">
  <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>
HO CHI MINH UNIVERSITY OF INDUSTRY


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

public void btn_click
        (object o, RoutedEventArgs e)
  {
    ((Button)o).Content = "Clicked";
  }
HO CHI MINH UNIVERSITY OF INDUSTRY


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
HO CHI MINH UNIVERSITY OF INDUSTRY


  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}"/>
HO CHI MINH UNIVERSITY OF INDUSTRY


11. Data binding
Is the process that establishes a connection
 between the application UI and businesslogic.
Automatically updated to reflect the change
HO CHI MINH UNIVERSITY OF INDUSTRY


 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>
HO CHI MINH UNIVERSITY OF INDUSTRY


11. Binding structure
HO CHI MINH UNIVERSITY OF INDUSTRY

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>
HO CHI MINH UNIVERSITY OF INDUSTRY


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.
HO CHI MINH UNIVERSITY OF INDUSTRY


11. Binding Direction
HO CHI MINH UNIVERSITY OF INDUSTRY


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.
HO CHI MINH UNIVERSITY OF INDUSTRY


11. Binding Direction:Triggers
Summary of the update behavior based on direction
of the update
HO CHI MINH UNIVERSITY OF INDUSTRY


 11. Binding Direction:Triggers




<StackPanel>
<TextBox Margin="10"
Text="{Binding
ElementName=sldrSlider, Path=Value, UpdateSourceTr
igger=PropertyChanged}" />
<Slider Name="sldrSlider" TickPlacement="TopLeft"
Margin="10"/>
</StackPanel>
HO CHI MINH UNIVERSITY OF INDUSTRY


12. Graphic objects
Transforms
– Transforms allow you to modify the
appearance of an element in specific ways.
BitmapEffects
Shapes
HO CHI MINH UNIVERSITY OF INDUSTRY



12. Graphic objects
RotateTransform


<Button Content="Rotate Me" >
  <Button.RenderTransform>
   <RotateTransform Angle="45"/>
  </Button.RenderTransform>
</Button>
HO CHI MINH UNIVERSITY OF INDUSTRY

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>
   <Button Width="70">Button 3</Button>
</StackPanel>
HO CHI MINH UNIVERSITY OF INDUSTRY


12. Graphic objects
SkewTransform
 Skews an element at an angle. Can skew
 the X or Y coordinates
HO CHI MINH UNIVERSITY OF INDUSTRY


 12. Graphic objects
 SkewTransform
<StackPanel HorizontalAlignment="Center">
 <Button>No Skew</Button>
 <Button Width="90" FontWeight="Bold" Margin="2">
   <Button.RenderTransform>
     <SkewTransform AngleX="30"/>
   </Button.RenderTransform>
            AngleX="30"
 </Button>
 <Button Width="90" FontWeight="Bold" Margin="2">
   <Button.RenderTransform>
     <SkewTransform AngleY="30"/>
   </Button.RenderTransform>
            AngleY="30"
  </Button>
</StackPanel>
HO CHI MINH UNIVERSITY OF INDUSTRY


 12. Graphic objects
 SkewTransform
 <Button Name="SkewButton" Width="122"
      Content="Skew Me!" Click="btn_click">
    <Button.RenderTransform>
      <SkewTransform x:Name="Trans_SkewButton"
            CenterX="75" CenterY="37" AngleX="0"
            AngleY="0" />
    </Button.RenderTransform>
 </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;}
HO CHI MINH UNIVERSITY OF INDUSTRY


 12. Graphic objects
  ScaleTransform
    Transform changes the size of an element
<StackPanel HorizontalAlignment="Center">
 <Button Width="70">Button 1</Button>
 <Button Width="70">
  <Button.LayoutTransform>
 <ScaleTransform ScaleX="1.75" ScaleY="1.5"/>
  </Button.LayoutTransform>
   Button 2
</Button>
<Button Width="70">Button 3</Button>
</StackPanel>
HO CHI MINH UNIVERSITY OF INDUSTRY


12. Graphic objects: BitmapEffects
<Button Content="Button">
   <Button.BitmapEffect>
     <EmbossBitmapEffect />
   </Button.BitmapEffect>
</Button>
HO CHI MINH UNIVERSITY OF INDUSTRY


12. Graphic objects: Shapes
 6 basic typed
HO CHI MINH UNIVERSITY OF INDUSTRY


12. Graphic objects: Shapes
 6 basic typed
HO CHI MINH UNIVERSITY OF INDUSTRY
 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>
HO CHI MINH UNIVERSITY OF INDUSTRY

13. MS Expression Blend
          Introdution
  Microsoft Expression Blend 4 Step by Step
 http://www.mediafire.com/?ckv9wv1qkdnl45a
HO CHI MINH UNIVERSITY OF INDUSTRY

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
HO CHI MINH UNIVERSITY OF INDUSTRY


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
HO CHI MINH UNIVERSITY OF INDUSTRY




END

More Related Content

Similar to windows presentation foundation

WPF Applications, It's all about XAML these days
WPF Applications, It's all about XAML these daysWPF Applications, It's all about XAML these days
WPF Applications, It's all about XAML these daysDave Bost
 
Industrial training seminar ppt on asp.net
Industrial training seminar ppt on asp.netIndustrial training seminar ppt on asp.net
Industrial training seminar ppt on asp.netPankaj Kushwaha
 
Rogue Wave Corporate Vision(P) 5.19.10
Rogue Wave Corporate Vision(P)   5.19.10Rogue Wave Corporate Vision(P)   5.19.10
Rogue Wave Corporate Vision(P) 5.19.10Chris O'Neal
 
NET Event - Migrating WinForm
NET Event - Migrating WinFormNET Event - Migrating WinForm
NET Event - Migrating WinFormRaffaele Garofalo
 
Dot Net Training Dot Net35
Dot Net Training Dot Net35Dot Net Training Dot Net35
Dot Net Training Dot Net35Subodh Pushpak
 
01 Introduction to programming
01 Introduction to programming01 Introduction to programming
01 Introduction to programmingmaznabili
 
Building Windows8 Metro Applications
Building Windows8 Metro ApplicationsBuilding Windows8 Metro Applications
Building Windows8 Metro ApplicationsAbhishek Sur
 
Business Visit Report
Business Visit ReportBusiness Visit Report
Business Visit Reporttikakude
 
Best Practices for Cross-Platform Native Applications
Best Practices for Cross-Platform Native ApplicationsBest Practices for Cross-Platform Native Applications
Best Practices for Cross-Platform Native ApplicationsKevin Whinnery
 
report_barc
report_barcreport_barc
report_barcsiontani
 
Info Store(Mobile App)
Info Store(Mobile App)Info Store(Mobile App)
Info Store(Mobile App)AimranRazak
 
Bn1001 demo ppt advance dot net
Bn1001 demo ppt advance dot netBn1001 demo ppt advance dot net
Bn1001 demo ppt advance dot netconline training
 
MSDN Unleashed: WPF Demystified
MSDN Unleashed: WPF DemystifiedMSDN Unleashed: WPF Demystified
MSDN Unleashed: WPF DemystifiedDave Bost
 
Modern C&C Systems, Using New Technologies
Modern C&C Systems, Using New TechnologiesModern C&C Systems, Using New Technologies
Modern C&C Systems, Using New TechnologiesTamir Khason
 
Developing Cross-platform Native Apps with Xamarin
Developing Cross-platform Native Apps with XamarinDeveloping Cross-platform Native Apps with Xamarin
Developing Cross-platform Native Apps with Xamarindanhermes
 
UML Case Tools
UML Case ToolsUML Case Tools
UML Case ToolsAshesh R
 

Similar to windows presentation foundation (20)

WPF Applications, It's all about XAML these days
WPF Applications, It's all about XAML these daysWPF Applications, It's all about XAML these days
WPF Applications, It's all about XAML these days
 
T2
T2T2
T2
 
Introduction to Programming Lesson 01
Introduction to Programming Lesson 01Introduction to Programming Lesson 01
Introduction to Programming Lesson 01
 
Wpf Workgroup
Wpf WorkgroupWpf Workgroup
Wpf Workgroup
 
Industrial training seminar ppt on asp.net
Industrial training seminar ppt on asp.netIndustrial training seminar ppt on asp.net
Industrial training seminar ppt on asp.net
 
Rogue Wave Corporate Vision(P) 5.19.10
Rogue Wave Corporate Vision(P)   5.19.10Rogue Wave Corporate Vision(P)   5.19.10
Rogue Wave Corporate Vision(P) 5.19.10
 
NET Event - Migrating WinForm
NET Event - Migrating WinFormNET Event - Migrating WinForm
NET Event - Migrating WinForm
 
Dot Net Training Dot Net35
Dot Net Training Dot Net35Dot Net Training Dot Net35
Dot Net Training Dot Net35
 
01 Introduction to programming
01 Introduction to programming01 Introduction to programming
01 Introduction to programming
 
Building Windows8 Metro Applications
Building Windows8 Metro ApplicationsBuilding Windows8 Metro Applications
Building Windows8 Metro Applications
 
Business Visit Report
Business Visit ReportBusiness Visit Report
Business Visit Report
 
Best Practices for Cross-Platform Native Applications
Best Practices for Cross-Platform Native ApplicationsBest Practices for Cross-Platform Native Applications
Best Practices for Cross-Platform Native Applications
 
report_barc
report_barcreport_barc
report_barc
 
Info Store(Mobile App)
Info Store(Mobile App)Info Store(Mobile App)
Info Store(Mobile App)
 
Bn1001 demo ppt advance dot net
Bn1001 demo ppt advance dot netBn1001 demo ppt advance dot net
Bn1001 demo ppt advance dot net
 
MSDN Unleashed: WPF Demystified
MSDN Unleashed: WPF DemystifiedMSDN Unleashed: WPF Demystified
MSDN Unleashed: WPF Demystified
 
Mukesh
MukeshMukesh
Mukesh
 
Modern C&C Systems, Using New Technologies
Modern C&C Systems, Using New TechnologiesModern C&C Systems, Using New Technologies
Modern C&C Systems, Using New Technologies
 
Developing Cross-platform Native Apps with Xamarin
Developing Cross-platform Native Apps with XamarinDeveloping Cross-platform Native Apps with Xamarin
Developing Cross-platform Native Apps with Xamarin
 
UML Case Tools
UML Case ToolsUML Case Tools
UML Case Tools
 

Recently uploaded

How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17Celine George
 
How to Create a Toggle Button in Odoo 17
How to Create a Toggle Button in Odoo 17How to Create a Toggle Button in Odoo 17
How to Create a Toggle Button in Odoo 17Celine George
 
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptxSandy Millin
 
In - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxIn - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxAditiChauhan701637
 
How to Solve Singleton Error in the Odoo 17
How to Solve Singleton Error in the  Odoo 17How to Solve Singleton Error in the  Odoo 17
How to Solve Singleton Error in the Odoo 17Celine George
 
Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.EnglishCEIPdeSigeiro
 
A gentle introduction to Artificial Intelligence
A gentle introduction to Artificial IntelligenceA gentle introduction to Artificial Intelligence
A gentle introduction to Artificial IntelligenceApostolos Syropoulos
 
3.26.24 Race, the Draft, and the Vietnam War.pptx
3.26.24 Race, the Draft, and the Vietnam War.pptx3.26.24 Race, the Draft, and the Vietnam War.pptx
3.26.24 Race, the Draft, and the Vietnam War.pptxmary850239
 
Over the counter (OTC)- Sale, rational use.pptx
Over the counter (OTC)- Sale, rational use.pptxOver the counter (OTC)- Sale, rational use.pptx
Over the counter (OTC)- Sale, rational use.pptxraviapr7
 
How to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 SalesHow to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 SalesCeline George
 
What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?TechSoup
 
How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17Celine George
 
3.21.24 The Origins of Black Power.pptx
3.21.24  The Origins of Black Power.pptx3.21.24  The Origins of Black Power.pptx
3.21.24 The Origins of Black Power.pptxmary850239
 
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxAUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxiammrhaywood
 
5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...CaraSkikne1
 
Riddhi Kevadiya. WILLIAM SHAKESPEARE....
Riddhi Kevadiya. WILLIAM SHAKESPEARE....Riddhi Kevadiya. WILLIAM SHAKESPEARE....
Riddhi Kevadiya. WILLIAM SHAKESPEARE....Riddhi Kevadiya
 
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfP4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfYu Kanazawa / Osaka University
 
Ultra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxUltra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxDr. Asif Anas
 

Recently uploaded (20)

How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17
 
How to Create a Toggle Button in Odoo 17
How to Create a Toggle Button in Odoo 17How to Create a Toggle Button in Odoo 17
How to Create a Toggle Button in Odoo 17
 
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
 
In - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxIn - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptx
 
How to Solve Singleton Error in the Odoo 17
How to Solve Singleton Error in the  Odoo 17How to Solve Singleton Error in the  Odoo 17
How to Solve Singleton Error in the Odoo 17
 
Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.
 
A gentle introduction to Artificial Intelligence
A gentle introduction to Artificial IntelligenceA gentle introduction to Artificial Intelligence
A gentle introduction to Artificial Intelligence
 
March 2024 Directors Meeting, Division of Student Affairs and Academic Support
March 2024 Directors Meeting, Division of Student Affairs and Academic SupportMarch 2024 Directors Meeting, Division of Student Affairs and Academic Support
March 2024 Directors Meeting, Division of Student Affairs and Academic Support
 
3.26.24 Race, the Draft, and the Vietnam War.pptx
3.26.24 Race, the Draft, and the Vietnam War.pptx3.26.24 Race, the Draft, and the Vietnam War.pptx
3.26.24 Race, the Draft, and the Vietnam War.pptx
 
Over the counter (OTC)- Sale, rational use.pptx
Over the counter (OTC)- Sale, rational use.pptxOver the counter (OTC)- Sale, rational use.pptx
Over the counter (OTC)- Sale, rational use.pptx
 
How to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 SalesHow to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 Sales
 
What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?
 
How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17
 
3.21.24 The Origins of Black Power.pptx
3.21.24  The Origins of Black Power.pptx3.21.24  The Origins of Black Power.pptx
3.21.24 The Origins of Black Power.pptx
 
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxAUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
 
5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...
 
Riddhi Kevadiya. WILLIAM SHAKESPEARE....
Riddhi Kevadiya. WILLIAM SHAKESPEARE....Riddhi Kevadiya. WILLIAM SHAKESPEARE....
Riddhi Kevadiya. WILLIAM SHAKESPEARE....
 
Personal Resilience in Project Management 2 - TV Edit 1a.pdf
Personal Resilience in Project Management 2 - TV Edit 1a.pdfPersonal Resilience in Project Management 2 - TV Edit 1a.pdf
Personal Resilience in Project Management 2 - TV Edit 1a.pdf
 
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfP4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
 
Ultra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxUltra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptx
 

windows presentation foundation

  • 1. HO CHI MINH UNIVERSITY OF INDUSTRY What's New in WPF Version 4.5?
  • 2. HO CHI MINH UNIVERSITY OF INDUSTRY 1 Windows Presentation Foundation 2 Benefits 3 Tools 4 Discussion of WPF applicability
  • 3. HO CHI MINH UNIVERSITY OF INDUSTRY 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.
  • 4. HO CHI MINH UNIVERSITY OF INDUSTRY 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.
  • 5. HO CHI MINH UNIVERSITY OF INDUSTRY 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
  • 6. HO CHI MINH UNIVERSITY OF INDUSTRY 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
  • 7. HO CHI MINH UNIVERSITY OF INDUSTRY 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
  • 8. HO CHI MINH UNIVERSITY OF INDUSTRY 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
  • 9. HO CHI MINH UNIVERSITY OF INDUSTRY Overview of WPF Architecture Most of WPF is written in managed code milcore is the only unmanaged component of WPF
  • 10. HO CHI MINH UNIVERSITY OF INDUSTRY 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
  • 11. HO CHI MINH UNIVERSITY OF INDUSTRY 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.)
  • 12. HO CHI MINH UNIVERSITY OF INDUSTRY 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
  • 13. HO CHI MINH UNIVERSITY OF INDUSTRY Comparisons: WPF vs. DirectX and GDI+
  • 14. HO CHI MINH UNIVERSITY OF INDUSTRY WPF Build Pipeline
  • 15. HO CHI MINH UNIVERSITY OF INDUSTRY Basic topics in WPF WPF code and XAML Property & object in XAML: syntax Layout Basic control Basic property WPF Concepts
  • 16. HO CHI MINH UNIVERSITY OF INDUSTRY 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?
  • 17. HO CHI MINH UNIVERSITY OF INDUSTRY 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);} } }
  • 18. HO CHI MINH UNIVERSITY OF INDUSTRY 1. WPF code and XAML: first app From VS template Window1 is inherited from Window App is inherited from Application
  • 19. HO CHI MINH UNIVERSITY OF INDUSTRY
  • 20. HO CHI MINH UNIVERSITY OF INDUSTRY 1. WPF code and XAML: first app From VS template Write 2 example: code and Xaml
  • 21. HO CHI MINH UNIVERSITY OF INDUSTRY 1. WPF code and XAML: first app From VS template Write 2 example: code and Xaml
  • 22. HO CHI MINH UNIVERSITY OF INDUSTRY 2. Basic Window properties  Title  WindowStyle  Content Brush  Foreground  Background SolidColorBrush GradientBrush TileBrush LinearGradientBrush RadialGradientBrush
  • 23. HO CHI MINH UNIVERSITY OF INDUSTRY
  • 24. HO CHI MINH UNIVERSITY OF INDUSTRY 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;
  • 25. HO CHI MINH UNIVERSITY OF INDUSTRY SolidColorBrush SolidColorBrush brush= new SolidColorBrush(Colors.Red); rect1.Fill = brush; XAML CODE
  • 26. HO CHI MINH UNIVERSITY OF INDUSTRY SolidColorBrush XAML
  • 27. HO CHI MINH UNIVERSITY OF INDUSTRY GradientBrush
  • 28. HO CHI MINH UNIVERSITY OF INDUSTRY 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;
  • 29. HO CHI MINH UNIVERSITY OF INDUSTRY LinearGradientBrush LinearGradientBrush br = new LinearGradientBrush(); br.GradientStops.Add( new GradientStop(Colors.Yellow, 0.0)); br.GradientStops.Add( new GradientStop(Colors.Orange, 0.5)); br.GradientStops.Add( new GradientStop(Colors.Red, 1.0)); rect1.Fill = br;
  • 30. HO CHI MINH UNIVERSITY OF INDUSTRY LinearGradientBrush XAML
  • 31. HO CHI MINH UNIVERSITY OF INDUSTRY RadialGradientBrush RadialGradientBrush br = new RadialGradientBrush(Colors.Blue,Colors.White);
  • 32. HO CHI MINH UNIVERSITY OF INDUSTRY RadialGradientBrush RadialGradientBrush br = new RadialGradientBrush(Colors.Blue,Colors.Yellow); rect1.Fill = br;
  • 33. HO CHI MINH UNIVERSITY OF INDUSTRY RadialGradientBrush RadialGradientBrush br = new RadialGradientBrush(); br.GradientOrigin = new Point(0.75, 0.25); br.GradientStops.Add( new GradientStop(Colors.Yellow, 0.0)); br.GradientStops.Add( new GradientStop(Colors.Orange, 0.5)); br.GradientStops.Add( new GradientStop(Colors.Blue, 1.0)); rect1.Fill = br;
  • 34. HO CHI MINH UNIVERSITY OF INDUSTRY RadialGradientBrush XAML
  • 35. HO CHI MINH UNIVERSITY OF INDUSTRY ImageBrush ImageBrush myBrush = new ImageBrush(); myBrush.ImageSource =new BitmapImage( new Uri(@"E:PicturesIC151762.jpg", UriKind.Relative)); rect1.Fill = myBrush;
  • 36. HO CHI MINH UNIVERSITY OF INDUSTRY Config Brush from VS design
  • 37. HO CHI MINH UNIVERSITY OF INDUSTRY 2. Handling Application Events From Code
  • 38. HO CHI MINH UNIVERSITY OF INDUSTRY 2. Handling Application Events From XAML
  • 39. HO CHI MINH UNIVERSITY OF INDUSTRY 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>
  • 40. HO CHI MINH UNIVERSITY OF INDUSTRY 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.
  • 41. HO CHI MINH UNIVERSITY OF INDUSTRY
  • 42. HO CHI MINH UNIVERSITY OF INDUSTRY 2.Top-Level Elements  Three classes are used by WPF programs as top-level elements – Application – Page – Window • Only one Content
  • 43. HO CHI MINH UNIVERSITY OF INDUSTRY 3. Syntax for Object One element Empty element tag
  • 44. HO CHI MINH UNIVERSITY OF INDUSTRY 3. Syntax for Object Nested- Multi elements Logical tree with four WFP objects XAML Tree With Four Elements
  • 45. HO CHI MINH UNIVERSITY OF INDUSTRY 3. Syntax for Attribute Object element syntax – Like object syntax • <button> FIT HUI </button> Attribute syntax Property Element Syntax Attached Property Syntax
  • 46. HO CHI MINH UNIVERSITY OF INDUSTRY 3. Syntax for Attribute
  • 47. HO CHI MINH UNIVERSITY OF INDUSTRY 3. Syntax for Attribute Property Element Syntax – Some properties are too complex to be set with a simple string – Does not produce an object, sets a property on an object
  • 48. HO CHI MINH UNIVERSITY OF INDUSTRY 3. Syntax for Attribute Property Element Syntax <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>
  • 49. HO CHI MINH UNIVERSITY OF INDUSTRY 3. Syntax for Attribute Attached Property Syntax – Attached properties are a special type of property that is defined in one class but used in another.
  • 50. HO CHI MINH UNIVERSITY OF INDUSTRY 3. Syntax for Attribute Reviewing the XAML Syntax
  • 51. <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="Black" Offset="0" /> <GradientStop Color="#FFB44E4E" Offset="1" /> </LinearGradientBrush> </Button.BorderBrush> </Button> <CheckBox Content="CheckBox" Grid.Column="1" Grid.Row="1" /> </Grid> </StackPanel> </Window>
  • 52. HO CHI MINH UNIVERSITY OF INDUSTRY 5. XAML Namespace To create objects of these types, the XAML parser must know where to find their definitions
  • 53. HO CHI MINH UNIVERSITY OF INDUSTRY 5. XAML Namespace
  • 54. HO CHI MINH UNIVERSITY OF INDUSTRY 5. XAML Namespace: Classes from Other Namespaces
  • 55. HO CHI MINH UNIVERSITY OF INDUSTRY using System; using System.Windows; using System.Windows.Controls; using System.Windows.Media; namespace StudyWPFApplication { 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 }
  • 56. HO CHI MINH UNIVERSITY OF INDUSTRY In XAML Declare prefix: xmlns:local="clr-namespace:StudyWPFApplication" Instantiate the button: <local:MyButton Content="Hello" ></local:MyButton>
  • 57. HO CHI MINH UNIVERSITY OF INDUSTRY 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; namespace StudyWPFApplication { public class MyMarkupExtension:MarkupExtension{ public MyMarkupExtension() { } public override object ProvideValue (IServiceProvider serviceProvider) { return DateTime.Now.ToShortDateString(); } } }
  • 58. HO CHI MINH UNIVERSITY OF INDUSTRY 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
  • 59. HO CHI MINH UNIVERSITY OF INDUSTRY 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
  • 60. HO CHI MINH UNIVERSITY OF INDUSTRY 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
  • 61. HO CHI MINH UNIVERSITY OF INDUSTRY 6. Layout in WPF Layout in WPF Alignment Padding and Margins Containers (Panels) StackPanel WrapPanel DockPanel Grid Canvas UniformGrid
  • 62. HO CHI MINH UNIVERSITY OF INDUSTRY 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
  • 63. HO CHI MINH UNIVERSITY OF INDUSTRY 6. XAML Layout: Align & Padding 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
  • 64. HO CHI MINH UNIVERSITY OF INDUSTRY 6. XAML Layout: Align & Padding
  • 65. HO CHI MINH UNIVERSITY OF INDUSTRY 6. Layout Panels  Canvas for specific (X,Y) positioning
  • 66. HO CHI MINH UNIVERSITY OF INDUSTRY 6. Layout Panels  StackPanel Arranges content either horizontally or vertically
  • 67. HO CHI MINH UNIVERSITY OF INDUSTRY 6. Layout Panels  WrapPanel Arranges item sequentially
  • 68. HO CHI MINH UNIVERSITY OF INDUSTRY 6. Layout Panels  DockPanel Anchor elements to the edges of the container
  • 69. HO CHI MINH UNIVERSITY OF INDUSTRY 6. Layout Panels  Grid Table-style layout of rows and columns
  • 70. HO CHI MINH UNIVERSITY OF INDUSTRY 6. Layout Panels  UniformGrid All rows and columns are the same size Contains two properties, Rows and Columns
  • 71. HO CHI MINH UNIVERSITY OF INDUSTRY Types of Containers Basic controls Resource Style Control template Binding Graphic element
  • 72. HO CHI MINH UNIVERSITY OF INDUSTRY  Types of Containers
  • 73. HO CHI MINH UNIVERSITY OF INDUSTRY  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> <ListBoxItem>b</ListBoxItem> <TextBox>FIT HUI</TextBox> <Button>Click me</Button> </ListBox>
  • 74. HO CHI MINH UNIVERSITY OF INDUSTRY 7. Basic controls  Simplest controls  Border  CheckBox  Button  RadioButton  More controls
  • 75. HO CHI MINH UNIVERSITY OF INDUSTRY 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
  • 76. HO CHI MINH UNIVERSITY OF INDUSTRY 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???
  • 77. HO CHI MINH UNIVERSITY OF INDUSTRY 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>
  • 78. HO CHI MINH UNIVERSITY OF INDUSTRY 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" Width="145"></CheckBox> <CheckBox Content="Không Chấp Nhận" Height="21" Width="145"></CheckBox> </StackPanel> </Border>
  • 79. HO CHI MINH UNIVERSITY OF INDUSTRY 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>
  • 80. HO CHI MINH UNIVERSITY OF INDUSTRY 7.1 Basic Controls: Text, date, misc How to fill background for result text??? And How to change font style when mouse down???
  • 81. HO CHI MINH UNIVERSITY OF INDUSTRY 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.
  • 82. HO CHI MINH UNIVERSITY OF INDUSTRY 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>
  • 83. HO CHI MINH UNIVERSITY OF INDUSTRY 7.1 Basic Controls: Textbox control Properties TextWrapping AccepsReturn IsEnabled ReadOnly VerticalScrollbarVisibility, HortizontalScr ollbarVisibility SpellCheck.IsEnabled (Language) Events – KeyDown, KeyUp, TextChanged
  • 84. HO CHI MINH UNIVERSITY OF INDUSTRY 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>
  • 85. HO CHI MINH UNIVERSITY OF INDUSTRY 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" />
  • 86. HO CHI MINH UNIVERSITY OF INDUSTRY 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
  • 87. HO CHI MINH UNIVERSITY OF INDUSTRY 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>
  • 88. HO CHI MINH UNIVERSITY OF INDUSTRY 7.1 Date control: DatePicker control Allow to select a single date using dropdown calendar IsDropDownOpen SelectedDateFormat, BlackOutDates, Displa yDateStart, DisplayDateEnd SelectedDateChanged event
  • 89. HO CHI MINH UNIVERSITY OF INDUSTRY 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>
  • 90. HO CHI MINH UNIVERSITY OF INDUSTRY 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
  • 91. HO CHI MINH UNIVERSITY OF INDUSTRY 7.1 Miscellaneous control <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
  • 92. HO CHI MINH UNIVERSITY OF INDUSTRY 7.1 Miscellaneous control 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
  • 93. HO CHI MINH UNIVERSITY OF INDUSTRY 7.1 Miscellaneous control 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
  • 94. HO CHI MINH UNIVERSITY OF INDUSTRY 7.1 Miscellaneous control 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
  • 95. HO CHI MINH UNIVERSITY OF INDUSTRY 7.1 Miscellaneous control MediaElement This program loads the media file and immediately starts playing it. <Window …> <StackPanel> <MediaElement Source="music.mp3"/> </StackPanel> </Window> Example 1
  • 96. HO CHI MINH UNIVERSITY OF INDUSTRY 7.1 Miscellaneous control <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
  • 97. HO CHI MINH UNIVERSITY OF INDUSTRY 7.1 Miscellaneous control 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 }
  • 98. HO CHI MINH UNIVERSITY OF INDUSTRY 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…
  • 99. HO CHI MINH UNIVERSITY OF INDUSTRY 7.2 List controls Example <ListBox Name="lst" Width="374"> <ListBoxItem>a</ListBoxItem> <ListBoxItem>b</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>
  • 100. HO CHI MINH UNIVERSITY OF INDUSTRY 7.3 TreeView  Contains TreeViewItems  TreeViewItem – Header – Tag  SelectedItemChanged event: when select node  Can contain image, text  Demo: item with text & image
  • 101. HO CHI MINH UNIVERSITY OF INDUSTRY 7.3 TreeView
  • 102. HO CHI MINH UNIVERSITY OF INDUSTRY 7.3 TreeView
  • 103. HO CHI MINH UNIVERSITY OF INDUSTRY 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
  • 104. HO CHI MINH UNIVERSITY OF INDUSTRY 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>
  • 105. HO CHI MINH UNIVERSITY OF INDUSTRY 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>
  • 106. HO CHI MINH UNIVERSITY OF INDUSTRY 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
  • 107. HO CHI MINH UNIVERSITY OF INDUSTRY 7.6 ScrollViewer
  • 108. HO CHI MINH UNIVERSITY OF INDUSTRY 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>
  • 109. HO CHI MINH UNIVERSITY OF INDUSTRY 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>
  • 110. HO CHI MINH UNIVERSITY OF INDUSTRY 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>
  • 111. HO CHI MINH UNIVERSITY OF INDUSTRY 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>
  • 112. HO CHI MINH UNIVERSITY OF INDUSTRY 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
  • 113. HO CHI MINH UNIVERSITY OF INDUSTRY <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"/> </LinearGradientBrush> </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"/> </LinearGradientBrush> </Button.Background> Button 2 Why ??? </Button> </StackPanel>
  • 114. HO CHI MINH UNIVERSITY OF INDUSTRY 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
  • 115. HO CHI MINH UNIVERSITY OF INDUSTRY 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"/> <GradientStop Color="Black" Offset="1" /> </RadialGradientBrush.GradientStops> </RadialGradientBrush> </Window.Resources> <Button Background="{DynamicResource ResourceKey=btnbrush}" Width="100" Height="100"></Button> </Window>
  • 116. HO CHI MINH UNIVERSITY OF INDUSTRY 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.
  • 117. HO CHI MINH UNIVERSITY OF INDUSTRY 8. Resources: Visual Tree Dynamic Background="{DynamicResource ResourceKey=keyBrush}"
  • 118. HO CHI MINH UNIVERSITY OF INDUSTRY 8. Resources: Visual Tree Static Background="{StaticResource ResourceKey=gradBrush}"
  • 119. HO CHI MINH UNIVERSITY OF INDUSTRY 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
  • 120. HO CHI MINH UNIVERSITY OF INDUSTRY <ResourceDictionary …> <LinearGradientBrush x:Key="btnbrush"> <GradientStop Color="AliceBlue" Offset="0" /> <GradientStop Color="Blue" Offset=".7" /> </LinearGradientBrush> </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>
  • 121. HO CHI MINH UNIVERSITY OF INDUSTRY 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
  • 122. HO CHI MINH UNIVERSITY OF INDUSTRY 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>
  • 123. HO CHI MINH UNIVERSITY OF INDUSTRY 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>
  • 124. HO CHI MINH UNIVERSITY OF INDUSTRY 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.
  • 125. HO CHI MINH UNIVERSITY OF INDUSTRY 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" /> </LinearGradientBrush> </Setter.Value> </Setter> <Setter Property="FontSize" Value="20" /> <Setter Property="Width" Value="150"/> <Setter Property="Height" Value="50"/> </Style> </ResourceDictionary>
  • 126. HO CHI MINH UNIVERSITY OF INDUSTRY 9. Style: example TargetType <Window.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="targetstyle.xaml"/> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Window.Resources> <Button Content="FIT HUI"/>
  • 127. HO CHI MINH UNIVERSITY OF INDUSTRY 9. Style: named style
  • 128. HO CHI MINH UNIVERSITY OF INDUSTRY 9. Style: named style
  • 129. HO CHI MINH UNIVERSITY OF INDUSTRY 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.
  • 130. HO CHI MINH UNIVERSITY OF INDUSTRY 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>
  • 131. HO CHI MINH UNIVERSITY OF INDUSTRY 9. Style: Comparing
  • 132. HO CHI MINH UNIVERSITY OF INDUSTRY 9. Style: The Collections in a Style  Trigger: ―conditional‖ styles  Resources property to store logical resources used by the Setters and Triggers.
  • 133. HO CHI MINH UNIVERSITY OF INDUSTRY 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> <Style TargetType="Button"> <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>
  • 134. HO CHI MINH UNIVERSITY OF INDUSTRY 9. Style: EventSetters EventSetters allow to attach event handlers to a style <Window.Resources> <Style TargetType="Button"> <EventSetter Event="Click" Handler="btn_click"/> </Style> </Window.Resources> public void btn_click (object o, RoutedEventArgs e) { ((Button)o).Content = "Clicked"; }
  • 135. HO CHI MINH UNIVERSITY OF INDUSTRY 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
  • 136. HO CHI MINH UNIVERSITY OF INDUSTRY 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}"/>
  • 137. HO CHI MINH UNIVERSITY OF INDUSTRY 11. Data binding Is the process that establishes a connection between the application UI and businesslogic. Automatically updated to reflect the change
  • 138. HO CHI MINH UNIVERSITY OF INDUSTRY 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>
  • 139. HO CHI MINH UNIVERSITY OF INDUSTRY 11. Binding structure
  • 140. HO CHI MINH UNIVERSITY OF INDUSTRY 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>
  • 141. HO CHI MINH UNIVERSITY OF INDUSTRY 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.
  • 142. HO CHI MINH UNIVERSITY OF INDUSTRY 11. Binding Direction
  • 143. HO CHI MINH UNIVERSITY OF INDUSTRY 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.
  • 144. HO CHI MINH UNIVERSITY OF INDUSTRY 11. Binding Direction:Triggers Summary of the update behavior based on direction of the update
  • 145. HO CHI MINH UNIVERSITY OF INDUSTRY 11. Binding Direction:Triggers <StackPanel> <TextBox Margin="10" Text="{Binding ElementName=sldrSlider, Path=Value, UpdateSourceTr igger=PropertyChanged}" /> <Slider Name="sldrSlider" TickPlacement="TopLeft" Margin="10"/> </StackPanel>
  • 146. HO CHI MINH UNIVERSITY OF INDUSTRY 12. Graphic objects Transforms – Transforms allow you to modify the appearance of an element in specific ways. BitmapEffects Shapes
  • 147. HO CHI MINH UNIVERSITY OF INDUSTRY 12. Graphic objects RotateTransform <Button Content="Rotate Me" > <Button.RenderTransform> <RotateTransform Angle="45"/> </Button.RenderTransform> </Button>
  • 148. HO CHI MINH UNIVERSITY OF INDUSTRY 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> <Button Width="70">Button 3</Button> </StackPanel>
  • 149. HO CHI MINH UNIVERSITY OF INDUSTRY 12. Graphic objects SkewTransform Skews an element at an angle. Can skew the X or Y coordinates
  • 150. HO CHI MINH UNIVERSITY OF INDUSTRY 12. Graphic objects SkewTransform <StackPanel HorizontalAlignment="Center"> <Button>No Skew</Button> <Button Width="90" FontWeight="Bold" Margin="2"> <Button.RenderTransform> <SkewTransform AngleX="30"/> </Button.RenderTransform> AngleX="30" </Button> <Button Width="90" FontWeight="Bold" Margin="2"> <Button.RenderTransform> <SkewTransform AngleY="30"/> </Button.RenderTransform> AngleY="30" </Button> </StackPanel>
  • 151. HO CHI MINH UNIVERSITY OF INDUSTRY 12. Graphic objects SkewTransform <Button Name="SkewButton" Width="122" Content="Skew Me!" Click="btn_click"> <Button.RenderTransform> <SkewTransform x:Name="Trans_SkewButton" CenterX="75" CenterY="37" AngleX="0" AngleY="0" /> </Button.RenderTransform> </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;}
  • 152. HO CHI MINH UNIVERSITY OF INDUSTRY 12. Graphic objects ScaleTransform Transform changes the size of an element <StackPanel HorizontalAlignment="Center"> <Button Width="70">Button 1</Button> <Button Width="70"> <Button.LayoutTransform> <ScaleTransform ScaleX="1.75" ScaleY="1.5"/> </Button.LayoutTransform> Button 2 </Button> <Button Width="70">Button 3</Button> </StackPanel>
  • 153. HO CHI MINH UNIVERSITY OF INDUSTRY 12. Graphic objects: BitmapEffects <Button Content="Button"> <Button.BitmapEffect> <EmbossBitmapEffect /> </Button.BitmapEffect> </Button>
  • 154. HO CHI MINH UNIVERSITY OF INDUSTRY 12. Graphic objects: Shapes 6 basic typed
  • 155. HO CHI MINH UNIVERSITY OF INDUSTRY 12. Graphic objects: Shapes 6 basic typed
  • 156. HO CHI MINH UNIVERSITY OF INDUSTRY 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>
  • 157. HO CHI MINH UNIVERSITY OF INDUSTRY 13. MS Expression Blend Introdution Microsoft Expression Blend 4 Step by Step http://www.mediafire.com/?ckv9wv1qkdnl45a
  • 158. HO CHI MINH UNIVERSITY OF INDUSTRY 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
  • 159. HO CHI MINH UNIVERSITY OF INDUSTRY 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
  • 160. HO CHI MINH UNIVERSITY OF INDUSTRY END