Building a Modern Windows App – Presentation Materials

For this demo, I used the Charmed Framework that I have open-sourced on Github: https://github.com/brentedwards/charmed

My slides are on SlideShare: http://www.slideshare.net/brentledwards/building-a-modern-windows-app

There were also a couple of interesting links that I pointed out in the slides:

Share

Tags : , , ,

Cross-Platform Apps with Windows 8 and Windows Phone 8 – Presentation Materials

Thanks for checking out my presentation, “Cross-Platform Apps with Windows 8 and Windows Phone 8.” I hope you found it useful. Below is the code and slides I used. Enjoy!

Code: https://github.com/brentedwards/Charmed
Slides: http://www.slideshare.net/brentledwards/cross-platform-apps-with-windows-8-windows-phone-8

Share

Tags : , , ,

Implementing Windows 8 Design Principles – Presentation Materials

Learning to develop for Windows 8 has been an interesting challenge. I hope my presentation helped you along your journey. I have made my presentation materials available for you to check out on your own terms.

Slides: http://www.slideshare.net/brentledwards/implementing-windows-8-design-principles
Code: https://github.com/brentedwards/Movies.WinRT

Share

Tags : , ,

MVVM with Caliburn.Micro – Presentation Materials

I’m a big fan of Caliburn.Micro and I hope that my presentation helped you become one too. Here’s the materials I used for the presentation:

Slides on SlideShare, Code on Github

Enjoy!

Share

Tags : , ,

WPF DataGridRow Double Click With MVVM

On my current project, we need to open a record for editing when the DataGridRow is double clicked. Unfortunately, the WPF DataGrid doesn’t support this functionality out of the box. There are, however, a couple ways to make this happen.

One way is to handle MouseDoubleClick event on the DataGrid. We are using Caliburn.Micro, so it is easy to get the MouseDoubleClick event to route to our view model. The view model can then assume that the selected item is to be edited. The problem with this is that double clicking anywhere on the DataGrid will trigger this event, including the scrollbars. That means that quickly scrolling down the items could trigger a double click and cause whatever item was last selected to be edited, which is unacceptable.

What we needed was to somehow handle the MouseDoubleClick event on each DataGridRow, make sure the one being double clicked on is actually selected, then call tell the view model to edit it.

I ultimately came up with two solutions. One uses a little code-behind and applies only to one case at a time. The other uses an attached DependencyProperty and is general enough to apply to all cases.

Using Code-behind

The code-behind solution may break the MVVM pattern, depending on your point of view. I feel that using code-behind makes sense in cases where you have logic that is specific to your how your view represents the UI.

First, you need to create the MouseDoubleClick event handler in the code-behind.

protected void OnMouseDoubleClick(object sender, EventArgs args)
{
    var row = sender as DataGridRow;
    if (row != null && row.IsSelected)
    {
        var viewModel = (MainViewModel)DataContext;
        viewModel.Edit();
    }
}

Next, you need the wire up each DataGridRow to use that handler for MouseDoubleClick events. You can do that with styling.

<DataGrid
    ItemsSource="{Binding People}"
    SelectedItem="{Binding SelectedPerson}"
    IsReadOnly="True">
    <DataGrid.ItemContainerStyle>
        <Style TargetType="DataGridRow">
            <EventSetter Event="MouseDoubleClick"
                        Handler="OnMouseDoubleClick" />
        </Style>
    </DataGrid.ItemContainerStyle>
</DataGrid>

That’s it. This solution is pretty straight-forward. However, there are two problems with the code-behind solution.

The first problem is that this solution doesn’t scale. What I mean by that is that you have to re-implement it every time you want to use it.

The second problem is that it uses code-behind. As I said earlier, I believe the use of code-behind has its place. However, I prefer to stay away from it if I can.

Using Attached DependencyProperty

The attached DependencyProperty solution uses a helper class so that it can be reused across your application. It also assumes that your DataGrid’s DataContext is your view model. If that is not the case, you will need to modify it.

