Using a TabControl for easy prototyping / testing

• Download MVVMLight_4.5_Tabbed_Template-noexe.zip - 55.2 KB
• Download MVVMLight_4.5_Tabbed_Template.zip - 158.8 KB

The above were built with VS 2012, with MVVM-Light, WPF and .NET 4.5 in mind. Read on to create your own.

Introduction

Everybody has been in a situation where he had a simple test he wanted to run, or a check that needed to be compiled, right?

Usually, there are two options that end up being used in my case:

1. If it's a worthy cause, I'll fire up visual studio, create a project, fidget with what I need, save the project and go on with my life.
2. I'll open an existing project, change/add/comment whatever I need, and remove it afterwards.

There are pro's and con's to each approach:

Option 1:

Pro's

• If I need it later (reference for example), I just need to find the project.
• Code can be reused.

Con's

• Heaps of projects you eventually don't remember why you created to begin with.
• Messy as hell.

Option 2:

Pro's

• Quick and dirty.
• Get things done.
• No need to open a new VS instance

Con's

• Code is usually deleted / lost.
• Messy as hell.
• Your project might carry "dead" weight.

Alternative

For a while I was having a special solution (appropriately called "Testing Grounds") just for projects that were quick tests. But I hated the need to select the project I need to run, the switching between them, and so on. I also had to create a new project for every new test/use-case I wanted to prototype.

The solution for that was a simple project, with a TabControl in the main page, where I can easily just add a Tab, put the properties I need, and go on to more important stuff.

I'll attach my own dummy project, but here are the steps in case you want a different version of .Net, or different project type.

Using the code

Fire up your Visual Studio, and create a new solution/project and give it your name of choice.

Since I'm usually playing with WPF and MVVM-Light, that's the project I've selected, but by all means you don't need to adhere to that.

In your main view add this code :

<Grid x:Name="LayoutRoot">
    <TabControl>
    
    <!--    Use this as qucik copy paste for adding new tabs :
    <TabItem Header=" ">
        
    </TabItem>
    -->
        
        <TabItem Header="Example Tab">
            <TextBlock  Text="For design's sake"/>
        </TabItem>
 
        <TabItem Header="Next project">
            
        </TabItem>
        
    </TabControl>
</Grid>

I've added two tabs, and some text so you can see it in the designer, completely optional and free of charge.

In my case, the next bit is going into the view model and adding some regions / comments to the constructor, like this:

#region Example tab
 
#endregion
 
/* Use this as qucik copy paste for adding new regions :
#region Next Project
 
#endregion
*/  

The point is to have each region matching a tab, so you can easily find the one you need.

(Almst) last, but not least, Add this to your constructor:

// -----------------        Example tab            ----------------- 

// -----------------        Place Holder                -----------------     

Again, the point is you can easily copy paste it to set variables, initialize code, or call methods from there.

The extra mile

This far you have the stub, and you can happily ever after expand it from here, adding tabs/test/etc. easily.

If you find this useful, or have lots of tabs/tests, a couple of suggestions should be followed

Create a ViewModel per tab

If you plan on having plenty of tabs, you should probably have different viewmodels for the tabs, otherwise your file will be huge, and again, messy.

Create properties for the viewmodels on the main view model. Assuming a viewmodel called SomeTest_VM, Use something like:

<TabItem Header="Some test">
        <ContentControl Content="{Binding SomeTest_VM}"  />
</TabItem> 

You'll probably want to create a View as well, and make sure you have your data template set as well (assuming your view's name: SomeTestView) :

<DataTemplate DataType="{x:Type vm:SomeTest_VM}">
    <views:SomeTestView/>
</DataTemplate> 

Create a button to run the test

Eventually, you'll have plenty of things running, and if some of them are waiting for the web, or just take long to load, your application will be slow to start. In that case, instead of running the code (or method) from the constructor, Just have a button at the top bound to the initialization method, so you can only run the ones you need / want:

<Button Content="Run on click" 
        Command="{Binding InitializeSomeTest_Command}">  

Obviously , make sure you have the proper ICommand on the view model to be called :

public RelayCommand InitializeSomeTest_Command
{
    get
    {
        return _initializeSomeTest_Command ??
               (_initializeSomeTest_Command = new RelayCommand(Execute_YourMethodHere));
    }
}
private RelayCommand _initializeSomeTest_Command; 

Wrapping up

Feel free to leave comments / suggestions / questions.

History

• November, 2013: initial release.
• May, 2014: fixed some typos.