How to set the blue rectangle position and size permanently

How-to Discussions
1 
<App Theme="Basic">
    <DockPanel>
        <Rectangle ux:Name="Target" Dock="Top" Margin="10" Fill="#ffcf00" CornerRadius="10" Width="100" Height="100"/>


        <StackPanel Orientation="Horizontal">
            <Each Count="3">
                <Rectangle ux:Name="Source" Dock="Bottom" Margin="10" Fill="#0094ff" CornerRadius="10" Width="100" Height="100">
                    <Clicked>
                        <Move Target="Target" RelativeTo="PositionOffset" RelativeNode="Source" Vector="1" Duration="0.4" DurationBack="0.4" />
                        <Resize Target="Target" RelativeTo="Size"         RelativeNode="Source" Vector="1" Duration="0.4" DurationBack="0.4" />
                    </Clicked>
                </Rectangle>
            </Each>
        </StackPanel>

    </DockPanel>
</App>

@duckers say that i need to use states, but how to pass the blue rectangle position and size to the state?

2

Hi there!

Here is a version that uses LayoutMaster to do this:

<App Theme="Basic">
    <DockPanel>
        <Panel Dock="Top" Margin="10" Width="100" Height="100">
            <Rectangle ux:Name="Target" Fill="#ffcf00" CornerRadius="10">
                <LayoutAnimation>
                    <Move Target="Target" RelativeTo="PositionChange" Vector="1" Duration="0.4" DurationBack="0.4" />
                    <Resize Target="Target" RelativeTo="SizeChange" Vector="1" Duration="0.4" DurationBack="0.4" />
                </LayoutAnimation>
            </Rectangle>
        </Panel>

        <StackPanel Orientation="Horizontal">
            <Each Count="3">
                <Rectangle Name="Source" Dock="Bottom" Margin="10" Fill="#0094ff" CornerRadius="10" Width="100" Height="100">
                    <Clicked>
                            <Set Target.LayoutMaster="Source" />
                    </Clicked>
                </Rectangle>
            </Each>
        </StackPanel>
    </DockPanel>
</App>

It’s only a slight modification to your original code. I hope it helps :slight_smile: