Is there a best way to implement a control like this in WPF?
I can easily replicate the text labels and the progress bar (without the circular "bumps" above each label) but I'd like to know if there's a control already out there, or a best practice, for creating this sort of control in WPF.
Best Answer
It's hard to say what the best practice is in this case but here is how I would do it.
The wizard control in your screenshot looks like a combination of a
ProgressBar
and anItemsControl
and in this case it seems easier to me to derive fromItemsControl
and implement the progress functionality than the other way around but it also depends on how you want it to work (if you want a smooth progress or just light up the dots one-by-one for example).Using a
UniformGrid
asItemsPanel
and theItemTemplate
below, we get the following look (Steps is aList
of strings)Adding a
DropShadowEffect
to theItemsPanel
, twoPath
elements to theItemTemplate
and twoDataTriggers
to determine if the current item is the first or last item to show/hide the left/rightPath
and we can get a pretty similar look to your screenshotItemsPanel
ItemTemplate
If you decide to use this approach you can probably work out how to get the rest of it going, like
DropShadowEffect
) on the progress-part and not in the textAnyway, I uploaded a sample project with a custom control called
WizardProgressBar
and a demo project using it here: https://www.dropbox.com/s/ng9vfi6uwn1peot/WizardProgressBarDemo2.zip?dl=0It looks like this
Things to note about the sample
DropShadowEffect
on the progress-part and the headers or get a thin line between each item (as seen in the picture). I can't think of an easy way to get rid of it so maybe this isn't the best approach after all :)Update
Made a few changes to the sample project where I split the presentation into two
ItemsControls
to get rid of the thin lines between each item. It now looks like thisUploaded it here: https://www.dropbox.com/s/ng9vfi6uwn1peot/WizardProgressBarDemo2.zip?dl=0
End of Update
And here are the missing parts from the sample code above
IsLastItemConverter