UWP笔记-消息弹窗自动淡出

最新推荐文章于 2022-03-16 10:25:48 发布

原创最新推荐文章于 2022-03-16 10:25:48 发布 · 263 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#UWP

UWP开发专栏收录该内容

65 篇文章

订阅专栏

本文介绍了如何在UWP应用中实现消息弹窗的自动淡出效果，提升用户界面的交互体验。通过添加用户控件并进行相应的代码实现，可以在主页面中轻松调用这种功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为了让用户有个更好的UI交互，可以增加自动淡出的消息弹窗，例如：网易云音乐UWP，切换播放模式时，出现的类似消息提示。

右键项目，添加用户控件

UserControlDemo.xaml:

<UserControl
    <UserControl.Resources>
        <Storyboard x:Name="story_Board" >
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="main_Grid"
                                Storyboard.TargetProperty="Opacity"
                                BeginTime="0:0:0">
                <SplineDoubleKeyFrame  KeyTime="00:00:00.00" Value="1"/>
                <SplineDoubleKeyFrame  KeyTime="00:00:00.400" Value="0.0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>
    <Grid x:Name="main_Grid">
            <Border  CornerRadius="10"
                Background="Transparent"
                HorizontalAlignment="Center" 
            VerticalAlignment="Center"
            Padding="15,5">              
                    <TextBlock x:Name="showContent_textBlock" Margin="10,0,0,2" Foreground="WhiteSmoke"  FontSize="30"/>                              
            </Border>
    </Grid>
</UserControl>

UserControlDemo.xaml.cs:

public sealed partial class UserControlDemo : UserControl
    {
        private Popup popup;
        private string str;
        private TimeSpan showTime_tmr;
        public UserControlDemo()
        {
            this.InitializeComponent();
            popup = new Popup();
            popup.Child = this;
            MeasurePopupSize();
            this.Loaded += NotifyPopup_Loaded;
            this.Unloaded += NotifyPopup_Unloaded;
        }

        public VolumeContentDialog(string content, TimeSpan showTime) : this()
        {
            this.str = content;
            this.showTime_tmr = showTime;

        }

        public VolumeContentDialog(string content) : this(content, TimeSpan.FromSeconds(2))
        {
        }

        public void Show()
        {
            this.popup.IsOpen = true;
        }
       
        public void Hide()
        {
            this.popup.IsOpen = false;
        }

        private void MeasurePopupSize()
        {
            this.Width = ApplicationView.GetForCurrentView().VisibleBounds.Width;

            double marginTop = 0;
            if (ApiInformation.IsTypePresent("Windows.UI.ViewManagement.StatusBar"))
                marginTop = StatusBar.GetForCurrentView().OccludedRect.Height;
            this.Height = ApplicationView.GetForCurrentView().VisibleBounds.Height;
            this.Margin = new Thickness(0, marginTop, 0, 0);
        }

        private void NotifyPopup_Loaded(object sender, RoutedEventArgs e)
        {
            this.showContent_textBlock.Text = str;
            this.story_Board.BeginTime = this.showTime_tmr;
            this.story_Board.Begin();
            this.story_Board.Completed += storyBoard_Completed;
            ApplicationView.GetForCurrentView().VisibleBoundsChanged += NotifyPopup_VisibleBoundsChanged;
        }
        private void NotifyPopup_VisibleBoundsChanged(ApplicationView sender, object args)
        {
            MeasurePopupSize();
        }

        private void storyBoard_Completed(object sender, object e)
        {
            this.popup.IsOpen = false;
        }

        private void NotifyPopup_Unloaded(object sender, RoutedEventArgs e)
        {
            ApplicationView.GetForCurrentView().VisibleBoundsChanged -= NotifyPopup_VisibleBoundsChanged;
        }
    }

然后直接在MianPage.cs中实例化引用就可以了。

MainPage.xaml.cs:

UserControlDemo demo = new UserControlDemo("Demo");
demo.Show();