w8mvvm Wiki Rss Feed

Updated Wiki: Introduction

mglukhankov — Mon, 18 Mar 2013 15:54:53 GMT

You can find more information about MVVM in Internet. But here are the basics:

MVVM means Model, View and View Model (view’s model).
The MVVM pattern provides a clean separation between application's user interface, its presentation logic, and its business logic and data by separating each into separate classes.
The view's responsibility is to define the structure and appearance of what the user sees on the screen. Ideally, the code-behind of a view contains only a constructor that calls the InitializeComponent method.
The view model encapsulates the presentation logic and data for the view. There is no direct reference from the view model to the view. The view model defines public properties and commands that are used by the view to render the model.
The model encapsulates business logic and data. The model should not contain any user task specific behavior or application logic.

Windows Runtime allows defining the view by using XAML and its code behind. The mapping between view model public properties and UI can be defined by using data binding mechanisms.

Our library helps you to:

Define your views by using XAML only (no extra code behind).
Implement view models that can be easily bound to views.

It also extends Windows Runtime XAML abilities by providing some useful behaviors. So you do not have to write code behind in most common situations.

Updated Wiki: Documentation

mglukhankov — Mon, 18 Mar 2013 15:51:58 GMT

Updated Wiki: HandlePageNavigation

mglukhankov — Wed, 13 Mar 2013 17:28:57 GMT

If you use Page-s in a Frame then you may want to handle Frame.Navigating and Navigated events in your pages' view models.

Here is a sample root model of your application:

public class RootModel
{
    public RootModel()
    {
        NavigationState = new NavigationState();

        HomePageModel = new HomePageModel();
    }

    public NavigationState NavigationState { get; set; }

    public HomePageModel HomePageModel { get; set; }

    public bool CanGoBack { get { return NavigationState.CanGoBack; } }

    public void GoBack()
    {
        NavigationState.GoBack();            
    }

    public void GoToHomePage()
    {
        NavigationState.Navigate(typeof (HomePage));
    }
}

Set the global DataContext in the Application derived class of your application:

sealed partial class App : Application
{
    ...
    public RootModel RootModel { get; private set; }

    protected override void OnLaunched(LaunchActivatedEventArgs args)
    {
        RootModel = new RootModel();

        var frame = new Frame { DataContext = RootModel };

        // Bind the NavigationState and the frame using the ElementBinder class.
        // You can also do this in XAML.
        ElementBinder.SetWrapper(frame, RootModel.NavigationState);

        Window.Current.Content = frame;
        Window.Current.Activate();

        RootModel.GoToHomePage();
    }
}

The home page model that handles navigation events:

public class HomePageModel : PageModel // Or implement IPageModel.
{
    public override void OnNavigated()
    {
        // TODO Do something here to initialize/update your page.
    }

    public override void OnNavigating(ref bool cancel)
    {
        // TODO Do something here to clean up your page.
    }
}

The HomePage page XAML:

<Page x:Class="YourNamespace.HomePage" ... DataContext="{Binding HomePageModel}">
    <!-- Your page content goes here -->
</Page>

New Comment on "HandlePageNavigation"

Yvan — Sun, 10 Mar 2013 15:51:20 GMT

How do you pass information when navigating from one page to the other?

Updated Wiki: Home

mglukhankov — Sat, 09 Mar 2013 21:58:31 GMT

This project contains classes that allows to follow MVVM pattern in C# Windows Store applications.

Start your project using our popular project template.

This is not a framework. So you can use features that you like.

Features:

Screen orientations behavior
Events and commands binding
Call a view from its model
Handle page navigation
Event triggers for animations
Binding converters
Some controls' behaviors
Context menu behavior
Context popup behavior
AppBar behavior
Settings charm panels

NuGet package: w8mvvm

See the Documentation for a sample code.

This project is supported by EastBanc Technologies international company.

Updated Wiki: Home

mglukhankov — Tue, 05 Mar 2013 06:29:56 GMT

This project contains classes that allows to follow MVVM pattern in C# Windows Store applications.

This is not a framework. So you can use only features that you like.

Features:

Screen orientations behavior
Events and commands binding
Call a view from its model
Handle page navigation
Event triggers for animations
Binding converters
Some controls' behaviors
Context menu behavior
Context popup behavior
AppBar behavior
Settings charm panels

NuGet package: w8mvvm

See the Documentation for a sample code.

Use w8mvvm project template from Visual studio gallery to start.

This project was created by EastBanc Technologies http://eastbanctech.com

New Comment on "ViewModel"

DickInKent — Sat, 02 Mar 2013 20:37:23 GMT

should that be OnPropertyChange<int> i.e. generic? - otherwise (if you use Object parameters) surely you'll get un/boxing consequences ?

Updated Wiki: PersistingNavigationState

mglukhankov — Wed, 27 Feb 2013 04:35:19 GMT

When your application is suspended and then terminated it should restore its state.

You can use the following approach to save/restore a Page view model state:

public class MyPageModel : PageModel
{
        private bool _isStateLoaded;

