Search code examples
c#xamluwpgridwin-universal-app

UWP Grid Transitions


I tried to create a transition for my pop up grid (usercontrol). It work well, but just once, after that, the transition doesn't work, furthermore, I havn't the reverse transition when I close my grid

Xaml UserControl:

<UserControl Visibility="Collapsed">

    <Grid Background="red">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Grid.Transitions>
            <TransitionCollection>
                <EdgeUIThemeTransition Edge="Bottom"/>
            </TransitionCollection>
        </Grid.Transitions>

        <StackPanel>
            <Button Content="Close" Click="close_Click"/>
        </StackPanel>
    </Grid>
</UserControl>

C# UserControl:

public sealed partial class MyUserControl1 : UserControl
{
    public MyUserControl1()
    {
        this.InitializeComponent();
    }

    private void close_Click(object sender, RoutedEventArgs e)
    {
        Visibility = Visibility.Collapsed;
    }
}

Xaml Page:

<Page>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <local:MyUserControl1 x:Name="popUp"/>
        <Button Content="Open" Click="Open_Click"/>
    </Grid>
</Page>

C# Page:

private void Open_Click(object sender, RoutedEventArgs e)
{
    popUp.Visibility = Visibility.Visible;
}

i think the probleme is Visibility, but i need it to show and hide my control, should i use visual state in my usercontrol ?


Solution

  • Now i use:

    C# UserControl(delete the usercontrol):

    private void close_Click(object send, RoutedEventArg e)
    {
        ((Panel)this.Parent).Children.Remove(this);
    }
    

    Xaml UserControl(i set the transition here)

    <UserControl.Transitions>
        <TransitionCollection>
            <EdgeUIThemeTransition Edge="Botom"/>
        </TransitionCollection> 
    </UserControl.Transitions>
    

    c# page(create an user control):

    MyUserControl cont = new MyUserControl();
    MygridName.children.Add(cont);