Transcript Model View ViewModel

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
<StackPanel Orientation=“Horizontal”>
<TextBlock Text=“Hello World” Margin=“0,0,0,50” />
<StackPanel Orientation=“Horizontal”>
<Button Width="200" Height="50">Login</Button>
<Button Width="200" Height="50">Cancel</Button>
</StackPanel>
</StackPanel>
Page
• *.xaml for UI
• *.xaml.cs for code behind (c# logic)
• UI can be generated through Blend
• Or written by hand in Visual Studio
Tools for Editing XAML
Visual Studio 2013
Blend for VS 2013
• Mainly for programmers • Mainly for UI designers
• Most of the XAML
editing features are
provided
• Visual states can be
seen/edited without
compiling
• Can program
application logic
• Can create complex
animations
XAML
5
XAML Editor in Visual Studio 2013
6
Blend for Visual Studio 2012
7
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 x:Name="MainGrid"> </Grid>
<Grid x:Name="MainGrid“/>
Grid : Rows and Colunms
• Grid having 2 Rows and 3 Columns
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
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
Dynamic Layout
10
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
Lab 2 : Create a new project and open it in Blend






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
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*
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
• 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
XAML
36
Resources Binding (System resources)
App.Xaml
Resource binding(local resources)
<x:String x:Key="MyButtonText">Click Me!</x:String>
The resulting resource definition
<Button x:Name="button1" Content="{StaticResource MyButtonText}"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
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:
<Page.Resources>
<!-- put your style here--!>
</Page.Resources>
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:
<Page.Resources>
</Page.Resources>
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
XAML
47
OneWay
TwoWay
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