Selectionchanged event/EventToCommand trigger for a Listbox within contentcontrol/style in a WP7 app using MVVM light

Jul 11, 2011 at 5:48 AM

Hello there..

Kind of new to WPF and I am writing a WP7 app where I am using the mvvm light framework.. I am able to get the eventtocommand to work in most cases except for this one case for which I have been challenged..

Here is my story..

 I have a phone page with one panaroma control with a statically declared panaroma items and more panaroma items being created dynamically in the code behind.

  1 ) panaroma item declared in xaml is bound to view model A and it has a list box that is bound to a property in the view model. The selectionchanged event for this list box works just fine

2) I have other panaroma items being created dynamically in the code and it is bound to view model Bs which are exposed through some indexer property of view model A. These panaroma items also have a list box.. The selectionchanged event for this listbox doesn't seem to be firing .. I tried using the eventtocommand behavior in the galasoft light framework with no luck.. Later, I wired up the selectionchanged event of the listbox to the codebehind with no luck too..

Since I am new to wpf/xaml and learning it the hardway through writing a wp7 app... i am hoping it is something obvious i am doing wrong.. Any ideas or pointers. I am trying to wire up a selectionchanged event to a relaycommand in the viewmodel which should result in a page navigation that shows more details about the selected item.  Why doesn't the selectionchanged event get fired and how to go about debugging the problem....

 

Here is the resources section in the xaml where the style is being defined

  <phone:PhoneApplicationPage.Resources>
        <Style x:Key="PanoramaItemStyle" TargetType="ContentControl">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ContentControl">
                        <Grid>
                            <controls:PanoramaItem x:Name="ItemLocationPanoramaItem" Header="{Binding TagName}">
                                <!--<StackPanel >-->
                                    <ListBox  ItemsSource="{Binding ItemLocators}" Height="496" SelectedItem="{Binding SelectedItemLocation, Mode=TwoWay}" SelectionChanged="ItemLocatorsList_SelectionChanged" >
                                        <!--<Custom:Interaction.Triggers>
                                            <Custom:EventTrigger EventName="SelectionChanged">
                                                <GalaSoft_MvvmLight_Command:EventToCommand x:Name="SelectionChangedEvent" Command="{Binding ElementName=ItemLocationPanoramaItem, Path=DataContext.GoToEditItemLocatorCommand}" PassEventArgsToCommand="True"/>
                                            </Custom:EventTrigger>
                                        </Custom:Interaction.Triggers>-->
                                        <ListBox.ItemsPanel>
                                            <ItemsPanelTemplate >
                                                <StackPanel Orientation="Vertical"  ScrollViewer.VerticalScrollBarVisibility="Auto" />
                                            </ItemsPanelTemplate>
                                        </ListBox.ItemsPanel>
                                        <ListBox.ItemTemplate>
                                            <DataTemplate>
                                                <StackPanel>
                                                        <StackPanel Orientation="Horizontal" Margin="0,0,0,17">
                                                            <StackPanel Width="311">
                                                                <TextBlock Text="{Binding Item.Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextLargeStyle}"/>
                                                                <TextBlock Text="{Binding Location.Description}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
                                                            </StackPanel>
                                                        </StackPanel>
                                                </StackPanel>
                                            </DataTemplate>
                                        </ListBox.ItemTemplate>
                                    </ListBox>
                                <!--</StackPanel>-->
                            </controls:PanoramaItem>
                            <ContentPresenter/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Foreground" Value="White"/>
        </Style> 
    </phone:PhoneApplicationPage.Resources>

 

Here is the partial code in the code behind of the page

  public partial class LocationGroups : PhoneApplicationPage
    {
        private LocationGroupsViewModel viewModel = null;
 
        public LocationGroups()
        {
            InitializeComponent(); 
            LocationGroupsPanaroma.DefaultItem = LocationGroupsPanaroma.Items[0];
            viewModel = this.DataContext as LocationGroupsViewModel;
            CreateDynamicPanaromaItems();
        }
         
 
        private void CreateDynamicPanaromaItems()
        {
            foreach (Model.LocationGroup group in viewModel.LocationGroups)
            {
                if (group.TotalItems > 0)
                {
                    PanoramaItem pi = new PanoramaItem();
                    pi.Header = group.Name;
                    pi.Orientation = System.Windows.Controls.Orientation.Horizontal;
                    ItemLocationListViewModel itemLocationViewModel = viewModel[group.LocationGroupId];
                    pi.DataContext = itemLocationViewModel;
                    pi.Style = Resources["PanoramaItemStyle"as Style; 
                    LocationGroupsPanaroma.Items.Add(pi);
                }
            }
 
        }