C# WPF内容加载

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

https://dotnet9.com

阅读导航

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

1.本文背景

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

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

本文使用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