1. Dotnet9首页
  2. .NET
  3. WPF

C# WPF内容加载

大家访问YoutuBe、知乎等网站时,是不是先出现类似下面的画面?

微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏

https://dotnet9.com

阅读导航

  1. 本文背景
  2. 代码实现
  3. 本文参考

1.本文背景

大家访问YoutuBe、知乎等网站时,是不是先出现类似下面的画面?

C# WPF内容加载
内容正在加载

显示的内容比较多,或者访问服务器比较费时时,可以先显示内容的界面大体布局,让用户以为正在加载数据,我认为这是一种比较好的体验。

本文使用WPF模拟这种效果,很简单的,下面是本文实现的效果:

C# WPF内容加载
内容加载

2.代码实现

看下面界面的代码,两个StackPanel显示切换,其中一个StackPanel显示真实的内容,另一个作为内容遮挡,模拟数据正在加载的效果,当数据加载完成时,再隐藏遮挡的StackPanel,显示加载的真实数据。

<Window x:Class="ContentLoader.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        WindowStyle="None"
        WindowStartupLocation="CenterScreen"
        MouseDown="Window_MouseDown"
        Title="MainWindow" Height="450" Width="800">
    <Grid Background="LightGray">
        <Border CornerRadius="15" Margin="20" Background="White">
            <Grid Margin="20">
                <StackPanel Orientation="Horizontal" VerticalAlignment="Top">
                    <Image Source="https://img.dotnet9.com/logo.png" Width="100" Height="100" Margin="10"/>
                    <!--<Border Width="100" Height="100" Margin="10" CornerRadius="5" Background="LightCoral"/>-->
                    <StackPanel>
                        <TextBlock Text="Dotnet9.com" Margin="0 15 0 5" Foreground="#FF1D7070" FontSize="16" FontWeight="Bold"/>
                        <TextBlock Text="一个热衷于互联网分享精神的程序员的网站"/>
                    </StackPanel>
                </StackPanel>
                <StackPanel Visibility="{Binding Visibility}"  Orientation="Horizontal" VerticalAlignment="Top">
                    <Border Width="100" Height="100" Margin="10" CornerRadius="5" Background="LightGray"/>
                    <StackPanel>
                        <Border Margin="0 15 0 5" Width="300" Height="20" Background="LightGray" CornerRadius="5"/>
                        <Border Width="250" HorizontalAlignment="Left" Height="20" Background="LightGray" CornerRadius="5"/>
                    </StackPanel>
                </StackPanel>
                <Button Width="100" HorizontalAlignment="Left" Content="加载内容" VerticalAlignment="Center" Click="Button_Click"/>
            </Grid>
        </Border>
    </Grid>
</Window>

后台代码

using System.Windows;
using System.Windows.Input;

namespace ContentLoader
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        ContentLoad contentLoad;
        public MainWindow()
        {
            InitializeComponent();
            contentLoad = new ContentLoad();

            this.DataContext = contentLoad;
        }

        private void Window_MouseDown(object sender, MouseButtonEventArgs e)
        {
            DragMove();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            contentLoad.LoadContent();
        }
    }
}

需要一个辅助类

using System.ComponentModel;
using System.Threading;
using System.Windows;

namespace ContentLoader
{
    public class ContentLoad : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        private void NotifyPropertyChanged(string info)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(info));
            }
        }

        public ContentLoad()
        {
            Visibility = Visibility.Collapsed;
        }

        Visibility visibility;
        public Visibility Visibility
        {
            get { return visibility; }
            set { visibility = value; NotifyPropertyChanged("Visibility"); }
        }

        public void LoadContent()
        {
            Visibility = Visibility.Visible;

            var t = new Thread(() =>
            {
                Thread.Sleep(1000);
                Visibility = Visibility.Collapsed;
            });

            t.Start();
        }
    }
}

代码简单,不加过多说明了

3.本文参考

视频:Content Loader

Github源码:ContentLoader

除非注明,文章均由 Dotnet9 整理发布,欢迎转载。

转载请注明本文地址:https://dotnet9.com/6936.html

发表评论

登录后才能评论