RGBSyncPlus/RGBSync+/UI/ConfigurationWindow.xaml

<controls:BlurredDecorationWindow x:Class="RGBSyncPlus.UI.ConfigurationWindow"
                                  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                                  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:core="clr-namespace:RGB.NET.Core;assembly=RGB.NET.Core"
                                  xmlns:ui="clr-namespace:RGBSyncPlus.UI"
                                  xmlns:controls="clr-namespace:RGBSyncPlus.Controls"
                                  xmlns:styles="clr-namespace:RGBSyncPlus.Styles"
                                  xmlns:attached="clr-namespace:RGBSyncPlus.Attached"
                                  xmlns:helper="clr-namespace:RGBSyncPlus.Helper"
                                  xmlns:dd="urn:gong-wpf-dragdrop"
                                  mc:Ignorable="d"
                                  Title="RGBSync+ # Configuration" 
                                  Icon="pack://application:,,,/RGBSync+;component/Resources/argebee.ico"
                                  IconCommand="{Binding OpenHomepageCommand}"
                                  Width="1280"  Height="720"
                                  Closed="ConfigurationWindow_OnClosed">

    <controls:BlurredDecorationWindow.Resources>
        <styles:CachedResourceDictionary>
            <styles:CachedResourceDictionary.MergedDictionaries>
                <styles:CachedResourceDictionary Source="/RGBSync+;component/Styles/Navigation.xaml" />
            </styles:CachedResourceDictionary.MergedDictionaries>
        </styles:CachedResourceDictionary>
    </controls:BlurredDecorationWindow.Resources>

    <controls:BlurredDecorationWindow.DataContext>
        <ui:ConfigurationViewModel />
    </controls:BlurredDecorationWindow.DataContext>

    <TabControl Style="{StaticResource StyleTabControlNavigation}">
        <TabItem Header="Sync-Groups">
            <AdornerDecorator>
                <DockPanel LastChildFill="True">
                    <GroupBox DockPanel.Dock="Left" Width="260">
                        <DockPanel VerticalAlignment="Top">
                            <Button DockPanel.Dock="Bottom"
                                    HorizontalAlignment="Center" 
                                    Margin="8" 
                                    Content="New Sync-Group"
                                    Command="{Binding AddSyncGroupCommand}" />

                            <ListBox ItemsSource="{Binding SyncGroups}"
                                     SelectedItem="{Binding SelectedSyncGroup}">
                                <ListBox.ItemTemplate>
                                    <DataTemplate>
                                        <Grid>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="Auto" />
                                                <ColumnDefinition Width="*" />
                                                <ColumnDefinition Width="Auto" />
                                            </Grid.ColumnDefinitions>

                                            <Button Width="{Binding ActualHeight, RelativeSource={RelativeSource Self}}"
                                                    ToolTip="Remove"
                                                    Command="{Binding DataContext.RemoveSyncGroupCommand, RelativeSource={RelativeSource AncestorType={x:Type controls:BlurredDecorationWindow}}}"
                                                    CommandParameter="{Binding DataContext, RelativeSource={RelativeSource AncestorType=ListBoxItem}}">
                                                <Image Source="/RGBSync+;component/Resources/close.png" />
                                            </Button>
                                            <TextBlock Grid.Column="1" Margin="4" Text="{Binding DisplayName}" />
                                        </Grid>
                                    </DataTemplate>
                                </ListBox.ItemTemplate>
                            </ListBox>
                        </DockPanel>
                    </GroupBox>

                    <DockPanel Margin="8,0,0,0">
                        <GroupBox DockPanel.Dock="Top">
                            <Grid>
                                <Border HorizontalAlignment="Center" 
                                        VerticalAlignment="Top" 
                                        Margin="16"
                                        Visibility="{Binding SelectedSyncGroup, Converter={StaticResource NullToVisibilityConverter}, ConverterParameter=True}">
                                    <TextBlock Text="No Sync-Group selected ..." />
                                </Border>

                                <Border Visibility="{Binding SelectedSyncGroup, Converter={StaticResource NullToVisibilityConverter}}">
                                    <Border.Resources>
                                        <Style BasedOn="{StaticResource StyleLabelForm}" TargetType="Label" />
                                        <Style BasedOn="{StaticResource StyleTextBlockForm}" TargetType="TextBlock" />
                                    </Border.Resources>

                                    <controls:Form DockPanel.Dock="Top">
                                        <Label controls:Form.IsLabel="True" 
                                               Content="Name:" />
                                        <TextBox controls:Form.Fill="True"
                                                 Text="{Binding SelectedSyncGroup.Name, UpdateSourceTrigger=PropertyChanged}" />

                                        <Label controls:Form.IsLabel="True" 
                                               Content="Sync-LED:" />
                                        <ComboBox controls:Form.Fill="True"
                                                  ItemsSource="{Binding AvailableSyncLeds}"
                                                  SelectedItem="{Binding SelectedSyncGroup.SyncLed}">
                                            <ComboBox.GroupStyle>
                                                <GroupStyle>
                                                    <GroupStyle.HeaderTemplate>
                                                        <DataTemplate>
                                                            <Border VerticalAlignment="Stretch"
                                                                    HorizontalAlignment="Stretch"
                                                                    Background="{StaticResource BrushComboBoxBackgroundGroupHeader}">
                                                                <TextBlock VerticalAlignment="Center"
                                                                           HorizontalAlignment="Left"
                                                                           FontWeight="Bold"
                                                                           Text="{Binding Name}" />
                                                            </Border>
                                                        </DataTemplate>
                                                    </GroupStyle.HeaderTemplate>
                                                </GroupStyle>
                                            </ComboBox.GroupStyle>
                                            <ComboBox.ItemTemplate>
                                                <DataTemplate>
                                                    <TextBlock Text="{Binding LedId}"/>
                                                </DataTemplate>
                                            </ComboBox.ItemTemplate>
                                        </ComboBox>
                                    </controls:Form>
                                </Border>
                            </Grid>
                        </GroupBox>

                        <Grid Margin="0,8,0,0"
                              Visibility="{Binding SelectedSyncGroup, Converter={StaticResource NullToVisibilityConverter}}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="8" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>

                            <Grid.Resources>
                                <GroupStyle x:Key="StyleListBoxGroup">
                                    <GroupStyle.HeaderTemplate>
                                        <DataTemplate>
                                            <TextBlock VerticalAlignment="Center"
                                                       HorizontalAlignment="Left"
                                                       Margin="0,8,0,0"
                                                       FontWeight="Bold"
                                                       Text="{Binding Name}" />
                                        </DataTemplate>
                                    </GroupStyle.HeaderTemplate>
                                </GroupStyle>

                                <DataTemplate x:Key="DataTemplateListBoxItem">
                                    <TextBlock Text="{Binding LedId}"/>
                                </DataTemplate>
                            </Grid.Resources>

                            <GroupBox Grid.Column="0">
                                <DockPanel>
                                    <TextBlock DockPanel.Dock="Top"
                                               HorizontalAlignment="Center" 
                                               Margin="0,0,0,8" 
                                               FontWeight="Bold" 
                                               Text="Available LEDS" />
                                    <ListBox SelectionMode="Extended"
                                             dd:DragDrop.IsDragSource="True"
                                             dd:DragDrop.IsDropTarget="True"
                                             dd:DragDrop.DropHandler="{Binding}"
                                             ItemTemplate="{StaticResource DataTemplateListBoxItem}"
                                             ItemsSource="{Binding AvailableLeds}">
                                        <ListBox.GroupStyle>
                                            <StaticResource ResourceKey="StyleListBoxGroup" />
                                        </ListBox.GroupStyle>
                                    </ListBox>
                                </DockPanel>
                            </GroupBox>

                            <GroupBox Grid.Column="2">
                                <DockPanel>
                                    <TextBlock DockPanel.Dock="Top"
                                               HorizontalAlignment="Center" 
                                               Margin="0,0,0,8" 
                                               FontWeight="Bold" 
                                               Text="Synchronized LEDS" />
                                    <ListBox SelectionMode="Extended"
                                             dd:DragDrop.IsDragSource="True"
                                             dd:DragDrop.IsDropTarget="True"
                                             dd:DragDrop.DropHandler="{Binding}"
                                             ItemTemplate="{StaticResource DataTemplateListBoxItem}"
                                             ItemsSource="{Binding SynchronizedLeds}">
                                        <ListBox.GroupStyle>
                                            <StaticResource ResourceKey="StyleListBoxGroup" />
                                        </ListBox.GroupStyle>
                                    </ListBox>
                                </DockPanel>
                            </GroupBox>
                        </Grid>
                    </DockPanel>
                </DockPanel>
            </AdornerDecorator>
        </TabItem>

        <TabItem Header="Settings">
            <AdornerDecorator>
                <GroupBox VerticalAlignment="Top">
                    <StackPanel Orientation="Vertical">
                        <Grid>
                            <Grid.Resources>
                                <Style BasedOn="{StaticResource StyleLabelForm}" TargetType="Label" />
                                <Style BasedOn="{StaticResource StyleTextBlockForm}" TargetType="TextBlock" />
                                <Style BasedOn="{StaticResource StyleListBoxForm}" TargetType="ListBox" />
                            </Grid.Resources>

                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="8" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="8" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>

                            <controls:Form Grid.Column="0">
                                <Label controls:Form.IsLabel="True" 
                                       Content="Version:" />
                                <TextBlock Text="{Binding Version}" />

                                <Label controls:Form.IsLabel="True" 
                                       Content="Update-Rate" />
                                <Slider Minimum="1" Maximum="100" controls:Form.Fill="True"  IsSnapToTickEnabled="True" TickFrequency="1" TickPlacement="BottomRight"
                                        Value="{Binding UpdateRate}"
                                        attached:SliderValue.Unit="UPS"
                                        ToolTip="Defines how fast the data is updated.&#x0a;Low values can reduce CPU-usage but might cause stuttering." />

                                <Label controls:Form.LineBreaks="1" controls:Form.IsLabel="True" Content="Devices:" />
                            </controls:Form>
                        </Grid>

                        <ItemsControl VerticalAlignment="Top" HorizontalAlignment="Left" Margin="120,-22,0,0" ItemsSource="{Binding Source={x:Static core:RGBSurface.Instance}, Path=Devices}">
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <TextBlock Style="{StaticResource StyleTextBlockForm}">
                                        <TextBlock.Text>
                                            <MultiBinding StringFormat=">  {0} {1} ({2})">
                                                <Binding Path="DeviceInfo.Manufacturer" />
                                                <Binding Path="DeviceInfo.Model" />
                                                <Binding Path="DeviceInfo.DeviceType" />
                                            </MultiBinding>
                                        </TextBlock.Text>
                                    </TextBlock>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </StackPanel>
                </GroupBox>
            </AdornerDecorator>
        </TabItem>
    </TabControl>

</controls:BlurredDecorationWindow>