windows presentation foundation

1,707 views
1,595 views

Published on

WPF for beginning

Published in: Education, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,707
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
32
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

windows presentation foundation

  1. 1. HO CHI MINH UNIVERSITY OF INDUSTRYWhats New in WPF Version 4.5?
  2. 2. HO CHI MINH UNIVERSITY OF INDUSTRY1 Windows Presentation Foundation2 Benefits3 Tools4 Discussion of WPF applicability
  3. 3. HO CHI MINH UNIVERSITY OF INDUSTRY What is WPF? WPF is a new API for building Windows applicationsThe goal of Windows Presentation Foundation(WPF) is to provide these advances forWindows. Included in version 4.0 of theMicrosoft .NET Framework, WPF allowsbuilding interfaces that incorporatedocuments, media, two- and three-dimensionalgraphics, animations, Web-likecharacteristics, and much more.
  4. 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. 5. HO CHI MINH UNIVERSITY OF INDUSTRYWhat 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. 6. HO CHI MINH UNIVERSITY OF INDUSTRYWhich 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. 7. HO CHI MINH UNIVERSITY OF INDUSTRYNext 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. 8. HO CHI MINH UNIVERSITY OF INDUSTRYWPF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. 9. HO CHI MINH UNIVERSITY OF INDUSTRYOverview of WPF Architecture Most of WPF is written in managed code milcore is the only unmanaged component of WPF
  10. 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. 11. HO CHI MINH UNIVERSITY OF INDUSTRYBenefits 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. 12. HO CHI MINH UNIVERSITY OF INDUSTRYTools • 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. 13. HO CHI MINH UNIVERSITY OF INDUSTRYComparisons: WPF vs. DirectX and GDI+
  14. 14. HO CHI MINH UNIVERSITY OF INDUSTRYWPF Build Pipeline
  15. 15. HO CHI MINH UNIVERSITY OF INDUSTRYBasic topics in WPFWPF code and XAMLProperty & object in XAML: syntaxLayoutBasic controlBasic propertyWPF Concepts
  16. 16. HO CHI MINH UNIVERSITY OF INDUSTRY1. WPF code and XAML: first appWPF code– New consoles project (or Windows Apps)– Reference:PresentationCore, PresentationFramework, and WindowsBase How to create this window?
  17. 17. HO CHI MINH UNIVERSITY OF INDUSTRYusing 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. 18. HO CHI MINH UNIVERSITY OF INDUSTRY1. WPF code and XAML: first appFrom VS template Window1 is inherited from WindowApp is inherited from Application
  19. 19. HO CHI MINH UNIVERSITY OF INDUSTRY
  20. 20. HO CHI MINH UNIVERSITY OF INDUSTRY1. WPF code and XAML: first appFrom VS template Write 2 example: code and Xaml
  21. 21. HO CHI MINH UNIVERSITY OF INDUSTRY1. WPF code and XAML: first appFrom VS template Write 2 example: code and Xaml
  22. 22. HO CHI MINH UNIVERSITY OF INDUSTRY2. Basic Window properties Title WindowStyle Content Brush Foreground Background SolidColorBrush GradientBrush TileBrush LinearGradientBrush RadialGradientBrush
  23. 23. HO CHI MINH UNIVERSITY OF INDUSTRY
  24. 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. 25. HO CHI MINH UNIVERSITY OF INDUSTRYSolidColorBrush SolidColorBrush brush= new SolidColorBrush(Colors.Red); rect1.Fill = brush; XAML CODE
  26. 26. HO CHI MINH UNIVERSITY OF INDUSTRYSolidColorBrush XAML
  27. 27. HO CHI MINH UNIVERSITY OF INDUSTRYGradientBrush
  28. 28. HO CHI MINH UNIVERSITY OF INDUSTRYLinearGradientBrushPoint p1 = new Point(0, 0);Point p2 = new Point(1, 1);LinearGradientBrush br = newLinearGradientBrush (Colors.Red,Colors.White, p1, p2);rect1.Fill = br;
  29. 29. HO CHI MINH UNIVERSITY OF INDUSTRYLinearGradientBrushLinearGradientBrush 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. 30. HO CHI MINH UNIVERSITY OF INDUSTRYLinearGradientBrush XAML
  31. 31. HO CHI MINH UNIVERSITY OF INDUSTRY RadialGradientBrushRadialGradientBrush br = newRadialGradientBrush(Colors.Blue,Colors.White);
  32. 32. HO CHI MINH UNIVERSITY OF INDUSTRYRadialGradientBrushRadialGradientBrush br = newRadialGradientBrush(Colors.Blue,Colors.Yellow);rect1.Fill = br;
  33. 33. HO CHI MINH UNIVERSITY OF INDUSTRYRadialGradientBrushRadialGradientBrush br = newRadialGradientBrush();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. 34. HO CHI MINH UNIVERSITY OF INDUSTRYRadialGradientBrush XAML
  35. 35. HO CHI MINH UNIVERSITY OF INDUSTRY ImageBrushImageBrush myBrush = new ImageBrush();myBrush.ImageSource =new BitmapImage( new Uri(@"E:PicturesIC151762.jpg", UriKind.Relative));rect1.Fill = myBrush;
  36. 36. HO CHI MINH UNIVERSITY OF INDUSTRYConfig Brush from VS design
  37. 37. HO CHI MINH UNIVERSITY OF INDUSTRY2. Handling Application Events From Code
  38. 38. HO CHI MINH UNIVERSITY OF INDUSTRY2. Handling Application Events From XAML
  39. 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. 40. HO CHI MINH UNIVERSITY OF INDUSTRY2. 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. 41. HO CHI MINH UNIVERSITY OF INDUSTRY
  42. 42. HO CHI MINH UNIVERSITY OF INDUSTRY2.Top-Level Elements Three classes are used by WPF programs as top-level elements – Application – Page – Window • Only one Content
  43. 43. HO CHI MINH UNIVERSITY OF INDUSTRY3. Syntax for ObjectOne element Empty element tag
  44. 44. HO CHI MINH UNIVERSITY OF INDUSTRY 3. Syntax for Object Nested- Multi elementsLogical tree withfour WFP objects XAML Tree With Four Elements
  45. 45. HO CHI MINH UNIVERSITY OF INDUSTRY3. Syntax for Attribute Object element syntax – Like object syntax • <button> FIT HUI </button> Attribute syntax Property Element Syntax Attached Property Syntax
  46. 46. HO CHI MINH UNIVERSITY OF INDUSTRY3. Syntax for Attribute
  47. 47. HO CHI MINH UNIVERSITY OF INDUSTRY3. Syntax for AttributeProperty Element Syntax– Some properties are too complex to be setwith a simple string– Does not produce an object, sets a propertyon an object
  48. 48. HO CHI MINH UNIVERSITY OF INDUSTRY3. 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. 49. HO CHI MINH UNIVERSITY OF INDUSTRY3. 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. 50. HO CHI MINH UNIVERSITY OF INDUSTRY3. Syntax for Attribute Reviewing the XAML Syntax
  51. 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. 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. 53. HO CHI MINH UNIVERSITY OF INDUSTRY5. XAML Namespace
  54. 54. HO CHI MINH UNIVERSITY OF INDUSTRY5. XAML Namespace: Classes fromOther Namespaces
  55. 55. HO CHI MINH UNIVERSITY OF INDUSTRYusing 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. 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. 57. HO CHI MINH UNIVERSITY OF INDUSTRY5. Markup Extension hook to a class outside the XAML class designed to be used by a markup extension is called an extension classxmlns: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. 58. HO CHI MINH UNIVERSITY OF INDUSTRY6. 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. 59. HO CHI MINH UNIVERSITY OF INDUSTRY6. 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. 60. HO CHI MINH UNIVERSITY OF INDUSTRY6. 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. 61. HO CHI MINH UNIVERSITY OF INDUSTRY6. Layout in WPFLayout in WPF Alignment Padding and MarginsContainers (Panels) StackPanel WrapPanel DockPanel Grid Canvas UniformGrid
  62. 62. HO CHI MINH UNIVERSITY OF INDUSTRY6. 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. 63. HO CHI MINH UNIVERSITY OF INDUSTRY6. 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. 64. HO CHI MINH UNIVERSITY OF INDUSTRY6. XAML Layout: Align & Padding
  65. 65. HO CHI MINH UNIVERSITY OF INDUSTRY6. Layout Panels  Canvas for specific (X,Y) positioning
  66. 66. HO CHI MINH UNIVERSITY OF INDUSTRY6. Layout Panels  StackPanel Arranges content either horizontally or vertically
  67. 67. HO CHI MINH UNIVERSITY OF INDUSTRY6. Layout Panels  WrapPanel Arranges item sequentially
  68. 68. HO CHI MINH UNIVERSITY OF INDUSTRY6. Layout Panels  DockPanel Anchor elements to the edges of the container
  69. 69. HO CHI MINH UNIVERSITY OF INDUSTRY6. Layout Panels  Grid Table-style layout of rows and columns
  70. 70. HO CHI MINH UNIVERSITY OF INDUSTRY6. Layout Panels  UniformGridAll rows and columns are the same sizeContains two properties, Rows and Columns
  71. 71. HO CHI MINH UNIVERSITY OF INDUSTRYTypes of ContainersBasic controlsResourceStyleControl templateBindingGraphic element
  72. 72. HO CHI MINH UNIVERSITY OF INDUSTRY Types of Containers
  73. 73. HO CHI MINH UNIVERSITY OF INDUSTRY  Types of Containers : ExampleSingle 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. 74. HO CHI MINH UNIVERSITY OF INDUSTRY7. Basic controls  Simplest controls  Border  CheckBox  Button  RadioButton  More controls
  75. 75. HO CHI MINH UNIVERSITY OF INDUSTRY7.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. 76. HO CHI MINH UNIVERSITY OF INDUSTRY7.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. 77. HO CHI MINH UNIVERSITY OF INDUSTRY7.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. 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. 79. HO CHI MINH UNIVERSITY OF INDUSTRY7.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. 80. HO CHI MINH UNIVERSITY OF INDUSTRY7.1 Basic Controls: Text, date, miscHow to fill background for result text???And How to change font style whenmouse down???
  81. 81. HO CHI MINH UNIVERSITY OF INDUSTRY7.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. 82. HO CHI MINH UNIVERSITY OF INDUSTRY7.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. 83. HO CHI MINH UNIVERSITY OF INDUSTRY7.1 Basic Controls: Textbox controlProperties TextWrapping AccepsReturn IsEnabled ReadOnly VerticalScrollbarVisibility, HortizontalScr ollbarVisibility SpellCheck.IsEnabled (Language)Events – KeyDown, KeyUp, TextChanged
  84. 84. HO CHI MINH UNIVERSITY OF INDUSTRY7.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. 85. HO CHI MINH UNIVERSITY OF INDUSTRY7.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. 86. HO CHI MINH UNIVERSITY OF INDUSTRY7.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. 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. 88. HO CHI MINH UNIVERSITY OF INDUSTRY7.1 Date control: DatePicker controlAllow to select a single date using dropdown calendarIsDropDownOpenSelectedDateFormat, BlackOutDates, Displa yDateStart, DisplayDateEndSelectedDateChanged event
  89. 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. 90. HO CHI MINH UNIVERSITY OF INDUSTRY7.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. 91. HO CHI MINH UNIVERSITY OF INDUSTRY7.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. 92. HO CHI MINH UNIVERSITY OF INDUSTRY7.1 Miscellaneous controlSystem.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. 93. HO CHI MINH UNIVERSITY OF INDUSTRY7.1 Miscellaneous controlprivate 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,stimer.Start();} Example code 2
  94. 94. HO CHI MINH UNIVERSITY OF INDUSTRY7.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. 95. HO CHI MINH UNIVERSITY OF INDUSTRY7.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. 96. HO CHI MINH UNIVERSITY OF INDUSTRY7.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. 97. HO CHI MINH UNIVERSITY OF INDUSTRY 7.1 Miscellaneous controlpublic 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. 98. HO CHI MINH UNIVERSITY OF INDUSTRY7.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. 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. 100. HO CHI MINH UNIVERSITY OF INDUSTRY7.3 TreeView Contains TreeViewItems TreeViewItem – Header – Tag SelectedItemChanged event: when select node Can contain image, text Demo: item with text & image
  101. 101. HO CHI MINH UNIVERSITY OF INDUSTRY7.3 TreeView
  102. 102. HO CHI MINH UNIVERSITY OF INDUSTRY7.3 TreeView
  103. 103. HO CHI MINH UNIVERSITY OF INDUSTRY7.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. 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. 105. HO CHI MINH UNIVERSITY OF INDUSTRY7.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. 106. HO CHI MINH UNIVERSITY OF INDUSTRY7.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. 107. HO CHI MINH UNIVERSITY OF INDUSTRY7.6 ScrollViewer
  108. 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. 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. 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. 111. HO CHI MINH UNIVERSITY OF INDUSTRY7.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. 112. HO CHI MINH UNIVERSITY OF INDUSTRY8. 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. 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. 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. 115. HO CHI MINH UNIVERSITY OF INDUSTRY8. 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><ButtonBackground="{DynamicResource ResourceKey=btnbrush}"Width="100" Height="100"></Button></Window>
  116. 116. HO CHI MINH UNIVERSITY OF INDUSTRY8. 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. 117. HO CHI MINH UNIVERSITY OF INDUSTRY8. Resources: Visual Tree DynamicBackground="{DynamicResource ResourceKey=keyBrush}"
  118. 118. HO CHI MINH UNIVERSITY OF INDUSTRY8. Resources: Visual Tree StaticBackground="{StaticResource ResourceKey=gradBrush}"
  119. 119. HO CHI MINH UNIVERSITY OF INDUSTRY8. 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. 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. 121. HO CHI MINH UNIVERSITY OF INDUSTRY9. 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 isevaluated to true
  122. 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. 123. HO CHI MINH UNIVERSITY OF INDUSTRY9. 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. 124. HO CHI MINH UNIVERSITY OF INDUSTRY9. 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 toelements of that type.
  125. 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. 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. 127. HO CHI MINH UNIVERSITY OF INDUSTRY9. Style: named style
  128. 128. HO CHI MINH UNIVERSITY OF INDUSTRY9. Style: named style
  129. 129. HO CHI MINH UNIVERSITY OF INDUSTRY9. 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 oftypes 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. 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. 131. HO CHI MINH UNIVERSITY OF INDUSTRY9. Style: Comparing
  132. 132. HO CHI MINH UNIVERSITY OF INDUSTRY9. Style: The Collections in a Style Trigger: ―conditional‖ styles Resources property to store logical resources used by the Setters and Triggers.
  133. 133. HO CHI MINH UNIVERSITY OF INDUSTRY9. 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. 134. HO CHI MINH UNIVERSITY OF INDUSTRY9. 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. 135. HO CHI MINH UNIVERSITY OF INDUSTRY10. 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. 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. 137. HO CHI MINH UNIVERSITY OF INDUSTRY11. Data bindingIs the process that establishes a connection between the application UI and businesslogic.Automatically updated to reflect the change
  138. 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. 139. HO CHI MINH UNIVERSITY OF INDUSTRY11. Binding structure
  140. 140. HO CHI MINH UNIVERSITY OF INDUSTRY11. 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. 141. HO CHI MINH UNIVERSITY OF INDUSTRY11. 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. 142. HO CHI MINH UNIVERSITY OF INDUSTRY11. Binding Direction
  143. 143. HO CHI MINH UNIVERSITY OF INDUSTRY11. Binding Direction:TriggersThe behavior for updating depends onthe 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. 144. HO CHI MINH UNIVERSITY OF INDUSTRY11. Binding Direction:TriggersSummary of the update behavior based on directionof the update
  145. 145. HO CHI MINH UNIVERSITY OF INDUSTRY 11. Binding Direction:Triggers<StackPanel><TextBox Margin="10"Text="{BindingElementName=sldrSlider, Path=Value, UpdateSourceTrigger=PropertyChanged}" /><Slider Name="sldrSlider" TickPlacement="TopLeft"Margin="10"/></StackPanel>
  146. 146. HO CHI MINH UNIVERSITY OF INDUSTRY12. Graphic objectsTransforms– Transforms allow you to modify theappearance of an element in specific ways.BitmapEffectsShapes
  147. 147. HO CHI MINH UNIVERSITY OF INDUSTRY12. Graphic objectsRotateTransform<Button Content="Rotate Me" > <Button.RenderTransform> <RotateTransform Angle="45"/> </Button.RenderTransform></Button>
  148. 148. HO CHI MINH UNIVERSITY OF INDUSTRY12. 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. 149. HO CHI MINH UNIVERSITY OF INDUSTRY12. Graphic objectsSkewTransform Skews an element at an angle. Can skew the X or Y coordinates
  150. 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. 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. 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. 153. HO CHI MINH UNIVERSITY OF INDUSTRY12. Graphic objects: BitmapEffects<Button Content="Button"> <Button.BitmapEffect> <EmbossBitmapEffect /> </Button.BitmapEffect></Button>
  154. 154. HO CHI MINH UNIVERSITY OF INDUSTRY12. Graphic objects: Shapes 6 basic typed
  155. 155. HO CHI MINH UNIVERSITY OF INDUSTRY12. Graphic objects: Shapes 6 basic typed
  156. 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. 157. HO CHI MINH UNIVERSITY OF INDUSTRY13. MS Expression Blend Introdution Microsoft Expression Blend 4 Step by Step http://www.mediafire.com/?ckv9wv1qkdnl45a
  158. 158. HO CHI MINH UNIVERSITY OF INDUSTRYExercise 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ả buttongiố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áctextbox 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 đổigiao diện button• Bổ sung một đồng hồ kim giờ - phút – giây phíatrái màn hình
  159. 159. HO CHI MINH UNIVERSITY OF INDUSTRYExercise WPF: Using WPF app (con’t)– Display contact app.– Next/Pre/First/Last menu using icon– Display contact list with same icon inListbox, Treeview Using Expression Blend– Change Style– Change template– Using transform, BitmapEffect for buttons
  160. 160. HO CHI MINH UNIVERSITY OF INDUSTRYEND

×