- continue ui redesign

Mystify/ViewModels/ChannelViewModel.cs

@@ -2,8 +2,10 @@
 // Created: 2021-04-14
 // Copyright(c) 2021 SimonG. All Rights Reserved.
 
+using System.Threading.Tasks;
 using System.Windows.Input;
 using Lib.Audio.Interfaces;
+using Mystify.Views;
 using ReactiveUI;
 
 namespace Mystify.ViewModels
@@ -11,24 +13,39 @@ namespace Mystify.ViewModels
     public class ChannelViewModel : ViewModelBase
     {
         private readonly IChannel _channel;
+        private readonly MainWindow? _mainWindow;
+        private readonly MainModel _mainModel;
 
-        public ChannelViewModel(IChannel channel) => _channel = channel;
+        public ChannelViewModel(IChannel channel, MainWindow? mainWindow, MainModel mainModel)
+        {
+            _channel = channel;
+            _mainWindow = mainWindow;
+            _mainModel = mainModel;
+        }
 
-        public IControllable? Controllable
+        public ControllableViewModel? Controllable
         {
-            get => _channel.Controllable;
+            get => _channel.Controllable == null ? null : new ControllableViewModel(_channel.Controllable);
             set
             {
                 if (value != null)
-                    _channel.MapControllable(value);
+                    _channel.MapControllable(value.Controllable);
             }
         }
 
         public bool IsControllableMapped => Controllable != null;
-        public bool IsPopupOpen { get; private set; }
 
-        public ICommand SelectControllableCommand => ReactiveCommand.Create(SelectControllable);
+        public ICommand SelectControllableCommand => ReactiveCommand.CreateFromTask(SelectControllable);
 
-        private void SelectControllable() => IsPopupOpen = true;
+        private async Task SelectControllable()
+        {
+            ControllableSelectionWindow controllableSelectionWindow =
+                new()
+                {
+                    DataContext = new ControllableSelectionViewModel(_mainModel.Controllables)
+                };
+
+            Controllable = await controllableSelectionWindow.ShowDialog<ControllableViewModel>(_mainWindow);
+        }
     }
 }

Mystify/ViewModels/ControllableSelectionViewModel.cs

@@ -0,0 +1,46 @@
+// Author: Simon Gockner
+// Created: 2021-04-14
+// Copyright(c) 2021 SimonG. All Rights Reserved.
+
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Linq;
+using Lib.Audio.Interfaces;
+
+namespace Mystify.ViewModels
+{
+    public class ControllableSelectionViewModel : ViewModelBase
+    {
+        public ControllableSelectionViewModel()
+        {
+            if (!IsInDesignMode)
+                throw new InvalidOperationException("Constructor is for design time usage only.");
+            
+            Controllables = new ObservableCollection<ControllableViewModel>();
+        }
+        
+        public ControllableSelectionViewModel(List<IControllable>? controllables)
+        {
+            Controllables = controllables == null ? new ObservableCollection<ControllableViewModel>() : 
+                controllables.Select(c => new ControllableViewModel(c)).ToObservableCollection();
+
+            foreach (var controllable in Controllables) 
+                controllable.Selected += OnControllableSelected;
+        }
+
+        public ObservableCollection<ControllableViewModel> Controllables { get; }
+        public ControllableViewModel? SelectedControllable { get; private set; }
+        
+        private void OnControllableSelected(object? sender, bool isSelected)
+        {
+            if (!isSelected)
+                return;
+            
+            if (sender is not ControllableViewModel controllableViewModel)
+                return;
+
+            SelectedControllable = controllableViewModel;
+        }
+    }
+}

Mystify/ViewModels/ControllableViewModel.cs

@@ -0,0 +1,36 @@
+// Author: Simon Gockner
+// Created: 2021-04-14
+// Copyright(c) 2021 SimonG. All Rights Reserved.
+
+using System;
+using System.Windows.Input;
+using Lib.Audio.Interfaces;
+using ReactiveUI;
+
+namespace Mystify.ViewModels
+{
+    public class ControllableViewModel : ViewModelBase
+    {
+        private bool _isSelected;
+
+        public ControllableViewModel(IControllable controllable) => Controllable = controllable;
+
+        public IControllable Controllable { get; }
+        public string Name => Controllable.Name;
+        public string? IconPath => Controllable.IconPath;
+
+        public bool IsSelected
+        {
+            get => _isSelected;
+            private set
+            {
+                _isSelected = value;
+                Selected?.Invoke(this, IsSelected);
+            }
+        }
+
+        public ICommand SelectCommand => ReactiveCommand.Create(() => IsSelected = !IsSelected);
+
+        public event EventHandler<bool>? Selected;
+    }
+}

Mystify/ViewModels/MainWindowViewModel.cs

@@ -32,7 +32,7 @@ namespace Mystify.ViewModels
             _mainWindow = mainWindow;
         }
 
-        public ObservableCollection<ChannelViewModel>? Channels => _mainModel?.Channels?.Select(c => new ChannelViewModel(c)).ToObservableCollection();
+        public ObservableCollection<ChannelViewModel>? Channels => _mainModel?.Channels?.Select(c => new ChannelViewModel(c, _mainWindow, _mainModel)).ToObservableCollection();
         public List<IControllable>? Controllables => _mainModel?.Controllables;
 
         public IChannel? SelectedChannel

Mystify/Views/ControllableSelectionWindow.axaml

@@ -0,0 +1,38 @@
+<Window xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        xmlns:viewModels="clr-namespace:Mystify.ViewModels"
+        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+        x:Class="Mystify.Views.ControllableSelectionWindow"
+        Title="Select Controllable"
+        TransparencyLevelHint="AcrylicBlur"
+        ExtendClientAreaToDecorationsHint="True"
+        ExtendClientAreaChromeHints="NoChrome"
+        SizeToContent="WidthAndHeight">
+
+    <Design.DataContext>
+        <viewModels:ControllableSelectionViewModel/>
+    </Design.DataContext>
+
+    <Window.DataTemplates>
+        <DataTemplate DataType="viewModels:ControllableViewModel">
+            <Button Command="{Binding SelectCommand}" HorizontalAlignment="Stretch">
+                <StackPanel Orientation="Horizontal">
+                    <Image Source="{Binding IconPath}" Margin="10,5"/>
+                    <TextBlock Text="{Binding Name}" Margin="10,5"/>
+                </StackPanel>
+            </Button>
+        </DataTemplate>
+    </Window.DataTemplates>
+
+    <Panel>
+        <ExperimentalAcrylicBorder IsHitTestVisible="False">
+            <ExperimentalAcrylicBorder.Material>
+                <ExperimentalAcrylicMaterial BackgroundSource="Digger" TintColor="Black" TintOpacity="1" MaterialOpacity="0.65"/>
+            </ExperimentalAcrylicBorder.Material>
+        </ExperimentalAcrylicBorder>
+        
+        <ItemsControl Items="{Binding Controllables}"/>
+    </Panel>
+</Window>

Mystify/Views/ControllableSelectionWindow.axaml.cs

@@ -0,0 +1,23 @@
+// Author: Simon Gockner
+// Created: 2021-04-14
+// Copyright(c) 2021 SimonG. All Rights Reserved.
+
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Mystify.Views
+{
+    public class ControllableSelectionWindow : Window
+    {
+        public ControllableSelectionWindow()
+        {
+            InitializeComponent();
+#if DEBUG
+            this.AttachDevTools();
+#endif
+        }
+
+        private void InitializeComponent() => AvaloniaXamlLoader.Load(this);
+    }
+}