<UserControl x:Class="ComPDFKit.Controls.Common.ColorPickerControl"
             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" 
             mc:Ignorable="d" 
             xmlns:local="clr-namespace:ComPDFKit.Controls.Common"
             d:DesignHeight="40" d:DesignWidth="220">
    <UserControl.Resources>
        <local:ReverseVisibilityConverter x:Key="ReverseVisibilityConverter"/>
        <Style x:Key="TransparentRadioButton" TargetType="{x:Type RadioButton}">
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="Height" Value="28" />
            <Setter Property="Width" Value="28" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RadioButton}">
                        <Grid>
                            <Ellipse x:Name="BackgroundEllipse" Visibility="Visible"
                             Height="24"
                             Width="24">
                                <Ellipse.Fill>
                                    <DrawingBrush>
                                        <DrawingBrush.Drawing>
                                            <ImageDrawing ImageSource="../../Asset/Resource/Transparent_btn_ic.png">
                                                <ImageDrawing.Rect>
                                                    <Rect Width="16" Height="16" />
                                                </ImageDrawing.Rect>
                                            </ImageDrawing>
                                        </DrawingBrush.Drawing>
                                    </DrawingBrush>
                                </Ellipse.Fill>
                            </Ellipse>
                            <Border x:Name="CheckedEllipse"
                                    BorderBrush="#1460F3"
                                    CornerRadius="24"
                                    BorderThickness="1"
                                    Visibility="Collapsed"
                             Height="28"
                             Width="28" />
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter TargetName="BackgroundEllipse" Property="Stroke" Value="White" />
                                <Setter TargetName="CheckedEllipse" Property="Visibility" Value="Visible" />
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="BackgroundEllipse" Property="Stroke" Value="White" />
                                <Setter TargetName="CheckedEllipse" Property="Visibility" Value="Visible" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="CommonColorRadioButton" TargetType="{x:Type RadioButton}">
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="Height" Value="28" />
            <Setter Property="Width" Value="28" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RadioButton}">
                        <Grid>
                            <Ellipse x:Name="BackgroundEllipse" Visibility="Visible"
                             Fill="{TemplateBinding Background}"
                             Height="24"
                             Width="24" />
                            <Border x:Name="CheckedEllipse"
                                    BorderBrush="#1460F3"
                                    CornerRadius="24"
                                    BorderThickness="1"
                                    Visibility="Collapsed"
                             Height="28"
                             Width="28" />
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter TargetName="BackgroundEllipse" Property="Stroke" Value="White" />
                                <Setter TargetName="CheckedEllipse" Property="Visibility" Value="Visible" />
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="BackgroundEllipse" Property="Stroke" Value="White" />
                                <Setter TargetName="CheckedEllipse" Property="Visibility" Value="Visible" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="CustomColorRadioButton" TargetType="{x:Type RadioButton}">
            <Setter Property="HorizontalAlignment" Value="Center"></Setter>
            <Setter Property="VerticalAlignment" Value="Center"></Setter>
            <Setter Property="Height" Value="30"></Setter>
            <Setter Property="Width" Value="60"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RadioButton}">
                        <Grid Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition></ColumnDefinition>
                                <ColumnDefinition></ColumnDefinition>
                            </Grid.ColumnDefinitions>

                            <Border x:Name="Border" Grid.ColumnSpan="2" CornerRadius="15" BorderThickness="1" BorderBrush="#FFFFFF">

                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <Ellipse Panel.ZIndex="2" Width="24" Height="24" Fill="{TemplateBinding Background}" />

                                    <Ellipse Grid.Column="1"  Margin="2" Width="24" Height="24">
                                        <Ellipse.Fill>
                                            <DrawingBrush>
                                                <DrawingBrush.Drawing>
                                                    <ImageDrawing ImageSource="../../Asset/Resource/Color_btn_ic.png">
                                                        <ImageDrawing.Rect>
                                                            <Rect Width="16" Height="16" />
                                                        </ImageDrawing.Rect>
                                                    </ImageDrawing>
                                                </DrawingBrush.Drawing>
                                            </DrawingBrush>
                                        </Ellipse.Fill>
                                    </Ellipse>
                                </Grid>
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="BorderBrush" TargetName="Border" Value="#555555"/>
                            </Trigger>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter Property="BorderBrush" TargetName="Border" Value="#000000"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <UserControl.Style>
        <Style TargetType="{x:Type UserControl}">
            <Style.Triggers>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="Opacity" Value="0.5"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </UserControl.Style>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition Width="2*"></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <RadioButton  x:Name="TransparentBtn"  Background="Transparent" Style="{StaticResource TransparentRadioButton}" Tag="-1" Click="ColorRadioButton_Click" Visibility="{Binding TransparentBtnProperty, RelativeSource={RelativeSource AncestorType={x:Type local:ColorPickerControl}},Mode=TwoWay}"/>

        <RadioButton  x:Name="FirstBtn"  Background="#000000" Style="{StaticResource CommonColorRadioButton}" Tag="0" Click="ColorRadioButton_Click" Visibility="{Binding ElementName=TransparentBtn, Path=Visibility, Converter={StaticResource ReverseVisibilityConverter}}"/>

        <RadioButton  x:Name="SecondBtn"  Background="#FF0000" Grid.Column="1" Style="{StaticResource CommonColorRadioButton}" Tag="1" Click="ColorRadioButton_Click" />

        <RadioButton   x:Name="ThirdBtn" Background="#FFEC66" Grid.Column="2" Style="{StaticResource CommonColorRadioButton}" Tag="2" Click="ColorRadioButton_Click"/>

        <RadioButton  x:Name="FourthBtn" Background="#2D77FA" Grid.Column="3" Style="{StaticResource CommonColorRadioButton}" Tag="3"  Click="ColorRadioButton_Click"/>

        <RadioButton x:Name="CustomColorRadioButton" Background="{Binding CustomBrush, RelativeSource={RelativeSource AncestorType={x:Type local:ColorPickerControl}},Mode=TwoWay}" Tag="4" Grid.Column="4" Style="{StaticResource CustomColorRadioButton}" Click="CustomColorRadioButton_Click"/>

    </Grid>
</UserControl>
