SlideShare a Scribd company logo
A little ‘bit’e of   WPF


                     Abhishek Sur
The Windows Presentation Foundation (WPF) is a subset of the .NET
Framework types that are located mostly in the         namespace
System.Windows and is tailor made for building Windows client
applications with visually stunning user experiences.

In other words it means resolution-independent display, usage of
Extensible Application Markup Language (XAML), powerful data binding,
control and data templates, various layout options, 2D and 3D graphics,
animations, styles, flow documents, multimedia and a lot more features
all rolled into one!
SOME OF THE KEY FEATURES WE MIGHT LIKE TO
SAIL THROUGH FOR TODAY’S SESSION ARE :
RESOLUTION AND DEVICE-INDEPENDENT DISPLAY


 WPF got rid of this huge headache by incorporating Device Independent Pixels
(DPI) which remains 1/96th of an inch, regardless of actual screen resolution.
It is achieved by modifying the screen pixel density. It also uses a coordinate
system of Improved precision for more accurate display.
GRAPHICS AND ANIMATION SUPPORT


 It uses DirectX environment and can take advantage of the graphics hardware
installed in the computer to minimize CPU usage. One highly advantageous
point is that each part of the graphics we draw on screen is vector based and
object oriented, so we have complete control to erase or modify each part of
our display later on
CONTROL TEMPLATES


Wow! Another dream comes true for a developer. Now we can completely
redesign the look of a control as per our wish. For example now each
listboxitem in our listbox can have dynamic images, checkboxes, textboxes,
dropdowns and whatever control we require to display that record. That’s
what you call freedom! It also does one very important thing that is the XAML
which takes care of the appearance and the model class which controls the
behavior now becomes loosely coupled.
1. We define a Control Template
<ControlTemplate TargetType="{x:Type ButtonBase}“ x:Key="btnBasicTemp">
    <Grid Effect="{StaticResource ControlShadowEffect}">
      <Rectangle x:Name="GelBackground“ RadiusX="9“ RadiusY="9"
             Fill="{TemplateBinding Background}“/>
      <ContentPresenter Margin="10,0,10,0“/>
    </Grid>
</ControlTemplate>
2. A Style created for button uses that Control Template
<Style TargetType="{x:Type ButtonBase}“ x:Key="btnBasic">
    <Setter Property="Foreground“ Value="{StaticResource ButtonForegroundDefaultBrush}" />
    <Setter Property="Background" Value="#567890"/>
    <Setter Property="Template“ Value="{StaticResource btnBasicTemp}" />
    <Style.Triggers><MultiTrigger><MultiTrigger.Conditions>
                      <Condition Property="IsMouseOver“ Value="True" />
                      <Condition Property="IsEnabled“ Value="True" />
    </MultiTrigger.Conditions>
                      <Setter Property="Foreground“ Value="{StaticResource btnHoverForeBrush}" />
    </MultiTrigger></Style.Triggers>
</Style>
3. A Button in form uses that Style
<Button Style="{DynamicResource btnBasic}">Hi!</Button>
EXAMPLE ARCHITECTURE :



             UI Layer

                View Model

                  Business Logic Layer

                    Data Layer

                         Database
EXAMPLE ARCHITECTURE :



     Window              Window1.xaml


INotifyPropertyChanged     GroupsModel.cs – View Model Class


  Data Factory Classes       Groups.cs - Singular & Plural Table classes


        IEnumerable              Data Factory Classes


                                        Database
DEPENDENCY PROPERTY
 It can be used just like a normal property but provides lot more extra features. Its
 value can be calculated indirectly from other usergiven inputs.

• Property value coming from style
<Style x:Key=“DefaultBtnStyle">
<Setter Property="Control.Background" Value=“SteelBlue"/>
</Style>
<Button Style="{StaticResource DefaultBtnStyle}">See my color!</Button>
• Property value coming from data binding
<TextBlock x:Name="txtMembers“ Text="{Binding Members}“/>
• Property value coming from data binding dynamic resource
<Button Style="{DynamicResource AlternativeBtnStyle}">Hi!</Button>
• The property can inherit its value automatically from a parent element in
   the element tree which saves a lot of unnecessary duplication.
• The property can report when the property value changes.
DATA BINDING
It is a process to transfer data between the controls of application UI and the properties of the model class.
There are various modes to choose from depending on the situation. INotifyPropertyChanged is used to
maintain     continuous      synchronization   between       the        binding    target         and binding
source. The UpdateSourceTrigger property of the binding determines which event triggers the update of the
source. ICollectionView is used to implement Sorting, Filtering or Grouping on a data collection.


           UI Layer                                                               View Model
       Binding Target                                                            Binding Source



           Dependency                           One Way                               Property
            Property                            Two Way
                                            One Way To Source
                                                One Time
     Dependency Object                                                         Model Class Object


          ItemSource                                                         Observable Collection
                                          INotifyPropertyChanged
         SelectedItem                                                           Singular Element
