UWP中含多个MediaPlayerElement的GridView出现界面卡顿/冻结问题求助

I'm developing a UWP app that uses a GridView containing MediaPlayerElement controls to render I420 video frames from Mixed Reality WebRTC. Following the official steps to render frames into MediaPlayerElement, the app runs smoothly when there are 12-13 elements, but once the count hits 14-16, the UI becomes severely laggy or frozen—user inputs (like window resizing) respond very slowly, ruining the user experience.

I've already tried two optimization approaches from official docs:

• Using MediaPlayerSurface to render to a Windows.UI.Composition surface
• Enabling frame server mode for MediaPlayer

Neither resolved the issue. Running the Application Timeline profiler shows most of the time is spent in the XAML runtime.

Here's the relevant XAML for the GridView:

<GridView x:Name="AdaptiveGridViewControl" Grid.Row="3" Margin="0,0,5,0" Padding="0,0,0,8" HorizontalAlignment="Center" VerticalAlignment="Center" HorizontalContentAlignment="Center" VerticalContentAlignment="center" x:Load="True" IsItemClickEnabled="False" ItemContainerTransitions="{x:Null}" ItemsSource="{x:Bind Users, Mode=OneWay}" RotationTransition="{x:Null}" ScaleTransition="{x:Null}" SelectionMode="None" Transitions="{x:Null}" TranslationTransition="{x:Null}">
    <GridView.ItemContainerStyle>
        <Style TargetType="GridViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalContentAlignment" Value="Stretch" />
            <Setter Property="Margin" Value="5,5,0,0" />
        </Style>
    </GridView.ItemContainerStyle>
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <ParticipantViewPanels:AdaptiveGridPanel x:Name="panel" Loaded="CustomPanel_Loaded" />
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
    <GridView.ItemTemplate>
        <DataTemplate>
            <MediaPlayerElement x:Name="VideoPlayerElement" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" AutoPlay="True" Background="Black" BorderBrush="Black" BorderThickness="0" Canvas.ZIndex="1" CornerRadius="5" Opacity="0.8" RotationTransition="{x:Null}" ScaleTransition="{x:Null}" Transitions="{x:Null}" TranslationTransition="{x:Null}" Visibility="Visible" />
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

Troubleshooting Directions & Technical Recommendations #

1. Check UI Thread Overload from Frame Processing

Even with frame server mode, if each MediaPlayerElement is processing frames on the UI thread (or forcing marshalling to it), the cumulative work can choke the thread.

• Verify where you're handling the I420 frame callbacks from Mixed Reality WebRTC. Ensure you're not marshalling every frame to the UI thread unnecessarily. Instead, process frames on a background thread and only dispatch updates when needed (or use composition APIs that don't require UI thread access).
• Use the Performance Profiler's UI Thread Analysis to look for long-running tasks or excessive dispatcher invokes tied to frame rendering.

2. Optimize MediaPlayerElement Instance Management

Each MediaPlayerElement has a significant resource footprint. When scaling to 14+ instances, small inefficiencies add up:

• Disable unused features on MediaPlayerElement: You've already turned off transitions, but also check if AutoPlay is strictly necessary—maybe initialize playback only when the element is visible (using IsVisibleChanged or virtualization triggers).
• Implement UI Virtualization properly. Even though you're using a custom AdaptiveGridPanel, ensure it supports virtualization (check if it inherits from VirtualizingPanel). If not, switch to a virtualizing panel or modify your custom panel to reuse elements instead of creating new ones for every user.
• Reuse MediaPlayer instances instead of creating a new one per MediaPlayerElement. You can detach a MediaPlayer from an element when it's virtualized and attach it to a new element when needed.

3. Offload Rendering to Composition Layer Directly

Instead of using MediaPlayerElement, consider rendering the I420 frames directly to a SpriteVisual via the Windows.UI.Composition API, bypassing the XAML media pipeline entirely:

• Convert I420 frames to a SoftwareBitmap (on a background thread), then create a CompositionSurfaceBrush from it.
• Assign this brush to a SpriteVisual that's hosted in a XAML SwapChainPanel. This avoids the overhead of MediaPlayerElement and keeps rendering work on the composition thread instead of the UI thread.
• For multiple streams, each SwapChainPanel can host its own SpriteVisual, and the GridView can virtualize these panels efficiently.

4. Check for Resource Leaks or Unmanaged Resource Overhead

Mixed Reality WebRTC and MediaPlayer use unmanaged resources that might not be released properly:

• Ensure you're properly disposing MediaPlayer instances, WebRTC video track sources, and frame buffers when elements are removed from the GridView or virtualized.
• Use the Memory Profiler to check for growing memory usage as you add more elements—leaks in unmanaged memory can cause UI lag even if the UI thread isn't directly blocked.

5. Adjust Frame Rate & Resolution

Higher resolution frames or unnecessary frame rates can increase processing load:

• Negotiate lower resolution video streams with WebRTC peers when the number of participants increases (e.g., switch from 720p to 480p for 14+ users).
• Cap the frame rate for each stream to match the display refresh rate (e.g., 30fps instead of 60fps) if real-time 60fps isn't critical.

内容的提问来源于stack exchange，提问作者Karthik