Silverlight: layout changes when calling NavigationService.Navigate

Question

This is a really weird mistake. I have no idea why this could happen. I know that his placement here is a little long, but I have no other ideas.

I have two ListBox that act as menus.

  <ListBox Margin="56,8,15,0" FontSize="64" ItemsSource="{Binding FavoriteSections}" SelectionChanged="MenuList_SelectionChanged"> <ListBox.ItemTemplate> <DataTemplate> <StackPanel> <toolkit:ContextMenuService.ContextMenu> <toolkit:ContextMenu> <toolkit:MenuItem Header="Remove" Click="FavoritesContextMenuItem_Click" /> </toolkit:ContextMenu> </toolkit:ContextMenuService.ContextMenu> <TextBlock Text="{Binding DisplayName}" /> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> <ListBox x:Name="sectionList" Margin="56,8,15,0" FontSize="64" SelectionChanged="MenuList_SelectionChanged" ItemsSource="{Binding SectionViewModels}"> <ListBox.ItemTemplate> <DataTemplate> <StackPanel> <toolkit:ContextMenuService.ContextMenu> <toolkit:ContextMenu> <toolkit:MenuItem Header="Add to favorites" Click="SectionContextMenuItem_Click" /> </toolkit:ContextMenu> </toolkit:ContextMenuService.ContextMenu> <TextBlock Text="{Binding DisplayName}" /> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> 

An error exists for both of them.

When a selection changes in any of the menus, this method is called:

  void MenuList_SelectionChanged(object sender, SelectionChangedEventArgs e) { if (e.AddedItems.Count == 0) { return; } Uri page = null; object selected = e.AddedItems[0]; if (selected is NavigableItem) { NavigableItem selectedItem = (NavigableItem)selected; page = selectedItem.Page; } else if (selected is SectionViewModel) { SectionViewModel selectedVM = (SectionViewModel)selected; page = selectedVM.Section.Page; } Debug.Assert(page != null, "What is the type of `selected`?"); // if I comment out this line, the problem goes away: NavigationService.Navigate(page); ListBox selectedBox = (ListBox)sender; selectedBox.SelectedIndex = -1; } 

If I comment out the line NavigationService.Navigate() , the problem goes away. If I replace the string with a different URI, the problem will remain.

In about 70% of cases, when I click on a menu item, the content skips across the page. (The remaining 30%, the error does not occur.) This happens too quickly to see what is happening, but different elements of the user interface overlap.

This only happens the first time I click something on these menus during the life of the application. If I press "back", then select the menu item again, the problem will not be.

What could be here? I really have no idea. The code behind does not have an OnNavigatedFrom method, so I don't think this is a problem.

I am using Silverlight for Windows Phone 7

Update . Mysteriously, I cannot reproduce this in the debugger - only after deploying the application and running it in the emulator without connecting. ???

Update 2 : an error occurs when NavigationService.Navigate() is called from the button's Click event handler:

 <Button Content="Foo" Click="Button_Click" Grid.Row="0"/> private void Button_Click(object sender, RoutedEventArgs e) { NavigationService.Navigate(new Uri("/Views/sections.xaml?section=43", UriKind.Relative)); } 

It seems that the error is related to navigation, and not to the user interface element used to make the call.

Update 3 : more weird. I still cannot play the application while the debugger is connected. If I make the progress bar always fail, the error disappears:

  <ProgressBar x:Name="LoadingProgressBar" IsIndeterminate="True" Visibility="Collapsed" Style="{StaticResource PerformanceProgressBar}" VerticalAlignment="Top"/> 

Alternatively, commenting out this line in encoding, the error disappears:

 LoadingProgressBar.Visibility = Visibility.Collapsed; 

I really don’t understand what is going on here. This line of code is not executed when the page moves out.

Here is the full XAML of the control that got confused:

  <ProgressBar x:Name="LoadingProgressBar" IsIndeterminate="True" Visibility="Collapsed" Style="{StaticResource PerformanceProgressBar}" VerticalAlignment="Top"/> <TextBlock x:Name="DownloadFailed" Visibility="Collapsed" Style="{StaticResource disabledText}" Margin="56,8,8,-8" > FooBar.com could not be reached. Do you have a network connection? </TextBlock> <ListBox x:Name="sectionList" Margin="56,8,15,0" FontSize="64" SelectionChanged="MenuList_SelectionChanged" ItemsSource="{Binding SectionViewModels}"> <ListBox.ItemTemplate> <DataTemplate> <StackPanel> <toolkit:ContextMenuService.ContextMenu> <toolkit:ContextMenu> <toolkit:MenuItem Header="Add to favorites" Click="SectionContextMenuItem_Click" /> </toolkit:ContextMenu> </toolkit:ContextMenuService.ContextMenu> <TextBlock Text="{Binding DisplayName}" /> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> </Grid> </controls:PivotItem> 

Answer 1

The problem is using the Undefined ProgressBar. All of his animations are performed in the user interface thread, and not in the Compositor thread, as is usually done. Since you already use the Windows Phone Toolkit, you can easily replace the ProgressBar with the PerformanceProgressBar offered by the toolbox. This should solve your problems.

Answer 2

Before I start, let me say that I do not have much experience with Windows Phone, so my answers are based on more general knowledge of WPF, so forgive me if I lose sight of the specifics of the platform or am inaccessible link functions.

Some diagnostic questions (sorry, this is not a direct answer):

First, it seems that Navigate is causing a lot of layoutUpdates. I have not yet seen what type of container contains the pages that you are updating, but it is worth asking, is this also broken, or just the menu?

Secondly, could you please explicitly specify your ItemPanel? You expect them to be virtualizingStackPanels, but you may find that some parent in your visual hierarchy creates a different inheritance script.

You have this in a grid that is designed for the size of its contents or takes a default size (100x100 in regular WPF) or takes a size from its parent, who does not know how you specified the grid, or the parent of the grid, it is difficult to know its behavior. In addition, grids automatically z-arrange their children according to the order in which they are added. Can you tell if this is just the lisboxes layout that is broken, or is it the entire grid? Or is it more?

If you join the layoutUpdated () event from a list, grid, or parent grid, you should be able to look at the stacks that lead you there - it seems to me that you will find that layoutUpdated () is firing more than you would like. In addition, you can output the height and width (of course, and so on) during these steps so that you can see exactly when these changes occur.

I hope that some of these diagnostic steps will help you find the answer.