Black Belt XAML Data Binding - Reflection IT Belt XAML... ¢â‚¬¢XAML (Silverlight, Windows Phone, Windows

  • View
    1

  • Download
    0

Embed Size (px)

Text of Black Belt XAML Data Binding - Reflection IT Belt XAML... ¢â‚¬¢XAML...

  • Black Belt XAML Data

    Binding

    Fons Sonnemans

    Trainer

    @fonssonnemans

    Reflection IT

  • Fons Sonnemans • In-company trainingen

    – Programming Languages

    • Visual C#, Visual Basic

    – Platforms

    • ASP.NET (Web Forms, MVC)

    • XAML (Silverlight, Windows Phone, Windows 8, Blend)

    – Databases

    • SQL, SQL Server, Entity Framework

    • www.reflectionit.nl

    http://www.reflectionit.nl/

  • My Apps Windows 8

    Windows Phone 7 & 8

  • Topics

    • Data Binding

    • GridView

  • Data Binding • Data binding is the process that establishes a connection, or binding, between the

    UI and the business object which allows data to flow between the two

    • Enable clean view/model separation and binding

    – Change UI presentation without code-behind modifications

    • Every binding has a source and a target

    – Source is the business object

    – Target is the UI element

    • Binding Expressions can be one way or two way and supports validation &

    converters

  • Binding class

    Binding b = new Binding { ElementName = "SliderFontSize", Path = new PropertyPath("Value"), }; textBlock1.SetBinding( TextBlock.FontSizeProperty, b);

  • Binding Source

    • Element to Element Binding

    • StaticResource Binding

    DependencyObject

    DependencyProperty Binding Object

    Value Converter

    DependencyObject

    DependencyProperty

    Binding Target Binding Source

    ElementName

    DependencyObject

    DependencyProperty Binding Object

    Value Converter

    CLR Object

    Property

    Binding Target Binding Source

    Source

  • Binding Source

    • DataContext Binding

    • RelativeSource Binding

    DependencyObject

    DependencyProperty Binding Object

    Value Converter

    CLR Object

    Property

    Binding Target Binding Source

    DependencyObject

    DependencyProperty Binding Object

    Value Converter

    DependencyObject

    DependencyProperty

    Binding Target Binding Source

    RelativeSource

  • Element to Element Binding

    • Element binding is performed in the same manner as Data Binding

    with one addition: the ElementName property. ElementName defines

    the name of the binding source element.

    • The following code snippet shows the basic syntax for element

    binding.

    http://msdn.microsoft.com/en-us/library/system.windows.data.binding.elementname(VS.95).aspx http://msdn.microsoft.com/en-us/library/system.windows.data.binding.elementname(VS.95).aspx

  • Element to Element Binding

  • Converters

  • Employee class • Public properties, not fields

    namespace DataBindingDemo.Models { public class Employee { public string Name { get; set; } public double Salary { get; set; } public Employee() { } public Employee(string name, double salary) { this.Name = name; this.Salary = salary; } public void RaiseSalary(double percentage) { this.Salary += Salary * (percentage / 100); } } }

  • StaticResource Binding • Register xmlns:models

    • models:Employee

    – Class must have a public default (parameter less) constructor

  • StaticResource Binding

  • CLR DataContext Binding • Default!

    – Used when a Binding has no Source, RelativeSource or ElementName

    • DataContext is inherited from parent

  • TwoWay DataBinding to CLR Object • Implement INotifyPropertyChanged and notify (raise) PropertyChanged event

    class Employee : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; protected virtual void OnPropertyChanged(string propertyName) { var handler = PropertyChanged; if (handler != null) { handler(this, new PropertyChangedEventArgs(propertyName)); } } private string _name; public string Name { get { return _name; } set { if (_name != value) { _name = value; OnPropertyChanged("Name"); } } }

  • Binding to Collections • Works with any object that implements IEnumerable

    – Arrays, Lists, Collections, etc.

    • Bind to the ItemsSource of Data Controls – ItemsControl

    – ListBox

    – ComboBox

    – ListView

    – GridView

    – FlipView

  • ItemSource

    public sealed partial class MainPage : Page { public MainPage() { this.InitializeComponent(); var l = new List { new Employee("Fons", 2000), new Employee("Jim", 4000), new Employee("Ellen", 3000), }; this.listEmployees.ItemsSource = l; }

  • ItemTemplate

  • GridView

  • Windows Phone Panorama Control

    http://www.google.nl/url?sa=i&rct=j&q=&esrc=s&frm=1&source=images&cd=&cad=rja&docid=d6femA-xK22M4M&tbnid=58QkN0o0Y4vrTM:&ved=0CAUQjRw&url=http://www.jeffblankenburg.com/2010/10/16/31-days-of-windows-phone-day-16-the-panorama-control/&ei=pG80UYfaE6PM0QWmqYDoAw&bvm=bv.43148975,d.d2k&psig=AFQjCNFiJqCkw0qecp06BPC8QQFVf9pj5w&ust=1362477345642505 http://www.google.nl/url?sa=i&rct=j&q=&esrc=s&frm=1&source=images&cd=&cad=rja&docid=yGXH921EFp11SM&tbnid=wHLCODTR7S7atM:&ved=0CAUQjRw&url=http://professionalaspnet.com/archive/2012/12/31/Announcing-Panorama.js-A-JavaScript_2F00_CSS3-Library-to-Replicate-the-Core-Windows-Phone-Panorama-Control.aspx&ei=7280UdK5H8zv0gX62YHQDw&bvm=bv.43148975,d.d2k&psig=AFQjCNGTFom28N7yC5MhkNQBbth6fR0hPw&ust=1362477402861704

  • GridView •Tiles

    •Different

    Content

    •Different

    Sizes

    •Grouping

    •Semantic

    Zoom

  • namespace PanoramaDemo.Models { class FeaturedApp { public string Name { get; set; } public string Price { get; set; } public string Color { get; set; } public string ImageUrl { get { return "http://lorempixel.com/300/150/sports/" + Name; } } } }

    namespace PanoramaDemo.ViewModels { class MainViewModel { public List Apps { get; set; } public MainViewModel() { this.Apps = new List() { new FeaturedApp { Name = "App1", Color = "#FF0000", Price = "Free" }, new FeaturedApp { Name = "App2", Color = "#00FF00", Price = "$1.69" }, new FeaturedApp { Name = "App3", Color = "#0000FF", Price = "Free" }, new FeaturedApp { Name = "App4", Color = "#FF00FF", Price = "$4.99" }, }; } } }

  • GridView •Tiles

    •Different

    Content

    •Different

    Sizes

    •Grouping

    •Semantic

    Zoom

  • abstract class MenuItem { public string Name { get; set; } } class NavigationItem : MenuItem { public Type Page { get; set; } } class FeaturedApp : MenuItem { public string Price { get; set; } public string Color { get; set; } public string ImageUrl { get { return "http://lorempixel.com/300/150/sports/" + Name; } } }

    class MainViewModel { public List Items { get; set; } public MainViewModel() { this.Items = new List() { new FeaturedApp { Name = "App1", Color = "#FF0000", Price = "Free" }, new FeaturedApp { Name = "App2", Color = "#00FF00", Price = "$1.69" }, new FeaturedApp { Name = "App3", Color = "#0000FF", Price = "Free" }, new FeaturedApp { Name = "App4", Color = "#FF00FF", Price = "$4.99" }, new NavigationItem { Name = "Free Apps" }, new NavigationItem { Name = "Paid Apps" }, }; } }

  • namespace PanoramaDemo.Selectors { class MenuItemDataTemplateSelector : DataTemplateSelector { protected override DataTemplate SelectTemplateCore(object item, DependencyObject container) { if (item is Models.FeaturedApp) { return App.Current.Resources["FeaturedAppDataTemplate"] as DataTemplate; } else { return App.Current.Resources["NavigationItemDataTemplate"] as DataTemplate; } } } }

  • GridView •Tiles

    •Different

    Content

    •Different

    Sizes

    •Grouping

    •Semantic

    Zoom

  • class FeaturedApp : MenuItem { public string Price { get; set;