Update MediaElement Transport Controls for Windows (#2329)

* Add custom transport controls and resource dictionary

Introduced a new embedded resource, `ResourceDictionary.windows.xaml`, in the `CommunityToolkit.Maui.MediaElement.csproj` project file.

Updated `MauiMediaElement.windows.cs`:
- Imported new namespaces.
- Added `CustomTransportControls` field and methods for loading resource dictionary and applying custom styles.
- Updated constructor to load resource dictionary and set custom transport controls.
- Added `LoadResourceDictionary`, `ApplyCustomStyle`, and `SetTransportControls` methods.
- Updated `Dispose` method to handle custom transport controls.
- Removed `OnMediaPlayerElementPointerMoved` method and related code.
- Updated `OnFullScreenButtonClick` method to remove fullscreen button references.

Updated `MediaManager.windows.cs`:
- Disabled `SystemMediaTransportControls` in `CreatePlatformView`.

Added `CustomTransportControls` class in `CommunityToolkit.Maui.Primitives`:
- Imported necessary namespaces.
- Defined `FullScreenButton` property.
- Implemented `OnTemplateLoaded` event.
- Overrode `OnApplyTemplate` method to add full-screen button.
- Added `FullScreenButton_Click` event handler.
- Introduced `isFullScreen` field to track full-screen state.

* Reorder AppBarSeparator in ResourceDictionary.xaml

Moved RightSeparator before PlaybackRateButton in ResourceDictionary.windows.xaml. Added RightSeparator with Height='0', Width='0', and Margin='0,0'. Reordered properties of PlaybackRateButton without changing values. Removed original RightSeparator after PlaybackRateButton.

* Re-add and enhance media control styles and templates

Re-added various properties and elements to styles and templates in `ResourceDictionary.windows.xaml` to ensure consistent UI appearance and behavior. Added new buttons like `ZoomButton` and `CastButton` to the media controls command bar. Enhanced `customTransportcontrols` and `CommandBarStyle` with additional properties.

* Update layout properties and add corner radius to Grid

Removed the `UseLayoutRounding` property and adjusted the `Margin`
property from `0,0,0,20` to `0,0,0,10`. Added `VerticalContentAlignment`
set to `Center` and `VerticalAlignment` set to `Bottom`. Introduced
`CornerRadius` of `8,8,8,8` to the `Grid` element in the
`ResourceDictionary.windows.xaml` file.

* Refactor CustomTransportControls class and clean up code

- Cleaned up `using` directives by removing redundant `using CommunityToolkit.Maui.Core;` and reordering the remaining directives.
- Changed `CustomTransportControls` class from public sealed to sealed partial.
- Removed XML documentation comments for `CustomTransportControls` class and its members.
- Changed `FullScreenButton` property from nullable `AppBarButton` with a private setter to non-nullable `AppBarButton` initialized with a new instance.
- Removed null check for `FullScreenButton` in `FullScreenButton_Click` method as `FullScreenButton` is no longer nullable.

* Fix volume slider bug with Should Mute

---------

Co-authored-by: Brandon Minnick <13558917+brminnick@users.noreply.github.com>
Co-authored-by: Víctor Hugo García Hernández <vhugogarcia@users.noreply.github.com>
Co-authored-by: Gerald Versluis <gerald.versluis@microsoft.com>

Author: 4 people

src/CommunityToolkit.Maui.MediaElement/CommunityToolkit.Maui.MediaElement.csproj

@@ -81,4 +81,9 @@
     <PackageReference Include="Microsoft.SourceLink.GitHub" Version="8.0.0" Condition=" '$(Configuration)'=='Release' " PrivateAssets="All" />
   </ItemGroup>
 
+  <ItemGroup>
+    <EmbeddedResource Include="ResourceDictionary.windows.xaml">
+      <LogicalName>ResourceDictionary.windows.xaml</LogicalName>
+    </EmbeddedResource>
+  </ItemGroup>
 </Project>

src/CommunityToolkit.Maui.MediaElement/Primitives/CustomTransportControls.windows.cs

@@ -0,0 +1,43 @@
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+namespace CommunityToolkit.Maui.Primitives;
+
+sealed partial class CustomTransportControls : MediaTransportControls
+{
+	public event EventHandler<EventArgs>? OnTemplateLoaded;
+	public AppBarButton FullScreenButton = new();
+	bool isFullScreen = false;
+
+	public CustomTransportControls()
+	{
+		this.DefaultStyleKey = typeof(CustomTransportControls);
+	}
+
+	protected override void OnApplyTemplate()
+	{
+		base.OnApplyTemplate();
+
+		var temp = GetTemplateChild("FullWindowButton") as AppBarButton;
+		if(temp is not null)
+		{
+			FullScreenButton = temp;
+			FullScreenButton.Visibility = Microsoft.UI.Xaml.Visibility.Visible;
+			OnTemplateLoaded?.Invoke(this, EventArgs.Empty);
+			FullScreenButton.Click += FullScreenButton_Click;
+		}
+	}
+
+	void FullScreenButton_Click(object sender, RoutedEventArgs e)
+	{
+		if (isFullScreen)
+		{
+			FullScreenButton.Icon = new FontIcon { Glyph = "\uE740" };
+			isFullScreen = false;
+		}
+		else
+		{
+			FullScreenButton.Icon = new SymbolIcon(Symbol.BackToWindow);
+			isFullScreen = true;
+		}
+	}
+}