1  <UserControl
 2      x:Class="Microsoft.CmdPal.UI.Controls.ColorPickerButton"
 3      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 4      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 5      xmlns:controls="using:Microsoft.CmdPal.UI.Controls"
 6      xmlns:converters="using:CommunityToolkit.WinUI.Converters"
 7      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 8      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 9      d:DesignHeight="300"
10      d:DesignWidth="400"
11      mc:Ignorable="d">
12      <UserControl.Resources>
13          <converters:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />
14          <converters:BoolToVisibilityConverter
15              x:Key="BoolToVisibilityInvertedConverter"
16              FalseValue="Visible"
17              TrueValue="Collapsed" />
18      </UserControl.Resources>
19  
20      <StackPanel Orientation="Horizontal" Spacing="8">
21          <DropDownButton Padding="{x:Bind ToDropDownPadding(HasSelectedColor), Mode=OneWay}">
22              <Grid>
23                  <TextBlock x:Uid="OptionalColorPickerButton_UnsetTextBlock" Visibility="{x:Bind HasSelectedColor, Mode=OneWay, Converter={StaticResource BoolToVisibilityInvertedConverter}}" />
24                  <Border
25                      x:Name="ColorPreviewBorder"
26                      Width="48"
27                      Height="24"
28                      BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
29                      BorderThickness="1"
30                      CornerRadius="{ThemeResource ControlCornerRadius}"
31                      Visibility="{x:Bind HasSelectedColor, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}">
32                      <Border.Background>
33                          <SolidColorBrush Color="{x:Bind SelectedColor, Mode=OneWay}" />
34                      </Border.Background>
35                  </Border>
36              </Grid>
37              <DropDownButton.Flyout>
38                  <Flyout
39                      x:Name="ColorPickerFlyout"
40                      Opened="FlyoutBase_OnOpened"
41                      Placement="Bottom"
42                      ShouldConstrainToRootBounds="False">
43                      <Flyout.FlyoutPresenterStyle>
44                          <Style BasedOn="{StaticResource DefaultFlyoutPresenterStyle}" TargetType="FlyoutPresenter">
45                              <Setter Property="MinWidth" Value="660" />
46                          </Style>
47                      </Flyout.FlyoutPresenterStyle>
48                      <StackPanel
49                          x:Name="FlyoutRoot"
50                          Orientation="Horizontal"
51                          SizeChanged="FlyoutRoot_OnSizeChanged"
52                          Spacing="20">
53                          <!--  Left column: Preset colors and reset button  -->
54                          <StackPanel Margin="2">
55                              <TextBlock
56                                  x:Uid="OptionalColorPickerButton_WindowsColorsSectionHeading"
57                                  Margin="0,0,0,12"
58                                  Style="{StaticResource BodyTextBlockStyle}" />
59  
60                              <controls:ColorPalette
61                                  HorizontalAlignment="Left"
62                                  VerticalAlignment="Top"
63                                  CustomPaletteColumnCount="9"
64                                  PaletteColors="{x:Bind PaletteColors}"
65                                  SelectedColorChanged="ColorPalette_OnSelectedColorChanged" />
66                          </StackPanel>
67  
68                          <!--  Right column: Spectrum  -->
69                          <StackPanel>
70                              <TextBlock
71                                  x:Uid="OptionalColorPickerButton_CustomColorsSectionHeading"
72                                  Margin="0,0,0,12"
73                                  Style="{StaticResource BodyTextBlockStyle}" />
74  
75                              <ColorPicker
76                                  IsAlphaEnabled="{x:Bind IsAlphaEnabled, Mode=OneWay}"
77                                  IsAlphaSliderVisible="{x:Bind IsAlphaEnabled, Mode=OneWay}"
78                                  IsAlphaTextInputVisible="{x:Bind IsAlphaEnabled, Mode=OneWay}"
79                                  IsColorChannelTextInputVisible="True"
80                                  IsColorSliderVisible="True"
81                                  IsHexInputVisible="True"
82                                  IsMoreButtonVisible="True"
83                                  Color="{x:Bind SelectedColor, Mode=TwoWay}" />
84                          </StackPanel>
85                      </StackPanel>
86                  </Flyout>
87              </DropDownButton.Flyout>
88          </DropDownButton>
89      </StackPanel>
90  </UserControl>