Windows Phone User Group

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.