Create a new Silverlight application in Visual Studio 2010 called AccordionControl. Allow Visual Studio to create a Web Application project to host the application.

With the MainPage.xaml file selected, position the cursor in the source in the Layout Grid. Find and double-click on the Accordion control in the Toolbox. This will add the control to the page, as well as the proper namespace reference:

xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"

After you've added the Accordion, right-click on the control in the design view and select Reset Layout

Figure 6.5. Resetting the layout of the Accordion control

<Grid x:Name="LayoutRoot" Background="White">
    <toolkit:Accordion Name="BookList" Width="200" Margin="10" />
</Grid>

Switch to the code behind in the file MainPage.xaml.cs. We need to define the data we'll be binding to the Accordion. For simplicity, we'll define the data right in the code behind file. Add two classes, one for Categories and one for Books.

namespace AccordionControl
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }

    public class BookCategory
    {
        public string CategoryName { get; set; }
        public List<Book> Books { get; set; }
    }

public class Book
    {
        public string Title { get; set; }
    }
}

Next we need to populate the classes with some data. To do this, first wire up the Loaded event and insert the following code.

public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            List<BookCategory> Library = new List<BookCategory>();

            BookCategory cat1 = new BookCategory() {
                CategoryName = "Silverlight",
                Books = new List<Book>() };
            cat1.Books.Add(new Book() { Title = "Beginning Silverlight 4" });
            cat1.Books.Add(new Book() { Title = "Pro Silverlight 4" });
            Library.Add(cat1);

            BookCategory cat2 = new BookCategory() {
                CategoryName = "ASP.NET",
                Books = new List<Book>() };
            cat2.Books.Add(new Book() { Title = "Pro ASP.NET 4" }) ;
            Library.Add(cat2);
        }
    }

    public class BookCategory
    {
        public string CategoryName { get; set; }
        public List<Book> Books { get; set; }
    }

    public class Book
    {
        public string Title { get; set; }
    }
}

Now we need to define the header and content items, using the ItemTemplate for the header and the ContentTemplate for the content. For the ItemTemplate, we'll simply define a TextBlock that will display the BookCategory. For the ContentTemplate, we'll define a ListBox control that will contain a list of TextBlocks, each displaying a book Title.

<toolkit:Accordion
    Name="BookList"
    Margin="10"
    Width="200">
    <toolkit:Accordion.ContentTemplate>
        <DataTemplate>
            <ListBox ItemsSource="{Binding Books}" BorderThickness="0">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <TextBlock FontWeight="Bold" Text="{Binding Title}" />
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </DataTemplate>
    </toolkit:Accordion.ContentTemplate>
    <toolkit:Accordion.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding CategoryName}" />
        </DataTemplate>
    </toolkit:Accordion.ItemTemplate>
</toolkit:Accordion>

Next we need to bind the Library data source to the Accordion control.

void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    List<BookCategory> Library = new List<BookCategory>();

    BookCategory cat1 = new BookCategory() {
        CategoryName = "Silverlight",
        Books = new List<Book>() };
    cat1.Books.Add(new Book() { Title = "Beginning Silverlight 4" });
    cat1.Books.Add(new Book() { Title = "Pro Silverlight 4" });
    Library.Add(cat1);

    BookCategory cat2 = new BookCategory() {
        CategoryName = "ASP.NET",
        Books = new List<Book>() };
    cat2.Books.Add(new Book() { Title = "Pro ASP.NET 4" }) ;
    Library.Add(cat2);

    this.BookList.ItemsSource = Library;
}

Press F5 to run the solution. If things go as planned, you should see the Accordion displayed. If you click on ASP.NET, the Silverlight section will collapse and hide those books, while the ASP.NET section will expand and display its books, as shown in Figure 6-6.

Figure 6.6. Changing headers in the Accordion example

Create a new Silverlight application in Visual Studio 2010 called ModalWindow. Allow Visual Studio to create a Web Application project to host the application.

In the MainPage.xaml file, divide the root Grid into five rows and two columns. The height of the first four rows should be 40 pixels, and the fifth row should take up the remainder of the application. The width of the first column should be 150 pixels, and the second should take up the remainder of the application. In addition, change the d:DesignWidth of the UserControl to 600.