public sealed class RowDoubleClickHandler : FrameworkElement
{
    public RowDoubleClickHandler(DataGrid dataGrid)
    {
        MouseButtonEventHandler handler = (sender, args) =>
        {
            var row = sender as DataGridRow;
            if (row != null && row.IsSelected)
            {
                var methodName = GetMethodName(dataGrid);

                var dataContextType = dataGrid.DataContext.GetType();
                var method = dataContextType.GetMethod(methodName);
                if (method == null)
                {
                    throw new MissingMethodException(methodName);
                }

                method.Invoke(dataGrid.DataContext, null);
            }
        };

        dataGrid.LoadingRow += (s, e) =>
            {
                e.Row.MouseDoubleClick += handler;
            };

        dataGrid.UnloadingRow += (s, e) =>
            {
                e.Row.MouseDoubleClick -= handler;
            };
    }

    public static string GetMethodName(DataGrid dataGrid)
    {
        return (string)dataGrid.GetValue(MethodNameProperty);
    }

    public static void SetMethodName(DataGrid dataGrid, string value)
    {
        dataGrid.SetValue(MethodNameProperty, value);
    }

    public static readonly DependencyProperty MethodNameProperty = DependencyProperty.RegisterAttached(
        "MethodName",
        typeof(string),
        typeof(RowDoubleClickHandler),
        new PropertyMetadata((o, e) =>
        {
            var dataGrid = o as DataGrid;
            if (dataGrid != null)
            {
                new RowDoubleClickHandler(dataGrid);
            }
        }));
}

This helper class ties into the DataGrid’s LoadingRow event and uses reflection to find a specified method on the DataContext and execute it. All you have left to do is use it.

<DataGrid
    ItemsSource="{Binding People}"
    SelectedItem="{Binding SelectedPerson}"
    IsReadOnly="True"
    helpers:RowDoubleClickHandler.MethodName="Edit" />

All you need to do is provide the name of the method on your view model to execute when the double click has occurred and the rest is taken care of.

Conclusion

While it’s unfortunate that WPF doesn’t provide this functionality right out of the box, it is not difficult to implement it yourself. Silverlight suffers from this same shortcoming. This solution won’t work as-is for Silverlight. It would need to be refactored into using Behaviors instead of an attached DependencyProperty.

I have posted a complete solution on github: https://github.com/brentedwards/DataGridRow_DoubleClick

Happy coding!

Share

Tags : , ,

An Implicit DataTemplate Alternative for Silverlight 4

A few weeks back, I had the opportunity to write a guest post for my employer, Magenic. The post is about a solution I came up with for an implicit DataTemplate alternative with Silverlight 4. Enjoy!

Share

Tags : , , ,

Getting Dirty with Windows Phone 7 Presentation Materials

If you attended my presentation, Getting Dirty with Windows Phone 7, I hope you found it useful.  If you would like to play with the sample application I used in my demo, I have made it available on github: https://github.com/brentedwards/GettingDirtyWithWP7.  I didn’t feel the need to post my slide deck.  However, here are the valuable links I had listed:

http://create.msdn.com/
Tools, Quick Starts, Tutorials

http://silverlight.codeplex.com/
Silverlight for Windows Phone Toolkit

http://www.jeff.wilcox.name/2010/05/sl3-utf-bits/
Silverlight Unit Test Framework for WP7

http://www.scottlogic.co.uk/blog/colin/2010/05/silverlight-multibinding-solution-for-silverlight-4/
Silverlight Multibinding

http://mvvmfabric.com
MVVM Fabric

If you attended my session, please take a moment to rate my presentation.

Fox Valley Day of .NET – March 5, 2011

St. Cloud .NET User Group – March 9, 2011

Twin Cities Code Camp 10 – April 9, 2011

Twin Cities Code Camp 11 – October 9, 2011

Share

Tags : ,

Getting Dirty with Android – Presentation Materials

If you attended my presentation, Getting Dirty with Android, I hope you were able to learn a thing or two.  If you want to review what I covered or play with the sample application that I worked with during the demos, I have made both available.

Slide Deck: http://www.slideshare.net/brentledwards/getting-dirty-with-android
Sample Application: http://github.com/brentedwards/GettingDirty

If you attended my session, I would appreciate if you took a few moments to review it.

Twin Cities Developers Group, Feb 8th 2011

Chippewa Valley Code Camp, Nov 13th 2010

Iowa Code Camp, Nov 6th 2010:

Share

Tags : ,

WPF with MVVM: From the Trenches on dnrTV!

A few weeks ago, after presenting at CodeMastery, I sat down with Carl Franklin from dnrTV! to discuss WPF with MVVM.  The discussion is centered around the demo portion of my presentation entitled WPF with MVVM: From the Trenches.  This presentation is the precursor to the work I have done with MVVM Fabric.  Without further ado, check it out here: http://dnrtv.com/default.aspx?ShowID=184 – complete with an un-flattering pic Winking smile

Share

Tags : , ,

MVVM Fabric: Using a View Placer

A while back, I wrote about the navigation solution provided by MVVM Fabric.  I also wrote about using the ModalViewPlacer provided by MVVM Fabric.  In this post, I will talk about how to provide your own implementation of the IViewPlacer interface.

Overview

Since each application is unique, with its own unique UI, MVVM Fabric leaves it up to you, the developer, to provide the mechanism to place a view into that unique UI.  IVewPlacer is that mechanism.

An implementation of the IViewPlacer interface is required by the navigation solution provided by MVVM Fabric.  It will be used by the ViewController to place a view into your application when a request is made to navigate to a view.

A First Look

The IViewPlacer interface provided by MVVM Fabric follows the single responsibility principle.  Its only job is to place a view into your application, which you can see by looking at the interface itself.

public interface IViewPlacer
{
    void PlaceView(ViewResult viewResult);
}

When you implement IViewPlacer, you must provide an implementation for the PlaceView method.  The PlaceView method takes a ViewResult as a parameter.  So, let’s look at the ViewResult class as well.

public class ViewResult
{
    public FrameworkElement View { get; private set; }
    public ViewTargets ViewTarget { get; private set; }

    public ViewResult(FrameworkElement view, ViewTargets viewTarget)
    {
        View = view;
        ViewTarget = viewTarget;
    }
}

As you can see, the ViewResult class has two properties.  The first property is the actual instance of the view, as created by the view factory.  This view will have a fully loaded view model and is all ready to make an entrance into your UI.  The second property is the ViewTargets value for that view.  There may be times where you need to place certain views in different places than the rest of the views.  With the ViewTargets property on ViewResult, you know what view you are placing and can act accordingly.

IViewPlacer Implementation

The sample application provided with the MVVM Fabric source has an implementation of the IViewPlacer interface.  We will be looking at a simplified version of that implementation.

public sealed class ViewPlacer : IViewPlacer
{
    private TabControl MainTabControl { get; set; }

    public ViewPlacer(Window appWindow, TabControl mainTabControl)
    {
        MainTabControl = mainTabControl;
    }

    public void PlaceView(ViewResult viewResult)
    {
        var exists = false;
        var title = GetTitleFromViewModel(viewResult.View.DataContext);
        foreach (TabItem tabItem in MainTabControl.Items)
        {
            if (tabItem.Header.ToString() == title)
            {
                exists = true;
                break;
            }
        }

        if (!exists)
        {
            var newTabItem = new TabItem() { Header = title, Content = viewResult.View };
            MainTabControl.Items.Add(newTabItem);

            newTabItem.Focus();
        }
    }

    // Other functionality omitted for brevity...
}

The sample application has a tabbed user interface, so the view placer needs to take a view and place it into the TabControl used by the main view.  As you can see, it cycles through any existing views so that duplicates are not shown.  Then, if the view is not a duplicate, it is placed into the TabControl and given focus.

This is a simple UI, so a fairly simple view placer is needed.  More complicated UIs will likely need more complicated view placers.  As an example, a previous project I worked on used a docking solution similar to Visual Studio.  In that case, the view placer would need to be aware of what views go into what docking sections.

Conclusion

The IViewPlacer interface is integral to the navigation solution provided by MVVM Fabric.  Since each application’s user interface is different, it is left up to the consumer of the library to implement this interface.  The complexity of the view placer implementation is dependent on the complexity of the user interface, but placing the view is its only responsibility.

Share

Tags : , ,