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:converters="clr-namespace:MaterialDesignDemo.Shared.Converters;assembly=MaterialDesignDemo.Shared"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:sharedDomain="clr-namespace:MaterialDesignDemo.Shared.Domain;assembly=MaterialDesignDemo.Shared"
             xmlns:local="clr-namespace:MaterialDesignDemo"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             xmlns:materialDesignColors="clr-namespace:MaterialDesignColors;assembly=MaterialDesignColors"
             xmlns:materialDesignConverters="clr-namespace:MaterialDesignThemes.Wpf.Converters;assembly=MaterialDesignThemes.Wpf"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             d:DataContext="{d:DesignInstance Type=sharedDomain:ColorToolViewModel}"
             d:DesignHeight="600"
             d:DesignWidth="600"
             mc:Ignorable="d">
  <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 x:Key="HexLabelTextBlock"
             TargetType="TextBlock"
             BasedOn="{StaticResource MaterialDesignBody2TextBlock}">
        <Setter Property="Margin" Value="8" />
      </Style>

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

      <DataTemplate x:Key="SwatchColorTemplate" DataType="{x:Type Color}">
        <Button Width="40"
                Height="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="BorderThickness" Value="0" />
              <Setter Property="Margin" Value="1,1,0,0" />
              <Setter Property="Tag" Value="0" />
              <Setter Property="local:ButtonAssist.UniformCornerRadius" Value="0" />
              <Setter Property="materialDesign:ElevationAssist.Elevation" Value="Dp0" />
              <Setter Property="materialDesign:RippleAssist.IsDisabled" Value="True" />
              <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 Mode="OneWay"
                               Path="DataContext.SelectedColor"
                               RelativeSource="{RelativeSource AncestorType=local:ColorTool}" />
                      <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>
    <TextBlock DockPanel.Dock="Top"
               Style="{StaticResource PageTitleTextBlock}"
               Text="ColorTool" />

    <local:ThemeSettings Margin="0,0,0,8" DockPanel.Dock="Top" />

    <DockPanel>
      <!-- Selection controls -->
      <Border DockPanel.Dock="Bottom">
        <Grid>
          <Grid.Resources>
            <Style x:Key="PaletteButton"
                   TargetType="Button"
                   BasedOn="{StaticResource MaterialDesignRaisedButton}">
              <Setter Property="Background" Value="{DynamicResource MaterialDesignPaper}" />
              <Setter Property="BorderBrush" Value="Transparent" />
              <Setter Property="Height" Value="Auto" />
              <Setter Property="HorizontalContentAlignment" Value="Stretch" />
              <Setter Property="Margin" Value="0" />
              <Setter Property="Padding" Value="16" />
              <Setter Property="VerticalContentAlignment" Value="Stretch" />
              <Setter Property="materialDesign:ElevationAssist.Elevation" Value="Dp0" />
              <Setter Property="materialDesign:RippleAssist.Feedback" Value="LightGray" />
              <Setter Property="materialDesign:RippleAssist.RippleOnTop" Value="True" />
            </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 Foreground="{DynamicResource MaterialDesignBody}"
                           Style="{StaticResource MaterialDesignBody1TextBlock}"
                           Text="Primary" />

                <!-- Primary mid section -->
                <Border Grid.Row="1" Background="{DynamicResource PrimaryHueMidBrush}">
                  <Grid>
                    <TextBlock DataContext="{DynamicResource PrimaryHueMidBrush}"
                               Foreground="{DynamicResource PrimaryHueMidForegroundBrush}"
                               Style="{StaticResource HexLabelTextBlock}"
                               Text="{Binding Converter={StaticResource BrushToHexConverter}}" />

                    <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 Grid.Row="2" Rows="1">
                  <!-- Primary light -->
                  <Border Background="{DynamicResource PrimaryHueLightBrush}">
                    <TextBlock DataContext="{DynamicResource PrimaryHueLightBrush}"
                               Foreground="{DynamicResource PrimaryHueLightForegroundBrush}"
                               Style="{StaticResource HexLabelTextBlock}"
                               Text="{Binding Converter={StaticResource BrushToHexConverter}}" />
                  </Border>
                  <!-- Primary dark -->
                  <Border Background="{DynamicResource PrimaryHueDarkBrush}">
                    <TextBlock DataContext="{DynamicResource PrimaryHueDarkBrush}"
                               Foreground="{DynamicResource PrimaryHueDarkForegroundBrush}"
                               Style="{StaticResource HexLabelTextBlock}"
                               Text="{Binding Converter={StaticResource BrushToHexConverter}}" />
                  </Border>
                </UniformGrid>
              </Grid>
            </Button>
          </Border>

          <!-- Secondary selection -->
          <Border Grid.Column="1"
                  BorderBrush="LightGray"
                  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 Foreground="{DynamicResource MaterialDesignBody}"
                           Style="{StaticResource MaterialDesignBody1TextBlock}"
                           Text="Secondary" />

                <!-- Secondary mid section -->
                <Border Grid.Row="1" Background="{DynamicResource SecondaryHueMidBrush}">
                  <Grid>
                    <TextBlock DataContext="{DynamicResource SecondaryHueMidBrush}"
                               Foreground="{DynamicResource SecondaryHueMidForegroundBrush}"
                               Style="{StaticResource HexLabelTextBlock}"
                               Text="{Binding Converter={StaticResource BrushToHexConverter}}" />

                    <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 Grid.Row="2" Rows="1">
                  <!-- Secondary light -->
                  <Border Background="{DynamicResource SecondaryHueLightBrush}">
                    <TextBlock DataContext="{DynamicResource SecondaryHueLightBrush}"
                               Foreground="{DynamicResource SecondaryHueLightForegroundBrush}"
                               Style="{StaticResource HexLabelTextBlock}"
                               Text="{Binding Converter={StaticResource BrushToHexConverter}}" />
                  </Border>

                  <!-- Secondary dark -->
                  <Border Background="{DynamicResource SecondaryHueDarkBrush}">
                    <TextBlock DataContext="{DynamicResource SecondaryHueDarkBrush}"
                               Foreground="{DynamicResource SecondaryHueDarkForegroundBrush}"
                               Style="{StaticResource HexLabelTextBlock}"
                               Text="{Binding Converter={StaticResource BrushToHexConverter}}" />
                  </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 Foreground="{DynamicResource MaterialDesignBody}"
                             Style="{StaticResource MaterialDesignBody1TextBlock}"
                             Text="Text on Primary" />

                  <Border Grid.Row="1" Background="{DynamicResource PrimaryHueMidBrush}">
                    <Grid>
                      <TextBlock DataContext="{DynamicResource PrimaryHueMidForegroundBrush}"
                                 Foreground="{DynamicResource PrimaryHueMidForegroundBrush}"
                                 Style="{StaticResource HexLabelTextBlock}"
                                 Text="{Binding Converter={StaticResource BrushToHexConverter}}" />

                      <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 Foreground="{DynamicResource MaterialDesignBody}"
                             Style="{StaticResource MaterialDesignBody1TextBlock}"
                             Text="Text on Secondary" />

                  <Border Grid.Row="1" Background="{DynamicResource SecondaryHueMidBrush}">
                    <Grid>
                      <TextBlock DataContext="{DynamicResource SecondaryHueMidForegroundBrush}"
                                 Foreground="{DynamicResource SecondaryHueMidForegroundBrush}"
                                 Style="{StaticResource HexLabelTextBlock}"
                                 Text="{Binding Converter={StaticResource BrushToHexConverter}}" />

                      <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 -->
      <TextBlock DockPanel.Dock="Bottom"
                 Style="{StaticResource PageTitleTextBlock}"
                 Text="Current scheme" />

      <!-- Color picker section -->
      <DockPanel Margin="0,0,0,16">
        <UniformGrid Columns="1" DockPanel.Dock="Right">
          <RadioButton x:Name="MdPaletteButton"
                       Margin="4"
                       Content="MD Palette"
                       IsChecked="True"
                       Style="{StaticResource MaterialDesignTabRadioButton}" />

          <RadioButton x:Name="CustomPaletteButton"
                       Margin="4"
                       Content="Custom"
                       IsChecked="False"
                       Style="{StaticResource MaterialDesignTabRadioButton}" />
        </UniformGrid>

        <Grid DockPanel.Dock="Left">
          <Grid Visibility="{Binding IsChecked, ElementName=CustomPaletteButton, Converter={x:Static materialDesignConverters:BooleanToVisibilityConverter.CollapsedInstance}}">
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="160" />
              <ColumnDefinition />
            </Grid.ColumnDefinitions>

            <DockPanel>
              <TextBox materialDesign:HintAssist.Hint="Color HEX value"
                       DockPanel.Dock="Top"
                       Style="{StaticResource MaterialDesignFilledTextBox}"
                       Text="{Binding Color, ElementName=ColorPicker, UpdateSourceTrigger=PropertyChanged}" />

              <Rectangle Margin="2,0,10,2" Fill="{Binding Color, ElementName=ColorPicker, Converter={StaticResource ColorToBrushConverter}}" />
            </DockPanel>

            <materialDesign:ColorPicker x:Name="ColorPicker"
                                        Grid.Column="1"
                                        Color="{Binding SelectedColor, Delay=25}" />
          </Grid>

          <StackPanel Visibility="{Binding IsChecked, ElementName=MdPaletteButton, Converter={x:Static materialDesignConverters:BooleanToVisibilityConverter.CollapsedInstance}}">
            <StackPanel Orientation="Horizontal">
              <StackPanel.Resources>
                <Style TargetType="TextBlock">
                  <Setter Property="Margin" Value="1,1,0,0" />
                  <Setter Property="TextAlignment" Value="Center" />
                  <Setter Property="Width" Value="40" />
                </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 Width="80"
                               VerticalAlignment="Center"
                               Text="{Binding Name, Mode=OneTime}" />
                    <ItemsControl ItemTemplate="{StaticResource SwatchColorTemplate}"
                                  ItemsSource="{Binding Lookup.Values, Mode=OneTime}">
                      <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                          <VirtualizingStackPanel Orientation="Horizontal" />
                        </ItemsPanelTemplate>
                      </ItemsControl.ItemsPanel>
                    </ItemsControl>
                  </StackPanel>
                </DataTemplate>
              </ItemsControl.ItemTemplate>
            </ItemsControl>
          </StackPanel>
        </Grid>
      </DockPanel>
    </DockPanel>
  </DockPanel>
</UserControl>