LayoutMaster attached property on Element

Attached by LayoutControl. Use full name Element.LayoutMaster in UX markup if ambiguous.

Makes an element inherit the layout of another.

Examples

The following example will result in two overlapping Rectangles.

<StackPanel>
    <Rectangle ux:Name="master" Height="150" Color="#f00a" />
    <Rectangle LayoutMaster="master" Color="#00fa" />
</StackPanel>

Changing the LayoutMaster of an element will trigger any LayoutAnimations on that element. The above example illustrates how LayoutMaster can be used to implement a moving selection rectangle. It consists of two panels that when clicked, animate the selection Rectangle to inherit their size and position.

<Panel>
    <Rectangle ux:Name="selection" LayoutMaster="target1">
        <Stroke Width="2" Brush="#3498db" Offset="2" />
        <LayoutAnimation>
            <Move RelativeTo="WorldPositionChange" X="1" Y="1" Duration="0.3" Easing="CubicInOut" />
            <Resize RelativeTo="SizeChange" X="1" Y="1" Duration="0.3" Easing="CubicInOut" />
        </LayoutAnimation>
    </Rectangle>

    <StackPanel>
        <Panel ux:Name="target1" Margin="10" Height="50" Background="#eee">
            <Text Alignment="Center">Click me</Text>
            <Clicked>
                <Set selection.LayoutMaster="target1" />
            </Clicked>
        </Panel>
        <Panel ux:Name="target2" Width="150" Height="100" Background="#eee">
            <Text Alignment="Center">Me too!</Text>
            <Clicked>
                <Set selection.LayoutMaster="target2" />
            </Clicked>
        </Panel>
    </StackPanel>
</Panel>

Location

Namespace

Fuse.Controls

Package

Fuse.Controls.Panels 2.9.1

Parameters

elm

Element

master

Element