Bài giảng Công nghệ lập trình tiên tiến - Windows Presentation Foundation

layDateEnd SelectedDateChanged event 7.1 Date control: DatePicker control 7.1 Miscellaneous control Slider, ProgressBar, MediaElement Slider Minimum, Maximum, Orientation, Value, SmallChange, 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 7.1 Miscellaneous control Demo progressbar Demo gressbar – IsInDetermine XAML 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 += 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 7.1 Miscellaneous control Example code 2 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(); } 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 This program loads the media file and immediately starts playing it. 7.1 Miscellaneous control MediaElement Example 1 Play Pause Stop 7.1 Miscellaneous control Example 2 - XAML 7.1 Miscellaneous control Example 2 - Code 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(); } } 7.2 List controls Listbox/Combobox Are container elements: SelectedIndex SelectedItem (return element type) SelectionChanged event (Listbox) SelectionMode: single, expand… Can contains others control: textbox, image… 7.2 List controls Example a b c Hello Button here Hình nè 7.3 TreeView Contains TreeViewItems TreeViewItem 	– Header 	– Tag SelectedItemChanged event: when select node Can contain image, text Demo: item with text & image 7.3 TreeView 7.3 TreeView 7.4 Menu Place everywhere you want Use Grid of DockPanel Set IsMainMenu = true when Top level menu MenuItem • Container control • Header property • Icon property • Click event 7.4 Menu 7.5 Context Menu : ContextMenu property Button with Context menu 7.6 ScrollViewer Contain control with both horizontal and vertical bars built-in Use it when content may not fir a window and you want to enable scrolling (example: StackPanel) VerticalScrollBar and HorizontalScrollBar 	– Auto: scroll bar auto apprear 7.6 ScrollViewer 7.6 ScrollViewer 7.7 TabControl and TabItem Separate pages TabItem – Header property Tab 1 nè Tab 2 nè Thông tin ở đay 7.8 GroupBox Header property Common: contains checkbox, radio buttons. Student ID: Student Name: 7.9 Expander control Header and collapsible content region Expanded and Collapsed events ExpandDirection property: 	Down, up, left, right Hello 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 	Some Buttons ← Defining the Background Button 1 ← Defining the Background Again Button 2 Why ??? Resources store reference to an object within a collection most objects in the WPF framework have a Resources collection: Application, Window, Button, … A resource can be anything: Brush, a control template … Find resource: navigates up 8. Resources 8. Resources: Example 8. Resources: Example StaticResource vs DynamicResource Static resources are resolved at compile time, whereas dynamic resources are resolved at runtime. Use DynamicResources when the value of the resource could change during the lifetime of the Application. Use StaticResources when it’s clear that you don’t need your resource re-evaluated when fetching it – static resources perform better than dynamic resources. 8. Resources: Visual Tree Dynamic Background="{DynamicResource ResourceKey=keyBrush}" 8. Resources: Visual Tree Static Background="{StaticResource ResourceKey=gradBrush}" 8. Resources dictionary Stored in a central place (file) Is a collection of resources that can be easily incorporated into an application Can be used to contain a single reference to all the assemblies in a single or multiple applications  better for re_using Example in next slide Dictionary2.xaml Hello Using Dictionary2.xaml 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 Key Style Name Suffix ↓ ↓ ↑ ↑ ↑ Property Setters for a Named Value Attribute Style Must Include a Attribute Class Name 9. Style: named style Button 1 9. Style 9. Style Declare in Resource Two ways Named styles –give the style a name when declare. Targeted styles –give the style a target type when declare. The style is then automatically applied to elements of that type. 9. Style: example TargetType targetstyle.xaml 9. Style: example TargetType 9. Style: named style 9. Style: named style 9. Style: Targeted Styles Set TargetType attribute to the exact type of the elements on which to apply the style. – The style will not be applied to elements of types derived from the specified type. Do not set the x:Key attribute. The Setters do not require a class name with the property name. 9. Style: Targeted Styles Set the target type. ↓ ↑ No Class Name Button 1 ← No Explicit Application of the Style Button 2 ← No Explicit Application of the Style 9. Style: Comparing 9. Style: The Collections in a Style Trigger: “conditional” styles Resources property to store logical resources used by the Setters and Triggers. 9. Style: Property Triggers The condition is based on the value of a property. When (and while) that property has a certain value, the style is applied 9. Style: EventSetters EventSetters allow to attach event handlers to a style public void btn_click 	(object o, RoutedEventArgs e) { ((Button)o).Content = "Clicked"; } 10. Control template Override the default user interface for common Windows controls are XAML declarations of a "visual tree" for a control replace the default look & feel define the functionality behind the control 10. Control template: example 	 11. Data binding Is the process that establishes a connection between the application UI and businesslogic. Automatically updated to reflect the change 11. Simple binding Binding from one control to another Property to property 	– ElementName, Path Example 11. Binding structure 11. Simple binding: example 2 11. Binding Direction OneWay: Updates the target when the source changes. TwoWay: Updates in both directions. Updates the target when the source changes and updates the source when the target changes. OneWayToSource: Updates the source when the target changes. OneTime: Updates the target property once, with the source’s initial value. After that, the target isn’t updated again. Default: Uses the default binding mode of the target. 11. Binding Direction 11. Binding Direction:Triggers The behavior for updating depends on the direction of the update, as follows: When the direction of the update is from the source to the target, the update always happens immediately. When the direction of the update is from the target to the source, then when the update occurs depends on the value of the UpdateSourceTrigger property of the Binding. 11. Binding Direction:Triggers Summary of the update behavior based on direction of the update 11. Binding Direction:Triggers 12. Graphic objects Transforms – Transforms allow you to modify the appearance of an element in specific ways. BitmapEffects Shapes 12. Graphic objects RotateTransform 12. Graphic objects TranslateTransform Moves an element to a different position Button 1 Move Right 30 ↓ ↑ 	 Move Down 10 Button 2 Button 3 12. Graphic objects SkewTransform Skews an element at an angle. Can skew the X or Y coordinates 12. Graphic objects SkewTransform No Skew AngleX="30" AngleY="30" 12. Graphic objects SkewTransform public void btn_click (object sender, System.Windows.RoutedEventArgs e){ double skew = 30; if (Trans_SkewButton.AngleX == 30) skew = 0; Trans_SkewButton.AngleX = skew; Trans_SkewButton.AngleY = skew;} 12. Graphic objects ScaleTransform Transform changes the size of an element Button 1 Button 2 Button 3 12. Graphic objects: BitmapEffects 12. Graphic objects: Shapes 6 basic typed 12. Graphic objects: Shapes 6 basic typed 12. Graphic objects: Shapes 13. MS Expression Blend Introdution Microsoft Expression Blend 4 Step by Step  Exercise WPF: 1. Tạo contact application – Sử dụng VS kết hợp Blend thiết kế giao diện • Listbox danh sách /button: thêm, sửa, xóa,lưu • Dùng style để thay đổi giao diện tất cả button giống nhau, tất cả textbox giống nhau. • Dùng Style/trigger thay đổi giao diện các textbox (background, fontsize) khi di chuyển chuột trên các textbox này • Dùng Trigger để màu các textbox thay đổi khi thay đổi chế độ soạn thảo • Thay đổi Style, transform, BitmapEffect thay đổi giao diện button • Bổ sung một đồng hồ kim giờ - phút – giây phía trái màn hình Exercise WPF: Using WPF app (con’t) – Display contact app. – Next/Pre/First/Last menu using icon – Display contact list with same icon in Listbox, Treeview Using Expression Blend – Change Style – Change template – Using transform, BitmapEffect for buttons END