Learn Enterprise WPF with XAML from Scratch

  • View

  • Download

Embed Size (px)

Text of Learn Enterprise WPF with XAML from Scratch


Learn Enterprise WPF with XAML from Scratch

Elias Fofanov


Course OutlineThis course covers:ControlsLayoutProperties and EventsData BindingResourcesStyles, Triggers, Templates, SkinsUser Controls and Custom ControlsApplication Model

Introduction OutlineYou will be able to answer the following questions:Why you should choose WPF as a UI-development platform?What is the actual status of the WPF-platform? Is it alive?What tools supporting WPF exist and whats their status?How the WPF-architecture is organized?What are the basic notions of UI-development, which every UI-developer should be aware of?

Why WPF?Windows FormsRendering based on GDI and GDI+Lack of hardware acceleration supportHard to use for hardware animationUnable to harness the power of modern graphics cardsWPFIntegratedResolution IndependenceSeparation of programming and designing concernsInfinite possibilities of customizationSimplicity of styling

WPF ArchitectureVideo driverComposition Engine (MIL)PresentationCore.dllPresentationFramework.dllDirectXWindowBase.dllManagedUnmanagedKernel

The Future of WPF

PerformanceModern HardwareToolingBugs-FixingDirectX Integration


WPF Tools

Interactive tool which provides reach experience of creating sophisticated designs and layouts.Provides reach coding and debugging experience .

WPF Tools Recent Improvements

New performance tool - TimelineImproved debugging of bindings and visual treesConsistent look and feel with Visual StudioPowerful Solution ExplorerPowerful IntelliSense Enhanced navigation through the XAML-codeSeveral improvements reduce the number of switches between Blend and Visual Studio

Basics of UI-DevelopmentDPI (dots per inch), PPI (pixels per inch)PixelRaster Graphics and Vector GraphicsIndependent Pixel ;

Aspect RatioClearType rendering

Text RenderingTextOptions.TextFormattingMode can be set toIdealorDisplayTextOptions.TextRenderingMode can be set to Auto, Aliased, Grayscale, ClearType.

SummaryWPF is a preferable technology of building Windows UI-applicationsWPF has a future as a part of the .NET-platformBlend and Visual studio are the great tools supporting WPFNow you have a grip on basics of UI-developmentYou were introduced to XAML-basics and how it works


Elias Fofanov


OutlineButtonsContainers with HeadersRange ControlsItems ControlsText InputImages and Menu Controls

Class HierarchyObjectDispatcherObjectDependencyObjectVisualUIElementFrameworkElementContentPresenterControlPanelShapeContentControlToggleButtonLabelButtonComboBoxItemsControlListBoxShapeCanvasStackPanelGridWrapPanelRectangleEllipsePathLine


Headered Content ControlsFrameworkElementControlContentControlHeaderedContentControlExpanderGroupBoxContent propertyHeader property

Range ControlsFrameworkElementControlRangeBaseSliderProgressBarBrings properties:ValueMinimumMaximumSmallChangeLargeChangeOrientation


Items ControlsFrameworkElementControlComboBoxItemsControlListBoxTabControlTreeViewBrings properties:Items (readonly)ItemsSourceDisplayMemberPathItemsPanelItemTemplate

SelectorsSelector exposes: SelectedItemSelectedIndexSelectedValueSelectedValuePath

Selectors allow to select indexed items.ItemsControlSelectorvoid SelectionChangedEventHandler(object sender, SelectionChangedEventArgs e);Selector exposes SelectionChanged event of signature:SelectionChangedEventArgs exposes: IList AddedItemsIList RemovedItems

ImageSelector exposes: SourceImageSourceStretchStretchDirectionImage is a control for hosting images.Rendering quality is controlled via the RenderingOptions.BitmapScalingMode: Fant, HighQuality, Linear, LowQuality, NearestNeighbor

None, Fill, Uniform, UniformToFillBoth, DownOnly, UpOnly


SummaryControls and Primitive ElementsButtonsHeadered Content ControlsRange ControlsItems ControlsTextBox, TextBlock, LabelMenu Controls


Elias Fofanov


OutlineLayout Core TypesLayout ProcessSizing ElementsPositioning ElementsViewBoxPanels: StackPanel, WrapPanel, DockPanel, Grid

Layout Core TypesUIElement exposes Measure and Arrange methodsFrameworkElement exposes Height, Width, HorizontalAlignment, VerticalAlignmentPanel is the base class for all panels

Layout ProcessStep 1. Each UI-element determines its DesiredSizeEach element asks its children (by calling the Measure method on each child) how much space do they want to encompass.Step 2. Assign sizes and positions Elements recursively call on their children the Arrange method passing the size allocated for each child and the position from which the child can arrange itself.Layout process consists of two steps: Measure Arrange

Sizing UI ElementsFrameworkElement: Width, HeightMinWidth, MinHeight

double.NaN by defaultThickness MarginThickness Control.Padding margin between external controls boundaries and its internal content Visibility UIElement.VisibilityVisible, Collapsed, Hidden

Positioning UI ElementsAlignments have an impact on the layout only when the DesiredSize of a control is less than the available size for its rendering.FrameworkElement: VerticalAlignmentHorizontalAlignment

Top, Center, Bottom, StretchControl: VerticalContentAlignmentHorizontalContentAlignmentLeft, Right, Center, Stretch

ViewBoxViewBox can scale its inner Content.FrameworkElementDecoratorViewBoxExposes two Properties: StretchStretchDirection

None, Fill, Uniform, UniformToFillBoth, DownOnly, UpOnly


PanelPanels compose UI-elements together.UIElementFrameworkElementPanelPanel exposes: UIElementCollection ChildrenPanels: Canvas, StackPanel, WrapPanel, DockPanel and Grid

CanvasCanvas allows to use absolute positioning of its child UI-elements.

StackPanelStackPanel allows to arrange UI-elements in stacks. Exposes: Orientation

Horizontal, VerticaldefaultVertical StackPanel allows to align children HorizontallyHorizontal StackPanel allows to align children Vertically

WrapPanelWrapPanel allows to arrange UI-elements in stacks wrapping them in case of overflow. Vertical WrapPanel adds a column when children overflow panels heightHorizontal WrapPanel adds a row when children overflow panels width

Exposes: OrientationItemWidthItemHeight

Horizontal, VerticaldefaultUniform sizes

DockPanelDockPanel allows to arrange UI-elements by docking them to borders.Last child fills the remaining space unless LastChildFill is set to falseIf LastChildFill is set to true, then the last childs Dock value is ignored

Exposes: DockLastChildFill

Left, Right, Bottom, TopTrue\Falsedefault

GridGrid allows to arrange UI-elements in rows and columns.

Exposes: RowDefinitionsColumnDefinitionsUsed for defining rows and columnsTo position children inside a Grid: Grid.Row, Grid.ColumnGrid.RowSpan, Grid.ColumnSpan

GridRowDefinition and ColumnDefinition: GridLength Height, Widthdouble MinHeight, MinWidthGridLength can be set to:


Height is Fixed