WPF Loading Wait Adorner

• Download sample - 25.9 KB

Introduction

First, let me give credit where credit is clearly due as I am standing on the shoulders of better developers with this one. It's basically a combination of two articles written by others to create something I've always wanted in my WPF toolkit.

The whole AdornedControl project which allows you to define your Adorners in XAML came from Ashley Davis. I'm fairly green when it comes to adorners, and could not have completed my article without his.

• Defining WPF Adorners in XAML

The other article I pulled from was Sacha Barber's circular progressbar article. I am not a designer by any stretch of the imagination, and wouldn't have known where to start on an animated circular progress bar.

• Better WPF Circular Progress Bar

Using the code

The first thing I did was put together a simple form with a button to simulate starting and stopping loading and a simple ListBox. Then, I wrapped the ListBox with an AdornedControl and created an AdornedControl.AdornerContent which contains the UserControl that will display when the adorner is visible.

<StackPanel>
    <Button Click="Button_Click">Start/Stop Waiting</Button>
    <ac:AdornedControl Name="LoadingAdorner">
        <ac:AdornedControl.AdornerContent>
            <local:LoadingWait></local:LoadingWait>
        </ac:AdornedControl.AdornerContent>
        <ListBox Name="ListBox1">
            <ListBoxItem>Item 1</ListBoxItem>
            <ListBoxItem>Item 2</ListBoxItem>
            <ListBoxItem>Item 3</ListBoxItem>
        </ListBox>
    </ac:AdornedControl>    
</StackPanel>

The Button_Click event calls a method that flips LoadingAdorner.IsAdornerVisible and ListBox1.IsEnabled. In production, those will be bound to the IsEnabled and IsBusy properties on the ViewModel.

private void StartStopWait()
{
    LoadingAdorner.IsAdornerVisible = !LoadingAdorner.IsAdornerVisible;
    ListBox1.IsEnabled = !ListBox1.IsEnabled;
}

<local:LoadingWait> is the UserControl that both "grays out" the adorned area and displays the ring of progress. This is essentially Sacha's code, I just added a brush to the UserControl to do the "graying", and added a brush as a resource so I could easily change the colors of all the dots at once.

Conclusion

I can now go through my existing application and add this little adornment around any area that takes more than an instant to load its data. All I'll have to do is paste the adornment code into the XAML, bind the IsAdornerVisible to an IsBusy property, and set the IsBusy property from code.

As you can see, I didn't add a lot to Ashley and Sacha's previous works, and I would like to thank them again.

History

• Feb 10^th 2010 - Article posted.