ColorTool.xaml

<UserControl
    x:Class="MaterialDesignDemo.ColorTool"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:domain="clr-namespace:MaterialDesignDemo.Domain"
    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
    xmlns:converters="clr-namespace:MaterialDesignDemo.Converters"
    xmlns:local="clr-namespace:MaterialDesignDemo"
    xmlns:materialDesignColors="clr-namespace:MaterialDesignColors;assembly=MaterialDesignColors"
    mc:Ignorable="d" 
    d:DataContext="{d:DesignInstance Type=domain:ColorToolViewModel}"
    d:DesignHeight="600"
    d:DesignWidth="600">
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.RadioButton.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Button.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Slider.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.TextBlock.xaml" />
            </ResourceDictionary.MergedDictionaries>
            
            <converters:ColorToBrushConverter x:Key="ColorToBrushConverter" />
            <converters:BrushToHexConverter x:Key="BrushToHexConverter" />
            <converters:MultiValueEqualityConverter x:Key="MultiValueEqualityConverter" />

            <Style TargetType="Button" BasedOn="{StaticResource MaterialDesignRaisedButton}">
                <Setter Property="BorderBrush" Value="Transparent" />
                <Setter Property="materialDesign:ElevationAssist.Elevation" Value="Dp0" />
            </Style>

            <Style TargetType="TextBlock" x:Key="HexLabelTextBlock" BasedOn="{StaticResource MaterialDesignBody2TextBlock}">
                <Setter Property="Margin" Value="8" />
            </Style>

            <Style TargetType="Border">
                <Setter Property="BorderBrush" Value="LightGray" />
                <Setter Property="BorderThickness" Value="1" />
            </Style>

            <DataTemplate DataType="{x:Type Color}" x:Key="SwatchColorTemplate">
                <Button
                    Height="40"
                    Width="40"
                    Background="{Binding Converter={StaticResource ColorToBrushConverter}}" 
                    Command="{Binding DataContext.ChangeHueCommand, RelativeSource={RelativeSource AncestorType=local:ColorTool}}" 
                    CommandParameter="{Binding}">
                    <Button.Style>
                        <Style TargetType="Button" BasedOn="{StaticResource MaterialDesignRaisedButton}">
                            <Setter Property="local:ButtonAssist.UniformCornerRadius" Value="0" />
                            <Setter Property="BorderThickness" Value="0" />
                            <Setter Property="Margin" Value="1 1 0 0" />
                            <Setter Property="materialDesign:RippleAssist.IsDisabled" Value="True" />
                            <Setter Property="materialDesign:ElevationAssist.Elevation" Value="Dp0" />
                            <Setter Property="Tag" Value="0" />
                            <Style.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Trigger.EnterActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation
                                                    Storyboard.TargetProperty="(local:ButtonAssist.UniformCornerRadius)" 
                                                    To="8"
                                                    Duration="0:0:0.18" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </Trigger.EnterActions>
                                    
                                    <Trigger.ExitActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation
                                                    Storyboard.TargetProperty="(local:ButtonAssist.UniformCornerRadius)" 
                                                    From="8"
                                                    Duration="0:0:0.18" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </Trigger.ExitActions>
                                </Trigger>
                                
                                <DataTrigger Value="True">
                                    <DataTrigger.Binding>
                                        <MultiBinding Converter="{StaticResource MultiValueEqualityConverter}">
                                            <Binding
                                                RelativeSource="{RelativeSource AncestorType=local:ColorTool}"
                                                Path="DataContext.SelectedColor"
                                                Mode="OneWay" />
                                            <Binding Mode="OneWay"/>
                                        </MultiBinding>
                                    </DataTrigger.Binding>
                                    
                                    <DataTrigger.EnterActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation
                                                    Storyboard.TargetProperty="(local:ButtonAssist.UniformCornerRadius)" 
                                                    To="20"
                                                    Duration="0:0:0.18" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </DataTrigger.EnterActions>
                                    
                                    <DataTrigger.ExitActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation
                                                    Storyboard.TargetProperty="(local:ButtonAssist.UniformCornerRadius)" 
                                                    From="20"
                                                    Duration="0:0:0.18" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </DataTrigger.ExitActions>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Button.Style>
                </Button>
            </DataTemplate>
        </ResourceDictionary>
    </UserControl.Resources>
    
    <DockPanel>
        <local:ThemeSettings
            DockPanel.Dock="Top"
            Margin="8" />
        
        <DockPanel>
            <!-- Selection controls -->
            <Border DockPanel.Dock="Bottom">
                <Grid>
                    <Grid.Resources>
                        <Style TargetType="Button" BasedOn="{StaticResource MaterialDesignRaisedButton}" x:Key="PaletteButton">
                            <Setter Property="BorderBrush" Value="Transparent" />
                            <Setter Property="materialDesign:ElevationAssist.Elevation" Value="Dp0" />
                            <Setter Property="materialDesign:ShadowAssist.ShadowEdges" Value="All" />
                            <Setter Property="materialDesign:RippleAssist.Feedback" Value="LightGray" />
                            <Setter Property="materialDesign:RippleAssist.RippleOnTop" Value="True" />
                            <Setter Property="Margin" Value="0" />
                            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                            <Setter Property="Height" Value="Auto" />
                            <Setter Property="Background" Value="{DynamicResource MaterialDesignPaper}" />
                            <Setter Property="Padding" Value="16" />
                        </Style>
                    </Grid.Resources>
                    
                    <Grid.RowDefinitions>
                        <RowDefinition Height="300" />
                    </Grid.RowDefinitions>
                    
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="2*" />
                        <ColumnDefinition Width="2*" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    
                    <!-- Primary selection -->
                    <Border
                        BorderBrush="LightGray"
                        BorderThickness="0 0 1 0">
                        <Button Command="{Binding ChangeToPrimaryCommand}">
                            <Button.Style>
                                <Style TargetType="Button" BasedOn="{StaticResource PaletteButton}">
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding ActiveScheme}" Value="Primary">
                                            <Setter Property="materialDesign:ElevationAssist.Elevation" Value="Dp8" />
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </Button.Style>
                            
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="2*" />
                                    <RowDefinition />
                                </Grid.RowDefinitions>

                                <TextBlock
                                    Style="{StaticResource MaterialDesignBody1TextBlock}"
                                    Foreground="{DynamicResource MaterialDesignBody}"
                                    Text="Primary"/>
                                
                                <!-- Primary mid section -->
                                <Border
                                    Background="{DynamicResource PrimaryHueMidBrush}"
                                    Grid.Row="1">
                                    <Grid>
                                        <TextBlock
                                            DataContext="{DynamicResource PrimaryHueMidBrush}" 
                                            Text="{Binding Converter={StaticResource BrushToHexConverter}}" 
                                            Style="{StaticResource HexLabelTextBlock}" 
                                            Foreground="{DynamicResource PrimaryHueMidForegroundBrush}" />
                                        
                                        <Border
                                            Width="30"
                                            Height="30"
                                            CornerRadius="15">
                                            <Border.Style>
                                                <Style TargetType="Border">
                                                    <Style.Triggers>
                                                        <DataTrigger Binding="{Binding ActiveScheme}" Value="Primary">
                                                            <Setter Property="Background" Value="{DynamicResource PrimaryHueMidForegroundBrush}" />
                                                        </DataTrigger>
                                                    </Style.Triggers>
                                                </Style>
                                            </Border.Style>
                                            
                                            <TextBlock
                                                HorizontalAlignment="Center"
                                                VerticalAlignment="Center"
                                                FontSize="22"
                                                Text="P">
                                                <TextBlock.Style>
                                                    <Style TargetType="TextBlock">
                                                        <Setter Property="Foreground" Value="{DynamicResource PrimaryHueMidForegroundBrush}" />
                                                        <Style.Triggers>
                                                            <DataTrigger Binding="{Binding ActiveScheme}" Value="Primary">
                                                                <Setter Property="Foreground" Value="{DynamicResource PrimaryHueMidBrush}" />
                                                            </DataTrigger>
                                                        </Style.Triggers>
                                                    </Style>
                                                </TextBlock.Style>
                                            </TextBlock>
                                        </Border>
                                    </Grid>
                                </Border>
                                
                                <UniformGrid Rows="1" Grid.Row="2">
                                    <!-- Primary light -->
                                    <Border Background="{DynamicResource PrimaryHueLightBrush}">
                                        <TextBlock
                                            DataContext="{DynamicResource PrimaryHueLightBrush}" 
                                            Text="{Binding Converter={StaticResource BrushToHexConverter}}" 
                                            Style="{StaticResource HexLabelTextBlock}" 
                                            Foreground="{DynamicResource PrimaryHueLightForegroundBrush}" />
                                    </Border>
                                    <!-- Primary dark -->
                                    <Border Background="{DynamicResource PrimaryHueDarkBrush}">
                                        <TextBlock
                                            DataContext="{DynamicResource PrimaryHueDarkBrush}" 
                                            Text="{Binding Converter={StaticResource BrushToHexConverter}}" 
                                            Style="{StaticResource HexLabelTextBlock}" 
                                            Foreground="{DynamicResource PrimaryHueDarkForegroundBrush}" />
                                    </Border>
                                </UniformGrid>
                            </Grid>
                        </Button>
                    </Border>
                    
                    <!-- Secondary selection -->
                    <Border
                        BorderBrush="LightGray"
                        Grid.Column="1"
                        BorderThickness="0 0 1 0">
                        <Button Command="{Binding ChangeToSecondaryCommand}" >
                            <Button.Style>
                                <Style TargetType="Button" BasedOn="{StaticResource PaletteButton}">
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding ActiveScheme}" Value="Secondary">
                                            <Setter Property="materialDesign:ElevationAssist.Elevation" Value="Dp8" />
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </Button.Style>
                            
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="2*" />
                                    <RowDefinition />
                                </Grid.RowDefinitions>

                                <TextBlock
                                    Style="{StaticResource MaterialDesignBody1TextBlock}"
                                    Foreground="{DynamicResource MaterialDesignBody}"
                                    Text="Secondary"/>
                                
                                <!-- Secondary mid section -->
                                <Border
                                    Background="{DynamicResource SecondaryHueMidBrush}"
                                    Grid.Row="1">
                                    <Grid>
                                        <TextBlock
                                            DataContext="{DynamicResource SecondaryHueMidBrush}" 
                                            Text="{Binding Converter={StaticResource BrushToHexConverter}}" 
                                            Style="{StaticResource HexLabelTextBlock}" 
                                            Foreground="{DynamicResource SecondaryHueMidForegroundBrush}" />
                                        
                                        <Border
                                            Width="30"
                                            Height="30"
                                            CornerRadius="15">
                                            <Border.Style>
                                                <Style TargetType="Border">
                                                    <Style.Triggers>
                                                        <DataTrigger Binding="{Binding ActiveScheme}" Value="Secondary">
                                                            <Setter Property="Background" Value="{DynamicResource SecondaryHueMidForegroundBrush}" />
                                                        </DataTrigger>
                                                    </Style.Triggers>
                                                </Style>
                                            </Border.Style>
                                            
                                            <TextBlock
                                                HorizontalAlignment="Center"
                                                VerticalAlignment="Center"
                                                FontSize="22"
                                                Text="S">
                                                <TextBlock.Style>
                                                    <Style TargetType="TextBlock">
                                                        <Setter Property="Foreground" Value="{DynamicResource SecondaryHueMidForegroundBrush}" />
                                                        <Style.Triggers>
                                                            <DataTrigger Binding="{Binding ActiveScheme}" Value="Secondary">
                                                                <Setter Property="Foreground" Value="{DynamicResource SecondaryHueMidBrush}" />
                                                            </DataTrigger>
                                                        </Style.Triggers>
                                                    </Style>
                                                </TextBlock.Style>
                                            </TextBlock>
                                        </Border>
                                    </Grid>
                                </Border>
                                
                                <UniformGrid Rows="1" Grid.Row="2">
                                    <!-- Secondary light -->
                                    <Border Background="{DynamicResource SecondaryHueLightBrush}">
                                        <TextBlock
                                            DataContext="{DynamicResource SecondaryHueLightBrush}" 
                                            Text="{Binding Converter={StaticResource BrushToHexConverter}}" 
                                            Style="{StaticResource HexLabelTextBlock}" 
                                            Foreground="{DynamicResource SecondaryHueLightForegroundBrush}" />
                                    </Border>
                                    
                                    <!-- Secondary dark -->
                                    <Border Background="{DynamicResource SecondaryHueDarkBrush}">
                                        <TextBlock
                                            DataContext="{DynamicResource SecondaryHueDarkBrush}" 
                                            Text="{Binding Converter={StaticResource BrushToHexConverter}}" 
                                            Style="{StaticResource HexLabelTextBlock}" 
                                            Foreground="{DynamicResource SecondaryHueDarkForegroundBrush}" />
                                    </Border>
                                </UniformGrid>
                            </Grid>
                        </Button>
                    </Border>
                    
                    <UniformGrid
                        Grid.Column="2"
                        Columns="1">
                        <!-- Primary foreground selection -->
                        <Border
                            BorderBrush="LightGray"
                            BorderThickness="0 0 0 1">
                            <Button Command="{Binding ChangeToPrimaryForegroundCommand}">
                                <Button.Style>
                                    <Style TargetType="Button" BasedOn="{StaticResource PaletteButton}">
                                        <Style.Triggers>
                                            <DataTrigger Binding="{Binding ActiveScheme}" Value="PrimaryForeground">
                                                <Setter Property="materialDesign:ElevationAssist.Elevation" Value="Dp8" />
                                            </DataTrigger>
                                        </Style.Triggers>
                                    </Style>
                                </Button.Style>
                                
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="*" />
                                    </Grid.RowDefinitions>

                                    <TextBlock
                                        Style="{StaticResource MaterialDesignBody1TextBlock}"
                                        Foreground="{DynamicResource MaterialDesignBody}"
                                        Text="Text on Primary"/>
                                    
                                    <Border
                                        Background="{DynamicResource PrimaryHueMidBrush}"
                                        Grid.Row="1">
                                        <Grid>
                                            <TextBlock
                                                DataContext="{DynamicResource PrimaryHueMidForegroundBrush}" 
                                                Text="{Binding Converter={StaticResource BrushToHexConverter}}" 
                                                Style="{StaticResource HexLabelTextBlock}" 
                                                Foreground="{DynamicResource PrimaryHueMidForegroundBrush}" />
                                            
                                            <Border
                                                Width="30"
                                                Height="30"
                                                CornerRadius="15">
                                                <Border.Style>
                                                    <Style TargetType="Border">
                                                        <Style.Triggers>
                                                            <DataTrigger Binding="{Binding ActiveScheme}" Value="PrimaryForeground">
                                                                <Setter Property="Background" Value="{DynamicResource PrimaryHueMidForegroundBrush}" />
                                                            </DataTrigger>
                                                        </Style.Triggers>
                                                    </Style>
                                                </Border.Style>
                                                
                                                <TextBlock
                                                    HorizontalAlignment="Center"
                                                    VerticalAlignment="Center"
                                                    FontSize="22"
                                                    Text="T">
                                                    <TextBlock.Style>
                                                        <Style TargetType="TextBlock">
                                                            <Setter Property="Foreground" Value="{DynamicResource PrimaryHueMidForegroundBrush}" />
                                                            <Style.Triggers>
                                                                <DataTrigger Binding="{Binding ActiveScheme}" Value="PrimaryForeground">
                                                                    <Setter Property="Foreground" Value="{DynamicResource PrimaryHueMidBrush}" />
                                                                </DataTrigger>
                                                            </Style.Triggers>
                                                        </Style>
                                                    </TextBlock.Style>
                                                </TextBlock>
                                            </Border>
                                        </Grid>
                                    </Border>
                                </Grid>
                            </Button>
                        </Border>
                        
                        <!-- Secondary foreground selection -->
                        <Border>
                            <Button Command="{Binding ChangeToSecondaryForegroundCommand}">
                                <Button.Style>
                                    <Style TargetType="Button" BasedOn="{StaticResource PaletteButton}">
                                        <Style.Triggers>
                                            <DataTrigger Binding="{Binding ActiveScheme}" Value="SecondaryForeground">
                                                <Setter Property="materialDesign:ElevationAssist.Elevation" Value="Dp8" />
                                            </DataTrigger>
                                        </Style.Triggers>
                                    </Style>
                                </Button.Style>
                                
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="*" />
                                    </Grid.RowDefinitions>

                                    <TextBlock
                                        Style="{StaticResource MaterialDesignBody1TextBlock}"
                                        Foreground="{DynamicResource MaterialDesignBody}"
                                        Text="Text on Secondary"/>
                                    
                                    <Border
                                        Background="{DynamicResource SecondaryHueMidBrush}"
                                        Grid.Row="1">
                                        <Grid>
                                            <TextBlock
                                                DataContext="{DynamicResource SecondaryHueMidForegroundBrush}" 
                                                Text="{Binding Converter={StaticResource BrushToHexConverter}}" 
                                                Style="{StaticResource HexLabelTextBlock}" 
                                                Foreground="{DynamicResource SecondaryHueMidForegroundBrush}" />
                                            
                                            <Border
                                                Width="30"
                                                Height="30"
                                                CornerRadius="15">
                                                <Border.Style>
                                                    <Style TargetType="Border">
                                                        <Style.Triggers>
                                                            <DataTrigger Binding="{Binding ActiveScheme}" Value="SecondaryForeground">
                                                                <Setter Property="Background" Value="{DynamicResource SecondaryHueMidForegroundBrush}" />
                                                            </DataTrigger>
                                                        </Style.Triggers>
                                                    </Style>
                                                </Border.Style>
                                                
                                                <TextBlock
                                                    HorizontalAlignment="Center"
                                                    VerticalAlignment="Center"
                                                    FontSize="22"
                                                    Text="T">
                                                    <TextBlock.Style>
                                                        <Style TargetType="TextBlock">
                                                            <Setter Property="Foreground" Value="{DynamicResource SecondaryHueMidForegroundBrush}" />
                                                            <Style.Triggers>
                                                                <DataTrigger Binding="{Binding ActiveScheme}" Value="SecondaryForeground">
                                                                    <Setter Property="Foreground" Value="{DynamicResource SecondaryHueMidBrush}" />
                                                                </DataTrigger>
                                                            </Style.Triggers>
                                                        </Style>
                                                    </TextBlock.Style>
                                                </TextBlock>
                                            </Border>
                                        </Grid>
                                    </Border>
                                </Grid>
                            </Button>
                        </Border>
                    </UniformGrid>
                </Grid>
            </Border>
            
            <!-- Current scheme label -->
            <Border
                DockPanel.Dock="Bottom"
                BorderThickness="1 0 1 0">
                <TextBlock
                    Style="{StaticResource MaterialDesignBody1TextBlock}"
                    Margin="16"
                    Text="CURRENT SCHEME"/>
            </Border>

            <!-- Color picker section -->
            <DockPanel Margin="16">
                <UniformGrid
                    Columns="1"
                    DockPanel.Dock="Right">
                    <RadioButton
                        x:Name="MdPaletteButton"
                        Style="{StaticResource MaterialDesignTabRadioButton}"
                        Margin="4"
                        IsChecked="True"
                        Content="MD Palette"/>
                    
                    <RadioButton
                        x:Name="CustomPaletteButton"
                        Style="{StaticResource MaterialDesignTabRadioButton}"
                        Margin="4"
                        IsChecked="False"
                        Content="Custom"/>
                </UniformGrid>
                
                <Grid DockPanel.Dock="Left">
                    <Grid
                        Visibility="{Binding IsChecked,
                                ElementName=CustomPaletteButton,
                                Converter={StaticResource BooleanToVisibilityConverter}}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="160" />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        
                        <DockPanel>
                            <TextBox
                                Text="{Binding Color, ElementName=ColorPicker, UpdateSourceTrigger=PropertyChanged}"
                                Style="{StaticResource MaterialDesignFilledTextBox}"
                                materialDesign:HintAssist.Hint="Color HEX value"
                                DockPanel.Dock="Top"
                                Margin="2,0,10,2"/>
                            
                            <Rectangle
                                Fill="{Binding Color,
                                    ElementName=ColorPicker,
                                    Converter={StaticResource ColorToBrushConverter}}"
                                Margin="2,0,10,2" />
                        </DockPanel>
                        
                        <materialDesign:ColorPicker
                            x:Name="ColorPicker"
                            Grid.Column="1"
                            Color="{Binding SelectedColor, Delay=25}"/>
                    </Grid>
                    
                    <StackPanel
                        Visibility="{Binding IsChecked,
                                ElementName=MdPaletteButton,
                                Converter={StaticResource BooleanToVisibilityConverter}}">
                        <StackPanel Orientation="Horizontal">
                            <StackPanel.Resources>
                                <Style TargetType="TextBlock">
                                    <Setter Property="Width" Value="40" />
                                    <Setter Property="Margin" Value="1 1 0 0" />
                                    <Setter Property="TextAlignment" Value="Center" />
                                </Style>
                            </StackPanel.Resources>
                            
                            <Rectangle Width="80" />
                            <TextBlock Text="50" />
                            <TextBlock Text="100" />
                            <TextBlock Text="200" />
                            <TextBlock Text="300" />
                            <TextBlock Text="400" />
                            <TextBlock Text="500" />
                            <TextBlock Text="600" />
                            <TextBlock Text="700" />
                            <TextBlock Text="800" />
                            <TextBlock Text="900" />
                            <TextBlock Text="A100" />
                            <TextBlock Text="A200" />
                            <TextBlock Text="A400" />
                            <TextBlock Text="A700" />
                        </StackPanel>
                        
                        <ItemsControl ItemsSource="{Binding Swatches}">
                            <ItemsControl.ItemTemplate>
                                <DataTemplate DataType="{x:Type materialDesignColors:ISwatch}">
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text="{Binding Name}" Width="80" VerticalAlignment="Center" />
                                        <ItemsControl ItemsSource="{Binding Hues}" ItemTemplate="{StaticResource SwatchColorTemplate}">
                                            <ItemsControl.ItemsPanel>
                                                <ItemsPanelTemplate>
                                                    <VirtualizingStackPanel Orientation="Horizontal" />
                                                </ItemsPanelTemplate>
                                            </ItemsControl.ItemsPanel>
                                        </ItemsControl>
                                    </StackPanel>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </StackPanel>
                </Grid>
            </DockPanel>
        </DockPanel>
    </DockPanel>
</UserControl>