Philip Beadle's Blog

Now that you have your modules registered place it on a page.  You should see your module with an empty Silverlight control inside it.  Now switch to the settigns for the module and hit the checkbox to change it to load the SLTest Silverlight control.  This will execute the one test that is in teh file at this point and it will fail giving you the following result.

As you can see the testing results panel shows up as it is conducting the tests and gives you the result.  This is an excellent way to create integration tests for your module and it makes it very easy to ensure that as you code you are keeping your quality high and not introducing any new issues.  You can try out debugging at this point as well.  In the SLTest project add a break point to the Initialize event and then do Attach to process and select the Silverlight process like so.

Let’s get into designing our Announcements list.  The idea is that this module will replace the existing Announcements module.  So we will re-implement the same functionality starting off with listing the items in a nice list.  To do this we will use Expression Blend and use the cool new Sample Data feature.  Follow these steps:

1. Right click the MainPage.xaml file and select Open In Expression Blend,
2. Add a ListBox control to the page and set its margins to 8 all around,
3. Select the Data Tab,
4. Click “Define new Sample Data”,
5. Uncheck the “Enable smale data when application is running”, we don’t want sample data then we will have our own data from the database.  Unchecking this makes Silverlight ignore the sample data at run time which is exactly what we want to happen.
6. Select Ok.
7. You will now have the Sample data showing in the Data Tab.  Change the name from Collection to Announcements, this will be the name for our real data collection as well that we will use RIA to retrieve later.
8. Now change the property names to match the fields in the Announcements table in your DNN database.  You may need to install the standard DNN Announcements module to see this table.  You only need to add the properties for the fields you want to show in the list here.
   1. Make sure you set the property names exactly as they are in the database. 
   2. You can change the sample data by clicking the symbol to the right of the property name.  Set the Title property to be String – Name, set the CreatedDate to String – Date etc.
9. Now select the Announcements Collection and drag it onto the ListBox.  Its hould now look like the following
   
10. When you drag on the collection Blend adds a DataContext to the LayoutRoot grid.  Remove this text in the xaml
    

    d:DataContext="{Binding Source={StaticResource SampleDataSource}}"
    
    and move it into the UserControl declaration as shown below:
    

    <UserControl x:Class="MySilverlightApplication.MainPage"

    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" 

    d:DataContext="{Binding Source={StaticResource SampleDataSource}}"

    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">

Ok you are now set up to design the ListBox as you see fit.  Have some fun with Blend, you can easily edit how the ListBox looks by right clicking it and selecting “Edit Additional Templates” –> “Edit Generated Items” –> “Edit Current”.  You are now in template editing mode and can edit the items template to your hearts content.

Om so now you can see a nicely formatted list of items in Blend.  Try going back to Visual Studio rebuilding your application and checking it out in runtime mode.  You’ll see there are no items in the list :)  This is what is called Blendability, your designer can now design away and create a beautiful interface with nice sample data that doesnt interfere with the application when it is running in production.

That’s it for Part 2.  In Part 3 we will look at using the MVVM pattern to make our application easily testable and we’ll get some real data into our list.