DATA TEMPLATE
 It is used to specify how data objects will be displayed in UI.

 <ListBox x:Name="lst"
         ItemsSource="{Binding GroupData}"
         SelectedItem="{Binding CurrentSingularData}">
<ListBox.ItemTemplate>
          <DataTemplate>
                   <StackPanel Orientation="Vertical">
                   <TextBlock x:Name="txtName" Text="{Binding Name}"/>
                   <TextBlock x:Name="txtMembers" Text="{Binding Members}"/>
                   </StackPanel>
                   <DataTemplate.Triggers>
                   <DataTrigger Binding="{Binding Id}“ Value="{x:Null}">
                   <Setter TargetName="txtName“ Property="Text“ Value="Add New..." />
                   </DataTrigger>
                   </DataTemplate.Triggers>
          </DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
MVVM – MODEL-VIEW-VIEWMODEL
This is an architecture with a very loosely coupled design absolutely
tailor-made for the WPF and Silverlight applications.

• What we can see as the UI is known as the View.
• The layer that arranges all the data in presentable format and supplies
them to this View is the ViewModel.
• The ViewModel gets it all from the Model.




View                      ViewModel                           Model
MVVM – MODEL-VIEW-VIEWMODEL (CONTINUED)



The View-ViewModel binding is performed simply by setting a ViewModel
object as the DataContext of a view. If property values in the ViewModel change,
they automatically synchronize the view and ther is no need to write any code to
update the view. As WPF supports Command Binding when we click a button in
the View, a command on the ViewModel executes to perform the requested
action.
The beauty of this architecture lies in the fact that the ViewModel works
independent of the View and so any existing UI design (View) can be altered to
any extent and can be attached to the ViewModel again without any problem.
Same relationship exist between the ViewModel and the Model making it a
really modular and loosely coupled design.
TRIGGERS
A trigger is used to automatically perform some action if a certain condition is
achieved. There are 3 trigger types in WPF.

• Property Triggers
• Event Triggers
• Data Triggers

• Property Triggers are executed when a property reaches a predefined value.
<Style.Triggers>
          <Trigger Property="IsMouseOver“ Value="True">
                   <Setter Property="Background“ Value="#CCFFFF" />
          </Trigger>
</Style.Triggers>
TRIGGERS (CONTINUED)


• Event Triggers are executed when a particular event occurs.

<Button Opacity="0" Content="Watch Me">
 <Button.Triggers>
  <EventTrigger RoutedEvent="FrameworkElement.Loaded">
   <BeginStoryboard Name="ActionName">
    <Storyboard>
     <DoubleAnimation Storyboard.TargetProperty="Opacity"
       Duration="0:0:1" BeginTime="0:0:0.2" To="1.0" />
    </Storyboard>
   </BeginStoryboard>
  </EventTrigger>
 </Button.Triggers>
</Button>
TRIGGERS (CONTINUED)


• Data Triggers are executed when a binding expression reaches a predefined
value.

<DataTemplate.Triggers>
        <DataTrigger Binding="{Binding Id}“ Value="{x:Null}">
        <Setter TargetName="txtName“ Property="Text“ Value="Add New..." />
        </DataTrigger>
</DataTemplate.Triggers>
VALUE CONVERTERS
They are used when our binding source and target properties have incompatible
datatypes and we need somebody to perform that conversion at the time of
binding. These classes are derived from IValueConverter.

1. We have to write some code block like this inside our converter classes
public object Convert(object value, Type targetType, object parameter,
System.Globalization.CultureInfo culture)
     {
       bool check = System.Convert.ToBoolean(value);
       if (check)
           return Visibility.Visible;
       else
           return Visibility.Collapsed;
     }
2. This is how the bolVisConverter is implemented
            <Button Content="Delete“ Visibility="{Binding ElementName=lstStatuses,
            Path=Items.Count, Converter={StaticResource bolVisConverter}}"/>

More Related Content

What's hot

Web 2 | CSS - Cascading Style Sheets
Web 2 | CSS - Cascading Style SheetsWeb 2 | CSS - Cascading Style Sheets
Web 2 | CSS - Cascading Style Sheets
Mohammad Imam Hossain
 
Introduction to JPA (JPA version 2.0)
Introduction to JPA (JPA version 2.0)Introduction to JPA (JPA version 2.0)
Introduction to JPA (JPA version 2.0)
ejlp12
 
Metaworks3
Metaworks3Metaworks3
Metaworks3
uEngine Solutions
 
