Fixed home page carousel visually leaking to other pages after navigation #460
Conversation
Event handlers in the HoverLight weren't being unsubscribed On Disconnected.
OpacityMaskView wasn't handling resources properly on unload, causing memory leaks and also changing ```csharp private static CompositionBrush GetVisualBrush(UIElement element) ``` to ```csharp private static CompositionSurfaceBrush GetVisualBrush(UIElement element) ``` improves performance.
This reverts commit 8cde6c8.
This reverts commit 972bd09.
The carousel on the home page visually leaks to other pages after navigation, that means we can see the carousel on other pages briefly after clicking on the tiles in the home page carousel. This PR fixes this problem completely, however, you need to accept my previous PR first, otherwise this change won't work: https://github.com/microsoft/ai-dev-gallery/pull/458/files
|
Appreciate the intent to ensure resources are released when navigating away. However, I don’t think we should add this change as-is:
|
Ran dotnet format as requested
Updated the cleanup code as requested.
|
Hi @weiyuanyue |
There was a problem hiding this comment.
Pull request overview
This PR fixes a visual bug where the home page carousel briefly appears on other pages during navigation. The fix adds an OnNavigatingFrom override that sets the page's Content to null before navigation completes, preventing the carousel from rendering during the transition.
Key Changes:
- Added
OnNavigatingFromlifecycle method to HomePage that nulls the page content - Includes reference comment linking to this PR for context
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| protected override void OnNavigatingFrom(NavigatingCancelEventArgs e) | ||
| { | ||
| // Remove all content to guarantee nothing can be rendered; reference issue: https://github.com/microsoft/ai-dev-gallery/pull/460 | ||
| this.Content = null; | ||
|
|
||
| base.OnNavigatingFrom(e); | ||
| } |
There was a problem hiding this comment.
The pattern of using OnNavigatingFrom for page cleanup is inconsistent with how other pages in the codebase handle cleanup. Sample pages like SemanticSearch.xaml.cs (line 87), AppIndexCapability.xaml.cs (line 74), and KnowledgeRetrieval.xaml.cs (line 141) use OnNavigatedFrom for cleanup operations. SettingsPage uses OnNavigatingFrom specifically to cancel navigation when a cache move is in progress (SettingsPage.xaml.cs:53-60).
For HomePage, which doesn't need to cancel navigation, using OnNavigatedFrom would be more consistent with the established pattern and would ensure the navigation completes before cleanup begins.
| protected override void OnNavigatingFrom(NavigatingCancelEventArgs e) | ||
| { | ||
| // Remove all content to guarantee nothing can be rendered; reference issue: https://github.com/microsoft/ai-dev-gallery/pull/460 | ||
| this.Content = null; | ||
|
|
||
| base.OnNavigatingFrom(e); |
There was a problem hiding this comment.
Setting this.Content = null during navigation may have unintended side effects. When Content is set to null before the navigation completes, it can prevent the Unloaded event from firing properly on child controls like the HeaderCarousel. The HeaderCarousel has cleanup logic in its UserControl_Unloaded handler (HeaderCarousel.xaml.cs:211-214) that stops timers and unsubscribes from events. If this cleanup doesn't run, the timers may continue to fire and could cause issues when trying to access controls that no longer exist.
A more robust solution would be to ensure the HeaderCarousel's cleanup runs reliably, either by using OnNavigatedFrom instead (which fires after navigation completes), or by explicitly calling cleanup on the HeaderCarousel before setting Content to null.
| protected override void OnNavigatingFrom(NavigatingCancelEventArgs e) | |
| { | |
| // Remove all content to guarantee nothing can be rendered; reference issue: https://github.com/microsoft/ai-dev-gallery/pull/460 | |
| this.Content = null; | |
| base.OnNavigatingFrom(e); | |
| protected override void OnNavigatedFrom(NavigationEventArgs e) | |
| { | |
| base.OnNavigatedFrom(e); | |
| // Remove all content to guarantee nothing can be rendered; reference issue: https://github.com/microsoft/ai-dev-gallery/pull/460 | |
| this.Content = null; |
|
|
||
| protected override void OnNavigatingFrom(NavigatingCancelEventArgs e) | ||
| { | ||
| // Remove all content to guarantee nothing can be rendered; reference issue: https://github.com/microsoft/ai-dev-gallery/pull/460 |
There was a problem hiding this comment.
The comment references PR #460, but according to the PR metadata, this is PR #460. The reference should likely point to the dependency PR #458 mentioned in the description, or the issue being fixed. This creates confusion about what issue is being referenced.
| // Remove all content to guarantee nothing can be rendered; reference issue: https://github.com/microsoft/ai-dev-gallery/pull/460 | |
| // Remove all content to guarantee nothing can be rendered; reference issue: https://github.com/microsoft/ai-dev-gallery/pull/458 |
3 participants
The carousel on the home page visually leaks to other pages after navigation, that means we can see the carousel on other pages briefly after clicking on the tiles in the home page carousel. This PR fixes this problem completely; however, you need to accept my previous PR first, otherwise this change won't work, and you will get an error after navigation: https://github.com/microsoft/ai-dev-gallery/pull/458/files
Please see the videos below for more details as they exactly show the issue this PR fixes:
Before
BEFORE.mp4
After
AFTER.mp4