Skip to content

Commit de6ab91

Browse files
author
LoneWandererProductions
committed
Sync pack our color picker
1 parent ce64ea1 commit de6ab91

3 files changed

Lines changed: 535 additions & 446 deletions

File tree

‎CommonControls.Images/ColorPicker.xaml‎

Lines changed: 91 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -4,79 +4,120 @@
44
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
55
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
66
mc:Ignorable="d"
7-
DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}">
7+
x:Name="ColorPickerControl"
8+
d:DesignHeight="450" d:DesignWidth="450">
89

910
<UserControl.Resources>
1011
<BooleanToVisibilityConverter x:Key="BoolToVisibilityConverter" />
1112
</UserControl.Resources>
1213

1314
<Grid>
1415
<Grid.ColumnDefinitions>
15-
<ColumnDefinition Width="10" />
16-
<ColumnDefinition Width="50" />
17-
<ColumnDefinition Width="10" />
18-
<ColumnDefinition Width="50" />
19-
<ColumnDefinition Width="10" />
20-
<ColumnDefinition Width="50" />
21-
<ColumnDefinition Width="10" />
22-
<ColumnDefinition Width="60" />
2316
<ColumnDefinition Width="*" />
17+
<ColumnDefinition Width="Auto" />
2418
</Grid.ColumnDefinitions>
2519
<Grid.RowDefinitions>
26-
<RowDefinition Height="200" />
27-
<RowDefinition Height="10" />
20+
<RowDefinition Height="*" MinHeight="200" />
2821
<RowDefinition Height="Auto" />
29-
<RowDefinition Height="10" />
30-
<RowDefinition Height="Auto" />
31-
<RowDefinition Height="10" />
32-
<RowDefinition Height="Auto" />
33-
<RowDefinition Height="*" />
3422
</Grid.RowDefinitions>
3523

36-
<!-- Images and other controls -->
37-
<Image x:Name="ImageOne" Grid.ColumnSpan="7" Grid.Column="0" />
38-
<Image x:Name="ImageTwo" Grid.Row="0" Grid.ColumnSpan="7" Grid.Column="0"
39-
MouseDown="ImageTwo_MouseDown" />
24+
<Grid Grid.Row="0" Grid.Column="0" SizeChanged="OnSizeChanged">
25+
26+
<Grid x:Name="PickerContainer"
27+
Background="Transparent"
28+
HorizontalAlignment="Center"
29+
VerticalAlignment="Center"
30+
MouseDown="OnMouseDown"
31+
MouseMove="OnMouseMove"
32+
MouseUp="OnMouseUp">
33+
34+
<Image x:Name="PickerImage"
35+
RenderOptions.BitmapScalingMode="HighQuality"
36+
IsHitTestVisible="False"/>
37+
38+
<Canvas x:Name="CursorCanvas" IsHitTestVisible="False">
39+
<Ellipse x:Name="HueCursor" Width="10" Height="10"
40+
Stroke="Black" StrokeThickness="2" Fill="Transparent"
41+
Visibility="Collapsed">
42+
<Ellipse.Effect>
43+
<DropShadowEffect Color="White" BlurRadius="2" ShadowDepth="0" Opacity="1" />
44+
</Ellipse.Effect>
45+
</Ellipse>
46+
47+
<Ellipse x:Name="SvCursor" Width="10" Height="10"
48+
Stroke="White" StrokeThickness="2" Fill="Transparent"
49+
Visibility="Collapsed">
50+
<Ellipse.Effect>
51+
<DropShadowEffect Color="Black" BlurRadius="2" ShadowDepth="0" Opacity="1" />
52+
</Ellipse.Effect>
53+
</Ellipse>
54+
</Canvas>
55+
</Grid>
56+
</Grid>
57+
58+
<Grid Grid.Row="0" Grid.Column="1" Margin="10,0,0,0">
59+
<Grid.RowDefinitions>
60+
<RowDefinition Height="*" />
61+
<RowDefinition Height="Auto" />
62+
</Grid.RowDefinitions>
63+
64+
<Slider Grid.Row="0" Orientation="Vertical" Maximum="255" Minimum="0"
65+
Value="{Binding Alpha, ElementName=ColorPickerControl, Mode=TwoWay}"
66+
HorizontalAlignment="Center" />
67+
68+
<TextBlock Grid.Row="1"
69+
Text="{Binding Alpha, ElementName=ColorPickerControl}"
70+
HorizontalAlignment="Center"
71+
Width="30"
72+
TextAlignment="Center"
73+
Margin="0,5,0,0" />
74+
</Grid>
75+
<Grid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Margin="0,10,0,0"
76+
Visibility="{Binding ShowTextBoxes, ElementName=ColorPickerControl, Converter={StaticResource BoolToVisibilityConverter}}">
4077

