# WPF/Silverlight visual states with DataTemplates

DevFeed: [WPF/Silverlight visual states with DataTemplates](<https://devfeed.tech/articles/wpf-silverlight-visual-states-with-datatemplates-38405.md>)

Original publisher: [Read original article](<https://khmylov.com/2010/11/wpf-silverlight-visual-states-with-datatemplates/>)

Author: Andrew Khmylov

Published: 2010-11-19T00:00:00Z

Content type: tutorial

Language: en

Sources: [Despite the odds](<https://devfeed.tech/sources/despite-the-odds.md>)

Topics: [WPF](<https://devfeed.tech/topics/wpf.md>), [XAML](<https://devfeed.tech/topics/xaml.md>), [MVVM](<https://devfeed.tech/topics/mvvm.md>), [ui](<https://devfeed.tech/topics/ui.md>)

Tags: [mvvm](<https://devfeed.tech/tags/mvvm.md>), [progress](<https://devfeed.tech/tags/progress.md>), [screen](<https://devfeed.tech/tags/screen.md>), [state](<https://devfeed.tech/tags/state.md>), [threading](<https://devfeed.tech/tags/threading.md>), [xaml](<https://devfeed.tech/tags/xaml.md>)

## AI overview

This tutorial presents a WPF technique for switching among page, window, or control states by defining different DataTemplates. It contrasts this approach with VisualStateManager and Silverlight Activity Control, then demonstrates a welcome screen and a busy-progress state backed by a ViewModel.

## Source excerpt

Consider a common task - you need to switch between different screens in your application, that represent various states (e.g. Normal/Loading/Error). How are you going to implement this? You can start with VisualStateManager and define appropriate visual states. Well, this will surely do the thing, but you will have to create lots of controls and manage their Visibility or Opacity. And what if you have a complex markup? And I suppose that switching the state will not remove invisible items from the visual tree. And even more, with VisualStateManager you are bound to Expression Blend, because, you know, it's not very convenient to edit VSM settings by hands in XAML (which I prefer, but it is a topic for another article). The second option that may fit well, if you just need something like "I'm busy!" overlay is Silverlight Activity Control. Works like a charm with RIA services, but I find it limited for complex scenarios (and it's not available for WPF). I've found another approach (it becomes especially useful with MVVM and improved DelegateCommand implementations - I will blog about this in a few days). The idea behind this technique is quite simple. You define different templates for different page/window/control states. Yeah, that's it. Let's start with our implementation. Our application will have only one page with 2 different states: A welcome screen, that hosts a button to start 'the heavy' calculation. Busy window" that shows information about the current processing progress. I decided to create a simple ViewModel as a backing storage for our UI properties. It has two properties - IsBusy that says whether some hard work is executing now, and Progress - simple execution progress indicator. Method StartCalculation runs a new thread executes a number of loop steps. On each step the executing thread is suspended for 100ms (to imitate a slow operation). Normally you will create a DelegateCommand that will handle all the execution logic, but I decided to keep thin