<UserControl x:Class="ModalWindow.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"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="600">

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="150" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="40" />
        <RowDefinition Height="40" />
        <RowDefinition Height="40" />
        <RowDefinition Height="40" />
        <RowDefinition Height="40" />
    </Grid.RowDefinitions>
</Grid>

</UserControl>

In the first row, add a TextBlock for a header with the Text "Register for a new Account" that spans both columns. In the second row, add a TextBlock in the first column with the Text "First Name", and add a TextBox in the second column. Add some Margin and Padding to improve the appearance.

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="150" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="40" />
        <RowDefinition Height="40" />
        <RowDefinition Height="40" />
        <RowDefinition Height="40" />
        <RowDefinition Height="40" />
    </Grid.RowDefinitions>

<TextBlock Text="Register for a New Account"
        FontSize="20"
        FontWeight="Bold"
        Margin="5"
        Grid.ColumnSpan="2" />

    <TextBlock Padding="5"
        Margin="5"
        Text="First Name"
        FontSize="12"
        Grid.Row="1" />

    <TextBox Padding="5"
        Margin="5"
        FontSize="12"
        Grid.Column="1"
        Grid.Row="1" />

</Grid>

In the third row, add another TextBlock in the first column with the Text "Last Name," and add a TextBox in the second column. Add some Margin and Padding to improve the appearance. In the fourth row, add a Button to the second column with the Text "Register." Finally, in the fifth row, add a TextBlock to the second column with the Text blank. Name the TextBlock "Result." Your XAML should look like the following code, with the result as shown in Figure 6-12.

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="150" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="40" />
        <RowDefinition Height="40" />
        <RowDefinition Height="40" />
        <RowDefinition Height="40" />
        <RowDefinition Height="40" />
    </Grid.RowDefinitions>

    <TextBlock Text="Register for a New Account"
        FontSize="20"
        FontWeight="Bold"
        Margin="5"
        Grid.ColumnSpan="2" />

<TextBlock Padding="5"
        Margin="5"
        Text="First Name"
        FontSize="12"
        Grid.Row="1" />

    <TextBox Padding="5"
        Margin="5"
        FontSize="12"
        Grid.Column="1"
        Grid.Row="1" />

    <TextBlock Padding="5"
        Margin="5"
        Text="Last Name"
        FontSize="12"
        Grid.Row="2" />

    <TextBox Padding="5"
        Margin="5"
        FontSize="12"
        Grid.Column="1"
        Grid.Row="2" />

    <Button Content="Register"
        Padding="5"
        Margin="5"
        FontSize="12"
        Grid.Column="1"
        Grid.Row="3"
        Click="Button_Click" />

    <TextBlock Text=""
        FontSize="14"
        FontWeight="Bold"
        Grid.Column="1"
        Grid.Row="4"
        Margin="5"
        Name="Result" />

</Grid>

Figure 6.12. Modal window example with finished XAML layout

Now that you have the main form laid out, turn your attention to the child window. To add a child window to the project, right-click on the Silverlight project (ModalWindow) and select Add New Item. From the Add New Item dialog, select Silverlight Child Window and name the window Confirm.xaml, as shown in Figure 6-13.

Figure 6.13. Adding a Silverlight Child Window

When the Child Window has been added to the project, it will contain the following XAML by default.

<controls:ChildWindow x:Class="ChildWindow.Confirm"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="clr-namespace:System.Windows.Controls;

assembly=System.Windows.Controls"
    Width="400" Height="300"
    Title="Confirm">

<Grid x:Name="LayoutRoot" Margin="2">
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Button
        x:Name="CancelButton"
        Content="Cancel"
        Click="CancelButton_Click"
        Width="75"
        Height="23"
        HorizontalAlignment="Right"
        Margin="0,12,0,0"
        Grid.Row="1" />

    <Button
        x:Name="OKButton"
        Content="OK"
        Click="OKButton_Click"
        Width="75"
        Height="23"
        HorizontalAlignment="Right"
        Margin="0,12,79,0"
        Grid.Row="1" />
</Grid>
</controls:ChildWindow>

