uwp 基本转换不起作用答案

【问题标题】：uwp basic transition not workinguwp 基本转换不起作用
【发布时间】：2017-10-16 02:29:34
【问题描述】：

我有一个超级基本的 UWP 应用程序。我需要显示一个带有漂亮过渡的弹出窗口，但似乎无法让它工作？！？我做错什么了吗？我使用popup1.IsOpen = true在后面的代码中打开弹出窗口

PS：请不要建议我使用其他控件。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <Popup x:Name="popup1">
            <Popup.Transitions>
                <TransitionCollection>
                    <PopupThemeTransition FromHorizontalOffset="100"/>
                </TransitionCollection>
            </Popup.Transitions>

            <Border x:Name="brd1" Background="Blue" >
                <Button x:Name="btnClose" Background="White" Click="btnClose_Click"  Margin="100">test</Button>
            </Border>
        </Popup>

        <Button x:Name="btnOpen" Click="btnOpen_Click">go</Button>

    </Grid>

【问题讨论】：

您确定要使用弹出窗口吗？如果您想显示按钮上方的弹出窗口，那么您正在寻找一个弹出窗口。

标签： c# xaml uwp win-universal-app windows-10-universal

【解决方案1】：

有几种方法可以解决它。您可以用interactivity 和behaviors 替换您的事件，但由于您没有在示例代码中使用它们，我不会分享。所以我写了一个代码示例来让你的动画工作。

我创建了一些包含native 和storyboard 动画的示例代码：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.Resources>
        <Storyboard x:Name="ShowPopup">
            <PopInThemeAnimation Storyboard.TargetName="MyPopup" />
        </Storyboard>
        <Storyboard x:Name="HidePopup">
            <PopOutThemeAnimation Storyboard.TargetName="MyPopup" />
        </Storyboard>
    </Grid.Resources>
    <Popup x:Name="MyPopup" IsOpen="True"
       HorizontalAlignment="Center" VerticalAlignment="Center">
        <Popup.Transitions>
            <TransitionCollection>
                <PopupThemeTransition />
            </TransitionCollection>
        </Popup.Transitions>
        <Grid Height="200" Width="200" Background="Red">
            <StackPanel>
                <Button Content="Hide (Native)" HorizontalAlignment="Center" Click="hide_native_click"/>

                <Button Content="Hide (Storyboard)" HorizontalAlignment="Center" Click="hide_storyboard_click"/>
            </StackPanel>
        </Grid>
    </Popup>
    <StackPanel>
        <Button Content="Show Popup (Native)" HorizontalAlignment="Left" VerticalAlignment="Top" Click="show_native_click"/>

        <Button Content="Show Popup (Storyboard)" HorizontalAlignment="Left" VerticalAlignment="Top" Click="show_storyboard_click"/>
    </StackPanel>
</Grid>

后面的代码如下：

private void hide_native_click(object sender, RoutedEventArgs e)
{
    MyPopup.IsOpen = false;
}

private void hide_storyboard_click(object sender, RoutedEventArgs e)
{
    HidePopup.Begin();
}

private void show_native_click(object sender, RoutedEventArgs e)
{
    MyPopup.IsOpen = true;
}

private void show_storyboard_click(object sender, RoutedEventArgs e)
{
    ShowPopup.Begin();
}

【讨论】：