BUILD 2014 – Day 1 Keynote

BUILD 2014 – Day 1 Keynote – My notes.  (Complete with tons of screengrabs).

#1,042 – How FlowDirection Affects a StackPanel

Changing the FlowDirection property of a StackPanel changes how it lays out elements when its Orientation is set to Horizontal.

When Orientation is Horizontal and FlowDirection is LeftToRight (the default), each label’s width is set to fit its content.  The label’s height is stretched to fill the container.  Labels are arranged left to right.

1042-001

 

Changing FlowDirection to RightToLeft, the labels are arranged from right to left.

1042-002

 

If Orientation is Vertical and FlowDirection is LeftToRight, the labels’ width now sizes to fit the container and their height is set to match the content.  The labels are arranged from top to bottom in the StackPanel.

1042-003

Changing FlowDirection to RightToLeft when the orientation is Vertical does not change how the labels are arranged.  They are still ordered from top to bottom in the StackPanel.  The content of the labels, however, is now right-aligned, rather than left-aligned.

1042-004

#1,041 – Stretched Child Elements Not Stretched when Rotated

A value of Stretch for HorizontalAlignment or VerticalAlignment means that a child control should be stretched to fill the available width (HorizontalAlignment) or height (VerticalAlignment).  This is the default setting for child elements in a StackPanel.

If a rotate or skew transform is being applied using a LayoutTransform, however, the element will only be stretched when the rotation or skew angle is a multiple of 90.

In the example below, notice that the middle button is initially stretched, but then is not stretched as soon as we start rotating it.  It is stretched again once we rotate it by 90 and 180 degrees.

    <StackPanel>
        <Slider Name="sliRotate" Margin="10,10,10,0"
                Minimum="0" Maximum="359"
                TickFrequency="1" IsSnapToTickEnabled="True"/>
        <Label Content="{Binding Path=Value, ElementName=sliRotate}"
               HorizontalAlignment="Center"
               Margin="0,0,0,10"/>
        
        <Button Content="Eat" Padding="0,5"/>
        <Button Content="Love" Padding="0,5">
            <Button.LayoutTransform>
                <RotateTransform Angle="{Binding Path=Value, ElementName=sliRotate}"/>
            </Button.LayoutTransform>
        </Button>
        <Button Content="Pray" Padding="0,5"/>
    </StackPanel>

1041-001
1041-002
1041-003
1041-004
1041-005