如何在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);
}