ASP.Net 3.5 SP1 Dynamic Data
ASP.Net 3.5 SP1 Dynamic DataASP.Net 3.5 SP1 Dynamic Data
ASP.Net 3.5 SP1 Dynamic Data
micham
 
Introduction to Backbone.js for Rails developers
Introduction to Backbone.js for Rails developersIntroduction to Backbone.js for Rails developers
Introduction to Backbone.js for Rails developers
AoteaStudios
 
Mvc & java script
Mvc & java scriptMvc & java script
Mvc & java script
Eyal Vardi
 
Simple Data Binding
Simple Data BindingSimple Data Binding
Simple Data Binding
Doncho Minkov
 
03 layouts & ui design - Android
03   layouts & ui design - Android03   layouts & ui design - Android
03 layouts & ui design - Android
Wingston
 
Overview of WPF in light of Ribbon UI Control
Overview of WPF in light of Ribbon UI ControlOverview of WPF in light of Ribbon UI Control
Overview of WPF in light of Ribbon UI Control
Abhishek Sur
 
Hibernate
HibernateHibernate
Hibernate
Prashant Kalkar
 
Hibernate Tutorial
Hibernate TutorialHibernate Tutorial
Hibernate Tutorial
Ram132
 
MongoDB & NoSQL 101
 MongoDB & NoSQL 101 MongoDB & NoSQL 101
MongoDB & NoSQL 101
Jollen Chen
 
Introduction to JPA and Hibernate including examples
Introduction to JPA and Hibernate including examplesIntroduction to JPA and Hibernate including examples
Introduction to JPA and Hibernate including examples
ecosio GmbH
 
SCWCD : Web tier design CHAP : 11
SCWCD : Web tier design CHAP : 11SCWCD : Web tier design CHAP : 11
SCWCD : Web tier design CHAP : 11
Ben Abdallah Helmi
 
EJB 3.0 course Sildes and matrial
EJB 3.0 course Sildes and matrialEJB 3.0 course Sildes and matrial
EJB 3.0 course Sildes and matrial
Mohamed Ali Ibrahim
 
Advanced Core Data
Advanced Core DataAdvanced Core Data
Advanced Core Data
Make School
 
Java Persistence API (JPA) Step By Step
Java Persistence API (JPA) Step By StepJava Persistence API (JPA) Step By Step
Java Persistence API (JPA) Step By Step
Guo Albert
 
Complex Data Binding
Complex Data BindingComplex Data Binding
Complex Data Binding
Doncho Minkov
 
Jpa 2.1 Application Development
Jpa 2.1 Application DevelopmentJpa 2.1 Application Development
Jpa 2.1 Application Development
ThirupathiReddy Vajjala
 

What's hot (19)

Web 2 | CSS - Cascading Style Sheets
Web 2 | CSS - Cascading Style SheetsWeb 2 | CSS - Cascading Style Sheets
Web 2 | CSS - Cascading Style Sheets
 
Introduction to JPA (JPA version 2.0)
Introduction to JPA (JPA version 2.0)Introduction to JPA (JPA version 2.0)
Introduction to JPA (JPA version 2.0)
 
Metaworks3
Metaworks3Metaworks3
Metaworks3
 
ASP.Net 3.5 SP1 Dynamic Data
ASP.Net 3.5 SP1 Dynamic DataASP.Net 3.5 SP1 Dynamic Data
ASP.Net 3.5 SP1 Dynamic Data
 
Introduction to Backbone.js for Rails developers
Introduction to Backbone.js for Rails developersIntroduction to Backbone.js for Rails developers
Introduction to Backbone.js for Rails developers
 
Mvc & java script
Mvc & java scriptMvc & java script
Mvc & java script
 
Simple Data Binding
Simple Data BindingSimple Data Binding
Simple Data Binding
 
03 layouts & ui design - Android
03   layouts & ui design - Android03   layouts & ui design - Android
03 layouts & ui design - Android
 
Overview of WPF in light of Ribbon UI Control
Overview of WPF in light of Ribbon UI ControlOverview of WPF in light of Ribbon UI Control
Overview of WPF in light of Ribbon UI Control
 
Hibernate
HibernateHibernate
Hibernate
 
Hibernate Tutorial
Hibernate TutorialHibernate Tutorial
Hibernate Tutorial
 
MongoDB & NoSQL 101
 MongoDB & NoSQL 101 MongoDB & NoSQL 101
MongoDB & NoSQL 101
 
Introduction to JPA and Hibernate including examples
Introduction to JPA and Hibernate including examplesIntroduction to JPA and Hibernate including examples
Introduction to JPA and Hibernate including examples
 