41-
<!-- Nested Grid for TextBoxes, with dynamic visibility -->
42-
<Grid Grid.Row="2" Grid.RowSpan="5" Grid.Column="1" Grid.ColumnSpan="7"
43-
Visibility="{Binding ShowTextBoxes, Converter={StaticResource BoolToVisibilityConverter}}">
4478
<Grid.ColumnDefinitions>
45-
<ColumnDefinition Width="50" />
79+
<ColumnDefinition Width="*" />
4680
<ColumnDefinition Width="10" />
47-
<ColumnDefinition Width="50" />
81+
<ColumnDefinition Width="*" />
4882
<ColumnDefinition Width="10" />
49-
<ColumnDefinition Width="50" />
50-
<ColumnDefinition Width="Auto" />
83+
<ColumnDefinition Width="*" />
5184
</Grid.ColumnDefinitions>
5285
<Grid.RowDefinitions>
53-
<RowDefinition Height="30" />
86+
<RowDefinition Height="Auto" />
87+
<RowDefinition Height="Auto" />
5488
<RowDefinition Height="10" />
55-
<RowDefinition Height="30" />
89+
<RowDefinition Height="Auto" />
90+
<RowDefinition Height="Auto" />
5691
<RowDefinition Height="10" />
57-
<RowDefinition Height="30" />
92+
<RowDefinition Height="Auto" />
5893
</Grid.RowDefinitions>
5994

60-
<TextBox Grid.Column="0" Grid.Row="0" TextWrapping="Wrap"
61-
Text="{Binding Path=Hue, Mode=TwoWay, StringFormat={}{0:F2}}" />
62-
<TextBox Grid.Column="2" Grid.Row="0"
63-
Text="{Binding Path=Sat , Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, StringFormat={}{0:F2}}" />
64-
<TextBox Grid.Column="4" Grid.Row="0"
65-
Text="{Binding Path=Val, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, StringFormat={}{0:F2}}" />
66-
<TextBox Grid.Column="0" Grid.Row="2"
67-
Text="{Binding Path=R, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
68-
<TextBox Grid.Column="2" Grid.Row="2"
69-
Text="{Binding Path=G, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
70-
<TextBox Grid.Column="4" Grid.Row="2"
71-
Text="{Binding Path=B, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
72-
<TextBox Grid.Column="0" Grid.Row="4" Grid.ColumnSpan="6"
73-
Text="{Binding Path=Hex, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
74-
</Grid>
95+
<Label Grid.Row="0" Grid.Column="0" Content="Hue" Padding="0" />
96+
<TextBox Grid.Row="1" Grid.Column="0"
97+
Text="{Binding Hue, ElementName=ColorPickerControl, StringFormat=N1, UpdateSourceTrigger=PropertyChanged, Delay=300}" />
98+
99+
<Label Grid.Row="0" Grid.Column="2" Content="Sat" Padding="0" />
100+
<TextBox Grid.Row="1" Grid.Column="2"
101+
Text="{Binding Sat, ElementName=ColorPickerControl, StringFormat=N2, UpdateSourceTrigger=PropertyChanged, Delay=300}" />
75102

76-
<!-- Slider and other elements, unchanged -->
77-
<Slider Grid.Column="7" Grid.Row="0" Maximum="255" Orientation="Vertical"
78-
Value="{Binding Alpha, Mode=TwoWay}" />
79-
<Label Content="{Binding Path=AlphaPercentage}" Grid.Column="7" Grid.Row="4" />
80-
<Canvas Name="CanvasPreview" Grid.Column="7" Grid.Row="6" />
103+
<Label Grid.Row="0" Grid.Column="4" Content="Val" Padding="0" />
104+
<TextBox Grid.Row="1" Grid.Column="4"
105+
Text="{Binding Val, ElementName=ColorPickerControl, StringFormat=N2, UpdateSourceTrigger=PropertyChanged, Delay=300}" />
106+
107+
<Label Grid.Row="3" Grid.Column="0" Content="R" Padding="0" />
108+
<TextBox Grid.Row="4" Grid.Column="0"
109+
Text="{Binding R, ElementName=ColorPickerControl, UpdateSourceTrigger=PropertyChanged}" />
110+
111+
<Label Grid.Row="3" Grid.Column="2" Content="G" Padding="0" />
112+
<TextBox Grid.Row="4" Grid.Column="2"
113+
Text="{Binding G, ElementName=ColorPickerControl, UpdateSourceTrigger=PropertyChanged}" />
114+
115+
<Label Grid.Row="3" Grid.Column="4" Content="B" Padding="0" />
116+
<TextBox Grid.Row="4" Grid.Column="4"
117+
Text="{Binding B, ElementName=ColorPickerControl, UpdateSourceTrigger=PropertyChanged}" />
118+
119+
<TextBox Grid.Row="6" Grid.Column="0" Grid.ColumnSpan="5"
120+
Text="{Binding Hex, ElementName=ColorPickerControl, UpdateSourceTrigger=PropertyChanged}" />
121+
</Grid>
81122
</Grid>
82123
</UserControl>

0 commit comments

Comments
 (0)