Comment afficher une barre de progression au-dessus d'un contrôle dans WPF

Question

Dans un UserControl WPF, je dois faire appel à un WebService. Je passe cet appel sur un thread distinct, mais je tiens à informer l'utilisateur que l'appel peut prendre un certain temps.

WebMethod me renvoie une collection d'objets et je la lie à un contrôle ListBox dans mon UC. Jusqu'ici, tout va bien ... Cette partie fonctionne vraiment bien. Cependant, je souhaite afficher une barre de progression (ou une animation de tout type ...) pendant l'appel. Cette animation serait au sommet et centrée dans le contrôle ListBox.

J'ai essayé Adorner et cela fonctionne partiellement. Cependant, je dois dessiner tous les contrôles dans le remplacement protégé voilée OnRender (DrawingContext drawingContext) ... Je veux simplement ajouter un contrôle pendant quelques secondes ...

Quelqu'un a-t-il une idée de la façon dont je pourrais y parvenir?

Merci!

Answer 1

Ne partez pas avec les adorateurs. Ce que je fais est d’avoir deux contrôles de conteneur distincts (généralement des grilles) qui occupent la même zone de l’écran. L'un est mon "progrès". contrôle, et l’autre est mon "contenu". contrôle. Je règle la visibilité du contrôle de progression sur Réduit et la visibilité du contrôle de contenu sur Visible par défaut.

Si vous le configurez de cette manière, lorsque vous lancez l'appel asynchrone vers le service Web, vous pouvez rendre le contrôle de progression visible et le contrôle de contenu réduit. Une fois le service Web terminé, utilisez Dispatcher.BeginInvoke pour mettre à jour l'interface utilisateur, puis redéfinissez le contrôle de progression sur réduit et le contrôle de contenu sur visible.

En général, le contrôle de progression est indéterminé. Voici un exemple; en cela, j’ai un UserControl séparé appelé ProgressGrid qui a ma barre de progression.

    <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>

Et dans le code, juste quelque chose de simple comme ceci:

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

Answer 2

Vous pouvez utiliser une astuce avec un canevas de hauteur zéro qui pourrait fonctionner. Le livre WPF de Chris Anderson traite en détail de cette question et explique pourquoi cela fonctionne, mais il se passe à peu près comme ceci.

• créer un StackPanel
• ajouter un canevas de hauteur = " 0 " et un indice z élevé sur le panneau de pile
• ajoutez votre contrôle utilisateur au panneau de la pile.

Lorsque vous souhaitez afficher la barre de progression, ajoutez-la au canevas de hauteur zéro. Cela vous permettra de le positionner sur le contrôle de l'utilisateur. La toile vous permet d'aller au-delà de ses frontières. Pour centrer la barre de progression, il suffit de regarder les dimensions du contrôle utilisateur et de définir la position de la barre de progression sur le canevas en conséquence. Supprimez la barre de progression du canevas lorsque vous avez terminé.

Voici un exemple simple qui utilise une zone de texte. Ce n'est pas parfait mais ça montre l'idée. Cliquez sur le bouton pour afficher la zone de texte au-dessus de la InkCanvas

<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);
}