<UserControl x:Class="PDF_Office.CustomControl.ColorDropBoxPop"
             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:local="clr-namespace:PDF_Office.CustomControl"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800" Width="194" Height="auto">
    <UserControl.Resources>
        <local:ColorToBrushConverter x:Key="ColorToBrushConverter"></local:ColorToBrushConverter>
        <Style TargetType="ListViewItem">
            <Setter Property="Width" Value="15" ></Setter>
            <Setter Property="Height" Value="15" ></Setter>
            <Setter Property="Padding" Value="0"></Setter>
            <Setter Property="BorderThickness" Value="1"></Setter>
            <Setter Property="BorderBrush" Value="#33000000"></Setter>
            <Setter Property="Margin" Value="1"></Setter>
        </Style>
    </UserControl.Resources>
    <Grid>
        <Border Background="White" Name="ContainerBorder" BorderThickness="1">
            <Border.Effect>
                <DropShadowEffect Color="#000000" ShadowDepth="0" BlurRadius="24" Opacity="0.22">
                </DropShadowEffect>
            </Border.Effect>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"></RowDefinition>
                    <RowDefinition Height="auto"></RowDefinition>
                    <RowDefinition Height="auto"></RowDefinition>
                    <RowDefinition Height="auto"></RowDefinition>
                    <RowDefinition Height="auto"></RowDefinition>
                    <RowDefinition Height="auto"></RowDefinition>
                    <RowDefinition Height="auto"></RowDefinition>
                    <RowDefinition Height="auto"></RowDefinition>
                </Grid.RowDefinitions>
                <TextBlock x:Name="RecentlyColorText" VerticalAlignment="Bottom" LineHeight="20" FontFamily="Segoe UI" FontSize="14" Margin="8,8,0,3">Recently used color</TextBlock>
                <ListView Grid.Row="1" BorderThickness="0" Name="RecentlyColorList" Margin="9,0,9,0" ScrollViewer.HorizontalScrollBarVisibility="Hidden">
                    <ListView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapPanel Width="{Binding ElementName=ThemeColorList,Path=ActualWidth}">
                            </WrapPanel>
                        </ItemsPanelTemplate>
                    </ListView.ItemsPanel>
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <Rectangle Width="14" Height="14" Fill="{Binding Converter={StaticResource ColorToBrushConverter}}" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown"></Rectangle>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
                <TextBlock x:Name="ThemeColorsText" Grid.Row="2" FontFamily="SegoeUI" FontSize="14" LineHeight="20" Margin="8,5,0,1">Theme colors</TextBlock>
                <ListView Grid.Row="3" BorderThickness="0" Name="ThemeColorList"  Margin="9,0,9,0" ScrollViewer.HorizontalScrollBarVisibility="Hidden" SelectionMode="Single">
                    <ListView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapPanel Width="{Binding ElementName=ThemeColorList,Path=ActualWidth}">
                            </WrapPanel>
                        </ItemsPanelTemplate>
                    </ListView.ItemsPanel>
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <Rectangle Width="14" Height="14" Fill="{Binding Converter={StaticResource ColorToBrushConverter}}" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown"></Rectangle>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
                <Separator Grid.Row="4" Width="190" Height="1"  Background="#26000000" HorizontalAlignment="Center" Margin="2,9,2,8"></Separator>
                <StackPanel Orientation="Horizontal" Grid.Row="5" Name="TransparentPanel" Margin="0 0 0 8" Visibility="Collapsed">
                    <Rectangle Width="16" Height="16" Margin="8,0,2,0" MouseLeftButtonDown="TransparentColor_MouseLeftButtonDown">
                        <Rectangle.Fill>
                            <DrawingBrush>
                                <DrawingBrush.Drawing>
                                    <DrawingGroup>
                                        <GeometryDrawing Brush="White">
                                            <GeometryDrawing.Pen>
                                                <Pen Thickness="1" Brush="#E2E3E6"></Pen>
                                            </GeometryDrawing.Pen>
                                            <GeometryDrawing.Geometry>
                                                <RectangleGeometry Rect="0,0,16,16"></RectangleGeometry>
                                            </GeometryDrawing.Geometry>
                                        </GeometryDrawing>
                                        <GeometryDrawing>
                                            <GeometryDrawing.Pen>
                                                <Pen Thickness="2" Brush="#FF3B30"></Pen>
                                            </GeometryDrawing.Pen>
                                            <GeometryDrawing.Geometry>
                                                <LineGeometry StartPoint="16,0" EndPoint="0,16"></LineGeometry>
                                            </GeometryDrawing.Geometry>
                                        </GeometryDrawing>
                                    </DrawingGroup>
                                </DrawingBrush.Drawing>
                            </DrawingBrush>
                        </Rectangle.Fill>
                    </Rectangle>
                    <TextBlock x:Name="TransparentText" FontFamily="Segoe UI" FontSize="14" VerticalAlignment="Center">Transparent</TextBlock>
                </StackPanel>
                <StackPanel Orientation="Horizontal" Grid.Row="6" MouseDown="SystemColorPicker_ClickPop">
                    <Ellipse Width="16" Height="16" Margin="8,0,2,10"  VerticalAlignment="Center">
                        <Ellipse.Fill>
                            <DrawingBrush>
                                <DrawingBrush.Drawing>
                                    <ImageDrawing ImageSource="../Resources/PropertyPanel/colorIcon.png">
                                        <ImageDrawing.Rect>
                                            <Rect Width="16" Height="16"></Rect>
                                        </ImageDrawing.Rect>
                                    </ImageDrawing>
                                </DrawingBrush.Drawing>
                            </DrawingBrush>
                        </Ellipse.Fill>
                    </Ellipse>
                    <TextBlock x:Name="OtherColorsText" VerticalAlignment="Center" FontFamily="Segoe UI" FontSize="14" Margin="0 0 0 8">Other Colors</TextBlock>
                </StackPanel>
            </Grid>
        </Border>
    </Grid>
</UserControl>