• Canvas

• StackPanel
• WrapPanel
• -----
• DockPanel
• Grid
 DockPanel

• easy docking of elements to an entire side

• superset of stackpanel
 Grid
• most versatile... def. in VS and expression
blend
• arrange in multirow multicolumn
• like a table in html
• also a Table class which is a
frameworkContentElement not a UIElement
• specify individual rows cols... verbose... but
useful to specify details... default 1 cell
• position elements using Row and Column
attached properties (zero-based) def... 0,0
• multiple elements in same cell simply
overlap by z-order... cells can be empty
• online article list too small... and start page label
• spanning rows n cols
• RowSpan n ColumnSpan 1 by def
• by def. height n width are same
• Height n Width = “Auto” size to content
• ShowGridLines = “True”
• background colors, padding, and borders for Grid
cells
• to fill use a rectangle
• for padding give the child appropriate margin and
use auto-sizing
• for border, rectangle with stroke or a border element
• add before the real element or set zindex explicitly
 sizing row n cols
• RowDefinition n Col.. Height n Width not double but GridLength and not default
to Auto or NaN
• three types
• Absoulte sizing: dev ind px... no grow shrink
• Autosizing: size to content
• Proportional or star sizing: grows or shrinks
• when 1 row col * all remaining space
• when more row col * divides remaining space
• can be 2* or 5.5*... 2* is twice as * (1*)... 5.5* is twice as 2.75*
• remaining space is after absolute n autosized rows or cols
• def width n height are *
• why not %age sizing
• GridLength in procedural code
• GridLengthConverter... and GridUnitType enumeration
• absolute: GridLength length = new GridLength(100);
• GridLength length = new GridLength(100, GridUnitType.Pixel);
• autosizing: GridLength length = new GridLength(0,
GridUnitType.Auto);
• or just GridLength.Auto
• star-sizing: GridLength length = new GridLength(2,
GridUnitType.Star); is like 2*... for * use 1
 Interactive sizing
• GridSplitter... any number can be added to a Grid
• can be use to move entire row col...
• atleast one cell resizes... other cells behavior depends on weather
absolute sizing or proportional
• fits in one cell, but behavior affects entire row or col so better to
use span
• which cells are affected depends on GridSplitter’s alignment
values
• def. horizontalalignment=right n verticalalignment=stretch
• reasonable use... stretch in one dimension
• when all proportionally sized... changes co-efficients accordingly
• when abs siz.
• changes only top or left of the cells... remaining cells pushed down or right
• also has ResizeDirection (def. Auto, or Rows, Cols) and ResizeBehavior for
explicit control
• ResizeDirection effect only when stretching in both directions
• ResizeBehavior defaults to BasedOnAlignment
• can be set to PreviousAndCurrent, CurrentAndNext, or PreviousAndNext to
control which 2 rows or columns should be directly affected by resizing
• best way is to place it in its own autosized row or col so it doesnt overlap
existing content
• SharedSizeGroup enables multiple row cols
to remain the same width height when
length changed via GridSplitter
• IsSharedScope because sizegroups can be
shared across multiple grids
• all uses must be under a common parent
with issharedscope set to true
• it is an attached property of grid as well
• grid usually the best choice
• except wraping can do most...
• canvas... single cell, set horizontalalignment and
verticalalignment and then control with Margin
• stackpanel... single col... autosized rows
• dockpanel... using rowspan and colspan
• but choose reasonably...
System.Windows.Contr
ols.Primitive
• not general purpose... useful for restyling built-in control or for a custom
control
• TabPanel: like WrapPanel ... used by TabControl... horizontal , equal
stretching when second row etc.
• ToolBarPanel: for ToolBar, like StackPanel, works with an Overflow panel
for items that dont fit
• ToolBarOverflowPanel: like Wrap Panel
• ToolBarTray: only supports toolbar children... arranges sequentially... allows
to drag around
• UniformGrid... all row cols are size * n cant be changed
• SelectiveScrollingGrid... Grid subclass... allows freezing cells while rest
scrolls... SelectiveScrollingOrientation=None, Horizontal, Vertical, Both (d)
 Content Overflow
• an element marked with explicit width wider than the
containing panel... or too many listbox items not fitting in
containing window
• Deal using: . Clipping . Scrolling . Scaling
. Wrapping . Trimming
• wrapping already seen... only way for non-text is using
wrappanel
• trimming is intelligent form of clipping.. .supported for
text by TextBlock and AccessText... they have
TextTrimming=None (d), CharacterEllipsis, WordEllipsis
 Clipping
• def behavior.. .edges of panel or cell area of dock area
• all uielements ClipToBounds... bool... controls if it can draw
outside bounds... still not outside the window or page
• most panels clip regardless... canvas and uniformgrid dont
unless this property
• size of canvas does not matter ?
• inside controls... Button has this property false by d
• place canvas inside a grid cell to avert clipping
• clipping is done before rendertransform.. cant shrink back
 Scrolling

• System.Windows.Controls.ScrollViewer control
• Content property ...
• so in xaml
• VerticalScrollBarVisibility and HorizontalScrollBarVisibility=
Visible,Auto,Hidden (arrow keys),Disabled
• Vertical=Visisble, Horizontal=Auto by d
• Difference between hidden n disabled for wrappanel
• def. visual tree for listbox contains a scrollviewer
 Scaling
• scrolling more popular but e.g. card game
• scaletransform works relative to their own size not available
size
• System.Windows.Controls.Viewbox, a type of class called
Decorator (also Border)... a panel-like thing but only one
child
• Stretches to fill available space by def... but also
Stretch=None (like not using at all), Fill, Uniform (aspect
ratio, def), UniformToFill (cropped)
• StrechDirection=UpOnly, DownOnly, Both (def)
how easy to change
• viewbox + wrapPanel... bad idea
• lets make a VS like interface