SCWCD : Web tier design CHAP : 11
SCWCD : Web tier design CHAP : 11SCWCD : Web tier design CHAP : 11
SCWCD : Web tier design CHAP : 11
 
EJB 3.0 course Sildes and matrial
EJB 3.0 course Sildes and matrialEJB 3.0 course Sildes and matrial
EJB 3.0 course Sildes and matrial
 
Advanced Core Data
Advanced Core DataAdvanced Core Data
Advanced Core Data
 
Java Persistence API (JPA) Step By Step
Java Persistence API (JPA) Step By StepJava Persistence API (JPA) Step By Step
Java Persistence API (JPA) Step By Step
 
Complex Data Binding
Complex Data BindingComplex Data Binding
Complex Data Binding
 
Jpa 2.1 Application Development
Jpa 2.1 Application DevelopmentJpa 2.1 Application Development
Jpa 2.1 Application Development
 

Viewers also liked

F12 debugging in Ms edge
F12 debugging in Ms edgeF12 debugging in Ms edge
F12 debugging in Ms edge
Abhishek Sur
 
SQL Server2012 Enhancements
SQL Server2012 EnhancementsSQL Server2012 Enhancements
SQL Server2012 Enhancements
Abhishek Sur
 
Asp.net performance
Asp.net performanceAsp.net performance
Asp.net performance
Abhishek Sur
 
Mobile Services for Windows Azure
Mobile Services for Windows AzureMobile Services for Windows Azure
Mobile Services for Windows Azure
Abhishek Sur
 
Working with Azure Resource Manager Templates
Working with Azure Resource Manager TemplatesWorking with Azure Resource Manager Templates
Working with Azure Resource Manager Templates
Abhishek Sur
 
AMicrosoft azure hyper v recovery manager overview
AMicrosoft azure hyper v recovery manager overviewAMicrosoft azure hyper v recovery manager overview
AMicrosoft azure hyper v recovery manager overview
Abhishek Sur
 
Stream Analytics Service in Azure
Stream Analytics Service in AzureStream Analytics Service in Azure
Stream Analytics Service in Azure
Abhishek Sur
 

Viewers also liked (7)

F12 debugging in Ms edge
F12 debugging in Ms edgeF12 debugging in Ms edge
F12 debugging in Ms edge
 
SQL Server2012 Enhancements
SQL Server2012 EnhancementsSQL Server2012 Enhancements
SQL Server2012 Enhancements
 
Asp.net performance
Asp.net performanceAsp.net performance
Asp.net performance
 
Mobile Services for Windows Azure
Mobile Services for Windows AzureMobile Services for Windows Azure
Mobile Services for Windows Azure
 
Working with Azure Resource Manager Templates
Working with Azure Resource Manager TemplatesWorking with Azure Resource Manager Templates
Working with Azure Resource Manager Templates
 
AMicrosoft azure hyper v recovery manager overview
AMicrosoft azure hyper v recovery manager overviewAMicrosoft azure hyper v recovery manager overview
AMicrosoft azure hyper v recovery manager overview
 
Stream Analytics Service in Azure
Stream Analytics Service in AzureStream Analytics Service in Azure
Stream Analytics Service in Azure
 

Similar to Introduction to XAML and its features

WPF - Controls &amp; Data
WPF - Controls &amp; DataWPF - Controls &amp; Data
WPF - Controls &amp; Data
Sharada Gururaj
 
Knockoutjs databinding
Knockoutjs databindingKnockoutjs databinding
Knockoutjs databinding
Boulos Dib
 
KnockoutJS and MVVM
KnockoutJS and MVVMKnockoutJS and MVVM
KnockoutJS and MVVM
Manvendra Singh
 
Will your code blend? : Toronto Code Camp 2010 : Barry Gervin
Will your code blend? : Toronto Code Camp 2010 : Barry GervinWill your code blend? : Toronto Code Camp 2010 : Barry Gervin
Will your code blend? : Toronto Code Camp 2010 : Barry Gervin
Barry Gervin
 
MVVM & Data Binding Library
MVVM & Data Binding Library MVVM & Data Binding Library
MVVM & Data Binding Library
10Clouds
 
Data Binding in Silverlight
Data Binding in SilverlightData Binding in Silverlight
Data Binding in Silverlight
Boulos Dib
 
Backbone.js
Backbone.jsBackbone.js
Backbone.js
Ivano Malavolta
 
Fundaments of Knockout js
Fundaments of Knockout jsFundaments of Knockout js
Fundaments of Knockout js
Flavius-Radu Demian
 
Rp 6 session 2 naresh bhatia
Rp 6  session 2 naresh bhatiaRp 6  session 2 naresh bhatia
Rp 6 session 2 naresh bhatia
sapientindia
 
