BCIS 4650 Visual Programming for Business Applications

1. BCIS 4650 Visual Programming for Business Applications Data Binding The University of North Texas, ITDS Dept., Dr. Vedder

2. Additional Informationre Text Formatting

4. Markup Extensions

5. Markup Extension & Syntax • Is a XAML technique for supplying complex values or values that do not map to a type; uses { } • Can be pre-defined in XAML (x:Type, x:Null, etc.), WPF, or Windows (WPF – Windows Presentation Foundation – is part of .NET and renders UI; current version 4.5) • Can be custom-defined The University of North Texas, ITDS Dept., Dr. Vedder

6. WPF-Specific Markup Extensions *= most often used • *StaticResource: lookup a value pre-defined elsewhere • *DynamicResource: for runtime values • *Binding: data-bound; complex syntax • RelativeSource: for sources that can change according to runtime conditions The University of North Texas, ITDS Dept., Dr. Vedder

7. WPF-Specific Markup Extensions, 2 • TemplateBinding: source is a template • ColorConvertedBitmap: adv. imaging • ComponentResourceKey: resource data is packaged with a custom control • ThemeResource: theme data is packaged with a custom control The University of North Texas, ITDS Dept., Dr. Vedder

8. Static & Dynamic Resources

9. Resource • An object whose property values can be used repeatedly in an app • Typically defined (XAML or C#) on page or in app, but can be defined elsewhere • Must have a key (string name) to access • Examples: • Brushes (for painting color, graphics) • Styles The University of North Texas, ITDS Dept., Dr. Vedder

10. Lookup Behavior for the Key • Page (i.e., <Page.Resources>) • App (ex., App.xaml, MyResources.xaml) • Available control themes (for look and behavior) • Other resources external to the app • System (Windows 8.1) resources The University of North Texas, ITDS Dept., Dr. Vedder

11. App.xaml The University of North Texas, ITDS Dept., Dr. Vedder

12. “Go to Definition”: Your Friend “Peek” (Alt+F12) Also Your Friend The University of North Texas, ITDS Dept., Dr. Vedder

13. This Definition is in Generic.xaml(a read-only file) The University of North Texas, ITDS Dept., Dr. Vedder

14. Build Your Own Resource Dictionaryif it will used by multiple projects in same soln. • Create the Dictionary as a separate file • Set as a resource in App.xaml The University of North Texas, ITDS Dept., Dr. Vedder

15. Retrieve App-Scope Resourceskey names must match exactly in spelling & case http://msdn.microsoft.com/en-us/library/windows/apps/hh968442.aspx The University of North Texas, ITDS Dept., Dr. Vedder

16. Static Resource • Retrieved only once and available for the life of the app (value does not change) • Should be defined in XAML before use The University of North Texas, ITDS Dept., Dr. Vedder

17. Static Resource Syntax (Most Common Usage) The University of North Texas, ITDS Dept., Dr. Vedder

18. Dynamic Resource • Retrieved each time requested (so the value could change during runtime) • Increases app overhead, so reduces app performance • Use StaticResource unless needed The University of North Texas, ITDS Dept., Dr. Vedder

19. Dynamic Resource Syntax The University of North Texas, ITDS Dept., Dr. Vedder

20. Static v. Dynamic Examplea lot of code missing here <Page.Resources>     <SolidColorBrush Color="LightBlue" x:Key="buttonBackground" /> </Page.Resources> <StackPanel Name="stkPanel">     <Button Name="Button1" Content="Button1"             Background="{StaticResourcebuttonBackground}"/>     <Button Name="Button2" Content="Button2"             Background="{DynamicResourcebuttonBackground}"/>     <Button Name="Button3" Content="Button3"             Background="{StaticResourcebuttonBackground}"/> </StackPanel> ----- Code behind---- void StaticAndDynamicResources_Loaded(object sender, RoutedEventArgs e) { stkPanel.Resources["buttonBackground"] = Brushes.Yellow; } The University of North Texas, ITDS Dept., Dr. Vedder

21. Dependency Properties and Simple Binding in XAML

22. Binding (Data Binding) • Connecting a source property’s value with a target property’s value; the connection stays open during app’s life • Use when hard-coding values to properties is not a good idea (ex. runtime settings (ex., user moves slider), animations) • Is the Binding class in XAML & C# • Posts changes automatically eitherway • Supports complex data values The University of North Texas, ITDS Dept., Dr. Vedder

23. Common Binding Scenariosinclude • Binding a ListBox to a set of headlines • Binding an Image to a photo of the current user • Is OK to bind one source property to many target properties The University of North Texas, ITDS Dept., Dr. Vedder

24. The Binding Target Property Must Be A Dependency Property • A DP is a ‘super property’ • A DP can have multiple providers for its value • A DP adds value to a static property • Self-contained validation • Change notification • Inheritance of property values • Support for multiple providers The University of North Texas, ITDS Dept., Dr. Vedder

25. Data-Binding Model & Example Binding sources include: • UI elements • Any object in a list • ADO.NET DataTables, .JSON file, etc. • Web services The University of North Texas, ITDS Dept., Dr. Vedder

26. “Multiple Providers” Power Rankingnot all possibilities shown here • Coertion (RT data feed altersprop. value) • Active animations • Local value (a binding or resource) • Template properties (TemplateBinding) • Implicit style (i.e., not named) (Source must be on the same page or in the app) The University of North Texas, ITDS Dept., Dr. Vedder

27. “Multiple Providers” Ranking, 2not all possibilities shown here • Style triggers Triggerconditionally applies a value to a Style prop. • Template triggers • Style setters Setter applies a value to a Style property • Default (theme) style • Property value inheritance The University of North Texas, ITDS Dept., Dr. Vedder

28. Three Different Values for Background • Local value=Red, so that’s the color • If just <Button> (w/o Background prop.) • Triggers take precedence over Setters, so • Blue if mouse over it, green otherwise The University of North Texas, ITDS Dept., Dr. Vedder

29. So, How To ID a Dependency Property? • A DP name must end with ‘Property’ • Intellisense will show DPs • Search property name in MSDN library; see if there is a ‘Dependency Property Information’ section The University of North Texas, ITDS Dept., Dr. Vedder

30. How Do I Write a DP? • For newbies, the best course is to write the complete name, so that you understand better what you are doing, ex., TextBox.TextProperty • BUT… frequently coders use a ‘semantic shortcut’ and just write the first part of the DP and let the compiler figure it out, ex., TextBox.Text • (They get away with this because an ordinary, “CLR” prop is ‘backed by’ the DP) The University of North Texas, ITDS Dept., Dr. Vedder

31. The Binding Object’s Mode Prop. Controls the Interaction Behavior • OneWay • OneTime(to the target) • TwoWay(good for input controls) • OneWayToSource The University of North Texas, ITDS Dept., Dr. Vedder

32. Target Update Can be Automatic, But Updating the Source? UpdateSourceTrigger values say when • PropertyChanged – ASAP, ex., online chat • LostFocus – when user moves away from target object, ex., data validation The University of North Texas, ITDS Dept., Dr. Vedder

33. Simple Binding Example in XAML • Source object = MyData • Source property = ColorName • Target object = Button • Target DP = Background(.Property) (Button inherits DataContext value) The University of North Texas, ITDS Dept., Dr. Vedder

34. Simple 2-Way Binding Example • DP TextBox.Text defaults to 2-way, so no Mode property setting needed • Note use of ElementNameproperty, which allows binding to an element The University of North Texas, ITDS Dept., Dr. Vedder

35. DataContext Property • Useful when you want many elementsinside a container to bind to the same source • Set the DataContext property in the parent container, then use inheritance The University of North Texas, ITDS Dept., Dr. Vedder

36. Sample DataContext Usage • Length refers to string fed to TextBlock.Text • {Binding} with no “Path=” means the entire source object (in this case, is just a string) The University of North Texas, ITDS Dept., Dr. Vedder

37. ITDS Logo / Mood Slide The University of North Texas, ITDS Dept., Dr. Vedder