        public override async void OnNavigated()
        {
            base.OnNavigated();

            await LoadState();

            Application.Current.Suspending += OnSuspending;
        }

        public override void OnNavigating(ref bool cancel)
        {
            base.OnNavigating(ref cancel);

            if (!cancel)
            {
                Application.Current.Suspending -= OnSuspending;
                SaveState().ContinueWith(task =>
                {
                    if(task.Exception != null)
                        Debug.WriteLine(task.Exception);
                });
            }
        }

        private async void OnSuspending(object sender, SuspendingEventArgs e)
        {
            var deferral = e.SuspendingOperation.GetDeferral();
            await SaveState();
            deferral.Complete();
        }

        private async Task SaveState()
        {
            // Save your state here.
        }

        private async Task LoadState()
        {
            if(_isStateLoaded)
                return;
            
            // Load your state here.

            _isStateLoaded = true;
        }
}

Explanation
The view model state is saved in the Application.Suspending event handler.
The state is restored in the OnNavigated method overload. This method is called when a user navigates to the page and when the navigation history is restored.
You can also save the state in the OnNavigating method overload to restore it when a user comes to the page again. This method is called when user leaves the page.

To save/restore the navigation history you should use NavigationState.Get/SetNavigationState methods (NavigationState is usually a part of a root view model or an utility class).
You can use the following code in your App class (App.xaml.cs file).
saving:

private async void OnSuspending(object sender, SuspendingEventArgs e)
{
        var deferral = e.SuspendingOperation.GetDeferral();
        string navigationState = RootModel.Navigation.NavigationState.GetNavigationState();
        await Save("NavigationStack", navigationState);
        deferral.Complete();
}

restoring:

protected override void OnLaunched(LaunchActivatedEventArgs args)
{
        RootModel = new RootModel ();
        var frame = new Frame { DataContext = RootModel };
        ElementBinder.SetWrapper(frame, RootModel.Navigation.NavigationState);
        Window.Current.Content = frame;
        Window.Current.Activate();

        // Open a main page or restore the navigation history.
        if (args.PreviousExecutionState == ApplicationExecutionState.Terminated)
        {
            var history= await Load<string>("NavigationStack");
            RootModel.Navigation.NavigationState.SetNavigationState(history);
        }
        else
        {
            RootModel.Navigation.GotoMainPage();
        }
}

Updated Wiki: Documentation

mglukhankov — Wed, 27 Feb 2013 03:53:21 GMT

How to use

Updated Wiki: Home

ygrik — Wed, 30 Jan 2013 20:37:42 GMT

This project contains classes that allows to follow MVVM pattern in C# Windows Store applications.

This is not a framework. So you can use only features that you like.

Features:

Events and commands binding
Call a view from its model
Handle page navigation
Binding converters
Some controls' behaviors
Screen orientations behavior
Context menu behavior
Context popup behavior
AppBar behavior
Event triggers for animations
Show/hide panes in Settings charm

Updated Wiki: Home

mglukhankov — Tue, 29 Jan 2013 23:30:35 GMT

This project contains classes that allows to follow MVVM pattern in C# Windows Store applications.

This is not a framework. So you can use only features that you like.

Features:

Events and commands binding
Call a view from its model
Handle page navigation
Binding converters
Some controls' behaviors
Screen orientations behavior
Context menu behavior
Context popup behavior
AppBar behavior
Event triggers for animations

Updated Wiki: ContextPopupBehavior

mglukhankov — Tue, 29 Jan 2013 21:52:22 GMT

PopupBehavior allows you to easily display a popup on a tap or right click.

In your view you should specify a template for your popup:

<TextBlock Text="Tap or right click here for more information" behaviors:PopupBehavior.Placement="Above">
    <behaviors:PopupBehavior.Content>
        <DataTemplate>
            <TextBlock Text="More information..."/>
        </DataTemplate>
    </behaviors:PopupBehavior.Content>
</TextBlock>

Updated Wiki: Home

ygrik — Fri, 25 Jan 2013 22:57:53 GMT

This project contains classes that allows to follow MVVM pattern in C# Windows Store applications.

This is not a framework. So you can use only features that you like.

Features:

Events and commands binding
Call a view from its model
Handle page navigation
Binding converters
Some controls' behaviors
Screen orientations behavior
Context menu behavior
Context popup behavior
AppBar behavior
Event triggers for animations

NuGet package: w8mvvm

See the Documentation for a sample code.

Use a project template from Visual studio gallery to start.

This project was created by EastBanc Technologies http://eastbanctech.com

Updated Wiki: Home

mglukhankov — Thu, 24 Jan 2013 22:41:55 GMT

This project contains classes that allows to follow MVVM pattern in C# Windows Store applications.

This is not a framework. So you can use only features that you like.

Features:

Events and commands binding
Call a view from its model
Handle page navigation
Binding converters
Some controls' behaviors
Screen orientations behavior
Context menu behavior
Context popup behavior
AppBar behavior
Event triggers for animations

NuGet package: w8mvvm

See the Documentation for a sample code.

This project was created by EastBanc Technologies http://eastbanctech.com

Updated Wiki: EventTriggers

