在WPF中页面Loading加载中效果(HandyControl)

日常开发中,经常会有接口等待的情况,为了防止等待过程中用户误触,则需要Loading加载效果.

我在项目中使用的UI是HandyControl,可以直接在Nuget包中直接搜索,下载安装即可

XAML代码:

点击查看代码

<!--以下为基本布局代码-->
<Grid Margin="0,0,10,0">
     <Grid.RowDefinitions>
         <RowDefinition Height="110" />
         <RowDefinition Height="55" />
         <RowDefinition Height="55" />
         <RowDefinition Height="55" />
         <RowDefinition Height="55" />
         <RowDefinition Height="55" />
         <RowDefinition Height="55" />
         <RowDefinition Height="55" />
         <RowDefinition Height="55" />
         <RowDefinition Height="*" />
     </Grid.RowDefinitions>
     <Grid.ColumnDefinitions>
         <ColumnDefinition Width="*" />
         <ColumnDefinition Width="*" />
     </Grid.ColumnDefinitions>
     <StackPanel
     Grid.Row="9"
     Grid.ColumnSpan="2"
     HorizontalAlignment="Center"
     VerticalAlignment="Bottom"
     Orientation="Horizontal">
     <Button
     x:Name="submitButton"
     Width="120"
     Height="50"
     Margin="30,20,0,100"
     Click="Submit"
     Content="确认提交"
     FontSize="{StaticResource HeadFontSize}"
     Style="{StaticResource ButtonPrimary}" />
         </StackPanel>
     <!--以下为Loading代码布局实现-->
     <Grid
    x:Name="loadingCircle"
    Grid.RowSpan="10"
    Grid.ColumnSpan="2"
    Background="#fbfcfc"
    Opacity="0.5"
    Visibility="Collapsed">
         <!--Loading代码,在HandyControl官网中有多种Style,可以选自己想要的效果-->
    <hc:LoadingCircle
        Width="100"
        Height="100"
        Margin="5"
        Foreground="Green"
        Style="{StaticResource LoadingCircleLarge}" />
</Grid>
  </Grid>

隐藏代码实现

点击查看代码

在隐藏代码中,请求接口的时候会出现UI线程阻塞的问题导致页面卡住不动,所以有可能会需要开启线程,并使用
Task.Run(()=>{System.Windows.Application.Current.Dispatcher.Invoke(() =>
{})})方法实现UI更新(此处使用延迟模仿,不做接口调用)
private void Submit(object sender, RoutedEventArgs e)
{
 loadingCircle.Visibility = Visibility.Visible;
 Thread.Sleep(20000);
 loadingCircle.Visibility = Visibility.Collapsed;
}