wrapped custom widget items in containers so we have more control of the surrounding, i.e. divider

Hyperbar.Windows.MediaController/Hyperbar.Windows.MediaController.csproj

@@ -0,0 +1,42 @@
+<Project Sdk="Microsoft.NET.Sdk">
+	<PropertyGroup>
+		<TargetFramework>net8.0-windows10.0.19041.0</TargetFramework>
+		<TargetPlatformMinVersion>10.0.17763.0</TargetPlatformMinVersion>
+		<RuntimeIdentifiers>win10-x86;win10-x64;win10-arm64</RuntimeIdentifiers>
+		<UseWinUI>true</UseWinUI>
+		<UseRidGraph>true</UseRidGraph>
+		<ImplicitUsings>enable</ImplicitUsings>
+		<Nullable>enable</Nullable>
+	</PropertyGroup>
+	<ItemGroup>
+	  <None Remove="MediaControllerView.xaml" />
+	  <None Remove="MediaControllerWidgetView.xaml" />
+	  <None Remove="MediaInformationView.xaml" />
+	</ItemGroup>
+	<ItemGroup>
+		<PackageReference Include="Microsoft.WindowsAppSDK" Version="1.4.230913002" />
+		<PackageReference Include="Microsoft.Windows.SDK.BuildTools" Version="10.0.22621.755" />
+	</ItemGroup>
+	<ItemGroup>
+		<PackageReference Include="Microsoft.Extensions.Hosting" Version="8.0.0" />
+	</ItemGroup>
+	<ItemGroup>
+		<ProjectReference Include="..\Hyperbar.Windows.UI\Hyperbar.Windows.UI.csproj" />
+		<ProjectReference Include="..\Hyperbar\Hyperbar.csproj" />
+	</ItemGroup>
+	<ItemGroup>
+	  <Page Update="MediaInformationView.xaml">
+	    <Generator>MSBuild:Compile</Generator>
+	  </Page>
+	</ItemGroup>
+	<ItemGroup>
+	  <Page Update="MediaControllerView.xaml">
+	    <Generator>MSBuild:Compile</Generator>
+	  </Page>
+	</ItemGroup>
+	<ItemGroup>
+	  <Page Update="MediaControllerWidgetView.xaml">
+	    <Generator>MSBuild:Compile</Generator>
+	  </Page>
+	</ItemGroup>
+</Project>

Hyperbar.Windows.MediaController/MediaController.cs

@@ -0,0 +1,10 @@
+namespace Hyperbar.Windows.Primary;
+
+public class MediaController :
+    IInitializer
+{
+    public Task InitializeAsync()
+    {
+        throw new NotImplementedException();
+    }
+}

Hyperbar.Windows.MediaController/MediaControllerView.xaml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<UserControl
+    x:Class="Hyperbar.Windows.MediaController.MediaControllerView"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:ui="using:Hyperbar.Windows.UI">
+    <ItemsControl ItemTemplateSelector="{Binding Mode=TwoWay, Converter={ui:DataTemplateConverter}}" ItemsSource="{Binding}">
+        <ItemsControl.ItemsPanel>
+            <ItemsPanelTemplate>
+                <StackPanel Orientation="Horizontal" />
+            </ItemsPanelTemplate>
+        </ItemsControl.ItemsPanel>
+    </ItemsControl>
+</UserControl>

Hyperbar.Windows.MediaController/MediaControllerView.xaml.cs

@@ -0,0 +1,9 @@
+using Microsoft.UI.Xaml.Controls;
+
+namespace Hyperbar.Windows.MediaController;
+
+public sealed partial class MediaControllerView : 
+    UserControl
+{
+    public MediaControllerView() => InitializeComponent();
+}

Hyperbar.Windows.MediaController/MediaControllerViewModel.cs

