#571 – Moving Windows Around in Blend

June 1, 2012 2 Comments

While working in Blend, there are a number of different windows (panels) that you work with.  The image below shows the default configuration, with the Tools panel on the far left, and another panel with Projects/Assets/Triggers/States tabs, etc.

You can move any of these windows around within Blend, except for the artboard (the area in the center of the screen that contains the Design and XAML views.  The artboard will take up all remaining space not used by other windows.

To move a window, left-click and drag it to the desired location.  For example, we can move the panel containing the Objects and Timeline tab, so that it sits below the panel containing the Properties tab.

You can also left-click and drag on a particular tab, to move it to another panel.  (E.g. Move Resources tab down next to Objects and Timeline).

Advertisement

Filed under Blend Tagged with , , ,

#388 – Layout Containers Don’t Provide Scrolling Support

September 16, 2011 1 Comment

None of the WPF panel controls (containers) automatically provide scrollbars.  If their child controls do not fit in the available space, the child controls are clipped.

In the example below, we have a vertical StackPanel with a series of Label controls.  Notice that the first label doesn’t fit the width of the window and is clipped on the right.  The last label also does not fit and is clipped at the bottom of the window.

Filed under Layout Tagged with , , ,

#386 – Layout = Panels + FrameworkElements + Alignment/Margins/Padding

September 14, 2011 1 Comment

Layout in WPF is the process by which the location and size of all user interface elements is determined.

A user interface is composed of an outer Window or Page which contains a hierarchy of user interface elements.  The hierarchy can contain individual user interface elements or Panels, which in turn contain a collection of child FrameworkElements.

Panel is an abstract class that serves as a parent for specific layout panels, including Canvas, DockPanel, Grid, StackPanel and WrapPanel.

A panel will contain a collection of child FrameworkElement instances.  These can be individual controls that derive from FrameworkElement, directly or indirectly.  Because Panel is itself a child of the FrameworkElement class, a panel can contain other panels.

FrameworkElement child elements are position within a parent using properties related to alignment, margins and padding.  These properties include:

  • HorizontalAlignment, VerticalAlignment  and Margin  (from FrameworkElement)
  • HorizontalContentAlignment, VerticalContentAlignment and Padding  (from Control)

Filed under Layout Tagged with , , , , , , , ,

#319 – The StackPanel Stacks Controls Vertically or Horizontally

June 13, 2011 Leave a comment

StackPanel is a container that allows arranging its child controls in a single column vertically or a single row horizontally.

Like other panels, StackPanel contains child elements that are instances of the UIElement class.

    <StackPanel>
        <Label Content="Gene Autry"/>
        <Button Content="I Like Gene"/>
        <Label Content="Roy Rogers"/>
        <Button Content="I Like Roy"/>
        <Label Content="Tex Ritter"/>
        <Button Content="I Like Tex"/>
        <Label Content="Jorge Negrete"/>
        <Button Content="I Like Jorge"/>
    </StackPanel>


By default, StackPanel stacks its controls vertically.  You can stack them horizontally using the Orientation property.  You can specify the orientation in XAML as either Horizontal or Vertical.

    <StackPanel Orientation="Horizontal">
        <Label Content="Gene Autry"/>
        <Button Content="I Like Gene"/>
        <Label Content="Roy Rogers"/>
        <Button Content="I Like Roy"/>
        <Label Content="Tex Ritter"/>
        <Button Content="I Like Tex"/>
        <Label Content="Jorge Negrete"/>
        <Button Content="I Like Jorge"/>
    </StackPanel>

Filed under Layout Tagged with , , ,