mglukhankov — Thu, 24 Jan 2013 21:43:01 GMT

The event triggers mechanism allows you to begin an animation when an event is fired by a view element.
It is based on the event to command binding mechanism. You just need to specify a special command called TriggerCommand.

Here is a short version of the sample XAML:

<Border mvvm:EventBinding.PointerPressed="{StaticResource PointerPressedTriggerCommand}"/>

<Border>
    <mvvm:EventBinding.PointerPressed>
        <mvvm:TriggerCommand Storyboard="{StaticResource FadeOut}"/>
    </mvvm:EventBinding.PointerPressed>
</Border>

Here is a full sample:

<Grid>
    <FrameworkElement.Resources>
        <Storyboard x:Key="FadeOut">
            <PointerDownThemeAnimation Storyboard.TargetName="MyElement"/>
        </Storyboard>
        <Storyboard x:Key="FadeIn">
            <PointerUpThemeAnimation Storyboard.TargetName="MyElement"/>
        </Storyboard>
    </FrameworkElement.Resources>
    
    <Border x:Name="MyElement" Width="100" Height="100" Background="Red">

        <mvvm:EventBinding.PointerPressed>
            <mvvm:TriggerCommand Storyboard="{StaticResource FadeOut}"/>
        </mvvm:EventBinding.PointerPressed>

        <mvvm:EventBinding.PointerReleased>
            <mvvm:TriggerCommand Storyboard="{StaticResource FadeIn}"/>
        </mvvm:EventBinding.PointerReleased>

    </Border>
</Grid>

Updated Wiki: Event triggers for animations

mglukhankov — Thu, 24 Jan 2013 21:41:14 GMT

<Border mvvm:EventBinding.PointerPressed="{StaticResource PointerPressedTriggerCommand}"/>

<Border>
    <mvvm:EventBinding.PointerPressed>
        <mvvm:TriggerCommand Storyboard="{StaticResource FadeOut}"/>
    </mvvm:EventBinding.PointerPressed>
</Border>

Here is a full sample:

<Grid>
    <FrameworkElement.Resources>
        <Storyboard x:Key="FadeOut">
            <PointerDownThemeAnimation Storyboard.TargetName="MyElement"/>
        </Storyboard>
        <Storyboard x:Key="FadeIn">
            <PointerUpThemeAnimation Storyboard.TargetName="MyElement"/>
        </Storyboard>
    </FrameworkElement.Resources>
    
    <Border x:Name="MyElement" Width="100" Height="100" Background="Red">

        <mvvm:EventBinding.PointerPressed>
            <mvvm:TriggerCommand Storyboard="{StaticResource FadeOut}"/>
        </mvvm:EventBinding.PointerPressed>

        <mvvm:EventBinding.PointerReleased>
            <mvvm:TriggerCommand Storyboard="{StaticResource FadeIn}"/>
        </mvvm:EventBinding.PointerReleased>

    </Border>
</Grid>

Updated Wiki: Documentation

mglukhankov — Thu, 24 Jan 2013 21:20:58 GMT

How to use

Updated Wiki: BindingEventsAndCommands

mglukhankov — Thu, 24 Jan 2013 07:31:23 GMT

Unlike other MVVM libraries we do not have a EventToCommand class. We use a short and more convenient way to bind events to commands.

Lets bind the Tapped event to a command in XAML:

<TextBlock Mvvm:EventBinding.Tapped="{Binding TappedCommand}" Text="Tap me"/>

Here is an example of a view model class with a command that handles an event from the UI:

public class SimpleViewModel
{
    public SimpleViewModel()
    {
        TappedCommand = new EventCommand<Point>(OnTapped);
    }

    public IEventCommand TappedCommand { get; private set; }

    private void OnTapped(Point point)
    {
        // You can mark the event as handled by using the PreventBubbling property.
        // This property value will not be reset automatically.
        // So you can set it once in the constructor or update it anywhere.
        TappedCommand.PreventBubbling = point.X < 100;
    }
}

Updated Wiki: Home

mglukhankov — Thu, 24 Jan 2013 07:16:18 GMT

This project contains classes that allows to follow MVVM pattern in C# Windows Store applications.

This is not a framework. So you can use only features that you like.

Features:

Events and commands binding
Call a view from its model
Handle page navigation
Binding converters
Some controls' behaviors
Screen orientations behavior
Context menu behavior
Context popup behavior
AppBar behavior

NuGet package: w8mvvm

See the Documentation for a sample code.

This project was created by EastBanc Technologies http://eastbanctech.com

Updated Wiki: Home

mglukhankov — Thu, 24 Jan 2013 05:22:44 GMT

This project contains classes that allows to follow MVVM pattern in C# Windows Store applications.

Features:

INotifyPropertyChanged support
Events and commands binding
Call a view from its model
Handle page navigation
Binding converters
Some controls' behaviors
Screen orientations behavior
Context menu behavior
Context popup behavior
AppBar behavior

NuGet package: w8mvvm

See the Documentation for a sample code.

This project was created by EastBanc Technologies http://eastbanctech.com