SlideShare a Scribd company logo
1 of 54
Dinko Jakovljević
Microsoft Student Partner | BambooLab
dinko.jakovljevic@studentpartner.com
Agenda
About XAML
Syntax
Code-Behind
XAML Namespaces and Namespace Mapping
Data binding
About XAML
About XAML
eXtensible Application Markup Language
Declarative XML-based language
Used for initializing structured values and objects
XAML defines UI elements, data binding, eventing, etc.
About XAML
Xaml elements map directly to CLR object instances (Common
Language Runtime)
Xaml attributes map to CLR properties and events on objects
Everything that is implemented in XAML can be expressed in C# or
VB.NET
Where we can find XAML?
About XAML
Xaml filescan be created:
• Visual Studio
• Microsoft Expression Blend
• Various text editors (XAMLPad)
Why is XAML so interesting?
You can create visible UI elements in the declarative XAML markup,
and then separate the UI definition from the run-time logic by using
code-behind files
Why is XAML so interesting?
XAML directly represents the instantiation of objects in a specific set
of backing types defined in assemblies
XAML enables a workflow where separate parties can work on the UI
and the logic of an application, using potentially different tools.
Syntax
Syntax
XAML is a language based on XML and follows or expands upon
XML structural rules.
Little more syntax
<Grid x:Name="ColorGrid" Background="#F29F05" Width="410" Height="110" Margin="35,0,0,30" Tap="Taxi_Tap">
<TextBlock Text="{Binding Name}" Foreground="Black" FontSize="30" Margin="10,0,0,0" />
<TextBlock Text="{Binding Price}" Foreground="Black" Margin="10,50,0,0"/>
<TextBlock Text="{Binding Description}" Foreground="Black" Margin="10,75,0,0"/>
<Image Width="50" Height="50" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,25
,0" Source="/Assets/Icons/Phone.png"></Image>
<TextBlock Name="Number" Text="{Binding MobileNumber}" Visibility="Collapsed"/>
</Grid>
Syntax
The object elements StackPanel and Button each map to the name of
a class that is defined by WPF and is part of the WPF assemblies.
<StackPanel>
<Button Content="Pritisni me!"/>
</StackPanel>
C# Code
StackPanel stackPanel = new StackPanel();
this.Content = stackPanel;
Button button = new Button();
button.Margin= new Thickness(20);
button.Content = "OK";
stackPanel.Children.Add(button);
Attribute syntax
An attribute syntax names the property that is being set in attribute
syntax, followed by the assignment operator (=).
The value of an attribute is always specified as a string that is
contained within quotation marks
<Button Content="Pritisni me!" Width="200" Margin="0 100 0 0"/>
Property element syntax
The content of tag is an object element of the type that the property
takes as its value.
<typeName.propertyName>
...
</typeName.propertyName>
Property element syntax
<Button>
<Button.Content>
Pritisni me!
</Button.Content>
<Button.Margin>
0 100 0 0
</Button.Margin>
<Button.Width>
200
</Button.Width>
</Button>
Attribute syntax (Events)
Attribute syntax can also be used for members that are events rather
than properties.
<Button Click="Button_Click" >Click Me!</Button>
Markup Extension
Markup extensions are dynamic placeholders for attribute values in
XAML.
FontFamily="{StaticResource PhoneFontFamilyNormal}"
Markup Extension
Built-in markup extensions:
Binding
StaticResource
DynamicResource
TemplateBinding
x:Static
x:Null
Elements
XAML is the primary format for declaring a Silverlight UI and
elements in that UI.
Typically at least one XAML file in your project represents a "page"
metaphor in your application for the initially displayed UI.
Grid Panel
The grid is a layout panel that arranges its child controls in a tabular
structure of rows and columns. Its functionality is similar to the HTML
table but more flexible.
Grid Panel
The grid has one row and column by default.
RowDefinition item -> RowDefinition collection
ColumnDefinition item -> ColumnDefinition collection
Grid Panel
The size can be specified as an absolute amount of logical units, as a percentage
value or automatically.
Fixed Fixed size of logical units (1/96 inch)
Auto Takes as much space as needed by the contained control
Star (*) Takes as much space as available (after filing all auto and fixed size)
StackPanel
In WPF is a simple and useful layout panel.
It is good for creating any kind of lists.
ItemsControls like ComboBox, ListBox or Menu use
StackPanel as their internal layout panel.
Grid vs StackPanel
DEMO
Code behind
Code behind
Code-behind is a term used to describe the code that is joined with
markup-defined objects, when a XAML page is markup-compiled
<Button Click="Button_Click" >Click Me!</Button>
Code behind and XAML
MainPage.xaml
MainPage.xaml.cs
XAML code
<Button Click="Button_Click" >Click Me!</Button>
MainPage.xaml
Code behind and XAML
MainPage.xaml
MainPage.xaml.cs Code Behind
MainPage.xaml.cs
private void Press(object sender, RoutedEventArgs e) { }
Code behind and XAML
namespace SSA_primjer
{ public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
}
private void Press(object sender, RoutedEventArgs e) { }
}
}
Inline Code
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="MyNamespace.MyCanvasCodeInline" >
<Button Name="button1" Click="Clicked">Click Me!</Button>
<x:Code><![CDATA[
void Clicked(object sender, RoutedEventArgs e)
{
button1.Content = "Hello World";
}
]]></x:Code>
</Page>
Inline Code
x:Code is a directive element defined in XAML
The code that is defined inline can interact with the XAML on the
same page
You should consider avoiding or limiting the use of inline code
DEMO
XAML Namespaces
What is a XAML Namespace?
A XAML namespace is an extension of the concept of an XML
namespace.
It rely on the XML namespace syntax, the convention of using URI
and so on.
XAML Namespace Declaration
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Within the namespace declarations in the root tag of many XAML
files, you will see that there are typically two XML namespace
declarations.
The XAML namespace defines many commonly-used features that
are necessary even for basic WPF applications.
XAML Namespace Declaration
Code – behind to XAML file through a partial class x:Class
Keyed resource of an element x:Key
Mapping to Custom Classes
You can map XML namespaces to assemblies using a series of
tokens within an xmlns prefix declaration.
The CLR namespace declared within the assembly that contains the
public types to expose as elements.
clr-namespace:
Mapping to Custom Classes
xmlns:custom="clr-namespace:SDKSample;assembly=SDKSampleLibrary">
</Page>
<Page x:Class="WPFApplication1.MainPage"
Example:
Data binding
Data binding
Data binding provides a simple way for Windows Runtime apps
using C++, C#, or Visual Basic to display and interact with data.
A data binding consists of a target and a source.
Data binding
When a binding is established and the data changes, the UI
elements that are bound to the data can display changes
automatically.
Data binding syntax
The binding is created in XAML by using the {Binding ...}
The source is set in code by setting the DataContex property for
the TextBox
Data binding
Data context
Data context is inherited.
A child element can override this behavior by setting the Source
property on its binding object, or by setting its DataContext.
Useful when we have multiple bindings that use the same source.
Other sources
ElementName property – useful when you are binding to other
elements in your app (slider + width of button)
RelativeSource property – useful when the binding is specified in a
ControlTemplate
Other sources
Binding.Path property – supports a variety of syntax options for
binding to nested properties, attached properties.
Direction of the data flow
Change notification
For changes to the source object to propagate to the target, the
source must implement the INotifyPropertyChanged interface.
INotifyPropertyChanged has the PropertyChanged event.
DEMO
Hvala na pažnji 