Backbone.js
Backbone.jsBackbone.js
Backbone.js
Knoldus Inc.
 
Knockoutjs
KnockoutjsKnockoutjs
02.Designing Windows Phone Application
02.Designing Windows Phone Application02.Designing Windows Phone Application
02.Designing Windows Phone Application
Nguyen Tuan
 
Developing maintainable Cordova applications
Developing maintainable Cordova applicationsDeveloping maintainable Cordova applications
Developing maintainable Cordova applications
Ivano Malavolta
 
Microsoft Entity Framework
Microsoft Entity FrameworkMicrosoft Entity Framework
Microsoft Entity Framework
Mahmoud Tolba
 
Meetup - Getting Started with MVVM Light for WPF - 11 may 2019
Meetup  - Getting Started with MVVM Light for WPF - 11 may 2019Meetup  - Getting Started with MVVM Light for WPF - 11 may 2019
Meetup - Getting Started with MVVM Light for WPF - 11 may 2019
iFour Technolab Pvt. Ltd.
 
Flex3 Deep Dive Final
Flex3 Deep Dive FinalFlex3 Deep Dive Final
Flex3 Deep Dive Final
RJ Owen
 
Angular Data Binding
Angular Data BindingAngular Data Binding
Angular Data Binding
Jennifer Estrada
 
Angular - Chapter 4 - Data and Event Handling
 Angular - Chapter 4 - Data and Event Handling Angular - Chapter 4 - Data and Event Handling
Angular - Chapter 4 - Data and Event Handling
WebStackAcademy
 
Knockout implementing mvvm in java script with knockout
Knockout implementing mvvm in java script with knockoutKnockout implementing mvvm in java script with knockout
Knockout implementing mvvm in java script with knockout
Andoni Arroyo
 
netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8
netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8
netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8
netmind
 

Similar to Introduction to XAML and its features (20)

WPF - Controls &amp; Data
WPF - Controls &amp; DataWPF - Controls &amp; Data
WPF - Controls &amp; Data
 
Knockoutjs databinding
Knockoutjs databindingKnockoutjs databinding
Knockoutjs databinding
 
KnockoutJS and MVVM
KnockoutJS and MVVMKnockoutJS and MVVM
KnockoutJS and MVVM
 
Will your code blend? : Toronto Code Camp 2010 : Barry Gervin
Will your code blend? : Toronto Code Camp 2010 : Barry GervinWill your code blend? : Toronto Code Camp 2010 : Barry Gervin
Will your code blend? : Toronto Code Camp 2010 : Barry Gervin
 
MVVM & Data Binding Library
MVVM & Data Binding Library MVVM & Data Binding Library
MVVM & Data Binding Library
 
Data Binding in Silverlight
Data Binding in SilverlightData Binding in Silverlight
Data Binding in Silverlight
 
Backbone.js
Backbone.jsBackbone.js
Backbone.js
 
Fundaments of Knockout js
Fundaments of Knockout jsFundaments of Knockout js
Fundaments of Knockout js
 
Rp 6 session 2 naresh bhatia
Rp 6  session 2 naresh bhatiaRp 6  session 2 naresh bhatia
Rp 6 session 2 naresh bhatia
 
Backbone.js
Backbone.jsBackbone.js
Backbone.js
 
Knockoutjs
KnockoutjsKnockoutjs
Knockoutjs
 
02.Designing Windows Phone Application
02.Designing Windows Phone Application02.Designing Windows Phone Application
02.Designing Windows Phone Application
 
Developing maintainable Cordova applications
Developing maintainable Cordova applicationsDeveloping maintainable Cordova applications
Developing maintainable Cordova applications
 
Microsoft Entity Framework
Microsoft Entity FrameworkMicrosoft Entity Framework
Microsoft Entity Framework
 
Meetup - Getting Started with MVVM Light for WPF - 11 may 2019
Meetup  - Getting Started with MVVM Light for WPF - 11 may 2019Meetup  - Getting Started with MVVM Light for WPF - 11 may 2019
Meetup - Getting Started with MVVM Light for WPF - 11 may 2019
 
Flex3 Deep Dive Final
Flex3 Deep Dive FinalFlex3 Deep Dive Final
Flex3 Deep Dive Final
 
Angular Data Binding
Angular Data BindingAngular Data Binding
Angular Data Binding
 
Angular - Chapter 4 - Data and Event Handling
 Angular - Chapter 4 - Data and Event Handling Angular - Chapter 4 - Data and Event Handling
Angular - Chapter 4 - Data and Event Handling
 
Knockout implementing mvvm in java script with knockout
Knockout implementing mvvm in java script with knockoutKnockout implementing mvvm in java script with knockout
Knockout implementing mvvm in java script with knockout
 
netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8
netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8
netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8
 

More from Abhishek Sur

Azure servicefabric
Azure servicefabricAzure servicefabric
Azure servicefabric
Abhishek Sur
 
Building a bot with an intent
Building a bot with an intentBuilding a bot with an intent
Building a bot with an intent
Abhishek Sur
 
Code review
Code reviewCode review
Code review
Abhishek Sur
 
C# 7.0 Hacks and Features
C# 7.0 Hacks and FeaturesC# 7.0 Hacks and Features
C# 7.0 Hacks and Features
Abhishek Sur
 
Angular JS, A dive to concepts
Angular JS, A dive to conceptsAngular JS, A dive to concepts
Angular JS, A dive to concepts
Abhishek Sur
 
Designing azure compute and storage infrastructure
Designing azure compute and storage infrastructureDesigning azure compute and storage infrastructure
Designing azure compute and storage infrastructure
Abhishek Sur
 
Service bus to build Bridges
Service bus to build BridgesService bus to build Bridges
Service bus to build Bridges
Abhishek Sur
 
Windows azure pack overview
Windows azure pack overviewWindows azure pack overview
Windows azure pack overview
Abhishek Sur
 
Di api di server b1 ws
Di api di server b1 wsDi api di server b1 ws
Di api di server b1 ws
Abhishek Sur
 
Integrating cortana with wp8 app
Integrating cortana with wp8 appIntegrating cortana with wp8 app
Integrating cortana with wp8 app
Abhishek Sur
 
Dev days Visual Studio 2012 Enhancements
Dev days Visual Studio 2012 EnhancementsDev days Visual Studio 2012 Enhancements
Dev days Visual Studio 2012 Enhancements
Abhishek Sur
 
Hidden Facts of .NET Language Gems
Hidden Facts of .NET Language GemsHidden Facts of .NET Language Gems
Hidden Facts of .NET Language Gems
Abhishek Sur
 
ASP.NET 4.5 webforms
ASP.NET 4.5 webformsASP.NET 4.5 webforms
ASP.NET 4.5 webforms
Abhishek Sur
 
Entity framework 4.0
Entity framework 4.0Entity framework 4.0
Entity framework 4.0
Abhishek Sur
 
Why do I Love C#?
Why do I Love C#?Why do I Love C#?
Why do I Love C#?
Abhishek Sur
 
Overview of Azure and Cloud Computing
Overview of Azure and Cloud ComputingOverview of Azure and Cloud Computing
Overview of Azure and Cloud Computing
Abhishek Sur
 
Asynchronous handlers in asp.net
Asynchronous handlers in asp.netAsynchronous handlers in asp.net
Asynchronous handlers in asp.net
Abhishek Sur
 
Memory Management & Garbage Collection
Memory Management & Garbage CollectionMemory Management & Garbage Collection
Memory Management & Garbage Collection
Abhishek Sur
 
How to become a Super Productive Developer
How to become a Super Productive DeveloperHow to become a Super Productive Developer
How to become a Super Productive Developer
Abhishek Sur
 
Secrets of .NET Assemblies and Memory Management
Secrets of .NET Assemblies and Memory ManagementSecrets of .NET Assemblies and Memory Management
Secrets of .NET Assemblies and Memory Management
Abhishek Sur
 

More from Abhishek Sur (20)

Azure servicefabric
Azure servicefabricAzure servicefabric
Azure servicefabric
 
Building a bot with an intent
Building a bot with an intentBuilding a bot with an intent
Building a bot with an intent
 
Code review
Code reviewCode review
Code review
 
C# 7.0 Hacks and Features
C# 7.0 Hacks and FeaturesC# 7.0 Hacks and Features
C# 7.0 Hacks and Features
 
Angular JS, A dive to concepts
Angular JS, A dive to conceptsAngular JS, A dive to concepts
Angular JS, A dive to concepts
 
Designing azure compute and storage infrastructure
Designing azure compute and storage infrastructureDesigning azure compute and storage infrastructure
Designing azure compute and storage infrastructure
 
Service bus to build Bridges
Service bus to build BridgesService bus to build Bridges
Service bus to build Bridges
 
Windows azure pack overview
Windows azure pack overviewWindows azure pack overview
Windows azure pack overview
 
Di api di server b1 ws
Di api di server b1 wsDi api di server b1 ws
Di api di server b1 ws
 
Integrating cortana with wp8 app
Integrating cortana with wp8 appIntegrating cortana with wp8 app
Integrating cortana with wp8 app
 
Dev days Visual Studio 2012 Enhancements
Dev days Visual Studio 2012 EnhancementsDev days Visual Studio 2012 Enhancements
Dev days Visual Studio 2012 Enhancements
 