Notice that two buttons have been added for you already, one for Cancel and one for OK. If you look at the code behind for the window, you'll also see that some code is already present.

namespace ChildWindow
{
    public partial class Confirm : ChildWindow
    {
        public Confirm()
        {
            InitializeComponent();
        }

private void OKButton_Click(object sender, RoutedEventArgs e)
        {
            this.DialogResult = true;
        }

        private void CancelButton_Click(object sender, RoutedEventArgs e)
        {
            this.DialogResult = false;
        }
    }
}

Two event handlers, one for each button, have been wired up, but notice that the code is simply setting the DialogResult property on the window. In the property setter, it will automatically set the response and will execute the dialog's Close() method, so that's all the code you need.

For now, just leave the Child Window as is, but you do need to call it from the Silverlight application. Open the MainPage.xaml.cs code behind file. Add the Button_Click event as well as the code to create an instance of the Child Window and execute the Show() method.

private void Button_Click(object sender, RoutedEventArgs e)
{
    Confirm confirmDlg = new Confirm();
    confirmDlg.Show();
}

Now run the application and press the Register button. You will see that the Child Window appears, as shown in Figure 6-14. You can drag the window, but notice that the main user interface for your application is inaccessible. Click OK or Cancel and you'll find that the Child Window closes and the application's user interface is once again functioning.

Figure 6.14. The default Child Window

Very cool, but let's not stop there. Let's modify the Child Window to show that its content can be customized any way you like by editing the window's XAML. To do this, open the Confirm.xaml file in XAML design mode. Change the Title of the window to "Terms and Conditions." Let's also change the height of the Window to 200 pixels and make the Text of the two buttons read "I Accept" and "I Do Not Accept." Because you are changing the text, you must also adjust the width of the buttons and the margins. (Note that you can just as easily put these two buttons in a Horizontal StackPanel instead of spacing them using margins.) Finally, add two TextBlock controls to the first row of the root Grid for the header, and one below it for the terms and conditions text. Your updated XAML should now be similar to the following:

<Grid x:Name="LayoutRoot" Margin="2">
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <StackPanel>

        <TextBlock
            Text="Please Accept the Terms and Conditions to Continue"
            FontWeight="Bold"
            FontSize="12" />

        <TextBlock
            Text="These are the terms and conditions..." />

    </StackPanel>

<Button
        x:Name="CancelButton"
        Content="I Do Not Accept" Click="CancelButton_Click"
        Width="125"
        Height="23" HorizontalAlignment="Right"
        Margin="0,12,0,0" Grid.Row="1" />

    <Button
        x:Name="OKButton"
        Content="I Accept" Click="OKButton_Click"
        Width="100"
        Height="23" HorizontalAlignment="Right"
        Margin="0,12,134,0" Grid.Row="1" />

</Grid>

Go ahead and run the application again and then press the Register button to open the Child Window. Notice that the content changes are reflected, as shown in Figure 6-15. Keep in mind that the content of these window controls is completely customizable with XAML. You can add any controls you wish with any layout you want.

Figure 6.15. The modified Child Window

Now let's add code to retrieve results from the dialog. Open the MainPage.xaml.cs file and within the Button_Click event handler, wire up another event handler for the Child Window's Closed() event. In this new event handler, you need to get the Child Window's instance, which is sent to the handler in the sender object. Once you have the window's instance, you can retrieve the DialogResult property, which will contain true, false, or null.

public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        Confirm confirmDlg = new Confirm();
        confirmDlg.Closed += new EventHandler(confirmDlg_Closed);
        confirmDlg.Show();
    }

    void confirmDlg_Closed(object sender, EventArgs e)
    {
        Confirm confirmDlg = (Confirm)sender;

        if (confirmDlg.DialogResult == true)
        {
            this.Result.Text = "Terms and Conditions Accepted";
        }
        else if (confirmDlg.DialogResult == false)
        {
            this.Result.Text = "Terms and Conditions Not Accepted";
        }
    }
}

Run the application. Press the Register button to display the Child Window, then press the I Accept button from the Child Window. You'll see that the Result TextBlock is updated to read "Terms and Conditions Accepted," as shown in Figure 6-16.

Figure 6.16. Retrieving the DialogResult from a child window