WPF / MVVM Resource Collection

Open Source Applications Using WPF:

- Kaxaml (http://kaxaml.codeplex.com/)
- FamilyShow (http://familyshow.codeplex.com/)
- BabySmash (http://babysmash.codeplex.com/)
- Microsoft Ribbon for WPF October 2010 (http://www.microsoft.com/en-us/download/details.aspx?id=11877)
- Crack.NET (http://cracknetproject.codeplex.com/)
- Prism (http://compositewpf.codeplex.com/)
- Snoop (http://snoopwpf.codeplex.com/)
- BBQShack (http://karlshifflett.wordpress.com/2010/02/07/bbq-shack-ocean-v2-for-visual-studio-2008/)
- Tasks.Show (http://windowsteamblog.com/windows/b/developers/archive/2011/02/24/tasks-show-a-windows-7-developers-resource.aspx)

Links:

1> WPF Apps With The Model-View-ViewModel Design Pattern – Josh Smith
http://msdn.microsoft.com/en-us/magazine/dd419663.aspx
Code at: http://archive.msdn.microsoft.com/mag200902MVVM

2> In the box with VS 2010
http://visualstudiogallery.msdn.microsoft.com/3ab5f02f-0c54-453c-b437-8e8d57eb9942/

3> Exploring a Model-View-ViewModel Application; WPF Password Manager, Cipher Text
- By Karl Shifflett
http://www.codeproject.com/Articles/32101/Exploring-a-Model-View-ViewModel-Application-WPF-P

4> WPF Business Application Series Part 1 of n - Application Structure, Skinning, and Custom ToolBar Button Control
http://www.codeproject.com/Articles/23524/WPF-Business-Application-Series-Part-1-of-n-Applic

5> Localizing a WPF application
http://www.codeproject.com/Articles/31837/Creating-an-Internationalized-Wizard-in-WPF

6> Task Library
http://www.codeproject.com/Articles/152765/Task-Parallel-Library-1-of-n

7> WPF - Beginner's guide
http://www.codeproject.com/Articles/22980/WPF-A-Beginner-s-Guide-Part-1-of-n

8> Threading with WPF
http://www.codeproject.com/Articles/49659/WPF-A-Most-Useful-Threading-Component

9> Essential Facebook Programming: Building a Windows Client in WPF (MSDN Jan 2013)
http://msdn.microsoft.com/en-us/magazine/jj883950.aspx

Videos:

- Jason Dolinger’s video on MVVM:
  http://blog.lab49.com/archives/2650
  http://www.lab49.com/wp-content/uploads/2011/12/Jason_Dolinger_MVVM.wmv

- The Full-Stack
  http://channel9.msdn.com/Series/The-Full-Stack/The-Full-Stack-Part-14-Taking-a-look-at-MVVM-with-John-Papa
  http://channel9.msdn.com/Series/The-Full-Stack/The-Full-Stack-Part-15-Starting-a-Pomodoro-application-with-MVVM
  http://channel9.msdn.com/Series/The-Full-Stack/The-Full-Stack-Part-16-More-MVVM-Fun-With-Some-More-Complex-Binding-Scenarios

XAML Guidelines

Found an interesting link for XAML guidelines:
http://www.cookingwithxaml.com/content/xamlguidelines/xamlGuidelinesDraft0.pdf

WPF: Binding example (Part 4)

We saw in the last post how we can change the UI of our WPF Task Manager to show all the processes in a grid layout using a ListView control. ListView is useful when we are restricted to .NET 3.5, because in .NET 4.0 framework we have the DataGrid control. There are certain shortcomings in ListView – one being it doesn’t allow automatic sorting of rows. Even if we implement sorting it doesn’t give a visual hint on the column we clicked to sort data. DataGrid is a complete control with all the important features. So let’s modify our application to use the DataGrid control.

We start by removing the ListView tag in XAML and replacing it with:

<DataGrid Grid.Column="0" Grid.Row="1" ItemsSource="{Binding Path=ProcList}" Background="Gray" Foreground="Black" Name="lst" HorizontalContentAlignment="Stretch">
</DataGrid>

And we get this:

Cool! All the columns are automatically generated and the cell type changes based on the data it holds. For e.g. HasExited is a bool so it changes to a check box.

But we do not need all the columns so let’s remove them.

We add this attribute AutoGenerateColumns="False" to the grid tag and add the DataGridTextColumns in the DataGrid.Columns collection.

        <DataGrid Grid.Column="0" Grid.Row="1" ItemsSource="{Binding Path=ProcList}" Background="Gray" Foreground="Black" Name="lst" HorizontalContentAlignment="Stretch"
                   AutoGenerateColumns="False">
            <DataGrid.Columns>
                <DataGridTextColumn Header="Name" Binding="{Binding Path=ProcessName}" />
                <DataGridTextColumn Header="Working Set" Binding="{Binding Path=WorkingSet}"/>
                <DataGridTextColumn Header="Private Memory" Binding="{Binding Path=PrivateMemorySize}"/>
                <DataGridTextColumn Header="Virtual Memory" Binding="{Binding Path=VirtualMemorySize}"/>
            </DataGrid.Columns>
        </DataGrid>

WPF: Binding example (Part 3)

Continuing on the binding series, we achieved this in the last blog post:

But there is something not right here. The column headers – ProcessName, WorkingSet etc. appear in each item. So how do we fix it. One of the option (we look at the other option in next post) is to use ListView control. This control offers a grid-like UI with columns – so let us see how it works out.

We change the XAML code (due to wonders of binding we do not need to change the code file):

<Window x:Class="Processes.ListViewTaskMgr"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         Title="WPF Task Manager" Height="350" Width="525" WindowStartupLocation="CenterScreen">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition />
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0" Grid.Column="0" Background="Orange" Orientation="Horizontal">
            <TextBlock Text="No. of processes:" Margin="10,10"/>
            <TextBlock Text="{Binding Path=ProcList.Count}" Margin="10,10"/>
        </StackPanel>
        <ListView Grid.Column="0" Grid.Row="1" ItemsSource="{Binding Path=ProcList}" Background="Gray" Foreground="Black" Name="lst" HorizontalContentAlignment="Stretch">
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Path=ProcessName}" />
                    <GridViewColumn Header="Working Set" DisplayMemberBinding="{Binding Path=WorkingSet}"/>
                    <GridViewColumn Header="Private Memory" DisplayMemberBinding="{Binding Path=PrivateMemorySize}"/>
                    <GridViewColumn Header="Virtual Memory" DisplayMemberBinding="{Binding Path=VirtualMemorySize}"/>
                </GridView>
            </ListView.View>
        </ListView>
    </Grid>
</Window>

Isn’t this fascinating? We just changed the UI layer and without touching code everything works well!

So how is ListView different from ListBox? In ListView each process object is bound to a single row. We do not need to use the ItemTemplate – we can use “DisplayMemberBinding” in ListView column to get the Process property.

WPF: Binding example (Part 2)

We will continue with our Task Manager application. This time we build the list box to show the process details.

Our goal is this screen:

The ListBox definition is:

<ListBox Grid.Row="1" Grid.Column="0" ItemsSource="{Binding Path=ProcList}" Background="Gray" Foreground="White">
</ListBox>

Binding set to our list object: “ProcList”.

Now we can see the list is populated (the scroll bar is enabled), however we do not see any text. We should see the ToString() implementation. For e.g. if we bind the listbox to a list of Person objects we get this:

this.DataContext = new List<Person> { new Person(), new Person() };

Well, lets see if we get this right by adding the ItemTemplate in the list box.

<ListBox Grid.Row="1" Grid.Column="0" ItemsSource="{Binding Path=ProcList}" Background="Gray" Foreground="White" Name="lst">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Path=ProcessName}" />
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

So now we have the process names in the list box. Let’s tidy it a bit:

                <DataTemplate>
                    <Border BorderBrush="Black" BorderThickness="2">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <TextBlock Grid.Row="0" Grid.Column="0" Text="ProcessName" Margin="5,5"/>
                            <TextBlock Grid.Row="1" Grid.Column="0" Text="{Binding Path=ProcessName}" Margin="5,5"/>
                            <TextBlock Grid.Row="0" Grid.Column="1" Text="WorkingSet" Margin="5,5"/>
                            <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=WorkingSet}" Margin="5,5"/>
                            <TextBlock Grid.Column="2" Text="PrivateMemorySize" Margin="5,5"/>
                            <TextBlock Grid.Row="1" Grid.Column="2" Text="{Binding Path=PrivateMemorySize}" Margin="5,5"/>
                            <TextBlock Grid.Column="3" Text="VirtualMemorySize" Margin="5,5"/>
                            <TextBlock Grid.Row="1" Grid.Column="3" Text="{Binding Path=VirtualMemorySize}" Margin="5,5"/>
                        </Grid>
                    </Border>
                </DataTemplate>

The content doesn’t stretch, this can be done by adding “HorizontalContentAlignment="Stretch" in the ListBox.

So we get:

The full code is embedded here:

Code file:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Diagnostics;
namespace Processes
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            GetProcesses();
            this.DataContext = this;
        }
        private List<Process> _procList;
        public List<Process> ProcList
        {
            get { return _procList; }
            set { _procList = value; }
        }
        private void GetProcesses()
        {
            ProcList = Process.GetProcesses().ToList<Process>();
        }
    }
}
<Window x:Class="Processes.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WPF Task Manager" Height="350" Width="525" WindowStartupLocation="CenterScreen">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition />
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0" Grid.Column="0" Background="Orange" Orientation="Horizontal">
            <TextBlock  Text="Count:" Margin="10,10"/>
            <TextBlock  Text="{Binding Path=ProcList.Count}" Margin="10,10"/>
        </StackPanel>
        <ListBox Grid.Row="1" Grid.Column="0" ItemsSource="{Binding Path=ProcList}" Background="Gray" Foreground="White" Name="lst" HorizontalContentAlignment="Stretch">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Border BorderBrush="Black" BorderThickness="2">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <TextBlock Grid.Row="0" Grid.Column="0" Text="ProcessName" Margin="5,5"/>
                            <TextBlock Grid.Row="1" Grid.Column="0" Text="{Binding Path=ProcessName}" Margin="5,5"/>
                            <TextBlock Grid.Row="0" Grid.Column="1" Text="WorkingSet" Margin="5,5"/>
                            <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=WorkingSet}" Margin="5,5"/>
                            <TextBlock Grid.Column="2" Text="PrivateMemorySize" Margin="5,5"/>
                            <TextBlock Grid.Row="1" Grid.Column="2" Text="{Binding Path=PrivateMemorySize}" Margin="5,5"/>
                            <TextBlock Grid.Column="3" Text="VirtualMemorySize" Margin="5,5"/>
                            <TextBlock Grid.Row="1" Grid.Column="3" Text="{Binding Path=VirtualMemorySize}" Margin="5,5"/>
                        </Grid>
                    </Border>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</Window>

WPF Deep Dive: Binding

Let’s dive today into WPF binding.

Binding literally means a link or connection between two objects. In WinForms world, binding usually meant fetching data from a database, filling up the DataSet objects and then binding them with the data grid on the visual layer. Although there was the possibility of binding the UI layer to custom business objects – there was little support from the framework to achieve this. We can’t say it was totally absent, because the interface we use in .NET 3.5/4.0 for binding – INotifyPropertyChanged (in System.ComponentModel namespace) has been available since .NET framework 2.0.

Binding in real world:

Let us begin with wiping out WinForms from our minds. If we want to develop a banking application with the UI given above, what comes to your mind? With our background in OOPS we would start thinking in objects (or if you are designer you would start with selecting a better color for the text :-). Objects we think are a Customer with all properties like name, account no., balance etc.; a Bank object with bank name, a web service to fetch/update customer details.

Resources for UI Patterns

UI Patterns from Infragistics (built in Silverlight):
http://quince.infragistics.com/#/Main

General UI pattern web site targeted to web developers:
http://www.smashingmagazine.com/

Windows User Experience Interaction Guidelines:
http://msdn.microsoft.com/en-us/library/aa511258.aspx

Expression gallery:
http://gallery.expression.microsoft.com/

WPF: Interesting UI

<Window x:Class="StartWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Background="Black" Foreground="White"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" Height="400" Width="525" FontFamily="Verdana" FontSize="13">
    <Grid>
        <Image Width="300" Height="300">
            <Image.Source>
                <DrawingImage>
                    <DrawingImage.Drawing>
                        <GeometryDrawing Brush="Orange">
                            <GeometryDrawing.Pen>
                                <Pen Brush="Red" Thickness="5" />
                            </GeometryDrawing.Pen>
                            <GeometryDrawing.Geometry>
                                <EllipseGeometry RadiusX="1000" RadiusY="10" />
                            </GeometryDrawing.Geometry>
                        </GeometryDrawing>
                    </DrawingImage.Drawing>
                </DrawingImage>
            </Image.Source>
        </Image>
    </Grid>
</Window>

Debug XAML

Posting some links to debug XAML:

http://joshsmithonwpf.wordpress.com/2007/03/29/tips-on-how-to-debug-and-learn-about-wpf/

http://blogs.msdn.com/b/wpfsldesigner/archive/2010/06/30/debugging-data-bindings-in-a-wpf-or-silverlight-application.aspx

http://www.beacosta.com/blog/?p=52