Convert ASP.NET to WPF to Silverlight

Instructions

In this lab, you will take your project 1 solution and convert it to a Windows Presentation Foundation (WPF) desktop application. After that, you will take your WPF application and convert it to a Silverlight web application.

Materials to turn in:

• Lab07 Project Folder
• Lab07_aspDotNet folder with working ASP.NET version
• project1_wpf folder with working WPF version
  • Color Converter Setup folder containing a .msi installation program
• project1_silverlight folder with working Silverlight version

Procedures - Create an ASPX that provides the answers and explanations requested below.

1. Start with a working ASP.NET solution to project 1 (this is a solution, it is not the solution)
   • download this solution
   • Open that using visual studio and test it
      
2. NOTE: On all 3 of these, including the ASP.NET and Silverlight, you can use F5 to run the finished product directly off your own machine. Meaning, you can develop on your lab machine desktop if you want, then just copy the solutions over to your lab folder on the server when you are done.
    
   
3. Open a new instance of Visual Studio
   • New Project > WPF Application
     • Name it: project1_wpf
   • Do most of the layout using the visual editor
   • Resize the app window to roughly 800 wide by 400 tall
   • Drag/drop Image instances to place the images where you want them
     • Copy the jpg images from the ASP.NET solution into the WPF solution. If necessary, in Solution Explorer, Add Existing Items until the jpgs are added to the solution.
     • In XAML, set the source to the appropriate image, for example: Source="/project1_wpf;component/header.jpg"
   • Drag/drop a ComboBox and a TextBox instance
     • A ComboBox width of 40 will work well for this app.
     • A TextBox width of 75 will work well for this app.
     • In XAML, inside the ComboBox open/close elements, add ComboBoxItem standalone elements and set the Content attribute in each.
     • Then, copy and paste the controls in the display until you have enough for the application
     • You may need to do a find/replace to change <ComboBoxItem>0</ComboBoxItem> to
       <ComboBoxItem Content="0" /> ... same for all the other instances
     • Set the IsEnabled property of the bitwise operation controls, bit1, bit2, bit3, byteResult and the 6 other TextBox instances to false
   • Drag/drop a Border to use for the color.
     • In XAML, set the CornerRadius to 15,15,15,15 and the Background to LightGray
   • Click and drag to move everything so that it is aligned the way you want it.
   • Rename all of the instances:
     • First row: "red8" is the left-most ComboBox and "red1" is the right-most ComboBox; rDecText, rHexText
     • Second row: "green8" is the left-most ComboBox and "green1" is the right-most ComboBox; gDecText, gHexText
     • Third row: "blue8" is the left-most ComboBox and "blue1" is the right-most ComboBox; bDecText, bHexText
     • Bottom row from left to right: bit1, bit2, bit3, byteResult
     • Border: bgColor
   • Open the xaml.cs file. Copy the cs from the ASP.NET app to the WPF app.
   • Rebuild.
      
   • Find the ChangeColor() function - Quite a few changes here
     • add variables: byte redcolor, greencolor, bluecolor
     • convert the string values to int values so they can then be converted to bytes, for example:
       • int redNum = Int32.Parse(rcolor, System.Globalization.NumberStyles.HexNumber);
     • convert the string colors to byte, for example:
       • redcolor = Convert.ToByte(redNum);
     • Create a System.Windows.Media.Color using System.Windows.Media.Color.FromRgb
     • Create a new System.Windows.Media.SolidColorBrush and set the color of the Brush
     • Set the Border control Background equal to the Brush
     • Change the Enabled property to IsEnabled
        
       
   • In XAML, add SelectionChanged attributes to the ComboBox elements. Red boxes should use the Red function, green use the Green, etc. 
   • In XAML, add SelectionChanged attributes to the ComboBox bitwise elements. All 3 of them should use the bitwise function.
      
   • A lot of changes because we got rid of the -- combo box item and we cannot use the IsSelected attribute... inside of Red(), Green(), Blue() change the if statements. We cannot use SelectedValue because Silverlight does not support it (although WPF does).
     • change all the occurances like:
       if (green8.SelectedValue.Equals("0") || green8.SelectedValue.Equals("1"))
       to
       if (green8.SelectedIndex.Equals(0) || green8.SelectedIndex.Equals(1))
        
   • A lot more changes for the same reason as above. Find the nested if statements and change all the occurances like:
     • !green2.SelectedValue.Equals("--")
       to
       green2.SelectedIndex != -1
        
       
   • Inside the bitwise function
     • change all 3 occurances like:
       !bit1.SelectedValue.Equals("--")
       to
       bit1.SelectedIndex != -1
     • Also change all occurances like (R becomes 0, G becomes 1, B becomes 2):
       bit1.SelectedValue.Equals("R")
       to
       bit1.SelectedIndex.Equals(0)
     • Repeat this for the &, |, ^
        
       
   • WPF conversion is complete. Test.
     
   • Finally, before going on, convert it to a Release.
     • Build > Configuration Manager > Select Release at the top > OK
     • Rebuild the project and the solution.
       
       
4. Add a Setup and Deployment project to the WPF solution.
   • Right click on Solution 'project1_wpf' > Add > New Project
   • Other Projects > Setup and Deployment > Setup project
     • Name it: Color Converter Setup
   • Select Color Converter Setup in the solution explorer.
     • In the properties pane, change the Author and Manufacturer to your name.
     • In the properties pane, notice that the ProductName and Title are already changed to Color Converter Setup for you.
   • In the file system, left hand column, right click Application folder > Add > File
     • Add the .exe file from /bin/release/
     • Notice the file appears on the right hand column
   • Right click on the filename in the right hand column > Create Shortcut > name it "Color Converter"
     • Drag and drop that shortcut into the program files folder.
   • With the Color Converter Setup selected in the solution explorer > rebuild the solution and then rebuild Color Converter Setup.
     
   • The Setup and Deployment package is complete.
      
5. Start Expression Blend > New Project > Silverlight 3 Application + Website
   • Name it: project1_silverlight
   • Resize the area to the same width/height as your WPF
   • Copy / Paste the XAML from WPF to Silverlight... only copy the contents inside of the Grid.
   • If you used a Label in WPF, change it to a TextBlock in Silverlight
   • Copy / Paste the C# code from WPF to Silverlight... only copy the contents of the class, do not copy the class constructor, do not copy the class, namespace, or using statements.
   • Build > double click the FromRgb error. Change it to FromArgb and add a 255, as a parameter to the method.
   • Rebuild > project should build and run, but it has no images.
   • Copy the images from the other project and paste them into the folder containing your Silverlight project.
   • Right click on the project name: project1_silverlight > and choose Add Existing Item. Browse to find and select all the images. The images should then appear in your project panel in Blend.
   • Find the Image elements in XAML and change all the Source attributes to be like:
     • Source="R.jpg"
   • Build. You should be done.
      
   
    

Grading