<colorpicker:DualPickerControlBase x:Class="PixiEditor.Views.UserControls.SmallColorPicker"
                                   x:ClassModifier="internal"
                                   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:i="http://schemas.microsoft.com/xaml/behaviors"
                                   xmlns:behaviors="clr-namespace:PixiEditor.Helpers.Behaviours"
                                   xmlns:vws="clr-namespace:PixiEditor.Views"
                                   xmlns:local="clr-namespace:PixiEditor.Views.UserControls"
                                   xmlns:conv="clr-namespace:PixiEditor.Helpers.Converters"
                                   mc:Ignorable="d" 
                                   xmlns:colorpicker="clr-namespace:ColorPicker;assembly=ColorPicker"
                                   d:DesignHeight="380"
                                   d:DesignWidth="270"
                                   MaxWidth="400"
                                   x:Name="uc">
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/ColorPicker;component/Styles/DefaultColorPickerStyle.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>
    <Grid>
        <colorpicker:StandardColorPicker ColorState="{Binding ElementName=uc, Path=ColorState, Mode=TwoWay, Delay=10}"
                                         SecondColorState="{Binding ElementName=uc, Path=SecondColorState, Mode=TwoWay, Delay=10}"
                                         Visibility="{Binding ElementName=uc, Path=ActualHeight, Converter={conv:ThresholdVisibilityConverter CheckIfLess=False, Threshold=380}}"
                                         Style="{StaticResource DefaultColorPickerStyle}" x:Name="mainColorPicker" />
        <Grid Visibility="{Binding ElementName=uc, Path=ActualHeight, Converter={conv:ThresholdVisibilityConverter CheckIfLess=True, Threshold=380}}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition MaxWidth="80" Width="1*"/>
                <ColumnDefinition Width="3*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="8*"/>
                <RowDefinition Height="2*"/>
                <RowDefinition Height="1.2*"/>
                <RowDefinition Height="25"/>
            </Grid.RowDefinitions>
            <colorpicker:SquarePicker Grid.ColumnSpan="2" Grid.RowSpan="2" Margin="3"
                                x:Name="mainPicker"
                                ColorState="{Binding ColorState, Mode=TwoWay, ElementName=uc, Delay=50}"
                                PickerType="{Binding ElementName=colorSpaceComboBox, Path=SelectedIndex, Converter={conv:IntToPickerTypeConverter}}"/>
            <colorpicker:ColorDisplay Grid.Row="1" Grid.RowSpan="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="3,0,0,0"
                                ColorState="{Binding ColorState, Mode=TwoWay, ElementName=mainPicker}" 
                                SecondColorState="{Binding SecondColorState, Mode=TwoWay, ElementName=uc}"/>
            <ComboBox Grid.Row="1" Grid.RowSpan="2" Grid.Column="2" Width="50" Height="20" HorizontalAlignment="Right" 
                VerticalAlignment="Bottom" x:Name="colorSpaceComboBox" Margin="0,0,80,0">
                <ComboBoxItem IsSelected="True">HSV</ComboBoxItem>
                <ComboBoxItem>HSL</ComboBoxItem>
            </ComboBox>
            <colorpicker:HexColorTextBox Grid.Row="1" Grid.RowSpan="2" Grid.Column="2" Margin="0,0,3,0"
                                    HorizontalAlignment="Right" VerticalAlignment="Bottom" 
                                    ColorState="{Binding ColorState, Mode=TwoWay, ElementName=uc}"/>
            <Grid Grid.Row="3" Grid.ColumnSpan="2">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="25"/>
                    <ColumnDefinition/>
                    <ColumnDefinition Width="50"/>
                </Grid.ColumnDefinitions>
                <Label VerticalAlignment="Center" Margin="3,0,0,0">A:</Label>
                <colorpicker:AlphaSlider Margin="5,0" Grid.Column="1" VerticalAlignment="Center" ColorState="{Binding ColorState, Mode=TwoWay, ElementName=uc}"/>
                <local:NumberInput 
                    Grid.Column="2" HorizontalAlignment="Right" Margin="5,0"
                    Min="0" Max="255"
                    Width="40" Height="20"
                    VerticalAlignment="Center"
                    Value="{Binding ElementName=uc, Path=Color.A, Mode=TwoWay, Delay=10, Converter={conv:FloorConverter}}" />
            </Grid>
        </Grid>
    </Grid>
</colorpicker:DualPickerControlBase>
