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

**URL:** <https://forums.fusetools.com/t/how-to-scale-a-panel-to-the-size-of-its-parent/6047>\
**Category:** How-to Discussions\
**Created:** [February 19, 2016, 8:46am UTC](https://forums.fusetools.com/t/how-to-scale-a-panel-to-the-size-of-its-parent/6047 "2016-02-19T08:46:42Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Anders\_Schau\_Knatten](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_schau_knatten/32/41_2.png) [@Anders\_Schau\_Knatten](https://forums.fusetools.com/u/Anders_Schau_Knatten)\
**Post date:** [February 19, 2016, 8:46am UTC](https://forums.fusetools.com/t/how-to-scale-a-panel-to-the-size-of-its-parent/6047/1 "2016-02-19T08:46:42Z")

</div>

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

```auto
<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:

```auto
<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](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/nCZlTS512Bod-legacy-files-ayI3MhFudDsxOidI--GlOYtwDS3OYJxAhGPnjB8NE.gif)

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

---

<div class="post-metadata">

**Author:** ![edA-qa\_mort-ora-y](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/eda-qa_mort-ora-y/32/124_2.png) [@edA-qa\_mort-ora-y](https://forums.fusetools.com/u/edA-qa_mort-ora-y)\
**Post date:** [February 19, 2016, 8:53am UTC](https://forums.fusetools.com/t/how-to-scale-a-panel-to-the-size-of-its-parent/6047/2 "2016-02-19T08:53:40Z")

</div>

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:

```auto
<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.

---

<div class="post-metadata">

**Author:** ![Anders\_Schau\_Knatten](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_schau_knatten/32/41_2.png) [@Anders\_Schau\_Knatten](https://forums.fusetools.com/u/Anders_Schau_Knatten)\
**Post date:** [February 19, 2016, 10:16am UTC](https://forums.fusetools.com/t/how-to-scale-a-panel-to-the-size-of-its-parent/6047/3 "2016-02-19T10:16:45Z")

</div>

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

![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/ETAC7Zb9d6vz-legacy-files-rEwYpHlFm9hDuz69-uXgtJo4CGvKGXJxj_nZbOp2A.gif)

I’m using this as my `LayoutAnimation`:

```auto
<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](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/uB9sC8n3kdqJ-legacy-files-Wma3ja57lwaKVRkZ-NzYlKR3oD9SN_FSCP0U94HEn.gif)

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](https://github.com/knatten/ChoreScore/commit/119b379a2aa929ca75dee2bae20f4f02aeba4ae4)

---

<div class="post-metadata">

**Author:** ![edA-qa\_mort-ora-y](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/eda-qa_mort-ora-y/32/124_2.png) [@edA-qa\_mort-ora-y](https://forums.fusetools.com/u/edA-qa_mort-ora-y)\
**Post date:** [February 19, 2016, 11:13am UTC](https://forums.fusetools.com/t/how-to-scale-a-panel-to-the-size-of-its-parent/6047/4 "2016-02-19T11:13:54Z")

</div>

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:

```auto
<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.

---

<div class="post-metadata">

**Author:** ![Anders\_Schau\_Knatten](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_schau_knatten/32/41_2.png) [@Anders\_Schau\_Knatten](https://forums.fusetools.com/u/Anders_Schau_Knatten)\
**Post date:** [February 19, 2016, 11:21am UTC](https://forums.fusetools.com/t/how-to-scale-a-panel-to-the-size-of-its-parent/6047/5 "2016-02-19T11:21:38Z")

</div>

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