Click here to Skip to main content
15,885,906 members
Search within:


Articles / Desktop Programming / XAML
 

A Pluggable Architecture for Building Silverlight Applications with MVVM

Rate me:
Please Sign up or sign in to vote.
4.71/5 (23 votes)
6 Jul 2011CPOL7 min read 144.9K   2.2K   90  
This article describes building a sample Silverlight application with the MVVM Light toolkit, WCF RIA Services, and a pluggable application architecture using MEF.
 
<UserControl x:Class="IssueVision.Client.IssueEditor"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.SL4"
    xmlns:dat="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input"
    xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
    xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
    mc:Ignorable="d" d:DesignHeight="725" d:DesignWidth="978">

    <Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="326*" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="295*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="600*" />
            <ColumnDefinition Width="94*" />
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Row="0" Grid.Column="0"
                   HorizontalAlignment="Stretch" VerticalAlignment="Center"
                   Margin="4" Text="Issue Title" />
        <TextBox x:Name="textBox_IssueTitle" Grid.Row="0" Grid.Column="1"
                 VerticalAlignment="Center" 
                 Text="{Binding Path=CurrentIssue.Title, Mode=TwoWay,
                        ValidatesOnExceptions=True, NotifyOnValidationError=True}"/>
        <Border Grid.Row="0" Grid.Column="2"
                BorderBrush="Silver" BorderThickness="1"
                CornerRadius="3" Margin="5">
            <StackPanel>
                <TextBlock HorizontalAlignment="Center" Text="Issue ID" />
                <TextBlock HorizontalAlignment="Center"
                           Text="{Binding Path=CurrentIssue.IssueID, Mode=OneWay, TargetNullValue='None'}" />
            </StackPanel>
        </Border>
        <ScrollViewer Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="34*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Row="0" Grid.Column="0"
                           FontWeight="Bold" Margin="4" 
                           Text="Issue Info" />
                <TextBlock Grid.Row="1" Grid.Column="0"
                           VerticalAlignment="Center" Margin="4" 
                           Text="Type" />
                <ComboBox x:Name="comboBox_Type" Grid.Row="1" Grid.Column="1" 
                      Margin="4" MinHeight="25"
                      ItemsSource="{Binding Path=IssueTypeEntries}"
                      SelectedItem="{Binding Path=CurrentIssue.IssueType, Mode=TwoWay,
                                         ValidatesOnExceptions=True, NotifyOnValidationError=True}">
                    <ComboBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <TextBlock Text="{Binding Path=Name}" />
                            </StackPanel>
                        </DataTemplate>
                    </ComboBox.ItemTemplate>
                </ComboBox>
                <TextBlock Grid.Row="2" Grid.Column="0"
                           VerticalAlignment="Center" Margin="4" 
                           Text="Priority" />
                <ComboBox x:Name="comboBox_Priority" Grid.Row="2" Grid.Column="1" 
                          Margin="4" MinHeight="25"
                          ItemsSource="{Binding Path=PriorityEntries}"
                          SelectedItem="{Binding Path=CurrentIssue.Priority, Mode=TwoWay,
                                         ValidatesOnExceptions=True, NotifyOnValidationError=True}"/>
                <TextBlock Grid.Row="3" Grid.Column="0"
                           VerticalAlignment="Center" Margin="4" 
                           Text="Severity" />
                <ComboBox x:Name="comboBox_Severity" Grid.Row="3" Grid.Column="1"
                          Margin="4" MinHeight="25"
                          ItemsSource="{Binding Path=SeverityEntries}"
                          SelectedItem="{Binding Path=CurrentIssue.Severity, Mode=TwoWay,
                                         ValidatesOnExceptions=True, NotifyOnValidationError=True}"/>
                <TextBlock Grid.Row="4" Grid.Column="0"
                           VerticalAlignment="Center" Margin="4" 
                           Text="Status" />
                <ComboBox x:Name="comboBox_Status" Grid.Row="4" Grid.Column="1"
                      Margin="4" MinHeight="25" 
                      ItemsSource="{Binding Path=StatusEntries}"
                      SelectedItem="{Binding Path=CurrentIssue.Status, Mode=TwoWay,
                                         ValidatesOnExceptions=True, NotifyOnValidationError=True}">
                    <ComboBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <TextBlock Text="{Binding Path=Name}" />
                            </StackPanel>
                        </DataTemplate>
                    </ComboBox.ItemTemplate>
                </ComboBox>
                <TextBlock Grid.Row="5" Grid.Column="0"
                           VerticalAlignment="Center" Margin="4" 
                           Text="Substatus" />
                <ComboBox x:Name="comboBox_Substatus" Grid.Row="5" Grid.Column="1"
                      Margin="4" MinHeight="25" 
                      ItemsSource="{Binding Path=SubstatusEntriesWithNull}"
                      DisplayMemberPath="DisplayName"
                      SelectedValuePath="SubStatusID2"
                      SelectedValue="{Binding Path=CurrentIssue.SubStatusID, Mode=TwoWay,
                                         ValidatesOnExceptions=True, NotifyOnValidationError=True}"/>
                <TextBlock Grid.Row="6" Grid.Column="0"
                           VerticalAlignment="Center" Margin="4" 
                           Text="Platform" />
                <data:DataGrid x:Name="dataGrid_Platform" Grid.Row="6" Grid.Column="1" Grid.RowSpan="3"
                           VerticalAlignment="Top" Height="150"
                           Margin="4" IsReadOnly="True"
                           ColumnWidth="Auto" AutoGenerateColumns="False" 
                           SelectionMode="Single"
                           ItemsSource="{Binding Path=PlatformEntries}"
                           SelectedItem="{Binding Path=CurrentIssue.Platform, Mode=TwoWay,
                                         ValidatesOnExceptions=True, NotifyOnValidationError=True}">
                    <data:DataGrid.Columns>
                        <data:DataGridTemplateColumn Header="Operating System" Width="Auto" SortMemberPath="OSVersion">
                            <data:DataGridTemplateColumn.CellTemplate>
                                <DataTemplate>
                                    <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                                        <TextBlock Text="{Binding OS}" />
                                        <TextBlock Text=" " />
                                        <TextBlock Text="{Binding OSVersion}" />
                                    </StackPanel>
                                </DataTemplate>
                            </data:DataGridTemplateColumn.CellTemplate>
                        </data:DataGridTemplateColumn>
                        <data:DataGridTemplateColumn Header="Browser" Width="Auto" SortMemberPath="BrowserVersion">
                            <data:DataGridTemplateColumn.CellTemplate>
                                <DataTemplate>
                                    <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                                        <TextBlock Text="{Binding Browser}" />
                                        <TextBlock Text=" " />
                                        <TextBlock Text="{Binding BrowserVersion}" />
                                    </StackPanel>
                                </DataTemplate>
                            </data:DataGridTemplateColumn.CellTemplate>
                        </data:DataGridTemplateColumn>
                        <data:DataGridTextColumn Header="Language" Width="*" Binding="{Binding Language}" />
                    </data:DataGrid.Columns>
                </data:DataGrid>
                <TextBlock Grid.Row="1" Grid.Column="2"
                           VerticalAlignment="Center" Margin="4" 
                           Text="Opened"/>
                <TextBox Grid.Row="1" Grid.Column="3" 
                         Margin="4" IsReadOnly="True"
                         Text="{Binding Path=CurrentIssue.OpenedDate, Mode=OneWay, StringFormat=\{0:F\}}"/>
                <TextBlock Grid.Row="2" Grid.Column="2"
                           VerticalAlignment="Center" Margin="4" 
                           Text="Opened By" />
                <TextBox Grid.Row="2" Grid.Column="3"
                          Margin="4" MinHeight="25" IsReadOnly="True"
                         Text="{Binding Path=CurrentIssue.OpenedByID, Mode=OneWay}"/>
                <TextBlock Grid.Row="3" Grid.Column="2"
                           VerticalAlignment="Center" Margin="4" 
                           Text="Changed" />
                <TextBox Grid.Row="3" Grid.Column="3"
                         Margin="4" IsReadOnly="True" 
                         Text="{Binding Path=CurrentIssue.LastChange, StringFormat=\{0:F\}}" />
                <TextBlock Grid.Row="4" Grid.Column="2"
                           VerticalAlignment="Center" Margin="4" 
                           Text="Changed By" />
                <TextBox Grid.Row="4" Grid.Column="3"
                     Margin="4" MinHeight="25" IsReadOnly="True"
                     Text="{Binding Path=CurrentIssue.ChangedByID, Mode=OneWay}"/>
                <TextBlock Grid.Row="5" Grid.Column="2"
                           VerticalAlignment="Center" Margin="4" 
                           Text="Assigned To" />
                <ComboBox x:Name="comboBox_AssignedTo" Grid.Row="5" Grid.Column="3"
                      Margin="4" MinHeight="25" 
                      ItemsSource="{Binding Path=UserEntriesWithNull}"
                      DisplayMemberPath="DisplayName"
                      SelectedValuePath="Name"
                      SelectedValue="{Binding Path=CurrentIssue.AssignedToID, Mode=TwoWay,
                                         ValidatesOnExceptions=True, NotifyOnValidationError=True}"/>
                <TextBlock Grid.Row="6" Grid.Column="2"
                           VerticalAlignment="Center" Margin="4" 
                           Text="Resolution" />
                <ComboBox x:Name="comboBox_Resolution" Grid.Row="6" Grid.Column="3"
                          Margin="4" MinHeight="25" 
                          ItemsSource="{Binding Path=ResolutionEntriesWithNull}"
                          DisplayMemberPath="DisplayName"
                          SelectedValuePath="ResolutionID2"
                          SelectedValue="{Binding Path=CurrentIssue.ResolutionID, Mode=TwoWay,
                                         ValidatesOnExceptions=True, NotifyOnValidationError=True}"/>
                <TextBlock Grid.Row="7" Grid.Column="2"
                           VerticalAlignment="Center" Margin="4" 
                           Text="Resolved By" />
                <TextBox Grid.Row="7" Grid.Column="3"
                         Margin="4" MinHeight="25" IsReadOnly="True"
                         Text="{Binding Path=CurrentIssue.ResolvedByID, Mode=OneWay}"/>
            </Grid>
        </ScrollViewer>
        <controls:GridSplitter Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3"
                               HorizontalAlignment="Stretch" />
        <controls:TabControl Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3">
            <controls:TabItem Header="Details">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="164*" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Row="0" Grid.Column="0"
                               Text="Description" />
                    <TextBox x:Name="textBox_Description" Grid.Row="1" Grid.Column="0"
                             AcceptsReturn="True" VerticalScrollBarVisibility="Auto" TextWrapping="Wrap"
                             Text="{Binding Path=CurrentIssue.Description, Mode=TwoWay}" />
                    <controls:GridSplitter Grid.Row="0" Grid.Column="1"  Grid.RowSpan="2"
                                           HorizontalAlignment="Stretch"/>
                    <TextBlock Grid.Row="0" Grid.Column="2"
                               Text="Repro Steps" />
                    <TextBox x:Name="textBox_ReproSteps" Grid.Row="1" Grid.Column="2"
                             AcceptsReturn="True" VerticalScrollBarVisibility="Auto" TextWrapping="Wrap" 
                             Text="{Binding Path=CurrentIssue.ReproSteps, Mode=TwoWay}" />
                </Grid>
            </controls:TabItem>
            <controls:TabItem Header="Files">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="659*" />
                        <ColumnDefinition Width="129*" />
                    </Grid.ColumnDefinitions>
                    <Grid Grid.Row="0" Grid.Column="0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <TextBlock>Drop files here:</TextBlock>
                        <ListBox x:Name="listBox_Files" Grid.Row="1" Grid.Column="0"
                                 AllowDrop="True"
                                 ItemsSource="{Binding Path=CurrentIssue.Files}">
                            <i:Interaction.Triggers>
                                <i:EventTrigger EventName="Drop">
                                    <cmd:EventToCommand PassEventArgsToCommand="True"
                                                    Command="{Binding Path=HandleDropCommand, Mode=OneWay}" />
                                </i:EventTrigger>
                            </i:Interaction.Triggers>
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text="{Binding Path=FileName}" />
                                        <TextBlock Text="{Binding Path=Data.Length, StringFormat=' - \{0:F0\} bytes'}" />
                                    </StackPanel>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>
                    </Grid>
                    <Button x:Name="button_Add" Grid.Row="0" Grid.Column="1"
                            HorizontalAlignment="Left" VerticalAlignment="Top"
                            Height="23" Width="117" 
                            Margin="6,0,0,0" 
                            Content="Add"
                            Command="{Binding Path=AddFileCommand}" />
                    <Button x:Name="button_Remove" Grid.Row="0" Grid.Column="1"
                            HorizontalAlignment="Left" VerticalAlignment="Top"
                            Height="23" Width="117"
                            Margin="6,29,0,0" 
                            Content="Remove" 
                            Command="{Binding Path=RemoveFileCommand}"
                            CommandParameter="{Binding SelectedItem, ElementName=listBox_Files}" />
                    <Button x:Name="button_Save" Grid.Row="0" Grid.Column="1"
                            HorizontalAlignment="Left" VerticalAlignment="Top"
                            Height="23" Width="117"
                            Margin="6,58,0,0" 
                            Content="Save to disk" 
                            Command="{Binding Path=SaveToDiskCommand}"
                            CommandParameter="{Binding SelectedItem, ElementName=listBox_Files}" />
                </Grid>
            </controls:TabItem>
            <controls:TabItem Header="Attributes">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="664*" />
                        <ColumnDefinition Width="124*" />
                    </Grid.ColumnDefinitions>
                    <data:DataGrid x:Name="dataGrid_Attributes" Grid.Row="0" Grid.Column="0"
                                   AutoGenerateColumns="False" SelectionMode="Single"
                                   ItemsSource="{Binding Path=CurrentIssue.Attributes}">
                        <data:DataGrid.Columns>
                            <data:DataGridTextColumn Header="Key" Binding="{Binding AttributeName}" Width="*" />
                            <data:DataGridTextColumn Header="Value" Binding="{Binding Value}" Width="*" />
                        </data:DataGrid.Columns>
                    </data:DataGrid>
                    <Button x:Name="button_AddAttribute" Grid.Row="0" Grid.Column="1"
                            HorizontalAlignment="Left" VerticalAlignment="Top" 
                            Height="23" Width="112"
                            Margin="6,0,0,0" Content="Add" 
                            Command="{Binding Path=AddAttributeCommand}" />
                    <Button x:Name="button_RemoveAttribute" Grid.Row="0" Grid.Column="1" 
                            HorizontalAlignment="Left" VerticalAlignment="Top" 
                            Height="23" Width="112"
                            Margin="6,29,0,0" Content="Remove"
                            Command="{Binding Path=RemoveAttributeCommand}"
                            CommandParameter="{Binding SelectedItem, ElementName=dataGrid_Attributes}" />
                </Grid>
            </controls:TabItem>
        </controls:TabControl>
        <dat:ValidationSummary Grid.Row="4" Grid.Column="0"  Grid.ColumnSpan="3"
                               Target="{Binding ElementName=LayoutRoot}" />
    </Grid>
</UserControl>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Weidong Shen
Software Developer (Senior)
United States United States
Weidong has been an information system professional since 1990. He has a Master's degree in Computer Science, and is currently a MCSD .NET

Comments and Discussions

Permalink
Advertise
Privacy
Cookies
Terms of Use
Layout: fixed | fluid

Posted 20 Aug 2010

Article Copyright 2010 by Weidong Shen
Everything else Copyright © CodeProject, 1999-2024

Web03 2.8:2024-04-02:1