Introduction to XAML and its features


Published on

  • Be the first to comment

Introduction to XAML and its features

  1. 1. A little ‘bit’e of WPF Abhishek Sur
  2. 2. The Windows Presentation Foundation (WPF) is a subset of the .NETFramework types that are located mostly in the namespaceSystem.Windows and is tailor made for building Windows clientapplications with visually stunning user experiences.In other words it means resolution-independent display, usage ofExtensible 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 featuresall rolled into one!
  4. 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 coordinatesystem of Improved precision for more accurate display.
  5. 5. GRAPHICS AND ANIMATION SUPPORT It uses DirectX environment and can take advantage of the graphics hardwareinstalled in the computer to minimize CPU usage. One highly advantageouspoint is that each part of the graphics we draw on screen is vector based andobject oriented, so we have complete control to erase or modify each part ofour display later on
  6. 6. CONTROL TEMPLATESWow! Another dream comes true for a developer. Now we can completelyredesign the look of a control as per our wish. For example now eachlistboxitem in our listbox can have dynamic images, checkboxes, textboxes,dropdowns and whatever control we require to display that record. That’swhat you call freedom! It also does one very important thing that is the XAMLwhich takes care of the appearance and the model class which controls thebehavior now becomes loosely coupled.
  7. 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. 8. EXAMPLE ARCHITECTURE : UI Layer View Model Business Logic Layer Data Layer Database
  9. 9. EXAMPLE ARCHITECTURE : Window Window1.xamlINotifyPropertyChanged GroupsModel.cs – View Model Class Data Factory Classes Groups.cs - Singular & Plural Table classes IEnumerable Data Factory Classes Database
  10. 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. 11. DATA BINDINGIt 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 tomaintain continuous synchronization between the binding target and bindingsource. The UpdateSourceTrigger property of the binding determines which event triggers the update of thesource. 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. 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. 13. MVVM – MODEL-VIEW-VIEWMODELThis is an architecture with a very loosely coupled design absolutelytailor-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 suppliesthem to this View is the ViewModel.• The ViewModel gets it all from the Model.View ViewModel Model
  14. 14. MVVM – MODEL-VIEW-VIEWMODEL (CONTINUED)The View-ViewModel binding is performed simply by setting a ViewModelobject 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 toupdate the view. As WPF supports Command Binding when we click a button inthe View, a command on the ViewModel executes to perform the requestedaction.The beauty of this architecture lies in the fact that the ViewModel worksindependent of the View and so any existing UI design (View) can be altered toany extent and can be attached to the ViewModel again without any problem.Same relationship exist between the ViewModel and the Model making it areally modular and loosely coupled design.
  15. 15. TRIGGERSA trigger is used to automatically perform some action if a certain condition isachieved. 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. 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. 17. TRIGGERS (CONTINUED)• Data Triggers are executed when a binding expression reaches a predefinedvalue.<DataTemplate.Triggers> <DataTrigger Binding="{Binding Id}“ Value="{x:Null}"> <Setter TargetName="txtName“ Property="Text“ Value="Add New..." /> </DataTrigger></DataTemplate.Triggers>
  18. 18. VALUE CONVERTERSThey are used when our binding source and target properties have incompatibledatatypes and we need somebody to perform that conversion at the time ofbinding. These classes are derived from IValueConverter.1. We have to write some code block like this inside our converter classespublic 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}}"/>