LAYOUT CONTROLS

XAML Overview XAML : eXtensible Application Markup Language pronounced (ZAMEL) is a markup language used to design user interfaces XML-based declarative language for UI – Each XML element maps to an object instance – Each attribute maps to a property of object – Event handlers and Commands can be declared – … more features (dataBinding …….etc)

XAML sample Login Cancel

Page *.xaml for UI *.xaml.cs for code behind (c# logic) UI can be generated through Blend Or written by hand in Visual Studio

Visual Studio 2013 Mainly for programmers Most of the XAML editing features are provided Can program application logic Blend for VS 2013 Mainly for UI designers Visual states can be seen/edited without compiling Can create complex animations 5 Tools for Editing XAML XAML

XAML Editor in Visual Studio

Blend for Visual Studio

Grid Grid ? The Grid control offers a flexible table-like approach to layout A Grid control has both a collection of rows and columns looks like the following:

Grid : Rows and Colunms Grid having 2 Rows and 3 Columns

Grid Control and Auto/Star Sizing Grid control provides a flexible way to distribute available screen space Three ways of specifying a cell size (height of a row / width of a column) 1)Pixels 2)“Auto” – fits to the child elements in the cell 3)Star notation – represents a fraction of the remaining available space 10 Dynamic Layout

Grid Example Some Tool Controls Autouto * 2*

Grid : Adding Controls to the grid Placing a button with name ”MainButton” in cell(1,1)

Grid : Adding Controls to the grid Placing a button with name ”MainButton” in cell (1,1)

StackPanel Use a StackPanel control to help with the placement and layout of other controls. StackPanel essentially is a container that “stacks” objects vertically or horizontally.

StackPanel

Canvas Grid and StackPanel use a form of relative positioning. Canvas use absolute positioning, that is the control will be placed there regardless of what happen to the screen size or other objects around it.

Canvas

ScrollViewer Acts as a container for any content that may overflow the visible part of the screen. If an overflow occurs a scrollbar is added to the user interface, and the user can scroll content contained in the ScrollViewer into position. ScrollViewer can handle scrolling content vertically or horizontally.

ScrollViewer

ScrollViewer: Vertical orientation

ItemSource In all cases this is a binding to an ObservableCollection Populates and updates the source through notifications

ItemContainerTemplate Is responsible for all states and animation Eg. How should it look when pressed, PointerOver or disabled? Usually a lot more complex than the itemsource it self

ItemsPanel Decides how the generated items should position if self compared to each other, for instance: Stack on top or next to each other Can wrap as a grid

A lot of ItemControls – a lot of different features FlipView ListBox ComboBox GridView ItemsControl ListView Ect.

Demo1

Lab1  New project…  Templates > Visual C# > Windows Store > Grid App (XAML)  Name the solution “Grid App solution 1”  Click OK  Run the Solution (Debug > Start Debugging (Keyboard shortcut: F5)  Play around with the solution and look at the different pages (the ones ending with xaml)  Repeat the same process for Hub App and Split App  Name the solutions “Hub App Solution 1” & “Split App solution 1”  Click OK  Run the Solution (Debug > Start Debugging (Keyboard shortcut: F5)  Play around with the solution  Close all solutions when you are done.

Demo2

 New project…  Templates > Visual C# > Windows Store > Blank App (XAML)  Name the solution “Blank app solution 2”  Click OK  Make sure the MainPage.xaml is the only page open  Right click the page in Solution Explorer in Visual Studio and choose Open in Blend  Create the following login control using: StackPanel TextBlock TextBox PasswordBox 2 x Button Optional: Play around with fonts and colors Lab 2 : Create a new project and open it in Blend

Demo3

lab 3: XAML & Controls Create new solution from template and write the login control in xaml while watching the design Window New project… Templates > Visual C# > Windows Store > Blank App (XAML) Name the solution “Blank app solution 3” Click OK Make sure the MainPage.xaml is the only page open Open the split view in Visual Studio Write the XAML to create the same login control as before, you’ll need the following components; StackPanel TextBlock TextBox PasswordBox 2 x Button Look for additional properties and features

