STEP BY STEP to Build the Application 1. Start a. Open a MvvmLight (WPF4) application and name it MvvmControlChange.

Transcription

1 Application Description This MVVM WPF application includes a WPF Window with a contentcontrol and multiple UserControls the user can navigate between with button controls. The contentcontrols will have data bound text blocks and screen changes driven by RelayCommands and Messages. High level Procedure Overview A high level procedure to achieve the application solution utilizes a MvvmLight WPF4 template in VS Start a. First we will test that the Mvvm Light Tool Kit sample kit runs. i. Select New Project, Select MvvmLight (WPF4) Visual C#. Name the Application MvvmControlChange. Place it in the location of your Choice. 2. Folders and Files a. Next we will add a new main page and usercontrol pages and their viewmodels. b. We ll clean up the application by deleting unnecessary items that came w/ the toolkit sample. 3. Overhead a. We ll update the overhead files app.xaml and ViewModelLocator.cs. 4. View & ViewModel Interaction a. We ll add content and bind the content to the ViewModel (i.e. properties) b. Add Code Behind c. Messaging i. Add messaging and code behind interaction. 5. RUN! STEP BY STEP to Build the Application 1. Start a. Open a MvvmLight (WPF4) application and name it MvvmControlChange. MvvmControlChange StepbyStep v1.docx 1 of 15 10/26/2012

2 b. F5 to test that the Welcome to MVVM Light WPF Window opens properly. c. Stop debugging (close the window) to start modifying! 2. Create Folders and Files a. Add Folders i. Add a folder named Content to the Root VS Solution by right clicking on the MvvmControlChange Solution. MvvmControlChange StepbyStep v1.docx 2 of 15 10/26/2012

3 ii. Add three page folders to the Content Folder named MainPage, Page2, and Page3. iii. Add the sub folders View and ViewModel to each of the Page folders. The finished folder structure will look like: b. Add Files to Folders i. Each View folder will receive a MvvmView (WPF) template. Add Item to View folder: Right Click on tar View Folder, Add, New Item, MvvmView (WPF). Add the suffix View to the Page folder name to create the xaml filename. You will have the following three view names: MainPageView, Page2View, and Page3View. ii. Each ViewModel folder will receive a MvvmViewModel (WPF) template. Add Item to ViewModel Folder: Right Click on tar ViewModel Folder, Add, New Item, MvvmViewModel (WPF). You will have the following three ViewModel names: MainPageViewModel, Page2ViewModel, and Page3ViewModel. iii. The completed folders and files will look like: MvvmControlChange StepbyStep v1.docx 3 of 15 10/26/2012

4 iv. Do not change anything yet, we ll come back and modify the files later. c. Remove Unused Items in project i. Delete the MainWindow.xaml in the root directory and in the ViewModel directory delete MainViewModel.cs. You could also delete skins, Design, and Model files, but we ll leave them in for now. You should leave the folders, but the files can be deleted when you start your real application. 3. Overhead Modify Files MVVM Style a. App.xaml i. Double Click on App.xaml. Change the StartupUri to following: StartupUri="Content/MainPage/View/MainPageView.xaml" Recall that the MainView.xaml file was deleted and the MainPageView.xaml file was added and is now the startup window. ii. Save the file. b. ViewModelLocator.cs i. Double click the ViewModelLocator.cs file. ii. First, point to the locations of the ViewModels in the using statements by adding: MvvmControlChange StepbyStep v1.docx 4 of 15 10/26/2012

5 using MvvmControlChange.Content.MainPage.ViewModel; using MvvmControlChange.Content.Page2.ViewModel; using MvvmControlChange.Content.Page3.ViewModel; iii. Now, register the ViewModels w/ the SimpleIoc in the static ViewModelLocator(). Delete the line SimpleIoc.Default. Register<MainViewModel>(); and add the following: SimpleIoc.Default.Register<MainPageViewModel>(); SimpleIoc.Default.Register<Page2ViewModel>(); SimpleIoc.Default.Register<Page3ViewModel>(); iv. ViewModel Properties. Ensure you have snippets installed. Tools/Code Snippets Manager. Ensure you have the CSharp Snippets: v. If the code snippets are not shown, select Add and navigate to the folder like this : C:\Program Files (x86)\laurent Bugnion (GalaSoft)\Mvvm Light Toolkit\Snippets\CSharp vi. Type in the snippet mvvmlocatorproperty and hit Tab. MvvmControlChange StepbyStep v1.docx 5 of 15 10/26/2012

6 vii. Too much code is thrown in, remove the static ViewModleLocator: static ViewModelLocator() ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default); SimpleIoc.Default.Register<ViewModelType>(); viii. Change the property snippet to the following: public MainPageViewModel MainPageViewModel return ServiceLocator.Current.GetInstance<MainPageViewModel>(); Do that for Page2ViewModel and Page3ViewModel as well. ix. You should have some squigglies under the MainViewModel property. Delete that property as you replaced the MainView with MainPageView. x. You are COMPLETE with your ViewModleLocator.cs to this point. Good job. xi. You need one more component for later and I consider it part of the overhead. You need to add a c# class named GoToPageMessage.cs. The code in it is VERY simple. It is a property to be placed in the class: public string PageName ; set; 4. View and ViewModel Interaction You have your xaml view pages in the project and updated the ViewModelLocator.cs and App.xaml files. But, there is no content on your views. You can actually debug (F5) the program now and it will run. What does it show? A blank screen!! Ugh a. Let s Add Content to the Views. For simplicity s sake, double click on MainPageView.xaml and copy over the existing code with the following (We ll go over the details later (in class)): <Window x:class="mvvmcontrolchange.content.mainpage.view.mainpageview" xmlns=" MvvmControlChange StepbyStep v1.docx 6 of 15 10/26/2012

7 xmlns:x=" xmlns:d=" xmlns:mc=" compatibility/2006" xmlns:galasoft_mvvmlight_command="clrnamespace:galasoft.mvvmlight.command;assembly=galasoft.mvvmlight.extras.wpf4" xmlns:custom="clrnamespace:system.windows.interactivity;assembly=system.windows.interactivity" xmlns:ignore=" mc:ignorable="d ignore" DataContext="Binding MainPageViewModel, Source=StaticResource Locator" Title="Give me Liberty or Give me Smart Basic" d:designheight="360" d:designwidth="488" SizeToContent="WidthAndHeight"> <! LayoutRoot contains the root grid where all other page content is placed > <Grid x:name="layoutroot" Background="Transparent"> <Grid.RowDefinitions> <RowDefinition Height="3*" /> <RowDefinition Height="*" /> <RowDefinition Height="6*" /> </Grid.RowDefinitions> <! TitlePanel contains the name of the application and page title > <StackPanel x:name="titlepanel" Grid.Row="0" Margin="24,24,0,12"> <TextBlock x:name="applicationtitle" Text="Binding ApplicationTitle" /> <TextBlock x:name="pagetitle" Text="Binding PageName" Margin=" 3,10,0,0"/> </StackPanel> <! ContentPanel place additional content here > <Grid x:name="contentgrid" Grid.Row="1" Grid.RowSpan="1"> </Grid> <Button x:name="page2button" Content="Page 2" Margin="0" Grid.Row="1" d:layoutoverrides="width, Height" HorizontalAlignment="Center" VerticalAlignment="Center"> <Custom:Interaction.Triggers> <Custom:EventTrigger EventName="Click"> <GalaSoft_MvvmLight_Command:EventToCommand x:name="page2buttonclicked" Command="Binding Page2Command, Mode=OneWay" /> </Custom:EventTrigger> </Custom:Interaction.Triggers> MvvmControlChange StepbyStep v1.docx 7 of 15 10/26/2012

8 </Button> <ContentControl Grid.Row="2" Height="204" HorizontalAlignment="Left" Name="contentControl1" </Grid> </Window> VerticalAlignment="Top" Width="466" /> a. If the View will be a UserControl, changes to the *.xaml and *.xaml.cs need to be made a. *.xaml: i. Change <Window to <UserControl and </Window> to </UserControl>. b. *.xaml.cs: i. Add: using System.Windows.Controls; ii. Change public partial class MainPageView : Window to public partial class MvvmView1 : UserControl iii. Rebuild F6 to remove squigglies, if necessary. b. Copy over the code for the Page2View.xaml with the following: <UserControl x:class="mvvmcontrolchange.content.page2.view.page2view" xmlns=" xmlns:x=" xmlns:d=" xmlns:mc=" compatibility/2006" xmlns:galasoft_mvvmlight_command="clrnamespace:galasoft.mvvmlight.command;assembly=galasoft.mvvmlight.extras.wpf4" xmlns:custom="clrnamespace:system.windows.interactivity;assembly=system.windows.interactivity" xmlns:ignore=" mc:ignorable="d ignore" DataContext="Binding Page2ViewModel, Source=StaticResource Locator" d:designheight="194" d:designwidth="256"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="43*" /> <RowDefinition Height="65*" /> </Grid.RowDefinitions> <StackPanel x:name="titlepanel" Grid.Row="0" Margin="24,24,0,12"> <TextBlock x:name="applicationtitle" Text="Binding ApplicationTitle" /> <TextBlock x:name="pagetitle" Text="Binding PageName" Margin=" 3,10,0,0" /> </StackPanel> MvvmControlChange StepbyStep v1.docx 8 of 15 10/26/2012

9 <Button x:name="page3button" Content="Page 3" Grid.Row="1" Height="30" HorizontalAlignment="Left" Margin="27,9,0,0" VerticalAlignment="Top" Width="72" d:layoutoverrides="width, Height"> <Custom:Interaction.Triggers> <Custom:EventTrigger EventName="Click"> <GalaSoft_MvvmLight_Command:EventToCommand x:name="page3buttonclicked" Page3Command, Mode=OneWay" /> </Custom:EventTrigger> </Custom:Interaction.Triggers> </Button> </Grid> </UserControl> c. And, lastly copy over the code for Page3View.xaml. Command="Binding <UserControl x:class="mvvmcontrolchange.content.page3.view.page3view" xmlns=" xmlns:x=" xmlns:d=" xmlns:mc=" compatibility/2006" xmlns:ignore=" mc:ignorable="d ignore" DataContext="Binding Page3ViewModel, Source=StaticResource Locator" d:designheight="169" d:designwidth="255"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="43*" /> <RowDefinition Height="65*" /> </Grid.RowDefinitions> <StackPanel x:name="titlepanel" Grid.Row="0" Margin="24,24,0,12"> <TextBlock x:name="infotitlepage3" Text="Binding InfoTitlePage3" /> <TextBlock x:name="pagetitle" Text="Binding PageTitle" Margin=" 3,10,0,0" /> </StackPanel> </Grid> </UserControl> d. Bind to ViewModel a. When you copied over the code, you may not have noticed, but you included bindings for your textblocks, among other goodies Now, you need to connect MvvmControlChange StepbyStep v1.docx 9 of 15 10/26/2012

10 the bindings in xaml to the properties in the ViewModels. Copy the following code into the view models: b. MainPageViewModel public string ApplicationTitle return "MVVM LIGHT 1 more Edwin"; public string PageName return "Page 1. Please message away from me"; public string Welcome return "Welcome to Page 1"; c. Before you copy Pag2ViewModel, test it. Press F6 and open MainPageView.xaml, do the bindings work? d. Page2ViewModel public string ApplicationTitle return "MVVM LIGHT p2"; public string PageName return "Page 2"; public string Welcome return "Welcome to Page 2"; e. Page3ViewModel MvvmControlChange StepbyStep v1.docx 10 of 15 10/26/2012

11 public string InfoTitlePage3 return "MVVM LIGHT p3"; public string PageTitle return "Page 3"; f. Now you have your properties for the textblocks in and you can see the results. If you run the code now, it is a little underwhelming. There is no interaction between the views. Don t fret, Last steps coming up! e. Commands and Messaging a. You need to add the code change between the views. That is accomplished via commands and messaging. In the Mvvm toolkit, the commands are handled by RelayCommands that Laurent put toher. b. Xaml i. Now would be a good time to go look at the xaml in MainPageView.xaml and Page2View.xaml to see the command code in the xaml. Looks like this in MainPageView.xaml. <Button x:name="page2button" Content="Page 2" Margin="0" Grid.Row="1" d:layoutoverrides="width, Height" HorizontalAlignment="Center" VerticalAlignment="Center"> <Custom:Interaction.Triggers> <Custom:EventTrigger EventName="Click"> <GalaSoft_MvvmLight_Command:EventToCommand x:name="page2buttonclicked" Command="Binding Page2Command, Mode=OneWay" /> </Custom:EventTrigger> </Custom:Interaction.Triggers> </Button> There s also some code in the window definition that is req d: xmlns:galasoft_mvvmlight_command="clrnamespace:galasoft.mvvmlight.command;assembly=galasoft.mvvmlight.extras.wpf4" xmlns:custom="clrnamespace:system.windows.interactivity;assembly=system.windows.interactivity" ii. Let s add code. Back to the MainPageViewModel.cs and add the following code: MvvmControlChange StepbyStep v1.docx 11 of 15 10/26/2012

