2. XAML & WPF - WPF Layout-Containers

  • View

  • Download

Embed Size (px)


WPF Layout ContainersTelerik Software Academy: http://academy.telerik.com/school-academy/meetings/details/2012/02/02/desktop-applications-csharp-wpfThe website and all video materials are in Bulgarian.Containers OverviewContainers in XAMLThree Kinds of Containers (Panels)Absolute coordinates, Stacking, ProportionalGridSplitters and SizingXAML Tab Containers

Text of 2. XAML & WPF - WPF Layout-Containers

  • 1. WPF Layout Containers Panels, Tab ContainersDoncho MinkovTechnical Trainerhttp://www.minkov.itTelerik Software Academyacademy.telerik.com

2. Table of Contents Containers Overview Containers in XAML Three Kinds of Containers (Panels) Absolute coordinates, Stacking, Proportional GridSplitters and Sizing XAML Tab Containers 3. Containers OverviewWhat is a Container? Containers in XAML 4. What is a Container? A containers is something that contains other things In HTML divs and spans are containers They hold another controls / tags Used to represent the layout of the application Every container is given a space to consume All his children are in this space 5. Containers in WPF In WPF containers are called Panels Three common types of panels Panels with absolute coordinates Panels with stacking order Panels with proportional or with rows/columns Absolute coordinates Panels Canvas Controls inside the canvas are arranged based on the Canvas position and size 6. Containers in WPF (2) Stacking Panels StackPanel, DockPanel, WrapPanel Elements are arranged in a stacking order i.e. first come goes in the beginning Proportional Panels Grid and UniformGrid Arrange the elements in a table-like layout 7. The Canvas Container The Canvas is a layout container Its an element that holds other elements It simply positions each item using fixedcoordinates Places elements behind or in front of others(depending on the z-order) Supports size and clipping 8 8. The Canvas Container (2) Positioning elements in a Canvas Using attached properties Heres an example that places aRectangle at specific location in a Canvas9 9. The Canvas Container (3) Placing elements behind or in front of others depends on the z-order Defines which elements are on top of theother elements The default z-order Determined by the order in which the childrenare added to the Canvas Customize the z-order of any child element using Canvas.ZIndex attached property10 10. The Canvas Container Example 11 11. Customize the Z-order andMultiple Canvas Elements Live Demo 12. Stacking PanelsStackPanel, DockPanel, Wrap Panel 13. StackPanel The StackPanel arrangesthe elements in one row/column Depends on the orientation property If the size of each element is not explicitly set all elements have the same width/height Can set flow orientation Vertical or Horizontal 14. WrapPanel The WrapPanel is much like StackPanel but if the end of the available space is reached Arranges the elements in the next row/columns Depends on the orientation property Example: 15. DockPanel The DockPanel provides docking of elements to the left, right, top, bottom of the panel Defined by the attached property Dock To dock an element to the center of the panel, it must be the last child of the panel LastChildFill property must be set to true. 16. Stacking PanelsLive Demo 17. Proportional Panels Grid and UniformGrid 18. Grid Panel The most powerful layout container in WPF Everything can be done with Grid Sometimes a way harder than using StackPanel Arranges the elements in a table-like layout Predefined number of rows and columns Each element has explicitly set grid row/column Using the attached properties Grid.Row andGrid.Column If no columns/rows are defined, works the like canvas 19. Grid Panel (2) Number of rows is defined by a content property called "RowDefinitions" Each row can be set a height It is the same with "ColumnDefinitions" 20. Grid Panel (3) Each of the elements in a Grid shouldhave a Grid.Row and/or Grid.Column property set 21. UniformGrid Panel Much like the common Grid panel Cannot set position explicitly Each elements is with the same size Fills the elements depending of the number of rows/columns FlowDirection property sets the arrange style of the elements 22. Proportional PanelsLive Demo 23. GridSplitters 24. GridSplitter Offer the user a way to adjust the layout of your application Changing the size of a column or row in a grid Use GridSplitter only to rearrangea Grid panel 25 25. GridSplitterLive Demo 26. Sizing 27. Sizing There are a number of properties to set the size of a panel or the elements in it Width, Height, MaxWidth, MaxHeight,MinWidth, MinHeight Padding and Margin 28. SizingLive Demo 29. Border Container 30. Border Container The Border container is a special kind of container It can hold only one child element The child element becomes surrounded by aborder The Border properties for border style BorderBrush BorderThickness CornerRadius 31. Border Example Lets make a window with no Windows border, Lets have no rounded corners and transparent backgroundWindows Border 32. Border Container Live Demo 33. TabControl 34. TabContol TabControl is useful for switching between multiple pages of content Tabs in a TabControl are typically placed on the top Content for Tab1.Content for Tab2.Content for Tab3. TabStripPlacement property can set their placement to Left, Right, or Bottom 35 35. TabControlLive Demo 36. XAML Layout Containers , BG Coder - - online judge , ASP.NET - , , C#, .NET, ASP.NEThttp://academy.telerik.com ASP.NET MVC HTML, SQL, C#, .NET, ASP.NET MVC SEO - , , iPhone, Android, WP7, PhoneGap , HTML, CSS, JavaScript, Photoshop - free C# book, C#, Java, C# - " " " cloud " C# , , 37. Exercises1. Create the following: *Note: Dont use Grid for everything 38. Exercises (2)2. Create the following: *Note: Dont use Grid for everything 39. Exercises (3)3. Using Tabs create the previous XAMLs in tab controls4. Add GridSplitter whenever you used Grid as a panel 40. Free Trainings @ Telerik Academy Desktop Applications with C# and WPF academy.telerik.com/ Telerik Software Academy academy.telerik.com Telerik Academy @ Facebook facebook.com/TelerikAcademy Telerik Software Academy Forums forums.academy.telerik.com