How to change a view depending on a state?

Question

I'm working right now in Windows Phone 7.1 using Silverlight. In WPF, I can change a view checking the state of a property using DataTriggers, but in WP7 I realized there's no DataTriggers.

To be more concretive, I'm creating a clock where has two views, Analogic ad Digital and I want to change the view in a contentControl depending of a property value.

Thanks in advance.

Answer 1

One option would be to bind the ContentControl to a property in your model. And then update the Content based on the value of another property.

Here is a very crude example using a CheckBox, ContentControl and a couple of UserControls:

XAML

<StackPanel>
    <CheckBox Content="Swap Content" 
              IsChecked="{Binding Path=Swapper, Mode=TwoWay}" />
    <ContentControl Content="{Binding Path=ClockView}" />
</StackPanel>

Code Behind

public partial class MainPage : PhoneApplicationPage
{
    public MainPage()
    {
        InitializeComponent();
        this.DataContext = new MainModel();
    }
}

public class MainModel : INotifyPropertyChanged
{
    private bool _swapper;
    public bool Swapper
    {
        get { return _swapper; }
        set
        {
            _swapper = value;
            NotifyChanged( "Swapper" );
            SwapContent();
        }
    }

    private UserControl _clockView;
    public UserControl ClockView
    {
        get { return _clockView; }
        private set
        {
            _clockView = value;
            NotifyChanged( "ClockView" );
        }
    }

    public void SwapContent()
    {
        // AnalogClock and DigitalClock are UserControls
        if( ClockView == null || ClockView.GetType() == typeof( AnalogClock ) )
        {
            ClockView = new DigitalClock();
        }
        else
        {
            ClockView = new AnalogClock();
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyChanged( string propName )
    {
        if( PropertyChanged != null )
        {
            PropertyChanged( this, new PropertyChangedEventArgs( propName ) );
        }
    }
}