accordion contenttemplate communication with viewmodel

Question

In a silverlight 5 mvvm project I have the following code:

View:

<navigation:Page x:Class="LobDemo.View.MainView" 
             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:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
             xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="600"
             DataContext="{Binding Source={StaticResource Locator}, Path=Main}" >
<Grid x:Name="LayoutRoot">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <toolkit:DockPanel Grid.Column="0">
        <toolkit:Accordion Name="accordion1" 
                           HorizontalAlignment="Stretch"
                           VerticalAlignment="Stretch"
                           ItemsSource="{Binding Path=MenuItems}"
                           Margin="5,5,5,5">
            <toolkit:Accordion.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Path=Name}" />
                </DataTemplate>
            </toolkit:Accordion.ItemTemplate>
            <toolkit:Accordion.ContentTemplate>
                <DataTemplate>
                    <ListBox ItemsSource="{Binding Path=SubMenuItems}"
                             Margin="2 2 0 0"
                             BorderThickness="0"
                             SelectedItem="{Binding Path=SelectedMenuItem, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding Path=Name}" />
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                </DataTemplate>
            </toolkit:Accordion.ContentTemplate>
        </toolkit:Accordion>
    </toolkit:DockPanel>
</Grid>

ViewModel: (I'm only showing the required properties)

public ObservableCollection<MenuItem> MenuItems
{
    get { return _menuItems; }
    set 
    {
       _menuItems = value;
       RaisePropertyChanged("MenuItems");
    }
}

public object SelectedMenuItem
{
    get { return _selectedMenuItem; }
    set
    {
        _selectedMenuItem = value;
        RaisePropertyChanged("SelectedMenuItem");
    }
}

MenuItem:

public string Name { get; set; }

public ObservableCollection<SubMenuItem> SubMenuItems { get; set; }

SubMenuItem:

public string Name { get; set; }

The code is working fine, my MenuItems are visible in the accordion control, the SubMenuItems are also loaded in the listbox. The problem comes when I select one of the items in the listbox, I want the selected item reported back to my ViewModel as SelectedMenuItem. But the property SelectedMenuItem is never filled, so I'm guessing the code cannot resolve the location of the property. Can somebody point out what I'm doing wrong?

Answer 1

I found the solution for my problem, I've updated the Accordion.ContentTemplate code in the view, the code now looks like this:

<toolkit:Accordion.ContentTemplate>
<DataTemplate>
    <ListBox ItemsSource="{Binding Path=SubMenuItems}"
                Margin="2 2 0 0"
                BorderThickness="0"
                SelectedItem="{Binding RelativeSource={RelativeSource AncestorType=navigation:Page}, Path=DataContext.SelectedMenuItem, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Path=Name}" />
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</DataTemplate>

With this code, the view now finds the SelectedMenuItem property in the ViewModel