Expand Panel to 100%

How-to Discussions
1

Hi,

I have a list of items with long text. I want to display a short text, once you click on it it should expand and show the whole text. My code already works, but it sets the Height to pt, not percent, so if the text is longer it isn’t shown completely. I tried with auto and Size.Auto, didn’t work.

<Each Items="{data.faq}">
    <Panel Background="#FFFFFF" Margin="10">
        <StackPanel>
            <Panel>
                <Text Margin="10,10,10,5" TextWrapping="Wrap" FontSize="22" Value="{title}" />
            </Panel>
            <Panel Height="15" ClipToBounds="true" ux:Name="content">
                <Text Margin="10,0,10,0" TextWrapping="Wrap" FontSize="13" Value="{content}" />
            </Panel>
            <Panel>
                <HorizontalBar />
            </Panel>
        </StackPanel>
        <WhileTrue ux:Name="expand">
            <Change Target="content.Height" Value="100%" Duration="0.5" Easing="CircularOut" />
        </WhileTrue>
        <Clicked>
            <Toggle Target="expand" />
        </Clicked>
    </Panel>
</Each>
2

Hi!

To animate between a points value and a % value, use Set and LayoutAnimation instead of Change with a duration.

Never animate Width or Height directly with a Duration. It is slow, and as you can see doesn’t do what you want.

3

Hey,

I’m trying to understand, I did get it working with Set, but it doesn’t toggle anymore and also the animation is lost, I don’t really know how to trigger it.

<Each Items="{data.faq}">
    <Panel Background="#FFFFFF" Margin="10">
        <StackPanel>
            <Panel>
                <Text Margin="10,10,10,5" TextWrapping="Wrap" FontSize="22" Value="{title}" />
            </Panel>
            <Panel Height="15" ClipToBounds="true" ux:Name="content">
                <Text Margin="10,0,10,0" TextWrapping="Wrap" FontSize="13" Value="{content}" />
                <LayoutAnimation>
                    <Resize RelativeTo="SizeChange" Duration="0.5" Easing="CircularInOut" />
                </LayoutAnimation>
            </Panel>
            <Panel>
                <HorizontalBar />
            </Panel>
        </StackPanel>

        <WhileTrue ux:Name="expand">
            <Set Target="content.Height" Value="100%"/>
        </WhileTrue>
        <Clicked>
            <Toggle Target="expand" />
        </Clicked>
    </Panel>
</Each>
4

You are missing vectors on Resize, X="1" Y="1"

<Resize RelativeTo="SizeChange" Duration="0.5" Easing="CircularInOut" X="1" Y="1" />

To do a toggle, use an Observable in JS databound to a WhileTrue, and then use a <WhileFalse> to do the opposite Set.

Alternatively, you can databind directly to Height and let the LayoutAnimation do the rest.