Animate rectangle under this panel

How-to Discussions
1

How do I animate width of the Rectangle after I click on Panel?

            <StackPanel Orientation="Vertical" Alignment="Top" Margin="0,20,0,0" >
                <Each Items="{questionData.button}">                    <Panel Padding="0,20,0,20" >
                      <Rectangle Fill="#fff" Layer="Background" Width="0%" Opacity="0.2" Height="100%" />
                        <StackPanel Width="85%" Orientation="Horizontal" >
                            <Text Value="{letter}" TextColor="#fff" FontSize="19" />
                            <Text Value="{name}" TextColor="#fff" Margin="25,0,0,0" />
                        </StackPanel>
                        <Clicked>
                            <Callback Handler="{buttonClick}" />
                        </Clicked>
                    </Panel>
                </Each>            </StackPanel>

Something like with binding the Name

<Rectangle Fill="#fff" Layer="Background" Width="0%" Opacity="0.2" Height="100%" Name={id} />
<Change Target="{id}" Width="100%" />
2

All you need to do is to give your panel a ux:Name and animate using that:

<Panel ux:Name="myPanel">
    <Clicked>
        <Change myPanel.Width="500" Duration="1.0"/>
    </Clicked>
</Panel>
3

Thank you for your answer, but you didnt read my question. I want to animate the rectangle inside the panel. Not the pnel itself.

4

Sorry i wasn’t clear. Panel or Rectangle doesn’t matter, just put the ux:Name on your rectangle instead (or whatever you want to change the width of) :slight_smile:

5

What does matter is that it is inside a loop, so each rectangle will have a exact same ux:Name value. It is an error.

6

I solved my problem usin only Name:rectangle attribute. But still dont get it why does it work because every rectangle have name rectangle. So why doesnt is change them all after click, when i use the same name for 3 rectangles. Does Click operate only in its parent element? here is my part of the code :

<StackPanel Orientation="Vertical" Alignment="Top" Margin="0,20,0,0" >
    <Each Items="{questionData.button}">        <Panel Padding="0,20,0,20" >
          <Rectangle Fill="#fff" Layer="Background" Opacity="0.2" Height="100%" Width="0%" Name="rectangle" />
            <StackPanel Width="85%" Orientation="Horizontal" >
                <Text Value="{letter}" TextColor="#fff" FontSize="19" />
                <Text Value="{name}" TextColor="#fff" Margin="25,0,0,0" />
            </StackPanel>
            <Clicked>
                <Callback Handler="{buttonClick}" />
                <Set rectangle.Width="100%" />
            </Clicked>
        </Panel>
    </Each></StackPanel>
7

Hi!

It works with ux:Name as well, and the reason why is that the Each effectively creates a new scope. This means that the name won’t collide. ux:Name is a compile time attribute. Here is an example:

<App>
    <Panel>
        <StackPanel ItemSpacing="5">
            <Each Count="5">
                <Panel>
                    <Rectangle ux:Name="myRect" Height="50" Color="Green" Width="100"/>
                    <Clicked>
                        <Change myRect.Width="25" Duration="0.5" />
                    </Clicked>
                </Panel>
            </Each>
        </StackPanel>
    </Panel>
</App>

Also; note that the following does not work, because its trying to access the name “myRect” in an outside scope, from where it is not accessible:

<App>
    <Panel>
        <StackPanel ItemSpacing="5">
            <Each Count="5">
                <Panel>
                    <Rectangle ux:Name="myRect" Height="50" Color="Green" Width="100"/>
                </Panel>
            </Each>
        </StackPanel>
        <Clicked>
            <Change myRect.Width="25" Duration="0.5" />
        </Clicked>
    </Panel>
</App>

I hope this clarifies a bit :slight_smile: