UWP网格过渡

Question

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 ?

Answer 1

In the click_Close statement have you tried using

this.Visibility = Visibility.Collapsed;

because the way I am reading it, there doesn't seem to be a targeted element right now.

I admit, I have not tested this - it is just something I noticed and hopefully it works and saves you some coding. (I know just enough C# to be dangerous >=D )

Answer 2

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);