Resize a panel that remains centered

Hi, excuse the simple question again!
I have a panel which fills the width of the screen and which I would like to resize when a particular state is true.
I tried the following (below). The panel does resize, but first it immediately shifts to the right so that it’s half off the page and then resizes by shrinking from the right. I would like the panel to remain in the center of the screen and to resize from both the left and right sides at the same time, eg.

What happens:

##########
    ##########  <-
    ##  <-

What I want:

##########
->  ##  <-

Attempted code:

<Panel ux:Name="panel">
  <LayoutAnimation>
    <Resize Vector="1" RelativeTo="SizeChange" Duration="0.25"/>
  </LayoutAnimation>
  <WhileTrue Value="{working}">
    <Set panel.Width="50"/>
  </WhileTrue>
</Panel>

Any ideas how I can do this? Thanks!

Generally, when you’re changing dimensions that affect both the size and position of an element, you want to attach both a Resize and Move animator to the element, otherwise it doesn’t know how to transition from point X to point Y. See the example in LayoutAnimation docs.

As for the approach in general, you might have trouble reverting back if you use a Set. Consider using Change instead, and maybe couple that with a Scale right inside of it, without using a LayoutAnimation, like so:

<Panel Color="#18f" Height="56">
  <WhilePressed>
      <Scale X="0.5" Duration="0.25" />
  </WhilePressed>
</Panel>