Hidden Facts of .NET Language Gems
Hidden Facts of .NET Language GemsHidden Facts of .NET Language Gems
Hidden Facts of .NET Language Gems
 
ASP.NET 4.5 webforms
ASP.NET 4.5 webformsASP.NET 4.5 webforms
ASP.NET 4.5 webforms
 
Entity framework 4.0
Entity framework 4.0Entity framework 4.0
Entity framework 4.0
 
Why do I Love C#?
Why do I Love C#?Why do I Love C#?
Why do I Love C#?
 
Overview of Azure and Cloud Computing
Overview of Azure and Cloud ComputingOverview of Azure and Cloud Computing
Overview of Azure and Cloud Computing
 
Asynchronous handlers in asp.net
Asynchronous handlers in asp.netAsynchronous handlers in asp.net
Asynchronous handlers in asp.net
 
Memory Management & Garbage Collection
Memory Management & Garbage CollectionMemory Management & Garbage Collection
Memory Management & Garbage Collection
 
How to become a Super Productive Developer
How to become a Super Productive DeveloperHow to become a Super Productive Developer
How to become a Super Productive Developer
 
Secrets of .NET Assemblies and Memory Management
Secrets of .NET Assemblies and Memory ManagementSecrets of .NET Assemblies and Memory Management
Secrets of .NET Assemblies and Memory Management
 

Introduction to XAML and its features

  • 1. A little ‘bit’e of WPF Abhishek Sur
  • 2. The Windows Presentation Foundation (WPF) is a subset of the .NET Framework types that are located mostly in the namespace System.Windows and is tailor made for building Windows client applications with visually stunning user experiences. In other words it means resolution-independent display, usage of Extensible Application Markup Language (XAML), powerful data binding, control and data templates, various layout options, 2D and 3D graphics, animations, styles, flow documents, multimedia and a lot more features all rolled into one!
  • 3. SOME OF THE KEY FEATURES WE MIGHT LIKE TO SAIL THROUGH FOR TODAY’S SESSION ARE :
  • 4. RESOLUTION AND DEVICE-INDEPENDENT DISPLAY WPF got rid of this huge headache by incorporating Device Independent Pixels (DPI) which remains 1/96th of an inch, regardless of actual screen resolution. It is achieved by modifying the screen pixel density. It also uses a coordinate system of Improved precision for more accurate display.
  • 5. GRAPHICS AND ANIMATION SUPPORT It uses DirectX environment and can take advantage of the graphics hardware installed in the computer to minimize CPU usage. One highly advantageous point is that each part of the graphics we draw on screen is vector based and object oriented, so we have complete control to erase or modify each part of our display later on
  • 6. CONTROL TEMPLATES Wow! Another dream comes true for a developer. Now we can completely redesign the look of a control as per our wish. For example now each listboxitem in our listbox can have dynamic images, checkboxes, textboxes, dropdowns and whatever control we require to display that record. That’s what you call freedom! It also does one very important thing that is the XAML which takes care of the appearance and the model class which controls the behavior now becomes loosely coupled.
  • 7. 1. We define a Control Template <ControlTemplate TargetType="{x:Type ButtonBase}“ x:Key="btnBasicTemp"> <Grid Effect="{StaticResource ControlShadowEffect}"> <Rectangle x:Name="GelBackground“ RadiusX="9“ RadiusY="9" Fill="{TemplateBinding Background}“/> <ContentPresenter Margin="10,0,10,0“/> </Grid> </ControlTemplate> 2. A Style created for button uses that Control Template <Style TargetType="{x:Type ButtonBase}“ x:Key="btnBasic"> <Setter Property="Foreground“ Value="{StaticResource ButtonForegroundDefaultBrush}" /> <Setter Property="Background" Value="#567890"/> <Setter Property="Template“ Value="{StaticResource btnBasicTemp}" /> <Style.Triggers><MultiTrigger><MultiTrigger.Conditions> <Condition Property="IsMouseOver“ Value="True" /> <Condition Property="IsEnabled“ Value="True" /> </MultiTrigger.Conditions> <Setter Property="Foreground“ Value="{StaticResource btnHoverForeBrush}" /> </MultiTrigger></Style.Triggers> </Style> 3. A Button in form uses that Style <Button Style="{DynamicResource btnBasic}">Hi!</Button>
  • 8. EXAMPLE ARCHITECTURE : UI Layer View Model Business Logic Layer Data Layer Database
  • 9. EXAMPLE ARCHITECTURE : Window Window1.xaml INotifyPropertyChanged GroupsModel.cs – View Model Class Data Factory Classes Groups.cs - Singular & Plural Table classes IEnumerable Data Factory Classes Database
  • 10. DEPENDENCY PROPERTY It can be used just like a normal property but provides lot more extra features. Its value can be calculated indirectly from other usergiven inputs. • Property value coming from style <Style x:Key=“DefaultBtnStyle"> <Setter Property="Control.Background" Value=“SteelBlue"/> </Style> <Button Style="{StaticResource DefaultBtnStyle}">See my color!</Button> • Property value coming from data binding <TextBlock x:Name="txtMembers“ Text="{Binding Members}“/> • Property value coming from data binding dynamic resource <Button Style="{DynamicResource AlternativeBtnStyle}">Hi!</Button> • The property can inherit its value automatically from a parent element in the element tree which saves a lot of unnecessary duplication. • The property can report when the property value changes.
  • 11. DATA BINDING It is a process to transfer data between the controls of application UI and the properties of the model class. There are various modes to choose from depending on the situation. INotifyPropertyChanged is used to maintain continuous synchronization between the binding target and binding source. The UpdateSourceTrigger property of the binding determines which event triggers the update of the source. ICollectionView is used to implement Sorting, Filtering or Grouping on a data collection. UI Layer View Model Binding Target Binding Source Dependency One Way Property Property Two Way One Way To Source One Time Dependency Object Model Class Object ItemSource Observable Collection INotifyPropertyChanged SelectedItem Singular Element
  • 12. DATA TEMPLATE It is used to specify how data objects will be displayed in UI. <ListBox x:Name="lst" ItemsSource="{Binding GroupData}" SelectedItem="{Binding CurrentSingularData}"> <ListBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Vertical"> <TextBlock x:Name="txtName" Text="{Binding Name}"/> <TextBlock x:Name="txtMembers" Text="{Binding Members}"/> </StackPanel> <DataTemplate.Triggers> <DataTrigger Binding="{Binding Id}“ Value="{x:Null}"> <Setter TargetName="txtName“ Property="Text“ Value="Add New..." /> </DataTrigger> </DataTemplate.Triggers> </DataTemplate> </ListBox.ItemTemplate> </ListBox>
  • 13. MVVM – MODEL-VIEW-VIEWMODEL This is an architecture with a very loosely coupled design absolutely tailor-made for the WPF and Silverlight applications. • What we can see as the UI is known as the View. • The layer that arranges all the data in presentable format and supplies them to this View is the ViewModel. • The ViewModel gets it all from the Model. View ViewModel Model
  • 14. MVVM – MODEL-VIEW-VIEWMODEL (CONTINUED) The View-ViewModel binding is performed simply by setting a ViewModel object as the DataContext of a view. If property values in the ViewModel change, they automatically synchronize the view and ther is no need to write any code to update the view. As WPF supports Command Binding when we click a button in the View, a command on the ViewModel executes to perform the requested action. The beauty of this architecture lies in the fact that the ViewModel works independent of the View and so any existing UI design (View) can be altered to any extent and can be attached to the ViewModel again without any problem. Same relationship exist between the ViewModel and the Model making it a really modular and loosely coupled design.
  • 15. TRIGGERS A trigger is used to automatically perform some action if a certain condition is achieved. There are 3 trigger types in WPF. • Property Triggers • Event Triggers • Data Triggers • Property Triggers are executed when a property reaches a predefined value. <Style.Triggers> <Trigger Property="IsMouseOver“ Value="True"> <Setter Property="Background“ Value="#CCFFFF" /> </Trigger> </Style.Triggers>
  • 16. TRIGGERS (CONTINUED) • Event Triggers are executed when a particular event occurs. <Button Opacity="0" Content="Watch Me"> <Button.Triggers> <EventTrigger RoutedEvent="FrameworkElement.Loaded"> <BeginStoryboard Name="ActionName"> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:1" BeginTime="0:0:0.2" To="1.0" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Button.Triggers> </Button>
  • 17. TRIGGERS (CONTINUED) • Data Triggers are executed when a binding expression reaches a predefined value. <DataTemplate.Triggers> <DataTrigger Binding="{Binding Id}“ Value="{x:Null}"> <Setter TargetName="txtName“ Property="Text“ Value="Add New..." /> </DataTrigger> </DataTemplate.Triggers>
  • 18. VALUE CONVERTERS They are used when our binding source and target properties have incompatible datatypes and we need somebody to perform that conversion at the time of binding. These classes are derived from IValueConverter. 1. We have to write some code block like this inside our converter classes public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { bool check = System.Convert.ToBoolean(value); if (check) return Visibility.Visible; else return Visibility.Collapsed; } 2. This is how the bolVisConverter is implemented <Button Content="Delete“ Visibility="{Binding ElementName=lstStatuses, Path=Items.Count, Converter={StaticResource bolVisConverter}}"/>