More Related Content

What's hot

New Form Element in HTML5
New Form Element in HTML5New Form Element in HTML5
New Form Element in HTML5Zahra Rezwana
 
Forms in html5
Forms in html5Forms in html5
Forms in html5hrisi87
 
Fb cheatsheet12b
Fb cheatsheet12bFb cheatsheet12b
Fb cheatsheet12bilesh raval
 
05 html-forms
05 html-forms05 html-forms
05 html-formsPalakshya
 
JavaScript - Chapter 14 - Form Handling
 JavaScript - Chapter 14 - Form Handling   JavaScript - Chapter 14 - Form Handling
JavaScript - Chapter 14 - Form Handling WebStackAcademy
 
My 70-480 HTML5 certification learning
My 70-480 HTML5 certification learningMy 70-480 HTML5 certification learning
My 70-480 HTML5 certification learningSyed Irtaza Ali
 
Web forms and html lecture Number 4
Web forms and html lecture Number 4Web forms and html lecture Number 4
Web forms and html lecture Number 4Mudasir Syed
 
Handling tree control events
Handling tree control eventsHandling tree control events
Handling tree control eventsHemakumar.S
 
JavaScript - Chapter 13 - Browser Object Model(BOM)
JavaScript - Chapter 13 - Browser Object Model(BOM)JavaScript - Chapter 13 - Browser Object Model(BOM)
JavaScript - Chapter 13 - Browser Object Model(BOM)WebStackAcademy
 
Learn javascript easy steps
Learn javascript easy stepsLearn javascript easy steps
Learn javascript easy stepsprince Loffar
 
Advisor Jumpstart: JavaScript
Advisor Jumpstart: JavaScriptAdvisor Jumpstart: JavaScript
Advisor Jumpstart: JavaScriptdominion
 
Data weave documentation
Data weave documentationData weave documentation
Data weave documentationSindhu VL
 
jQuery - Chapter 3 - Effects
jQuery - Chapter 3 - Effects  jQuery - Chapter 3 - Effects
jQuery - Chapter 3 - Effects WebStackAcademy
 
Web 2 | CSS - Cascading Style Sheets
Web 2 | CSS - Cascading Style SheetsWeb 2 | CSS - Cascading Style Sheets
Web 2 | CSS - Cascading Style SheetsMohammad Imam Hossain
 
Presentation on visual basic 6 (vb6)
Presentation on visual basic 6 (vb6)Presentation on visual basic 6 (vb6)
Presentation on visual basic 6 (vb6)pbarasia
 

What's hot (20)

New Form Element in HTML5
New Form Element in HTML5New Form Element in HTML5
New Form Element in HTML5
 
Forms in html5
Forms in html5Forms in html5
Forms in html5
 
Fb cheatsheet12b
Fb cheatsheet12bFb cheatsheet12b
Fb cheatsheet12b
 
05 html-forms
05 html-forms05 html-forms
05 html-forms
 
JavaScript - Chapter 14 - Form Handling
 JavaScript - Chapter 14 - Form Handling   JavaScript - Chapter 14 - Form Handling
JavaScript - Chapter 14 - Form Handling
 
html forms
html formshtml forms
html forms
 
ajax_pdf
ajax_pdfajax_pdf
ajax_pdf
 
My 70-480 HTML5 certification learning
My 70-480 HTML5 certification learningMy 70-480 HTML5 certification learning
My 70-480 HTML5 certification learning
 
Html forms
Html formsHtml forms
Html forms
 
Web forms and html lecture Number 4
Web forms and html lecture Number 4Web forms and html lecture Number 4
Web forms and html lecture Number 4
 
Handling tree control events
Handling tree control eventsHandling tree control events
Handling tree control events
 
JavaScript - Chapter 13 - Browser Object Model(BOM)
JavaScript - Chapter 13 - Browser Object Model(BOM)JavaScript - Chapter 13 - Browser Object Model(BOM)
JavaScript - Chapter 13 - Browser Object Model(BOM)
 
Learn javascript easy steps
Learn javascript easy stepsLearn javascript easy steps
Learn javascript easy steps
 
Advisor Jumpstart: JavaScript
Advisor Jumpstart: JavaScriptAdvisor Jumpstart: JavaScript
Advisor Jumpstart: JavaScript
 
Data weave documentation
Data weave documentationData weave documentation
Data weave documentation
 
Les07
Les07Les07
Les07
 
2. HTML forms
2. HTML forms2. HTML forms
2. HTML forms
 
jQuery - Chapter 3 - Effects
jQuery - Chapter 3 - Effects  jQuery - Chapter 3 - Effects
jQuery - Chapter 3 - Effects
 
Web 2 | CSS - Cascading Style Sheets
Web 2 | CSS - Cascading Style SheetsWeb 2 | CSS - Cascading Style Sheets
Web 2 | CSS - Cascading Style Sheets
 
Presentation on visual basic 6 (vb6)
Presentation on visual basic 6 (vb6)Presentation on visual basic 6 (vb6)
Presentation on visual basic 6 (vb6)
 

Similar to XAML and WPF - Dinko Jakovljević

Similar to XAML and WPF - Dinko Jakovljević (20)

Introductontoxaml
IntroductontoxamlIntroductontoxaml
Introductontoxaml
 
Designing XAML apps using Blend for Visual Studio 2013
Designing XAML apps using Blend for Visual Studio 2013Designing XAML apps using Blend for Visual Studio 2013
Designing XAML apps using Blend for Visual Studio 2013
 
Silverlight Developer Introduction
Silverlight   Developer IntroductionSilverlight   Developer Introduction
Silverlight Developer Introduction
 
Exploring Adobe Flex
Exploring Adobe Flex Exploring Adobe Flex
Exploring Adobe Flex
 
Windows phone 8 session 3
Windows phone 8 session 3Windows phone 8 session 3
Windows phone 8 session 3
 
Adobe Flex4
Adobe Flex4 Adobe Flex4
Adobe Flex4
 
Building Accessible Apps using NET MAUI.pdf
Building Accessible Apps using NET MAUI.pdfBuilding Accessible Apps using NET MAUI.pdf
Building Accessible Apps using NET MAUI.pdf
 
02 wp7 building silverlight applications
02 wp7   building silverlight applications02 wp7   building silverlight applications
02 wp7 building silverlight applications
 
