JulMar SelectionChanged Event used on PopUp

Mar 8, 2013 at 7:14 AM
Hi Mark, i encountered a problem on using SelectionChanged event trigger (si:) on popup. There is a combo box on the popup, if there is any changes for the selected item in combobox, it should fire up an event trigger to viewmodel using command. The problem is, the trigger did work but only for once. So if i change the selected item for the first time, the event trigger works, but if i change the selected item again, the event trigger didn't work. any advice or solution for me?

Notes: i'm developing a Windows Store Apps for Windows 8.
below is the sample code for the problem occured:
xmlns:si="using:System.Windows.Interactivity"
xmlns:i="using:JulMar.Windows.Interactivity"

...
...

<Popup FlowDirection="RightToLeft" IsOpen="{Binding PopupSearchOpen}">
...
<ComboBox Margin="3" SelectedItem="{Binding SelectedSearchType, Mode=TwoWay}" ItemsSource="{Binding ListSearchType}">
        <si:Interaction.Triggers>
          <si:EventTrigger EventName="SelectionChanged">
            <i:InvokeCommand CommandParameter="PanelSearch" Command="{Binding SearchComboSelectionChangedCommand}"/>
          </si:EventTrigger>
        </si:Interaction.Triggers>
      </ComboBox>
...
</Popup>


Thanks before..
by the way, the trigger works great on others on XAML and MVVM structure :)

Michael
Coordinator
Mar 11, 2013 at 5:28 PM
Edited Mar 12, 2013 at 9:03 PM
I'm sorry you're having trouble -- it seems to be working for me in a slightly newer build.

Two things I noticed in your example:

1) Put the SelectedItem binding after the ItemsSource binding. WinRT bindings are evaluated in order, and unlike WPF will not properly update the control when they are done out of order. So, in this case, the initial selection won't work unless you have items in the list prior to setting the selection.

2) Why do you need the event trigger at all? With the SelectedItem binding you would know when they select an item - the setter will get called each time. Why not use that? But, regardless - here's a sample along with updated binaries which does what you want. I am going to update NuGet to a newer version that matches this one soon.

mark
Coordinator
Mar 12, 2013 at 9:03 PM
Hi Michael,

A new version 1.05 is out now -- update to this version and try it again. I have a sample (in the Test programs in the Source Code on codeplex) that does exactly what you are showing and it's working fine. The sample uses the IFlyoutVisualizer service to display a flyout (which is in a Popup). Let me know if it works for you. Thanks!

mark
Mar 14, 2013 at 2:58 AM
Hi Mark,

Thanks a lot for your reply and quick example. But looks like i had given you a wrong problem definition and wrong part of code.
The trigger actually worked fine on ComboBox. So sorry about that.. The real problem occurs on ListView. So I have a pop up, which consists of a combobox, a textbox, a search button, and a listview to show the result. If i put selection changed trigger on combobox, it works fine, but on the other hand, if i put selection changed trigger on listview (on a popup), it'd only work once on the first trigger (ListView works well on non popup xaml).
I've tried to update the MVVM helpers package and ran the solution again, still the problem exists. Here is my code for you to examine, maybe there is any misplaced code...
<Popup x:Name="SearchCostCenterPopUp" IsOpen="{Binding SearchCostCenterPopUpIsOpen, Mode=TwoWay}" Grid.Row="1">
            <Grid Height="530" Width="400" Margin="460,29,0,0">
                <Grid.Background>
                    <ImageBrush ImageSource="Assets/Background.png"/>
                </Grid.Background>
                <StackPanel HorizontalAlignment="Left" Height="530" VerticalAlignment="Top" Width="400" Margin="10,10,0,0">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock TextWrapping="Wrap" Text="Search Cost Center" FontSize="20" FontFamily="Global User Interface" Margin="0"/>
                    </StackPanel>

                    <StackPanel  Orientation="Horizontal">
                        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Search by" Width="100" VerticalAlignment="Top" FontSize="20" Margin="0,10,20,0"/>
                        <ComboBox ItemsSource="{Binding ListSearchByForCostCenter, Mode=TwoWay}"  SelectedItem="{Binding SelectedSearchByForCostCenter, Mode=TwoWay}" Margin="0,0,0,27" Width="250"/>
                        <!--<CheckBox IsChecked="{Binding IsChecked, Mode= TwoWay}" Command="{Binding CheckedCommand}" Content="Others" VerticalAlignment="Stretch" Margin="10,0,0,0" Width="100" FontSize="18"/>-->
                    </StackPanel>
                    <StackPanel  Margin="0,0,10,0" Orientation="Horizontal">
                        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Keyword" Width="100" VerticalAlignment="Top" FontSize="20" Margin="0,10,20,0"/>
                        <TextBox Text="{Binding SearchKeywordForCostCenter, Mode=TwoWay}" HorizontalAlignment="Left" TextWrapping="Wrap" Margin="0,0,0,0" Width="250"/>
                    </StackPanel>
                    <StackPanel Height="80" Margin="0,0,10,0" Orientation="Horizontal" HorizontalAlignment="Center" Width="300">
                        <Button Command="{Binding SearchCommand}" CommandParameter="CostCenter" Content="Search" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0" Width="150" Height="50"/>
                        <Button Command="{Binding CancelCommand}" CommandParameter="CostCenter"  Content="Cancel" Height="50" Width="150" Margin="0,0,5,0" HorizontalAlignment="Left" VerticalAlignment="Stretch"/>
                    </StackPanel>
                    <ListView Height="300" Width="350" ItemsSource="{Binding ListSearchCostCenter, Mode=TwoWay}" SelectedItem="{Binding SelectedSearchCostCenter, Mode=TwoWay}" ItemTemplate="{StaticResource SearchCostCenterTemplate}">
                        <si:Interaction.Triggers>
                            <si:EventTrigger EventName="SelectionChanged">
                                <i:InvokeCommand CommandParameter="CostCenter" Command="{Binding SelectionChangedCommand}"/>
                            </si:EventTrigger>
                        </si:Interaction.Triggers>
                    </ListView>
                </StackPanel>
            </Grid>
        </Popup>
The problem lies on the listview.. <ListView Height="300" Width="350" ItemsSource="{Binding ListSearchCostCenter, Mode=TwoWay}" SelectedItem="{Binding SelectedSearchCostCenter, Mode=TwoWay}" ItemTemplate="{StaticResource SearchCostCenterTemplate}">

Once again thanks a lot for your willing to help.. :)

Regards,

Michael
Coordinator
Mar 14, 2013 at 4:22 PM
Hi Michael,

I have replicated your issue, the second and subsequent time the popup is shown the event isn't captured. Let me look into it.

Thanks for reporting it!

mark
Coordinator
Mar 15, 2013 at 2:14 PM
Hi Michael,

Update your package with the latest Nuget - 1.07. I have corrected the issue; essentially I had an optimization in there to remove the EventTrigger when the UIElement it was attached to was unloaded. This is exactly what is happening with the Popup - it's being unloaded from the visual tree. When it is re-inserted the EventTrigger was not being reattached. That is corrected now so it should work the way you expect it to. If you have trouble, I took your exact XAML and created a new test project (look in the Source Code here in Codeplex under the Test folder).

Best Regards and thanks again!
mark
Apr 3, 2013 at 4:47 AM
Hi Mark,

sorry for the late reply, I was assigned to a much more critical task in the last two weeks.
I've just tried to update the package and tested the event trigger. and ta-daa, everything is working now.
Thanks a lot for your help and quick response.. :D


Regards,
Michael