How to expand height of Scrollview item with animation, if possible.

How-to Discussions
1

Hi, I’m starting to code in fuse.
I’d like to expand the height value of Panel item of scrollview when this item receive a click event.
How can I do this?

 <App Theme="Basic">
    <StackPanel Orientation="Vertical">
        <Text Alignment="TopCenter">TEST</Text>
        <ScrollView>
            <StackPanel Alignment="Top">
                <Panel Width="100%" Height="100" Background="#CCC">
                    <Text Alignment="Center">CLICK ME #1</Text>
                </Panel>
                <Panel Width="100%" Height="100" Background="#CC0">
                    <Text Alignment="Center">CLICK ME #2</Text>
                </Panel>
                <Panel Width="100%" Height="100" Background="#CCC">
                    <Text Alignment="Center">CLICK ME #3</Text>
                </Panel>
            </StackPanel>
        </ScrollView>
    </StackPanel>
 </App>

Example
image01

#2 state after receive a click event

image02

Really thankful

Luis Fernando Kalfels

2

Hey!

Here is an example of how you can do it (click the yellow item):

<App Theme="Basic">
    <StackPanel Orientation="Vertical">
        <Text Alignment="TopCenter">TEST</Text>
        <ScrollView>
            <StackPanel Alignment="Top">
                <Panel Width="100%" Height="100" Background="#CCC">
                    <Text Alignment="Center">CLICK ME #1</Text>
                </Panel>
                <Panel ux:Name="p2" Width="100%" Height="100" Background="#CC0">
                    <Text Alignment="Center">CLICK ME #2</Text>
                    <WhileTrue ux:Name="expandp2">
                        <Change p2.Height="200" Duration="0.5" Easing="CircularInOut"/>
                    </WhileTrue>
                    <Clicked>
                        <Toggle Target="expandp2" />
                    </Clicked>
                </Panel>
                <Panel Width="100%" Height="100" Background="#CCC">
                    <Text Alignment="Center">CLICK ME #3</Text>
                </Panel>
            </StackPanel>
        </ScrollView>
    </StackPanel>
</App>
3

Thanks Kristian :slight_smile: