大家访问YoutuBe、知乎等网站时,是不是先出现类似下面的画面?
https://dotnet9.com
阅读导航
- 本文背景
- 代码实现
- 本文参考
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.本文参考
Github源码:ContentLoader
除非注明,文章均由 Dotnet9 整理发布,欢迎转载。
转载请注明:
作者:Dotnet9
链接:https://dotnet9.com/6936.html
来源:Dotnet9
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。