Demo4

lab 4: Create a correct composed page Compose a page using Blend New project… Templates > Visual C# > Windows Store > Blank App (XAML) Name the solution “Blank app solution 4” Click OK Make sure the MainPage.xaml is the only page open Right click the page in Solution Explorer in Visual Studio and choose Open in Blend Create a grid with 2 rows and 2 coloums RowDefinitions Height: 120 px Height: 1* sized Insert a textblock as page title in Row 0 Give it the following properties: Font family: Segoe UI Light Font size: 42pt Vertical Alignment: Buttom Margin: 100 left, 0 top, 0 right, 0 bot Span across both coloums

lab 4 Create a grid with 2 rows and 2 coloums and place it in row 1 with stretch both vertically and horizontally Size of RowDefinitions: Height: 1* Size of ColoumDefinitions: Width: 300 px Width: 150 px Inside the grid, place three Buttons with different background color One in grid row 0, col 0 and span it across both rows One in Row 0, col 1 One in Row 1, Col 1 Give the grid the same margin as the page title text

lab 4 Wrap the grid with buttons in a new grid and create 2 coloums – ColoumsDefintions Width: Auto Create a copy of the grid with the buttons – Place it in grid col 1 – Give it a Margin of 80 Optional: Right click the outer “content grid” and wrap everything in a ScrollViewer – Set the following properties HorizontalSCrollBarVisibility: Auto VerticalScrollBarVisibility: Disabled ScrollViewer.HorizontalScrollMode: Enabled ScrollViewer.VerticalScrollMode: Disabled ScrollViewer.ZoomMode: Disabled Run the app HINT: To help your self, consider naming the different controls. The “name” can be changed in top of the properties panel, or by double clicking the “control” name in Objects and Timeline

Ressource Binding and Styling

Resource Binding Any property values can be stored as resources and then be reused – System resources (system-wide predefined values) – Local resources (stored in local XAML) Hard-coded local values can easily be converted to a resource 36 XAML

Resources Binding (System resources) App.Xaml

Resource binding(local resources) Click Me! The resulting resource definition The button using the resource Question : What is the result on the button of using the resource ?

STYLING The visual properties of a given control, like Background / foreground color Margins / paddings Font / fontsize ”Other static visual properties” Style Inheritance Styles, Copy excisting..

STYLING Styling enables to apply various styles to controls and elements on a particular page Create a style and apply it to a particular XAML control instance Create it in such a way that it is generic to all instances of a given XAML control.

Inline Styling Problem : a lot of common property values, why not putting them soemwhere and apply them to all controls.

Control styles for one/multiple pages ?  Styles to a particulier page Between the following Ressource tags:  Style used across multiple pages include it either in App.xaml or a ResourceDictionary file.

Where to put control styles for a page?  Styles to a particulier page Between the following Ressource tags:

Microsoft´s Default Styles Windows 8 project templates typically include many recommended Style definitions that you can use across the various controls. These styles are automatically added to your project in the Common\StandardStyles.xaml file if you add a new Page to your app using the BasicPage item template.

Data Binding

ItemTemplate Is responsible for creating the UI representing the bound data item. Usually consists of texts images

Data Binding Data binding can be used between two properties, as long as the following conditions are met: 1)Data source implements INotifyPropertyChanged interface 2)The two properties have the same data type, or there is a data converter OneWay / TwoWay 47 XAML

TwoWay OneWay

Templates ListView and GridView controls enable you to completely customize the look of each item in the list. You do this using a concept called data templates. In the example below, you want to display a name and age for each student in the list. We create the template to which you want each student in the collection to adhere as well as binding information for the various properties of the object, that is Name and Age.

Templates

Results