WPF数据加载时添加进度条

XML 复制代码
<Window x:Class="YourNamespace.YourWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="YourWindow" Height="350" Width="525">
    <Grid>
        <!-- 其他UI元素 -->

        <!-- 透明的覆盖层,显示在页面上方,包含进度条 -->
        <Grid Visibility="{Binding IsLoading, Converter={StaticResource BoolToVisibilityConverter}}" 
              Background="Transparent" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ZIndex="1">
            <Border Background="Black" Opacity="0.5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <!-- 进度条居中显示 -->
                <ProgressBar x:Name="LoadingProgressBar"
                             IsIndeterminate="True"
                             Height="100" 
                             Width="200" 
                             HorizontalAlignment="Center"
                             VerticalAlignment="Center" 
                             Margin="0, 50, 0, 0" />
            </Border>
        </Grid>

        <!-- 后面的UI元素 -->
        <StackPanel VerticalAlignment="Top" HorizontalAlignment="Left" ZIndex="0">
            <TextBlock Text="Your content goes here..." />
            <!-- 更多元素 -->
        </StackPanel>
        
    </Grid>
</Window>

viewModel代码

cs 复制代码
 // 控制进度条的可见性
 [ObservableProperty]
 private Visibility isLoading = Visibility.Collapsed; // 默认不显示进度条

private void ChangeLoadingStatus(bool isLoading) {

    if (isLoading)
    {
        IsLoading = Visibility.Visible;
    }
    else
    {
        IsLoading = Visibility.Collapsed;
    }

}

[RelayCommand]
private  async void SelectInfo()
{
  string sql ="....."
  ChangeLoadingStatus(true);
  
  var result = await Task.Run(() => dal.db.SqlQueryable<ToolStr50>(sql).ToList());

  ChangeLoadingStatus(false); 

}

页面效果

相关推荐
wtrees_松阳1 天前
【弦断处见真章】:鸿蒙UI三重境之《UIContext》心法探幽
ui·华为·harmonyos
IT古董1 天前
企业级官网全栈(React·Next.js·Tailwind·Axios·Headless UI·RHF·i18n)实战教程-第四篇:登录与注册系统(核心篇)
javascript·react.js·ui
梦想的旅途21 天前
基于 UI 驱动(RPA)实现企业微信外部群自动化推送的技术逻辑
ui·自动化·企业微信·rpa
要记得喝水1 天前
某公司WPF面试题(含答案和解析)--3
wpf
JosieBook1 天前
【UI设计】智慧政务大屏 UI 设计深度解析:从战略意图到像素级落地
ui·政务
xinyu_Jina2 天前
Info Flow:大规模列表渲染中的UI虚拟化、数据懒-加载与前端性能工程
前端·ui
zzyzxb2 天前
WPF中Adorner和Style异同
wpf
棉晗榜2 天前
WPF锚点页面,点击跳转到指定区域
wpf
zzyzxb2 天前
Style/Setter、Template 属性、ControlTemplate 三者的关系
wpf
要记得喝水2 天前
某公司WPF面试题(含答案和解析)--2
wpf