How to animate the Height property

How-to Discussions
1

This is what I tried:

<App Theme="Basic">
    <DockPanel>
        <DockPanel Dock="Top" ux:Name="newComment" Background="#fff" Margin="8,4" Padding="2" ClipToBounds="true" Height="200">
            <DropShadow Distance="4" />
            <Image Dock="Left" Alignment="TopLeft" BoxSizing="FillAspect" Height="60" StretchMode="Fill" Margin="5" File="Assets/background1.png" />
            <StackPanel>
                <Text FontSize="15" TextColor="#333" Value="Edwin Reynoso" />
                <Text FontSize="15" TextColor="#aaa" Value="10:00PM" />
                <TextInput Value="Hello World" Margin="0" />
            </StackPanel>
        </DockPanel>
        <Button Text="Hide">
            <Clicked>
                <Change Target="newComment.Height" Value="0" Duration="0.2" />
                <Set Target="newComment.Height" Value="0" Delay="0.2" />
            </Clicked>
        </Button>
    </DockPanel>
</App>

any ideas?

2

So I’m trying this:

<App Theme="Basic">
    <DockPanel>
        <DockPanel Dock="Top" ux:Name="newComment" Background="#fff" Margin="8,4" Padding="2" ClipToBounds="true" Height="200">
            <DropShadow Distance="4" />
            <Image Dock="Left" Alignment="TopLeft" BoxSizing="FillAspect" Height="60" StretchMode="Fill" Margin="5" File="Assets/background1.png" />
            <StackPanel>
                <Text FontSize="15" TextColor="#333" Value="Edwin Reynoso" />
                <Text FontSize="15" TextColor="#aaa" Value="10:00PM" />
                <TextInput Value="Hello World" Margin="0" />
            </StackPanel>
            <WhileTrue ux:Name="hideNewComment">
                <Change Target="newComment.Height" Value="0" Duration="0.2" />
            </WhileTrue>
        </DockPanel>
        <Button Text="Hide">
            <Clicked>
                <Toggle Target="hideNewComment" />
            </Clicked>
        </Button>
    </DockPanel>
</App>

Which actually works but taking a look at the following image, the newComment panel still shows:

file
04LljeSPSOA0-legacy-files-w36WJWVoChkIJLoO-sbWsR_qPKGCdEgSBGmeJPCHD.png377×588

3

Hi!

ClipToBounds is not guaranteed to work as a mask, although in most cases it does. I’m not sure exactly why it doesn’t work in this case, but there is an easy workaround:

Just change the Visibility to Hidden at the end of the animation, like so:

<WhileTrue ux:Name="hideNewComment">
    <Change newComment.Visibility="Hidden" Delay="0.2"/>
    <Change Target="newComment.Height" Value="0" Duration="0.2" />
</WhileTrue>
4

Still doesn’t work without setting a Height property

5

You have a kind of inconsistent layout request with the margin, clipping and DropShadow.

Reducing the Height to zero will not cause the element to compleletely disappear since you still have a Margin on it. Margin is added to the content, and the dropshadow drawn on all of it.

Using a fixed Height is not so much fun, as you probably already realise. There’s a special “Limit” mechanism that can be used to animate things relative to their “natural” height (of the content).

Below I have an example that does this as I think you expect (I’ve just used a rectangle as a placeholder for the image). I wrap the content of the DockPanel in another panel without margin, this allows the height limiting to apply to the whole contents, including the DropShadow.

<App Theme="Basic">
    <DockPanel>
        <Panel Dock="Top" ClipToBounds="true"  ux:Name="newComment" BoxSizing="Limit" LimitHeight="100%">
            <DockPanel Margin="8,4" Padding="2" Background="#fff">
                <Rectangle Color="#8F8" Dock="Left" Alignment="TopLeft" BoxSizing="FillAspect" Height="60" Margin="5" />
                <DropShadow/>
                <StackPanel>
                    <Text FontSize="15" TextColor="#333" Value="Edwin Reynoso" />
                    <Text FontSize="15" TextColor="#aaa" Value="10:00PM" />
                    <TextInput Value="Hello World" Margin="0" />
                </StackPanel>
                <WhileTrue ux:Name="hideNewComment">
                    <Change Target="newComment.LimitHeight" Value="0%" Duration="0.2" />
                </WhileTrue>
            </DockPanel>
        </Panel>
        <Button Text="Hide">
            <Clicked>
                <Toggle Target="hideNewComment" />
            </Clicked>
        </Button>
    </DockPanel>
</App>

Note, you have actually found some kind of corner-case issue in DropShadow and I’ve filed an issue for that. But fixing that still wouldn’t resolve your actual issue (as I show above).