Width="Auto"

Grid.Row="0"

Margin="7,-8,10,0"

<ScrollViewer VerticalScrollBarVisibility="Auto">

<!-- This Grid will in charge of showing the normal color selection controls or the custom colors controls -->

<Grid>

<!-- Normal Colors Window -->

<Grid

x:Name="gridNormalColorSelection"

Margin="21,10,20,10"

HorizontalAlignment="Left"

Background="Transparent"

Visibility="{Binding Path=IsCustomColorSelectionEnabled, Converter={StaticResource InverseBooleanToVisibilityCollapsedConverter}}">

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

<RowDefinition Height="Auto" />

<RowDefinition Height="Auto" />

<RowDefinition Height="Auto" />

<RowDefinition Height="Auto" />

<RowDefinition Height="Auto" />

</Grid.RowDefinitions>

<!-- Title -->

<Grid Grid.Row="0">

<Grid x:Name="titleCustomColorsGrid">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="20*" />

<ColumnDefinition Width="*" />

</Grid.ColumnDefinitions>

<TextBlock

Margin="0"

FontFamily="{StaticResource ArtifaktElementRegular}"

FontSize="20"

FontWeight="Bold"

Foreground="Black"

Text="{x:Static p:Resources.CustomColorPickerTitle}" />

<Button

Name="NormalColorsCloseButton"

Grid.Column="1"

Width="12.8"

Height="12.8"

Click="NormalColorsCloseButton_Click"

FontFamily="{StaticResource ArtifaktElementRegular}"

Style="{StaticResource PopupCloseButtonStyle}" />

</Grid>

<!-- Basic Colors -->

<Grid Grid.Row="1">

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

<RowDefinition Height="Auto" />

</Grid.RowDefinitions>

<TextBlock

Grid.Row="0"

Margin="0,10,0,0"

Padding="2"

Background="Transparent"

FontFamily="{StaticResource ArtifaktElementRegular}"

FontSize="14"

Foreground="Black"

Text="{x:Static p:Resources.CustomColorPickerBasicColors}" />

<ListBox

x:Name="PART_AvailableColors"

Grid.Row="1"

MinWidth="485"

Margin="0,5,0,5"

ItemsSource="{Binding BasicColors}"

SelectionChanged="PART_BasicColors_SelectionChanged"

Style="{StaticResource ColorListStyle}" />

</Grid>

<!-- Custom Colors -->

<Grid Grid.Row="2">

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

<RowDefinition Height="Auto" />

</Grid.RowDefinitions>

<TextBlock

Grid.Row="0"

Margin="0,10,0,-9"

Padding="2"

Background="Transparent"

FontFamily="{StaticResource ArtifaktElementRegular}"

FontSize="14"

Foreground="Black"

Text="{x:Static p:Resources.CustomColorPickerCustomColors}" />

<ListBox

x:Name="PART_CustomColors"

Grid.Row="1"

MinWidth="485"

Margin="0,5,0,5"

ItemsSource="{Binding CustomColors}"

SelectionChanged="PART_CustomColors_SelectionChanged"

Style="{StaticResource ColorListStyle}" />

</Grid>

</Grid>

<!-- Define Colors -->

<Grid Grid.Row="3">

x:Name="DefineColorBtn"

MaxWidth="200"

Margin="3,0,0,0"

Padding="10"

HorizontalAlignment="Left"

Click="DefineColorBtn_Click"

Content="{x:Static p:Resources.CustomColorPickerCustomColorBtn}">

<!-- Separator -->

<Grid Grid.Row="4">

<Separator Margin="5,5,0,5" Background="#dbdbd2" />

</Grid>

<!-- Buttons -->

<Grid Grid.Row="5" HorizontalAlignment="Right">

<Grid Margin="10,7,0,0">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto" />

<ColumnDefinition Width="Auto" />

</Grid.ColumnDefinitions>

<Button

x:Name="NormalColorsCancelBtn"

Grid.Column="0"

Padding="10,5,10,5"

Click="NormalColorsCancelBtn_Click"

Content="{x:Static p:Resources.CustomColorPickerCancelBtn}"

FontFamily="{StaticResource ArtifaktElementRegular}">

<Button.Style>

<Style BasedOn="{StaticResource OutlinedButtonStyleInverted}" TargetType="{x:Type Button}">

<Setter Property="IsEnabled" Value="True" />

</Style>

</Button.Style>

</Button>

<Button

x:Name="NormalColorsApplyBtn"

Grid.Column="1"

Padding="10,5,10,5"

Click="NormalColorsApplyBtn_Click"

Content="{x:Static p:Resources.CustomColorPickerApplyBtn}"

FontFamily="{StaticResource ArtifaktElementRegular}">

<Button.Style>

<Style BasedOn="{StaticResource SolidButtonStyle}" TargetType="{x:Type Button}">

<Setter Property="IsEnabled" Value="True" />

</Style>

</Button.Style>

</Button>

</Grid>

</Grid>

<!-- Custom Colors Window -->

<Grid

x:Name="gridCustomColorSelection"

Visibility="{Binding Path=IsCustomColorSelectionEnabled, Converter={StaticResource BooleanToVisibilityConverter}}">

<xctk:ColorCanvas

x:Name="colorCanvasControl"

Background="Transparent"

BorderThickness="0"

DataContext="{StaticResource CustomColorPickerViewModel}"

Foreground="{Binding Foreground, RelativeSource={RelativeSource TemplatedParent}}"

UsingAlphaChannel="{Binding UsingAlphaChannel, RelativeSource={RelativeSource TemplatedParent}}" />

</Grid>

</ScrollViewer>