@@ -0,0 +1,37 @@
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Hyperbar.Windows.Primary;
+
+public partial class MediaInformationViewModel :
+    WidgetComponentViewModel
+{
+    [ObservableProperty]
+    private string title = "this is a test";
+
+    [ObservableProperty]
+    private string description = "this is a test description";
+
+    public MediaInformationViewModel(ITemplateFactory templateFactory) : base(templateFactory)
+    {
+    }
+}
+
+public class MediaControllerViewModel : 
+    ObservableCollectionViewModel<WidgetComponentViewModel>,
+    ITemplatedViewModel
+{
+    public MediaControllerViewModel(ITemplateFactory templateFactory,
+        IServiceFactory serviceFactory,
+        IMediator mediator) : base(serviceFactory, mediator)
+    {
+        TemplateFactory = templateFactory;
+
+        this.Add<MediaInformationViewModel>();
+        this.Add<WidgetButtonViewModel>("\uEB9E");
+        this.Add<WidgetButtonViewModel>("\uE768");
+        this.Add<WidgetButtonViewModel>("\uE769");
+        this.Add<WidgetButtonViewModel>("\uEB9D");
+    }
+
+    public ITemplateFactory TemplateFactory { get; set; }
+}

Hyperbar.Windows.MediaController/MediaControllerWidgetProvider.cs

@@ -0,0 +1,17 @@
+using Hyperbar.Windows.MediaController;
+using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.Hosting;
+
+namespace Hyperbar.Windows.Primary;
+
+public class MediaControllerWidgetProvider :
+    IWidgetProvider
+{
+    public void Create(HostBuilderContext comtext, IServiceCollection services) =>
+            services.AddWidgetTemplate<MediaControllerWidgetViewModel, MediaControllerWidgetView>()
+                .AddContentTemplate<MediaControllerViewModel, MediaControllerView>()
+                .AddContentTemplate<MediaControllerViewModel, MediaControllerView>()
+                .AddContentTemplate<MediaControllerViewModel, MediaControllerView>()
+                .AddContentTemplate<MediaInformationViewModel, MediaInformationView>();
+
+}

Hyperbar.Windows.MediaController/MediaControllerWidgetView.xaml

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<UserControl
+    x:Class="Hyperbar.Windows.MediaController.MediaControllerWidgetView"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:ui="using:Hyperbar.Windows.UI">
+    <FlipView
+        x:Name="FlipView"
+        Width="320"
+        Background="Transparent"
+        ItemTemplateSelector="{Binding Converter={ui:DataTemplateConverter}}"
+        ItemsSource="{Binding}">
+        <FlipView.ItemContainerStyle>
+            <Style TargetType="FlipViewItem">
+                <Setter Property="HorizontalAlignment" Value="Right" />
+                <Setter Property="HorizontalContentAlignment" Value="Right" />
+
+            </Style>
+        </FlipView.ItemContainerStyle>
+        <FlipView.ItemsPanel>
+            <ItemsPanelTemplate>
+                <StackPanel AreScrollSnapPointsRegular="False" Orientation="Horizontal" />
+            </ItemsPanelTemplate>
+        </FlipView.ItemsPanel>
+    </FlipView>
+</UserControl>

Hyperbar.Windows.MediaController/MediaControllerWidgetView.xaml.cs

@@ -0,0 +1,8 @@
+using Microsoft.UI.Xaml.Controls;
+namespace Hyperbar.Windows.MediaController;
+
+public sealed partial class MediaControllerWidgetView : 
+    UserControl
+{
+    public MediaControllerWidgetView() => InitializeComponent();
+}

Hyperbar.Windows.MediaController/MediaControllerWidgetViewModel.cs

@@ -0,0 +1,12 @@
+namespace Hyperbar.Windows.Primary;
+
+public class MediaControllerWidgetViewModel(ITemplateFactory templateFactory,
+    IServiceFactory serviceFactory,
+    IMediator mediator,
+    IEnumerable<MediaControllerViewModel> items) :
+    ObservableCollectionViewModel<MediaControllerViewModel>(serviceFactory, mediator, items),
+    IWidgetViewModel,
+    ITemplatedViewModel
+{
+    public ITemplateFactory TemplateFactory => templateFactory;
+}

Hyperbar.Windows.MediaController/MediaInformationView.xaml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<UserControl
+    x:Class="Hyperbar.Windows.MediaController.MediaInformationView"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Button>sdfsdf</Button>
+</UserControl>

Hyperbar.Windows.MediaController/MediaInformationView.xaml.cs

@@ -0,0 +1,9 @@
+using Microsoft.UI.Xaml.Controls;
+
+namespace Hyperbar.Windows.MediaController;
+
+public sealed partial class MediaInformationView : 
+    UserControl
+{
+    public MediaInformationView() => InitializeComponent();
+}