Denise
1
Hi,
how can i make the “menu” panel appear with an animation? (i’m adding the animation i’d like to replicate)
<App>
<DockPanel>
<Panel Dock="Top" Height="60" Color="#fff">
<Grid Columns="1*,1*">
<Text Value="Element 1" Alignment="VerticalCenter" Margin="20,0,0,0"/>
<Text Value="Element2" TextAlignment="Right" Alignment="VerticalCenter" TextColor="#000" Margin="0,0,20,0" ux:Name="returnCart">
<Clicked>
<Show TargetNode="menu" />
<Show TargetNode="overlay" />
</Clicked>
</Text>
</Grid>
</Panel>
<Rectangle Height="100" Layer="Overlay" Alignment="TopRight" Color="#fff" Margin="10" ux:Name="menu" Visibility="Hidden">
<Grid Rows="1*,1*" Margin="20,0">
<Text Value="Option 1" Alignment="VerticalCenter"/>
<Text Value="Option 2" Alignment="VerticalCenter"/>
</Grid>
</Rectangle>
<Panel Color="#0004" Layer="Overlay" Visibility="Hidden" ux:Name="overlay">
<Clicked>
<Hide TargetNode="menu"/>
<Hide TargetNode="overlay"/>
</Clicked>
</Panel>
</DockPanel>
</App>
Thank you!
Uldis
2
You will want to use LayoutAnimation.
Here’s a little proof of concept, by no means perfect but at least shows you the approach:
<App>
<WhileTrue ux:Name="showMenu">
<Change overlay.Visibility="Visible" />
<Change menu.Width="128" />
<Change menu.Height="80" />
</WhileTrue>
<DockPanel>
<Panel Dock="Top" Height="60" Color="#fff">
<Grid Columns="1*,1*">
<Text Value="Element 1" Alignment="VerticalCenter" Margin="20,0,0,0"/>
<Text Value="Element2" TextAlignment="Right" Alignment="VerticalCenter" TextColor="#000" Margin="0,0,20,0" ux:Name="returnCart">
<Clicked>
<Toggle Target="showMenu" />
</Clicked>
</Text>
</Grid>
</Panel>
<Rectangle ux:Name="menu" Width="0" Height="0" Layer="Overlay" Alignment="TopRight" Color="#fff" Margin="10" ClipToBounds="true">
<LayoutAnimation>
<Move RelativeTo="WorldPositionChange" Vector="1" Duration="0.42" Easing="QuadraticInOut" />
<Resize RelativeTo="SizeChange" Vector="1" Duration="0.42" Easing="QuadraticInOut" />
</LayoutAnimation>
<StackPanel Margin="20,0" Padding="10" ItemSpacing="20" Alignment="BottomLeft">
<Text Value="Option 1" />
<Text Value="Option 2" />
</StackPanel>
<Clicked>
<Toggle Target="showMenu" />
</Clicked>
</Rectangle>
<Panel ux:Name="overlay" Color="#0004" Layer="Overlay" Visibility="Hidden">
<Clicked>
<Toggle Target="showMenu" />
</Clicked>
</Panel>
</DockPanel>
</App>
