Click here to Skip to main content
Click here to Skip to main content
Add your own
alternative version
Go to top

A Sample Silverlight 4 Application Using MEF, MVVM, and WCF RIA Services - Part 1

, 7 Jul 2011
Part 1 of a series describing the creation of a Silverlight business application using MEF, MVVM Light, and WCF RIA Services.
IssueVisionforSilverlightSetup20110630.zip
IssueVision for Silverlight Setup
IssueVisionSetup.msi
setup.exe
IssueVision_for_Silverlight_setup.zip
IssueVisionSetup.msi
setup.exe
IssueVision_Silverlight20110630.zip
IssueVision.Silverlight
Assemblies
GalaSoft.MvvmLight.Extras.SL4.dll
GalaSoft.MvvmLight.SL4.dll
MenuControls.dll
System.Windows.Controls.DataVisualization.Toolkit.dll
System.Windows.Controls.Toolkit.dll
System.Windows.Controls.Toolkit.Internals.dll
System.Windows.Interactivity.dll
Database
IssueVision.Client
IssueVision.Client.csproj.user
Assets
Signin.png
Controls
Properties
Views
IssueVision.Common
IssueVision.Common.csproj.user
Controls
Helpers
Models
Properties
Resources
Themes
IssueVision.Data
IssueVision.Data.csproj.user
Properties
Web
Resources
IssueVision.Data.Web
IssueVision.edmx
Helpers
MetadataClasses
Properties
Resources
Services
IssueVision.Model
IssueVision.Model.csproj.user
Properties
IssueVision.Setup
IssueVisionSetup.vdproj
IssueVision.ViewModel
IssueVision.ViewModel.csproj.user
Properties
IssueVision.Web
IssueVision.Web.csproj.user
Properties
IssueVision_Silverlight_20110316.zip
GalaSoft.MvvmLight.Extras.SL4.dll
GalaSoft.MvvmLight.SL4.dll
MenuControls.dll
System.Windows.Controls.DataVisualization.Toolkit.dll
System.Windows.Controls.Toolkit.dll
System.Windows.Controls.Toolkit.Internals.dll
System.Windows.Interactivity.dll
IssueVision.Client.csproj.user
Signin.png
DataSources
IssueVision.Data.Web.IssueVisionContext.datasource
IssueVision.Data.Web.PasswordResetContext.datasource
IssueVision.Common.csproj.user
IssueVision.Data.csproj.user
IssueVision.edmx
DataTypes
IssueVision.Model.csproj.user
IssueVisionSetup.vdproj
IssueVision.ViewModel.csproj.user
IssueVision.Web.csproj.user
IssueVision_Silverlight_20110606.zip
GalaSoft.MvvmLight.Extras.SL4.dll
GalaSoft.MvvmLight.SL4.dll
MenuControls.dll
System.Windows.Controls.DataVisualization.Toolkit.dll
System.Windows.Controls.Toolkit.dll
System.Windows.Controls.Toolkit.Internals.dll
System.Windows.Interactivity.dll
IssueVision.Client.csproj.user
Signin.png
IssueVision.Common.csproj.user
IssueVision.Data.csproj.user
IssueVision.edmx
IssueVision.Model.csproj.user
IssueVisionSetup.vdproj
IssueVision.ViewModel.csproj.user
IssueVision.Web.csproj.user
IssueVision_Silverlight_Setup.zip
IssueVisionSetup.msi
setup.exe
<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',
                                  ValidatesOnNotifyDataErrors=False}" />
            </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,
                                                    ValidatesOnNotifyDataErrors=False}">
                    <ComboBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <TextBlock Text="{Binding Path=Name, ValidatesOnNotifyDataErrors=False}" />
                            </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,
                                         ValidatesOnNotifyDataErrors=False}"/>
                <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,
                                         ValidatesOnNotifyDataErrors=False}"/>
                <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,
                                                    ValidatesOnNotifyDataErrors=False}">
                    <ComboBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <TextBlock Text="{Binding Path=Name, ValidatesOnNotifyDataErrors=False}" />
                            </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,
                                      ValidatesOnNotifyDataErrors=False}"/>
                <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,
                                          ValidatesOnNotifyDataErrors=False}">
                    <data:DataGrid.Columns>
                        <data:DataGridTemplateColumn Header="Operating System" Width="Auto" SortMemberPath="OSVersion">
                            <data:DataGridTemplateColumn.CellTemplate>
                                <DataTemplate>
                                    <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                                        <TextBlock Text="{Binding Path=OS, ValidatesOnNotifyDataErrors=False}" />
                                        <TextBlock Text=" " />
                                        <TextBlock Text="{Binding Path=OSVersion, ValidatesOnNotifyDataErrors=False}" />
                                    </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 Path=Browser, ValidatesOnNotifyDataErrors=False}" />
                                        <TextBlock Text=" " />
                                        <TextBlock Text="{Binding Path=BrowserVersion, ValidatesOnNotifyDataErrors=False}" />
                                    </StackPanel>
                                </DataTemplate>
                            </data:DataGridTemplateColumn.CellTemplate>
                        </data:DataGridTemplateColumn>
                        <data:DataGridTextColumn Header="Language" Width="*" Binding="{Binding Path=Language, ValidatesOnNotifyDataErrors=False}" />
                    </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\},
                                ValidatesOnNotifyDataErrors=False}"/>
                <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,
                                ValidatesOnExceptions=True, NotifyOnValidationError=True}"/>
                <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\},
                                ValidatesOnNotifyDataErrors=False}" />
                <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,
                            ValidatesOnExceptions=True, NotifyOnValidationError=True}"/>
                <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,
                                ValidatesOnExceptions=True, NotifyOnValidationError=True}"/>
            </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, ValidatesOnNotifyDataErrors=False}" />
                    <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, ValidatesOnNotifyDataErrors=False}" />
                </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, ValidatesOnNotifyDataErrors=False}">
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text="{Binding Path=FileName, ValidatesOnNotifyDataErrors=False}" />
                                        <TextBlock Text="{Binding Path=Data.Length, StringFormat=' - \{0:F0\} bytes',
                                                          ValidatesOnNotifyDataErrors=False}" />
                                    </StackPanel>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                            <i:Interaction.Triggers>
                                <i:EventTrigger EventName="Drop">
                                    <cmd:EventToCommand PassEventArgsToCommand="True"
                                                    Command="{Binding Path=HandleDropCommand, Mode=OneWay}" />
                                </i:EventTrigger>
                            </i:Interaction.Triggers>
                        </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, ValidatesOnNotifyDataErrors=False}" />
                    <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, ValidatesOnNotifyDataErrors=False}" />
                </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, ValidatesOnNotifyDataErrors=False}">
                        <data:DataGrid.Columns>
                            <data:DataGridTextColumn Header="Key" Binding="{Binding Path=AttributeName, ValidatesOnNotifyDataErrors=False}" Width="*" />
                            <data:DataGridTextColumn Header="Value" Binding="{Binding Path=Value, ValidatesOnNotifyDataErrors=False}" 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, ValidatesOnNotifyDataErrors=False}" />
                </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)

Share

About the Author

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

| Advertise | Privacy | Mobile
Web02 | 2.8.140926.1 | Last Updated 7 Jul 2011
Article Copyright 2010 by Weidong Shen
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid