Windows Phone 7, MVVM and TDD (Part 6 – loading screen)

By Peter Daukintis

First we need to create the loading screen user control which is heavily based upon the one used here http://www.orktane.com/Blog/post/2010/01/23/iPhone-Sudoku-in-Silverlight-using-MVVM.aspx.

It consists of a grid containing eight rectangles which have associated animations that cycle through different greyscales/transparencies. The code-behind shows that the user control implements the IBusyIndicator from  http://babaandthepigman.spaces.live.com/blog/cns!4F1B7368284539E5!244.entry.

    public partial class BusyIndicator : UserControl, IBusyIndicator
    {
        private readonly List<object> _tokens;

        public BusyIndicator()
        {
            // Required to initialize variables
            InitializeComponent();
            _tokens = new List<object>();
            if (!System.ComponentModel.DesignerProperties.GetIsInDesignMode(this))
                LayoutRoot.Visibility = Visibility.Collapsed;
        }

        #region Implementation of IBusyIndicator

        public void Hide(object token)
        {
            _tokens.Remove(token);
            if (_tokens.Count == 0)
            {
                LayoutRoot.Visibility = Visibility.Collapsed;
                CycleStoryboard.Stop();
            }
        }

        public void Show(object token)
        {
            _tokens.Add(token);
            if (LayoutRoot.Visibility != Visibility.Visible)
            {
                LayoutRoot.Visibility = Visibility.Visible;
                CycleStoryboard.Begin();
            }
        }

        #endregion
    }

 

Also, I will add one to the visual tree

            <myControls:BusyIndicator x:Name="BusyIndicator" d:IsHidden="True"/>

and in the MainPage code behind I will register the control with the service locator so the service can be made available:

            ServiceLocator.SetBusyIndicatorService(BusyIndicator);

This should enable the loading screen…but wait, somehow I’ve got this far without actually creating a UserRepository – so here goes…

    public class UserRepository : IUserRepository
    {
        public bool Login(string username, string password)
        {
            Thread.SpinWait(100000);
            return (username == "fred" && password == "fred");
        }
    }

and, in the MVVM Light supplied ViewModelLocator (which constructs our MainViewModel), we can pass a new UserRepository into the constructor..

        public static void CreateMain()
        {
            if (_main == null)
            {
                _main = new MainViewModel(new UserRepository());
            }
        }

And that’s it for the loading screen!

Technorati Tags: MVVM,Part,Peter,Daukintis,user,Blog,Sudoku,grid,cycle,code,implements,IBusyIndicator,BusyIndicator,UserControl,List,InitializeComponent,System,ComponentModel,DesignerProperties,GetIsInDesignMode,LayoutRoot,region,Implementation,Hide,Remove,Count,CycleStoryboard,Stop,Visible,Begin,Also,tree,Name,IsHidden,True,MainPage,ServiceLocator,SetBusyIndicatorService,UserRepository,IUserRepository,Login,password,Thread,SpinWait,ViewModelLocator,MainViewModel,CreateMain,_main,animations,username

Windows Live Tags: MVVM,Part,Peter,Daukintis,user,Blog,Sudoku,grid,cycle,code,implements,IBusyIndicator,BusyIndicator,UserControl,List,InitializeComponent,System,ComponentModel,DesignerProperties,GetIsInDesignMode,LayoutRoot,region,Implementation,Hide,Remove,Count,CycleStoryboard,Stop,Visible,Begin,Also,tree,Name,IsHidden,True,MainPage,ServiceLocator,SetBusyIndicatorService,UserRepository,IUserRepository,Login,password,Thread,SpinWait,ViewModelLocator,MainViewModel,CreateMain,_main,animations,username