Slide navigation with user controls in MVVM

Question

I'm developping a MVVM application in WPF. In my project, I have a main window and many user controls. The main window has to be used to host the user controls. I would like to set a system which can allow me to navigate between the different users controls with a slide effect. The main window doesn't contain no navigation button. All the navigations buttons are on the different users controls. For example, I have a button (Button A) on the user control A. When I click this button, I would like to switch from user control A to user control B (with a slide effect). The user control B has a navigation button too, the button B. When I click the button B, I would like to switch to the user control "X" ("X" is to say that it could be any user control), etc... I would like to develop a kind of "navigation service" in which there would be a function like :

NavigationService.SlideTo(new UserControlX(), Directions.LeftToRight);

I know it would be difficult but I would like to have some ideas or suggestions in which way I have to work, while keeping the MVVM model.

Uttam K C Uttam K C · Accepted Answer · 2013-08-15T19:16:36

You can use Prism Region: Prism MSDN link

Create a region in your main window

<ContentControl prism:RegionManager.RegionName="MainRegion" x:Name="MainRegion" />

Use RegionManager to navigate to different user controls on click cammand of the buttons

var regionManager = ServiceLocator.Current.GetInstance<IRegionManager>();
regionManager.RequestNavigate("MainRegion", "UserControlName");//good practice to use fully qualified usercontrol name like "namespace.UserControlName"

For sliding effect try similar like this in the user control(even can try different animation styles, this is just a sample):

<UserControl.Triggers>
    <EventTrigger RoutedEvent="Control.Loaded">
        <BeginStoryboard>
            <Storyboard >
                <ThicknessAnimation Duration="0:0:.8" Storyboard.TargetProperty="Margin" From="1920,0,0,0" To="0" AccelerationRatio=".1"/>
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
</UserControl.Triggers>

Hope it helps ...

Slide navigation with user controls in MVVM

1 Answers