如何在WPF中的控件上显示进度条

Question

在WPF UserControl中，我必须调用WebService。 我在一个单独的线程上进行此调用，但我想通知用户该调用可能需要一些时间。

WebMethod返回一个对象集合，并将其绑定到我的UC中的ListBox。 到目前为止，这么好......这部分效果非常好。 但是， 我想在通话期间显示进度条（或任何类型的动画......）。 此动画将位于顶部并以ListBox控件为中心。

我试过Adorner，它部分有用。 但是，我必须在受保护的覆盖void OnRender（DrawingContext drawingContext）中绘制所有控件...我只想添加一个控件几秒钟......

任何人都知道如何实现这一目标？

谢谢！

Answer 1

不要与装饰者一起 - 我所做的是有两个独立的容器控件（通常是网格）占据屏幕的同一区域。 一个是我的“进步”控制，另一个是我的“内容”控制。 我将进度控件的可见性设置为Collapsed，默认情况下将内容控件的可见性设置为Visible。

如果以这种方式设置它，当您启动对Web服务的异步调用时，您可以使进度控件可见并且内容控件已折叠。 当webservice完成后，让它使用Dispatcher.BeginInvoke来更新UI，此时，将进度控制切换回折叠状态，然后将内容控件切换回可见状态。

我通常使进度控制不确定。 这是一个例子; 在这里，我有一个名为ProgressGrid的单独UserControl，它有我的进度条。

    <Grid x:Name="layoutRoot">
        <Grid x:Name="contentGrid" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Visible">
             <!-- snip -->
        </Grid>

        <controls:ProgressGrid x:Name="progressGrid" Text="Signing in, please wait..." Visibility="Collapsed"/>
    </Grid>

在后面的代码中，只是这样的简单：

    private void SignInCommand_Executed(object sender, ExecutedRoutedEventArgs e)
    {
        contentGrid.Visibility = Visibility.Collapsed;
        progressGrid.Visibility = Visibility.Visible;
    }

Answer 2

有一个技巧可以使用可能有效的零高度Canvas。 克里斯安德森的WPF书详细介绍了它及其工作原理，但它就是这样的。

• 创建一个StackPanel
• 在堆栈面板中添加高度=“0”和高z-index的Canvas
• 将您的用户控件添加到堆栈面板。

当您想要显示进度条时，将其添加到零高度画布。 它允许您将其放在用户控件上。 Canvas允许您超越其边界。 使进度条居中应该只需要查看用户控件的尺寸并相应地设置“画布”上进度条的位置。 完成后从画布中删除进度条。

这是一个使用TextBox的简单示例。 它不完美，但它显示了这个想法。 单击该按钮可在InkCanvas顶部显示TextBox

<DockPanel LastChildFill="True">
    <Button DockPanel.Dock="Top" Name="showButton" Click="showProgress">show</Button>
    <StackPanel DockPanel.Dock="Bottom">
        <Canvas Name="zeroHeight" Height="0"/>
        <InkCanvas Name="inky">
        </InkCanvas>
    </StackPanel>
</DockPanel>


private void showProgress(object sender, RoutedEventArgs e)
{
    TextBox box = new TextBox();
    box.Text = "on top";
    StackPanel.SetZIndex(zeroHeight, 8);
    zeroHeight.Children.Add(box);
    box.Width = 30;
    box.Height = 30;
    Canvas.SetLeft(box, 10);
    Canvas.SetTop(box, 10);
    Canvas.SetZIndex(box, 10);
}