12 using GalaSoft.MvvmLight.Command; using GalaSoft.MvvmLight.Messaging; Later add: public RelayCommand Page2Command ; private set; Add this in the public MainPageViewModel() Constructor: Page2Command = new RelayCommand(() => GoToPage2()); But GoToPage2() is not in the code, so add that as well: private object GoToPage2() var msg = new GoToPageMessage() PageName = "Page2View" ; Messenger.Default.Send<GoToPageMessage>(msg); //System.Windows.MessageBox.Show("Navigate to Page 2!"); return null; using GalaSoft.MvvmLight; using GalaSoft.MvvmLight.Command; using GalaSoft.MvvmLight.Messaging; iii. Page2ViewModel.cs should look like this: namespace MvvmControlChange.Content.Page2.ViewModel /// <summary> /// This class contains properties that a View can data bind to. /// <para> /// See /// </para> /// </summary> public class Page2ViewModel : ViewModelBase /// <summary> /// Initializes a new instance of the Page2ViewModel class. /// </summary> public Page2ViewModel() Page3Command = new RelayCommand(() => GoToPage3()); public string ApplicationTitle return "MVVM LIGHT p2"; MvvmControlChange StepbyStep v1.docx 12 of 15 10/26/2012

13 public string PageName return "Page 2"; public string Welcome return "Welcome to Page 2"; public RelayCommand Page3Command ; private set; private object GoToPage3() var msg = new GoToPageMessage() PageName = "Page3View" ; Messenger.Default.Send<GoToPageMessage>(msg); //System.Windows.MessageBox.Show("Navigate to Page 2!"); return null; c. You still will NOT have page changing. You need to add the code behind!! d. Add Code Behind. Open MainPageView.xaml.cs and copy the following code into place using System.Windows; using MvvmControlChange.ViewModel; using GalaSoft.MvvmLight.Messaging; using MvvmControlChange.Content.Page2.View; using MvvmControlChange.Content.Page3.View; namespace MvvmControlChange.Content.MainPage.View /// <summary> /// Description for MainPageView. /// </summary> public partial class MainPageView : Window /// <summary> /// Initializes a new instance of the MainPageView class. /// </summary> public MainPageView() MvvmControlChange StepbyStep v1.docx 13 of 15 10/26/2012

14 InitializeComponent(); Closing += (s, e) => ViewModelLocator.Cleanup(); Messenger.Default.Register<GoToPageMessage> ( this, (action) => ReceiveMessage(action) ); private Page2View _page2view; private Page2View Page2View if (_page2view == null) _page2view = new Page2View(); return _page2view; private Page3View _page3view; private Page3View Page3View if (_page3view == null) _page3view = new Page3View(); return _page3view; private object ReceiveMessage(GoToPageMessage action) // this.contentcontrol1.content = this.page2view; //this shows what pagename property is!! switch (action.pagename) case "Page2View": if (this.contentcontrol1.content!= this.page2view) this.contentcontrol1.content = this.page2view; break; case "Page3View": if (this.contentcontrol1.content!= this.page3view) this.contentcontrol1.content = this.page3view; break; default: break; // string testii = action.pagename.tostring(); // System.Windows.MessageBox.Show("You were successful switching to " + testii + "."); return null; MvvmControlChange StepbyStep v1.docx 14 of 15 10/26/2012

15 e. You re DONE!!! Save, F5. MvvmControlChange StepbyStep v1.docx 15 of 15 10/26/2012