Builders and Developers Session 5

1. Working with XAML and
C# (Cont.)
Prepared by Mohamed Samir & Khaled Taher

2. 1
2
3
4
5
6
7
8
Visual Assets
Command Bars
Event Handler
Data Binding
Navigation
Layouts
Agenda
Message Dialog
Exercise

3. Visual Assets
Splash Screen :
• The first image to show before your
application starts.

4. Visual Assets
App Logo:
•The symbolic picture of your app.
Store Logo:
• The logo that appears in windows store
discription

5. Visual Assets
Step 1:
Add the photos
you want to
apply in the app
to the Assets.

6. Visual Assets
Step 2:
Open
“Package.appxmanifest”

7. Visual Assets
Step 3:
Scroll down to:
• Splash Screen
• Square 150×150 logo
• Square 30×30 logo
• Store Logo
And change their locations
with “Assets/filename.png”

8. Command Bars
Provide user with easy access to your app's
most common tasks.
• See More
• Content
• Primary Commands
• Secondary Commands
[…]

9. Command Bars

10. Command Bars
Primary commands and secondary
command can only be populated by
app bar controls :
• AppBarButton
• AppBarToggleButton
• AppBarSeparator

11. Command Bars
AppBarToggleButton
Allows you to have 2 states for a given button
through its 2 properties (Checked, Unchecked)

12. Command Bars
The labels of the buttons can be controlled
via the command bar properties itself, not
the buttons.
DefaultLabelPosition = “Right”
LabelPosition = “Collapsed”

13. Command Bars
You can control how the command bar is shown in its closed
state via ClosedDisplayMode property.
• ClosedDisplayMode = “Compact”
(Shows content, primary command icons without labels, and the
"see more" [•••] button.)
• ClosedDisplayMode = “Minimal”
(Shows only a thin bar that acts as the "see more" [•••] button)

14. Event Handler
A method/function in behind-code does a task
corresponding to the event invoked it.
• Click
• DoubleTapped
• GotFocus
• LostFocus

15. Event Handler
The event property “Click” value is the function
name in code-behind.
<Button Content = “Button1” Background
= “Green” Click = “MyClick” >
</Button>
private void MyClick (object sender,
RoutedEventArgs e )
{
// What to do on the click
}
XAML C#

16. Data Binding
• Data binding allows the flow of data between UI elements
and data object on user code
•Types of binding
– One way
– Two way (later sessions)
– Element binding

17. – In one-way binding, the data is
bound from its source, (the
object that holds the data) to its
target (the object that displays
the data)
One way
Data Binding

18. •It is also possible to bind, not to a standard
data source, but rather to another element on
the page
Element Binding
<StackPanel VerticalAlignment = "Center" HorizontalAlignment = "Center">
<Rectangle Height = "100" Width = "100" Fill = "SteelBlue" RenderTransformOrigin = "0.5,0.5" Margin = "50">
<Rectangle.RenderTransform> <CompositeTransform ScaleX = "{Binding Value, ElementName = MySlider}"
ScaleY = "{Binding Value, ElementName = MySlider}"/>
</Rectangle.RenderTransform>
</Rectangle>
<Slider Minimum = ".5" Maximum = "2.0" StepFrequency = ".1" x:Name = "MySlider" />
</StackPanel>
Data Binding

19. Data Binding
Element Binding

20. Navigation
The process of moving from
a page to another.
You need to:
1) Determine the event that decides the
navigation (clicking a button/photo/ etc..)
2) Write navigation code in the event code-
behind. (handler method)

21. Navigation
For an image with DoubleTapped property “Nave”:
private void Nave (object sender, RoutedEventArgs e )
{
// Navigation Code
this.Frame.Navigate(typeof(PageName), PassedValue) ;
}

22. Navigation
Navigation could be done to a web page too, not
only local pages in the app.
In that case no back-end c# code is required, but
the XAML control must be within a hyperlink
button.

23. Navigation
• Navigation through normal text (hyperlink)
• Navigation through an image (hyperlink)

24. Message Dialog
A pop-up window used to tell the user a
message (with the ability to add actions
based on his click)

25. Message Dialog

26. Message Dialog

27. Layouts
TailoredAdaptiveResponsive

28. Responsive
• Also called fluid layout
• Use layout properties and panels to
make your default UI fluid.
Layouts

29. • The various Panel classes provide
different ways to size and position
their children such as:
– Canvas
– Grid
– Stack Panel
– Relative Panel
Layouts

30. Relative Panel
• Defines an area within which you can
position and align child objects in relation
to each other or the parent panel.
<RelativePanel BorderBrush="Gray" BorderThickness="10">
<Rectangle x:Name="RedRect" Fill="Red" MinHeight="100" MinWidth="100"/> <Rectangle
x:Name="BlueRect" Fill="Blue" MinHeight="100" MinWidth="100"
RelativePanel.RightOf="RedRect"/>
<!-- Width is not set on the green and yellow rectangles. It's determined by the RelativePanel
properties. -->
<Rectangle x:Name="GreenRect" Fill="Green" MinHeight="100" Margin="0,5,0,0"
RelativePanel.Below="RedRect" RelativePanel.AlignLeftWith="RedRect"
RelativePanel.AlignRightWith="BlueRect"/>
<Rectangle Fill="Yellow" MinHeight="100" RelativePanel.Below="GreenRect"
RelativePanel.AlignLeftWith="BlueRect" RelativePanel.AlignRightWithPanel="True"/>
</RelativePanel>
Layouts

31. Adaptive
Layouts

32. Tailored
Layouts

33. Exercise