How to scale a panel to the size of it's parent

How-to Discussions
1

I have a panel that I’ve put down in the corner using Alignment and Height/Width:

<Panel Alignment="BottomRight" Margin="10" ux:Name="addPanel" Height="70" Width="70">

When I click it, I want it to fill the screen, but <Change addPanel.Height="100%"/> doesn’t compile. To demonstrate roughly what I’m trying to achieve, I’m using absolute heights and widths, but this obviously doesn’t adapt to various screen sizes:

<Change addPanel.Height="300" Duration=".3" Easing="CubicIn"/>
<Change addPanel.Width="200" Duration=".3" Easing="CubicIn"/>

Here’s a screenshot of what I have now:

file

Any ideas how I can get it to scale to the full size of the screen?

2

One option here is to use LayoutMaster. This makes the size of an element be a slave to that of another element.

There are several ways to use this feature. For this situation I’d start by making the element the full-size of the screen, and then setting the layout master to the small element when it is minimized. Something like:

<ClientPanel>
    <Panel ux:Name="VariPanel">... your full sized panel...</Panel>
    <Panel Alignment="BottomRight" Height="70" Width="70" ux:Name="SmallPlace"/>

    <WhileTrue ux:Name="Minimized">
        <Change VariPanel.LayoutMaster="SmallPlace"/>
    </WhileTrue>

You’ll need to combine this probably with a LayoutAnimation and various other changes to get a satisfying effect.

1 Like
3

Thanks a lot! I’ve got the basics working now:

file

I’m using this as my LayoutAnimation:

<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>

However, if I change my LayoutAnimation to CubicIn, I get this weird result:

file

Is that a bug, or did I do something wrong?

My full project at this time is captured in this commit: https://github.com/knatten/ChoreScore/commit/119b379a2aa929ca75dee2bae20f4f02aeba4ae4

4

I’m undecided yet if there is a defect, I’m still investigating that. But I have a solution that works with CubicIn. Instead of a single WhileFalse split this into two triggers:

<WhileFalse ux:Name="adding">
    <Change addPanel.LayoutMaster="corner" />
    <Change smallMode.Value="true"/>
</WhileFalse>

<WhileTrue ux:Name="smallMode">
    <Change addRect.CornerRadius="35" Duration=".3" Easing="CubicIn"/>
    <Change addPersons.Opacity="0" Duration=".3" DelayBack=".3" Easing="CubicIn"/>
    <Change addState.Active="button"/>
    <DebugAction Message="adding false"/>
</WhileTrue>

It’s important here not to combine your Change ... LayoutMaster with those other animators, the ones with duration. This leads to a timing mismatch as to when the layout change is actually done. By using two triggers you ensure that the two state switches happen at the same time, and the other animations can then play on their own timelines.

This is a very common pattern when combining multiple animations: use a common trigger to simply turn on/off the state of several others. This allows each to have it’s own timeline.

As to why you get the specific behaviour without doing this, that I’m unsure and still looking at.

5

Nice, thanks! Separating the timelines fixed some other weirdness I hadn’t looked into yet too.