How to render a video in the UWP Diagram (SfDiagram)?

In a UWP Diagram, you can render a video within a node by using a DataTemplate to define the content of the node through the ContentTemplate property. Within this DataTemplate, include a MediaPlayerElement to display the video. In the Loaded event of the MediaPlayerElement, you can load and play the video. Below is the code snippet to achieve this.

Code snippet:

<DataTemplate x:Key="VideoTemplate">
   <StackPanel Orientation="Vertical">
      <MediaPlayerElement x:Name="Media" Loaded="Media_Loaded" Height="450"/>
       <Button x:Name="Bt" Content="Play" HorizontalAlignment="Center" VerticalAlignment="Center" Click="Bt_Click"/>
   </StackPanel>
</DataTemplate>

//Loaded method of the MediaPlayerElement 
private void Media_Loaded(object sender, RoutedEventArgs e)
{
   (sender as MediaPlayerElement).Source = MediaSource.CreateFromUri(new Uri("ms-appx:///Assets/DemoVideo.mp4"));
}


//Code for creating the Node.

NodeViewModel viewModel1 = new NodeViewModel();
viewModel1.UnitHeight = 500;
viewModel1.UnitWidth = 500;
viewModel1.OffsetX = 600;
viewModel1.OffsetY = 300;
viewModel1.ContentTemplate = this.Resources["VideoTemplate"] as DataTemplate;

(Diagram.Nodes as NodeCollection).Add(viewModel1); 

Conclusion:
I hope you enjoyed learning how to create a node using a video in the UWP Diagram

Refer to our UWP Diagram feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, try our 30-day free trial to check out our other controls.

Please let us know in the following comments section if you have any queries or require clarifications. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!