I've a main view and many usercontrols.

The main view contains a two column grid, with the first column filled with a listbox whose datatemplate consists of a usercontrol and the second column filled with another usercontrol. These two usercontrols have the same datacontext.

MainView:

<Grid>
    //Column defs
    ...
    <ListView Grid.Column="0" ItemSource="{Binding Foo}">
        ...
        <DataTemplate>  
            <Views: FooView1 />  
        </DataTemplate>
    </ListView>
    <TextBlock Text="{Binding Foo.Count}" />
    <StackPanel Grid.Column="1">
        <Views: FooView2 />
    </StackPanel>
<Grid>

FooView1:

<UserControl>
    <TextBlock Text="{Binding Foo.Title}">
</UserControl>

FooView2:

<UserControl>
    <TextBlock Text="{Binding Foo.Detail1}">
    <TextBlock Text="{Binding Foo.Detail2}">
    <TextBlock Text="{Binding Foo.Detail3}">
    <TextBlock Text="{Binding Foo.Detail4}">
</UserControl>

I've no IDE here. Excuse me if there is any syntax error

When the user clicks on a button. These two usercontrols have to be replaced by another two usercontrols, so the datacontext changes, the main ui remaining the same.

ie, FooView1 by BarView1 and FooView2 by BarView2

In short i want to bind this view changes in mainview to my command (command from Button)

How can i do this?

Also tell me if i could merge the usercontrol pairs, so that only one view exists for each viewmodel

ie, FooView1 and FooView2 into FooView and so on...