VS2022 WPF C# MediaElement运行无画面但设计器自动播放问题

问题1：运行程序时MediaElement无法显示媒体内容 #

这个问题90%以上是资源配置和路径写法错误导致的，按以下步骤排查修复：

• 修正资源生成配置
  MediaElement底层依赖Windows Media Player COM组件，不支持读取程序集内嵌的资源流，不要把视频的生成操作设为Resource或嵌入的资源。正确配置：
  1. 选中项目里的.wmv文件，在属性面板设置：
     • 生成操作：Content
     • 复制到输出目录：如果较新则复制
  2. 修正Source路径写法，不要用/Resources/xxx.wmv这种容易解析失败的写法，要么写相对路径Source="Resources/bganimation.wmv"，要么用标准内容Pack URI：Source="pack://application:,,,/Resources/bganimation.wmv"
• 修正控件属性设置
  如果你是用VisualBrush做背景，不要把MediaElement设为Collapsed（折叠状态下控件不会加载媒体内容），要设为Hidden，同时给MediaElement设置和视频匹配的宽高，避免尺寸为0导致不渲染。可直接参考以下可运行的背景视频实现代码：

  <Window x:Class="VideoBgDemo.MainWindow"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
      <Window.Resources>
          <MediaElement x:Key="bgVideo" 
                        LoadedBehavior="Manual" 
                        UnloadedBehavior="Manual"
                        MediaEnded="bgVideo_MediaEnded"
                        Width="1920" Height="1080"
                        Visibility="Hidden"/>
      </Window.Resources>
      <Grid>
          <Grid.Background>
              <VisualBrush Visual="{StaticResource bgVideo}" Stretch="UniformToFill"/>
          </Grid.Background>
          <!-- 页面业务内容放在此处 -->
      </Grid>
  </Window>
  

  配套后台代码（实现循环播放，运行时加载媒体）：

  public partial class MainWindow : Window
  {
      public MainWindow()
      {
          InitializeComponent();
          Loaded += MainWindow_Loaded;
      }
  
      private void MainWindow_Loaded(object sender, RoutedEventArgs e)
      {
          var bgVideo = (MediaElement)FindResource("bgVideo");
          bgVideo.Source = new Uri("Resources/bganimation.wmv", UriKind.Relative);
          bgVideo.Play();
      }
  
      private void bgVideo_MediaEnded(object sender, RoutedEventArgs e)
      {
          var media = (MediaElement)sender;
          media.Position = TimeSpan.Zero;
          media.Play();
      }
  }
  

• 系统环境排查
  如果以上配置都正确还是无法播放，先找到输出目录里的视频文件，用系统自带的Windows Media Player打开测试，如果WMP都无法播放，说明系统缺少对应WMV编码，需要修复系统媒体组件或安装正确的解码包。

问题2：禁用Design模式下的媒体自动播放功能 #

VS设计器自动播放视频是因为设计阶段加载XAML时会直接执行MediaElement的默认播放逻辑，只要不在设计器阶段给MediaElement赋值Source即可完全禁用该行为，实现方式和上面代码里的逻辑一致：

• 不要在XAML里直接写死MediaElement的Source属性
• 在后台代码赋值Source前，先判断当前是否处于设计模式，设计模式下直接跳过媒体加载逻辑：

  // 判断是否为设计器模式
  if (DesignerProperties.GetIsInDesignMode(this))
  {
      return;
  }
  // 仅运行时执行媒体加载和播放逻辑
  bgVideo.Source = new Uri("Resources/bganimation.wmv", UriKind.Relative);
  bgVideo.Play();
  

  该方法对所有版本的WPF和VS2022都生效，不会再出现设计器自动播放视频干扰开发的问题。

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