Your SlideShare is downloading. ×
0
Xaml programming
Xaml programming
Xaml programming
Xaml programming
Xaml programming
Xaml programming
Xaml programming
Xaml programming
Xaml programming
Xaml programming
Xaml programming
Xaml programming
Xaml programming
Xaml programming
Xaml programming
Xaml programming
Xaml programming
Xaml programming
Xaml programming
Xaml programming
Xaml programming
Xaml programming
Xaml programming
Xaml programming
Xaml programming
Xaml programming
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Xaml programming

169

Published on

Windows Phone User Group

Windows Phone User Group

Published in: Software, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
169
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. XAML PROGRAMMING Windows Phone User Group, Singapore. 26 April 2014
  • 2. TOPICS • Intro to XAML • XAML UI Elements • Controls • Data Binding • MVVM
  • 3. EXTENSIBLE APPLICATION MARKUP LANGUAGESerialization and Initialization format <Activity x:TypeArguments="x:Int32" x:Class="Add" xmlns="http://schemas.microsoft.com/netfx/2009/xaml/activities" > <x:Members> <x:Property Name="Operand1" Type="InArgument(x:Int32)" /> < x:Property Name="Operand2" Type="InArgument(x:Int32)" /> </x:Members> <Sequence> <Assign x:TypeArguments="x:Int32" Value="[Operand1 + Operand2]"> <Assign.To> <OutArgument x:TypeArguments="x:Int32"> <ArgumentReference x:TypeArguments="x:Int32" ArgumentName="Result"/> </OutArgument> </Assign.To> </Assign> </Sequence> </Activity>
  • 4. XAML - USER INTERFACE Declarative Toolable Recommended <Page x:Class="App12.MainPage"…> <Grid> <Grid.Resources> <Style x:Key="PinkButton" TargetType="Button"> <Setter Property="Background" Value="Pink" /> </Style> </Grid.Resources> <Button x:Name="myButton" Style="{StaticResource PinkButton}" Content="{Binding data.buttonName}" Click="OnButtonClick" Width="300" Margin="250" VerticalAlignment="Stretch"> </Button> </Grid> </Page>
  • 5. DECLARATIVE Button b = new Button(); b.Width = 100; b.Height = 50; b.Content = "Click Me!"; b.Background = new SolidColorBrush( Colors.Green); <Button Content="Click Me!" Width="100" Height="50" Background="Green“ />
  • 6. UI ELEMENTS Brushes, Shapes, Styles &Properties
  • 7. STYLES <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:phone="clr- namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Style x:Key="RecipeTitle" TargetType="TextBlock"> <Setter Property="Foreground" Value="Orange" /> <Setter Property="FontSize" Value="24"/> </Style> </ResourceDictionary>
  • 8. DEPENDENCY PROPERTIES • Special properties that power most of the presentation engine features - Data Binding - Styling - Attached Properties - Animation - Property Invalidation - Property Inheritance - Default Values - Sparse Storage
  • 9. DEFINING DEPENDENCY PROPERTIES• Inherit from DependencyObject • Call DependencyObject.Register • Create standard property public static readonly DependencyProperty RadiusProperty = DependencyProperty.Register("Radius", typeof(double), typeof(CarouselPanel), new PropertyMetadata(200.0, new PropertyChangedCallback(CarouselPanel.RadiusChanged))); // optional but convenient public double Radius { get { return (double)this.GetValue(RadiusProperty); } set { this.SetValue(RadiusProperty, value); } }
  • 10. ATTACHED PROPERTIES • Inherit from DependencyObject • Call DependencyProperty.RegisterAttach • Create two static methods Getnnn/Setnnn public static readonly DependencyProperty RowProperty = DependencyProperty.RegisterAttached("Row", typeof(int), typeof(Grid), new PropertyMetadata(0, new PropertyChangedCallback(OnRowChanged))); public static void SetRow(DependencyObject obj, int value) { obj.SetValue(RowProperty, value); } public static int GetRow(DependencyObject obj ) { return (int) obj.GetValue(RowProperty); }
  • 11. LAYOUTS Control Layouts
  • 12. PROPERTIES AFFECTING LAYOUT • Width/Height • HorizontalAlignment/VerticalAlignment • Margin • Padding • Visibility
  • 13. MARGIN• Space outside edges of an element <StackPanel Orientation="Horizontal" Height="200" Background="AliceBlue"> <Rectangle Width="100" Height="100" Fill="Yellow" /> <Rectangle Width="100" Height="100" Fill="Green"/> <Rectangle Width="100" Height="100" Fill="Yellow" Margin="30"/> <Rectangle Width="100" Height="100" Fill="Green" Margin="50"/> <Rectangle Width="100" Height="100" Fill="Yellow" Margin="80"/> </StackPanel>
  • 14. PADDING• Space inside edges of an element <Border Width="300" Height="300" Background="Yellow" Padding="40“ > <Rectangle Fill="Red" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" /> </Border> <Border Width="300" Height="300" Background="Yellow" Padding="100,5" Margin="449,112,617,356"> <Rectangle Fill="Red" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/> </Border>
  • 15. DATA BINDING Declarative
  • 16. DATA BINDING SCENARIOS AND BENEFITS Connects UI to data • When data values change, UI updates • If two-way: when user provides input, the data is updated too Decreases code Enables templating
  • 17. COMPONENTS OF UI DATA BINDING• A Binding consists of 4 components: 1. Source 2. Source path 3. Target dependency object 4. Target dependency property Binding Target Binding Source Object Property Dependency Object Dependency Property Binding Object
  • 18. BINDING COMPONENTS IN XAML 1. Source 2. Source path 3. Target dependency object 4. Target dependency property <TextBox IsEnabled="{Binding ElementName=MyCheckBox,Path=IsChecked}"/> Target Dependency Property Source Path Target Dependency Object Source
  • 19. BINDING TO NON-DPS • Any public property on a CLR object will do • Simple properties only read once by default • Can update manually • Updates occur only if notifications available • INotifyPropertyChanged
  • 20. INOTIFYPROPERTYCHANGED • Defines the PropertyChanged event • Of type PropertyChangedEventHandler
  • 21. CONVERTERS public class BoolToVisibilityConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, string language) { bool val = (bool) value ; return ( val ? Visibility.Visible : Visibility.Collapsed) ; } public object ConvertBack(object value, Type targetType, object parameter, string language) { var vis = (Visibility)value; return vis == Visibility.Visible; } }
  • 22. DATATEMPLATE & CONTENT MODEL • Some controls house content: • ContentControl: Contains a single item • ItemsControl: Contains a collection of items • More generally: • Anything with a ContentPresenter • Enables use of a DataTemplate
  • 23. MVVM Model-View-ViewModel
  • 24. Presentation Model (ViewModel) MVVM Model View
  • 25. The relationships View ViewModel DataBinding Commands Services Messages Model
  • 26. BENEFITS • During the development process, developers and designers can work more independently and concurrently on their components. The designers can concentrate on the view, and if they are using Expression Blend, they can easily generate sample data to work with, while the developers can work on the view model and model components. • The developers can create unit tests for the view model and the model without using the view. The unit tests for the view model can exercise exactly the same functionality as used by the view. • It is easy to redesign the UI of the application without touching the code because the view is implemented entirely in XAML. A new version of the view should work with the existing view model. • If there is an existing implementation of the model that encapsulates existing business logic, it may be difficult or risky to change. In this scenario, the view model acts as an adapter for the model classes and enables you to avoid making any major changes to the model code.

×