Click here to Skip to main content
15,879,065 members
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.6K   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.MyProfile"
    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:dat="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input"
    xmlns:common="clr-namespace:IssueVision.Common;assembly=IssueVision.Common"
    Loaded="UserControl_Loaded" Unloaded="UserControl_Unloaded"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">

    <UserControl.Resources>
        <common:BooleanToVisibilityConverter x:Key="booleanToVisibilityConverter"/>
    </UserControl.Resources>
    
    <Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="1*" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <ScrollViewer Grid.Row="0" Grid.Column="0"
                      VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
            <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" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4"
                           FontWeight="Bold" Margin="4" 
                           Text="User Info" />
                <TextBlock Grid.Row="1" Grid.Column="0"
                           VerticalAlignment="Center" Margin="4" 
                           Text="User name" />
                <TextBox Grid.Row="1" Grid.Column="1"
                         Margin="4" MinHeight="25"
                         Text="{Binding Path=CurrentUser.Name, ValidatesOnNotifyDataErrors=False}"
                         IsReadOnly="True"/>
                <TextBlock Grid.Row="2" Grid.Column="0"
                           VerticalAlignment="Center" Margin="4" 
                           Text="Email" />
                <TextBox Grid.Row="2" Grid.Column="1"
                         Margin="4" MinHeight="25"
                         Text="{Binding Path=CurrentUser.Email, Mode=TwoWay, 
                                ValidatesOnExceptions=True, NotifyOnValidationError=True}" />
                <TextBlock Grid.Row="1" Grid.Column="2"
                           VerticalAlignment="Center" Margin="4" 
                           Text="First name" />
                <TextBox Grid.Row="1" Grid.Column="3"
                         Margin="4" MinHeight="25"
                         Text="{Binding Path=CurrentUser.FirstName, Mode=TwoWay,
                                ValidatesOnExceptions=True, NotifyOnValidationError=True}" />
                <TextBlock Grid.Row="2" Grid.Column="2"
                           VerticalAlignment="Center" Margin="4" 
                           Text="Last name" />
                <TextBox Grid.Row="2" Grid.Column="3"
                         Margin="4" MinHeight="25"
                         Text="{Binding Path=CurrentUser.LastName, Mode=TwoWay,
                                ValidatesOnExceptions=True, NotifyOnValidationError=True}" />
                <TextBlock Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="4"
                           FontWeight="Bold" Margin="4" 
                           Text="Security Info" />
                <TextBlock Grid.Row="4" Grid.Column="0"
                           VerticalAlignment="Center" Margin="4" 
                           Text="User type" />
                <TextBox Grid.Row="4" Grid.Column="1"
                         Margin="4" MinHeight="25"
                         Text="{Binding Path=CurrentUser.DisplayUserType, ValidatesOnNotifyDataErrors=False}"
                         IsReadOnly="True"/>
                <TextBlock Grid.Row="5" Grid.Column="0"
                           VerticalAlignment="Center" Margin="4" 
                           Text="Current Password" />
                <PasswordBox Grid.Row="5" Grid.Column="1"
                             Margin="4" MinHeight="25"
                             Password="{Binding Path=CurrentUser.Password, Mode=TwoWay,
                                        ValidatesOnExceptions=True, NotifyOnValidationError=True}" />
                <TextBlock Grid.Row="6" Grid.Column="0"
                           VerticalAlignment="Center" Margin="4" 
                           Text="New Password" />
                <TextBlock x:Name="actualNewPasswordTextBlock"
                           Grid.Row="6" Grid.Column="1"
                           Margin="4" Height="25"
                           Text="{Binding Path=CurrentUser.ActualNewPassword, Mode=TwoWay,
                                        ValidatesOnNotifyDataErrors=False}"
                           Visibility="Collapsed"/>
                <PasswordBox x:Name="newPasswordPasswordBox"
                             Grid.Row="6" Grid.Column="1"
                             Margin="4" Height="25"
                             Password="{Binding Path=CurrentUser.NewPassword, Mode=TwoWay,
                                        ValidatesOnExceptions=True, NotifyOnValidationError=True}"
                             PasswordChanged="newPasswordPasswordBox_PasswordChanged" />
                <StackPanel Grid.Row="7" Grid.Column="0">
                    <TextBlock Text="Confirm new" Margin="4,4,4,0" />
                    <TextBlock Text="password" Margin="4,0,4,4" />
                </StackPanel>
                <PasswordBox Grid.Row="7" Grid.Column="1"
                             Margin="4" Height="25"
                             Password="{Binding Path=CurrentUser.NewPasswordConfirmation, Mode=TwoWay,
                                        ValidatesOnExceptions=True, NotifyOnValidationError=True}"/>
                <TextBlock Grid.Row="4" Grid.Column="2"
                           VerticalAlignment="Center" Margin="4" 
                           Text="Security question" />
                <ComboBox Grid.Row="4" Grid.Column="3" 
                          Margin="4" MinHeight="25"
                          ItemsSource="{Binding Path=SecurityQuestionEntries}"
                          DisplayMemberPath="PasswordQuestion"
                          SelectedValuePath="PasswordQuestion"
                          SelectedValue="{Binding Path=CurrentUser.PasswordQuestion, Mode=TwoWay,
                                                       ValidatesOnNotifyDataErrors=False}"/>
                <TextBlock Grid.Row="5" Grid.Column="2"
                           VerticalAlignment="Center" Margin="4" 
                           Text="Security answer" />
                <TextBlock x:Name="actualPasswordAnswerTextBlock"
                           Grid.Row="5" Grid.Column="3"
                           Margin="4" MinHeight="25"
                           Text="{Binding Path=CurrentUser.ActualPasswordAnswer, Mode=TwoWay,
                                       ValidatesOnNotifyDataErrors=False}"
                           Visibility="Collapsed"/>
                <PasswordBox x:Name="passwordAnswerPasswordBox"
                             Grid.Row="5" Grid.Column="3"
                             Margin="4" MinHeight="25"
                             Password="{Binding Path=CurrentUser.PasswordAnswer, Mode=TwoWay,
                                        ValidatesOnExceptions=True, NotifyOnValidationError=True}"
                             PasswordChanged="passwordAnswerPasswordBox_PasswordChanged" />
                <StackPanel Grid.Row="6" Grid.Column="2">
                    <TextBlock Text="Confirm security" Margin="4,4,4,0" />
                    <TextBlock Text="answer" Margin="4,0,4,4" />
                </StackPanel>
                <PasswordBox Grid.Row="6" Grid.Column="3"
                             Margin="4" Height="25"
                             Password="{Binding Path=CurrentUser.PasswordAnswerConfirmation, Mode=TwoWay,
                                        ValidatesOnExceptions=True, NotifyOnValidationError=True}"/>
            </Grid>
        </ScrollViewer>
        <TextBox Grid.Row="1" Grid.Column="0"
                 VerticalAlignment="Top"
                 Background="Red" Foreground="White" 
                 Text="User profile has been updated by admin, please reset."
                 IsReadOnly="True"
                 Visibility="{Binding Path=CurrentUser.ProfileResetFlag, Mode=OneWay, 
                              Converter={StaticResource booleanToVisibilityConverter}, ValidatesOnNotifyDataErrors=False}" />
        <dat:ValidationSummary Grid.Row="1" Grid.Column="0"
                               Target="{Binding ElementName=LayoutRoot}" />
        <Button Grid.Row="2" Grid.Column="0"
                VerticalAlignment="Top" HorizontalAlignment="Right" 
                Width="75" Height="23" Margin="0,5,86,5" 
                Content="Save"
                Command="{Binding Path=SubmitChangeCommand}"/>
        <Button  Grid.Row="2" Grid.Column="0"
                 VerticalAlignment="Top" HorizontalAlignment="Right"
                 Width="75" Height="23" Margin="0,5,5,5"
                 Content="Cancel"
                 Command="{Binding Path=CancelChangeCommand}"/>
    </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
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