Intake 37 ef2
Intake 37 ef2Intake 37 ef2
Intake 37 ef2
 
INTRODUCTION TO CLIENT SIDE PROGRAMMING
INTRODUCTION TO CLIENT SIDE PROGRAMMINGINTRODUCTION TO CLIENT SIDE PROGRAMMING
INTRODUCTION TO CLIENT SIDE PROGRAMMING
 
Wpf-Xaml And Layout Basics
Wpf-Xaml And Layout BasicsWpf-Xaml And Layout Basics
Wpf-Xaml And Layout Basics
 
Intake 38 data access 5
Intake 38 data access 5Intake 38 data access 5
Intake 38 data access 5
 
JavaScript
JavaScriptJavaScript
JavaScript
 
Introduction to flex
Introduction to flexIntroduction to flex
Introduction to flex
 
J Query Public
J Query PublicJ Query Public
J Query Public
 
Chapter 6
Chapter 6Chapter 6
Chapter 6
 
Xml writers
Xml writersXml writers
Xml writers
 
WEB DEVELOPMENT
WEB DEVELOPMENTWEB DEVELOPMENT
WEB DEVELOPMENT
 
WPF Fundamentals
WPF FundamentalsWPF Fundamentals
WPF Fundamentals
 
XML
XMLXML
XML
 

More from Software StartUp Academy Osijek (14)

ASP.NET - Ivan Marković
ASP.NET - Ivan MarkovićASP.NET - Ivan Marković
ASP.NET - Ivan Marković
 
Internet marketing - Damir Podhorski
Internet marketing - Damir PodhorskiInternet marketing - Damir Podhorski
Internet marketing - Damir Podhorski
 
Team management - Tomislav Bilić
Team management - Tomislav BilićTeam management - Tomislav Bilić
Team management - Tomislav Bilić
 
ORM - Ivan Marković
ORM - Ivan MarkovićORM - Ivan Marković
ORM - Ivan Marković
 
Baze podataka i SQL - Vlatko Vlahek
Baze podataka i SQL - Vlatko VlahekBaze podataka i SQL - Vlatko Vlahek
Baze podataka i SQL - Vlatko Vlahek
 
Services - Leo Tot
Services - Leo TotServices - Leo Tot
Services - Leo Tot
 
Wireframing & UI design - Andrej Mlinarevic
Wireframing & UI design - Andrej MlinarevicWireframing & UI design - Andrej Mlinarevic
Wireframing & UI design - Andrej Mlinarevic
 
Financijski plan - Ana Marija Delic
Financijski plan - Ana Marija DelicFinancijski plan - Ana Marija Delic
Financijski plan - Ana Marija Delic
 
Izvori financiranja - Nina Marković
Izvori financiranja - Nina MarkovićIzvori financiranja - Nina Marković
Izvori financiranja - Nina Marković
 
Software Product Development - Denis Susac
Software Product Development - Denis SusacSoftware Product Development - Denis Susac
Software Product Development - Denis Susac
 
C# - Igor Ralić
C# - Igor RalićC# - Igor Ralić
C# - Igor Ralić
 
Poslovni plan - Sunčica Oberman Peterka
Poslovni plan - Sunčica Oberman PeterkaPoslovni plan - Sunčica Oberman Peterka
Poslovni plan - Sunčica Oberman Peterka
 
PM, Scrum and TFS - Ivan Marković
PM, Scrum and TFS - Ivan MarkovićPM, Scrum and TFS - Ivan Marković
PM, Scrum and TFS - Ivan Marković
 
Uvod u aplikacije - Luka Mandić
Uvod u aplikacije - Luka MandićUvod u aplikacije - Luka Mandić
Uvod u aplikacije - Luka Mandić
 

Recently uploaded

USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...Postal Advocate Inc.
 
ENG 5 Q4 WEEk 1 DAY 1 Restate sentences heard in one’s own words. Use appropr...
ENG 5 Q4 WEEk 1 DAY 1 Restate sentences heard in one’s own words. Use appropr...ENG 5 Q4 WEEk 1 DAY 1 Restate sentences heard in one’s own words. Use appropr...
ENG 5 Q4 WEEk 1 DAY 1 Restate sentences heard in one’s own words. Use appropr...JojoEDelaCruz
 
HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...
HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...
HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...Nguyen Thanh Tu Collection
 
How to Add Barcode on PDF Report in Odoo 17
How to Add Barcode on PDF Report in Odoo 17How to Add Barcode on PDF Report in Odoo 17
How to Add Barcode on PDF Report in Odoo 17Celine George
 
How to do quick user assign in kanban in Odoo 17 ERP
How to do quick user assign in kanban in Odoo 17 ERPHow to do quick user assign in kanban in Odoo 17 ERP
How to do quick user assign in kanban in Odoo 17 ERPCeline George
 
Measures of Position DECILES for ungrouped data
Measures of Position DECILES for ungrouped dataMeasures of Position DECILES for ungrouped data
Measures of Position DECILES for ungrouped dataBabyAnnMotar
 
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATIONTHEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATIONHumphrey A Beña
 
Oppenheimer Film Discussion for Philosophy and Film
Oppenheimer Film Discussion for Philosophy and FilmOppenheimer Film Discussion for Philosophy and Film
Oppenheimer Film Discussion for Philosophy and FilmStan Meyer
 
Millenials and Fillennials (Ethical Challenge and Responses).pptx
Millenials and Fillennials (Ethical Challenge and Responses).pptxMillenials and Fillennials (Ethical Challenge and Responses).pptx
Millenials and Fillennials (Ethical Challenge and Responses).pptxJanEmmanBrigoli
 
Active Learning Strategies (in short ALS).pdf
Active Learning Strategies (in short ALS).pdfActive Learning Strategies (in short ALS).pdf
Active Learning Strategies (in short ALS).pdfPatidar M
 
The Contemporary World: The Globalization of World Politics
The Contemporary World: The Globalization of World PoliticsThe Contemporary World: The Globalization of World Politics
The Contemporary World: The Globalization of World PoliticsRommel Regala
 
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17Celine George
 
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)lakshayb543
 
4.18.24 Movement Legacies, Reflection, and Review.pptx
4.18.24 Movement Legacies, Reflection, and Review.pptx4.18.24 Movement Legacies, Reflection, and Review.pptx
4.18.24 Movement Legacies, Reflection, and Review.pptxmary850239
 
Integumentary System SMP B. Pharm Sem I.ppt
Integumentary System SMP B. Pharm Sem I.pptIntegumentary System SMP B. Pharm Sem I.ppt
Integumentary System SMP B. Pharm Sem I.pptshraddhaparab530
 
Activity 2-unit 2-update 2024. English translation
Activity 2-unit 2-update 2024. English translationActivity 2-unit 2-update 2024. English translation
Activity 2-unit 2-update 2024. English translationRosabel UA
 
Transaction Management in Database Management System
Transaction Management in Database Management SystemTransaction Management in Database Management System
Transaction Management in Database Management SystemChristalin Nelson
 

Recently uploaded (20)

USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...
 
ENG 5 Q4 WEEk 1 DAY 1 Restate sentences heard in one’s own words. Use appropr...
ENG 5 Q4 WEEk 1 DAY 1 Restate sentences heard in one’s own words. Use appropr...ENG 5 Q4 WEEk 1 DAY 1 Restate sentences heard in one’s own words. Use appropr...
ENG 5 Q4 WEEk 1 DAY 1 Restate sentences heard in one’s own words. Use appropr...
 
HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...
HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...
HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...
 
How to Add Barcode on PDF Report in Odoo 17
How to Add Barcode on PDF Report in Odoo 17How to Add Barcode on PDF Report in Odoo 17
How to Add Barcode on PDF Report in Odoo 17
 
How to do quick user assign in kanban in Odoo 17 ERP
How to do quick user assign in kanban in Odoo 17 ERPHow to do quick user assign in kanban in Odoo 17 ERP
How to do quick user assign in kanban in Odoo 17 ERP
 
Measures of Position DECILES for ungrouped data
Measures of Position DECILES for ungrouped dataMeasures of Position DECILES for ungrouped data
Measures of Position DECILES for ungrouped data
 
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATIONTHEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
 
Oppenheimer Film Discussion for Philosophy and Film
Oppenheimer Film Discussion for Philosophy and FilmOppenheimer Film Discussion for Philosophy and Film
Oppenheimer Film Discussion for Philosophy and Film
 
Millenials and Fillennials (Ethical Challenge and Responses).pptx
Millenials and Fillennials (Ethical Challenge and Responses).pptxMillenials and Fillennials (Ethical Challenge and Responses).pptx
Millenials and Fillennials (Ethical Challenge and Responses).pptx
 
Active Learning Strategies (in short ALS).pdf
Active Learning Strategies (in short ALS).pdfActive Learning Strategies (in short ALS).pdf
Active Learning Strategies (in short ALS).pdf
 
The Contemporary World: The Globalization of World Politics
The Contemporary World: The Globalization of World PoliticsThe Contemporary World: The Globalization of World Politics
The Contemporary World: The Globalization of World Politics
 
LEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptx
LEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptxLEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptx
LEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptx
 
Paradigm shift in nursing research by RS MEHTA
Paradigm shift in nursing research by RS MEHTAParadigm shift in nursing research by RS MEHTA
Paradigm shift in nursing research by RS MEHTA
 
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17
 
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
 
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptxFINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
 
4.18.24 Movement Legacies, Reflection, and Review.pptx
4.18.24 Movement Legacies, Reflection, and Review.pptx4.18.24 Movement Legacies, Reflection, and Review.pptx
4.18.24 Movement Legacies, Reflection, and Review.pptx
 
Integumentary System SMP B. Pharm Sem I.ppt
Integumentary System SMP B. Pharm Sem I.pptIntegumentary System SMP B. Pharm Sem I.ppt
Integumentary System SMP B. Pharm Sem I.ppt
 
Activity 2-unit 2-update 2024. English translation
Activity 2-unit 2-update 2024. English translationActivity 2-unit 2-update 2024. English translation
Activity 2-unit 2-update 2024. English translation
 
Transaction Management in Database Management System
Transaction Management in Database Management SystemTransaction Management in Database Management System
Transaction Management in Database Management System
 

XAML and WPF - Dinko Jakovljević

  • 1. Dinko Jakovljević Microsoft Student Partner | BambooLab dinko.jakovljevic@studentpartner.com
  • 2. Agenda About XAML Syntax Code-Behind XAML Namespaces and Namespace Mapping Data binding
  • 4. About XAML eXtensible Application Markup Language Declarative XML-based language Used for initializing structured values and objects XAML defines UI elements, data binding, eventing, etc.
  • 5. About XAML Xaml elements map directly to CLR object instances (Common Language Runtime) Xaml attributes map to CLR properties and events on objects Everything that is implemented in XAML can be expressed in C# or VB.NET
  • 6. Where we can find XAML?
  • 7. About XAML Xaml filescan be created: • Visual Studio • Microsoft Expression Blend • Various text editors (XAMLPad)
  • 8. Why is XAML so interesting? You can create visible UI elements in the declarative XAML markup, and then separate the UI definition from the run-time logic by using code-behind files
  • 9. Why is XAML so interesting? XAML directly represents the instantiation of objects in a specific set of backing types defined in assemblies XAML enables a workflow where separate parties can work on the UI and the logic of an application, using potentially different tools.
  • 11. Syntax XAML is a language based on XML and follows or expands upon XML structural rules.
  • 12. Little more syntax <Grid x:Name="ColorGrid" Background="#F29F05" Width="410" Height="110" Margin="35,0,0,30" Tap="Taxi_Tap"> <TextBlock Text="{Binding Name}" Foreground="Black" FontSize="30" Margin="10,0,0,0" /> <TextBlock Text="{Binding Price}" Foreground="Black" Margin="10,50,0,0"/> <TextBlock Text="{Binding Description}" Foreground="Black" Margin="10,75,0,0"/> <Image Width="50" Height="50" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,25 ,0" Source="/Assets/Icons/Phone.png"></Image> <TextBlock Name="Number" Text="{Binding MobileNumber}" Visibility="Collapsed"/> </Grid>
  • 13. Syntax The object elements StackPanel and Button each map to the name of a class that is defined by WPF and is part of the WPF assemblies. <StackPanel> <Button Content="Pritisni me!"/> </StackPanel>
  • 14. C# Code StackPanel stackPanel = new StackPanel(); this.Content = stackPanel; Button button = new Button(); button.Margin= new Thickness(20); button.Content = "OK"; stackPanel.Children.Add(button);
  • 15. Attribute syntax An attribute syntax names the property that is being set in attribute syntax, followed by the assignment operator (=). The value of an attribute is always specified as a string that is contained within quotation marks <Button Content="Pritisni me!" Width="200" Margin="0 100 0 0"/>
  • 16. Property element syntax The content of tag is an object element of the type that the property takes as its value. <typeName.propertyName> ... </typeName.propertyName>
  • 17. Property element syntax <Button> <Button.Content> Pritisni me! </Button.Content> <Button.Margin> 0 100 0 0 </Button.Margin> <Button.Width> 200 </Button.Width> </Button>
  • 18. Attribute syntax (Events) Attribute syntax can also be used for members that are events rather than properties. <Button Click="Button_Click" >Click Me!</Button>
  • 19. Markup Extension Markup extensions are dynamic placeholders for attribute values in XAML. FontFamily="{StaticResource PhoneFontFamilyNormal}"
  • 20. Markup Extension Built-in markup extensions: Binding StaticResource DynamicResource TemplateBinding x:Static x:Null
  • 21. Elements XAML is the primary format for declaring a Silverlight UI and elements in that UI. Typically at least one XAML file in your project represents a "page" metaphor in your application for the initially displayed UI.
  • 22. Grid Panel The grid is a layout panel that arranges its child controls in a tabular structure of rows and columns. Its functionality is similar to the HTML table but more flexible.
  • 23. Grid Panel The grid has one row and column by default. RowDefinition item -> RowDefinition collection ColumnDefinition item -> ColumnDefinition collection
  • 24. Grid Panel The size can be specified as an absolute amount of logical units, as a percentage value or automatically. Fixed Fixed size of logical units (1/96 inch) Auto Takes as much space as needed by the contained control Star (*) Takes as much space as available (after filing all auto and fixed size)
  • 25. StackPanel In WPF is a simple and useful layout panel. It is good for creating any kind of lists. ItemsControls like ComboBox, ListBox or Menu use StackPanel as their internal layout panel.
  • 27. DEMO
  • 29. Code behind Code-behind is a term used to describe the code that is joined with markup-defined objects, when a XAML page is markup-compiled <Button Click="Button_Click" >Click Me!</Button>
  • 30. Code behind and XAML MainPage.xaml MainPage.xaml.cs XAML code <Button Click="Button_Click" >Click Me!</Button> MainPage.xaml
  • 31. Code behind and XAML MainPage.xaml MainPage.xaml.cs Code Behind MainPage.xaml.cs private void Press(object sender, RoutedEventArgs e) { }
  • 32. Code behind and XAML namespace SSA_primjer { public partial class MainPage : PhoneApplicationPage { // Constructor public MainPage() { InitializeComponent(); } private void Press(object sender, RoutedEventArgs e) { } } }
  • 33. Inline Code <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="MyNamespace.MyCanvasCodeInline" > <Button Name="button1" Click="Clicked">Click Me!</Button> <x:Code><![CDATA[ void Clicked(object sender, RoutedEventArgs e) { button1.Content = "Hello World"; } ]]></x:Code> </Page>
  • 34. Inline Code x:Code is a directive element defined in XAML The code that is defined inline can interact with the XAML on the same page You should consider avoiding or limiting the use of inline code
  • 35. DEMO
  • 37. What is a XAML Namespace? A XAML namespace is an extension of the concept of an XML namespace. It rely on the XML namespace syntax, the convention of using URI and so on.
  • 38. XAML Namespace Declaration xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Within the namespace declarations in the root tag of many XAML files, you will see that there are typically two XML namespace declarations.
  • 39. The XAML namespace defines many commonly-used features that are necessary even for basic WPF applications. XAML Namespace Declaration Code – behind to XAML file through a partial class x:Class Keyed resource of an element x:Key
  • 40. Mapping to Custom Classes You can map XML namespaces to assemblies using a series of tokens within an xmlns prefix declaration. The CLR namespace declared within the assembly that contains the public types to expose as elements. clr-namespace:
  • 41. Mapping to Custom Classes xmlns:custom="clr-namespace:SDKSample;assembly=SDKSampleLibrary"> </Page> <Page x:Class="WPFApplication1.MainPage" Example:
  • 43. Data binding Data binding provides a simple way for Windows Runtime apps using C++, C#, or Visual Basic to display and interact with data. A data binding consists of a target and a source.
  • 44. Data binding When a binding is established and the data changes, the UI elements that are bound to the data can display changes automatically.
  • 45. Data binding syntax The binding is created in XAML by using the {Binding ...} The source is set in code by setting the DataContex property for the TextBox
  • 47. Data context Data context is inherited. A child element can override this behavior by setting the Source property on its binding object, or by setting its DataContext. Useful when we have multiple bindings that use the same source.
  • 48. Other sources ElementName property – useful when you are binding to other elements in your app (slider + width of button) RelativeSource property – useful when the binding is specified in a ControlTemplate
  • 49. Other sources Binding.Path property – supports a variety of syntax options for binding to nested properties, attached properties.
  • 50. Direction of the data flow
  • 51. Change notification For changes to the source object to propagate to the target, the source must implement the INotifyPropertyChanged interface. INotifyPropertyChanged has the PropertyChanged event.
  • 52. DEMO
  • 53.

Editor's Notes

  1. CLR the virtual-machine component of Microsoft's .NET framework, manages the execution of .NET programs Converts compiled code into machine instructions which the computer'sCPU then executes.[1] The CLR provides additional services including memory management, type safety, exception handling,garbage collection, security and thread management
  2. This is unlike most other markup languages, which are typically an interpreted language without such a direct tie to a backing type system
  3. For some properties of an object element, attribute syntax is not possible, because the object or information necessary to provide the property value cannot be adequately expressed within the quotation mark and string restrictions of attribute syntax Generally, the content of that tag is an object element of the type that the property takes as its value . After specifying content, you must close the property element with an end tag
  4. If an attribute syntax is possible, using the attribute syntax is typically more convenient and enables a more compact markup, but that is often just a matter of style, not a technical limitation
  5. Attribute syntax can also be used for members that are events rather than properties. In this case, the attribute's name is the name of the event. In the WPF implementation of events for XAML, the attribute's value is the name of a handler that implements that event's delegate.
  6. They resolve the value of a property at runtime. Markup extensions are surrouded by curly braces (Example: Background="{StaticResource NormalBackgroundBrush}"). WPF has some built-in markup extensions, but you can write your own, by deriving fromMarkupExtension.
  7. Binding To bind the values of two properties together. StaticResource One time lookup of a resource entry DynamicResource Auto updating lookup of a resource entry TemplateBinding To bind a property of a control template to a dependency property of the control x:Static Resolve the value of a static property. x:Null Return null
  8. A cell can contain multiple controls, they can span over multiple cells and even overlap themselves.
  9. The grid has one row and column by default. To create additional rows and columns, you have to add RowDefinitionitems to the RowDefinitions collection and ColumnDefinition items to the ColumnDefinitions collection.
  10. FixedFixed size of logical units (1/96 inch) AutoTakes as much space as needed by the contained control Star (*)Takes as much space as available (after filling all auto and fixed sized columns), proportionally divided over all star-sized columns. So 3*/5* means the same as 30*/50*. Remember that star-sizing does not work if the grid size is calculated based on its content.
  11. The StackPanel in WPF is a simple and useful layout panel. It stacks its child elements below or beside each other, dependening on its orientation. This is very useful to create any kinds of lists. All WPF ItemsControls like ComboBox,ListBox or Menu use a StackPanel as their internal layout panel.
  12. Attribute syntax can also be used for members that are events rather than properties. In this case, the attribute's name is the name of the event. In the WPF implementation of events for XAML, the attribute's value is the name of a handler that implements that event's delegate. The XAML language includes language-level features that make it possible to associate code files with markup files, from the markup file side.
  13. Notice that the code is inside the x:Code element and that the code must be surrounded by <CDATA[...]]> to escape the contents for XML, so that a XAML processor (interpreting either the XAML schema or the WPF schema) will not try to interpret the contents literally as XML.
  14. In terms of architecture and coding philosophy, maintaining a separation between markup and code-behind keeps the designer and developer roles much more distinct
  15. The techniques of specifying a XAML namespace rely on the XML namespace syntax, the convention of using URIs as namespace identifiers, using prefixes to provide a means to reference multiple namespaces from the same markup source, and so on
  16. Within the namespace declarations in the root tag of many XAML files, you will see that there are typically two XML namespace declarations. The first declaration maps the overall WPF client / framework XAML namespace as the default. – first declaration The second declaration maps a separate XAML namespace, mapping it (typically) to the x: prefix – second declaration The relationship between these declarations is that the x: prefix mapping supports the intrinsics that are part of the XAML language definition, and WPF is one implementation that uses XAML as a language and defines a vocabulary of its objects for XAML. Because the WPF vocabulary's usages will be far more common than the XAML intrinsics usages, the WPF vocabulary is mapped as the default.
  17. For instance, in order to join any code-behind to a XAML file through a partial class, you must name that class as the x:Class attribute in the root element of the relevant XAML file. Or, any element as defined in a XAML page that you wish to access as a keyed resource should have the x:Key attribute set on the element in question
  18. The way data is displayed is separated from the management of the data. The target is usually a property of a control, and the source is usually a property of a data object. Every binding includes: A binding source, which is an object with data that you want to render. A binding target, which is a DependencyProperty of a FrameworkElement for rendering the data. A Binding object, which moves the data between the source and target, and can reformat it using an optionalvalue converter.
  19. A connection, or binding, between the UI and a data object allows data to flow between the two
  20. If you set the data context on a parent element, its children will use the same data context. This override then applies to the children of the child element. Setting the data context is useful when you want to have multiple bindings that use the same source. To set the source for a single binding, set the Source property on the Binding object.
  21. OneTime bindings update the target with the source data when the binding is created. OneWay bindings update the target with the source data when the binding is created, and any time the data changes. This is the default mode. TwoWay bindings update both the target and the source when either changes
  22. This event tells the binding engine that the source has changed so that the binding engine can update the target value