Click here to Skip to main content
Click here to Skip to main content
Add your own
alternative version

WPF Color Picker Construction Kit

, 26 Dec 2010
A WPF color picker (like Adobe's) constructed in a modular fashion for easy modification.
ColorPickerDemo.zip
ColorPickerSource.zip
ColorPickerDemo
ColorPicker
ColorModels
CMY
CMYK
HSB
Lab
RGB
ExtensionMethods
Properties
Settings.settings
Resources
ColorPickerControls
Chips
Dialogs
Pickers
Properties
Settings.settings
ColorPickerDemo
ColorPickerDemo.ico
Properties
Settings.settings
<Window x:Class="ColorPickerDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Color Picker Demo" Height="472" Width="730" xmlns:my="clr-namespace:ColorPickerDemo" xmlns:RGB="clr-namespace:ColorPicker.ColorModels.RGB;assembly=ColorPicker" Loaded="Window_Loaded" xmlns:my1="clr-namespace:ColorPicker.ColorModels.HSB;assembly=ColorPicker" xmlns:my2="clr-namespace:ColorPicker.ColorModels.CMYK;assembly=ColorPicker" xmlns:my3="clr-namespace:ColorPicker.ColorModels.Lab;assembly=ColorPicker" xmlns:my4="clr-namespace:ColorPicker;assembly=ColorPicker" xmlns:my5="clr-namespace:ColorPicker.ColorModels.CMY;assembly=ColorPicker" xmlns:Pickers="clr-namespace:ColorPickerControls.Pickers;assembly=ColorPickerControls" xmlns:my6="clr-namespace:ColorPickerControls.Chips;assembly=ColorPickerControls" Icon="/ColorPickerDemo;component/ColorPickerDemo.ico">
    <Grid>
        <TabControl>
            <TabItem Header="Controls"   IsSelected="True">
               <ScrollViewer VerticalScrollBarVisibility="Auto">
                <StackPanel>
                    <Expander Name="exStandard" Expanded="exStandard_Expanded">
                        <Expander.Header>
                            <StackPanel Orientation="Horizontal" >
                                <my4:ColorDisplay Height="20"  Width="20" Color="#FFF52929" Name="cdStandard" /><TextBlock>Standard</TextBlock></StackPanel>
                        </Expander.Header>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="auto"/>
                                    <RowDefinition  Height="auto"/>
                                </Grid.RowDefinitions>
                                <Pickers:ColorPickerStandard  Name="cpStandard"  HorizontalAlignment="Left" SelectionRingMode="BlackOrWhite" />
                                <StackPanel Orientation="Horizontal" Grid.Row="1">
                                    <Button Margin=" 2,2,2,2" Name="btStandardAccept" Click="btStandardAccept_Click">Accept</Button>
                                    <Button Margin=" 2,2,2,2" Name="btStandardCancel" Click="btStandardCancel_Click">Cancel</Button>
                                </StackPanel>
                        </Grid>
                    </Expander>
                    <Expander Name="exStandardAlpha" Expanded="exStandardAlpha_Expanded">
                        <Expander.Header>
                            <StackPanel Orientation="Horizontal" >
                                    <my4:ColorDisplay Height="20"  Width="20" Color="#9B6AACD4" Name="cdStandardAlpha" />
                                    <TextBlock>Standard with Alpha</TextBlock>
                            </StackPanel>
                        </Expander.Header>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="auto"/>
                                    <RowDefinition  Height="auto"/>
                                </Grid.RowDefinitions>
                                <Pickers:ColorPickerStandardWithAlpha Name="cpStandardWithAlpha" HorizontalAlignment="Left"/>
                                <StackPanel Orientation="Horizontal" Grid.Row="1">
                                    <Button Margin=" 2,2,2,2" Name="btStandardAlphaAccept" Click="btStandardAlphaAccept_Click">Accept</Button>
                                    <Button Margin=" 2,2,2,2" Name="btStandardAlphaCancel" Click="btStandardAlphaCancel_Click">Cancel</Button>
                                </StackPanel>
                            </Grid>

                    </Expander>
                    <Expander Name="exFull" Expanded="exFull_Expanded">
                        <Expander.Header>
                            <StackPanel Orientation="Horizontal">
                                    <my4:ColorDisplay Height="20"  Width="20" Color="#FF54DB64" Name="cdFull" />
                                    <TextBlock>Full</TextBlock>
                            </StackPanel>
                        </Expander.Header>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="auto"/>
                                    <RowDefinition  Height="auto"/>
                                </Grid.RowDefinitions>
                                <Pickers:ColorPickerFull  HorizontalAlignment="Left" Name="cpFull" />
                                <StackPanel Orientation="Horizontal" Grid.Row="1">
                                    <Button Margin=" 2,2,2,2" Name="btFullAccept" Click="btFullAccept_Click">Accept</Button>
                                    <Button Margin=" 2,2,2,2" Name="btFullCancel" Click="btFullCancel_Click">Cancel</Button>
                                </StackPanel>
                            </Grid>

                        </Expander>
                    <Expander Name="exFullAlpha" Expanded="exFullAlpha_Expanded">
                        <Expander.Header>
                                <StackPanel Orientation="Horizontal">
                                    <my4:ColorDisplay Height="20"  Width="20" Color="#BE7E54DB" Name="cdFullAlpha" />
                                    <TextBlock>Full with Alpha</TextBlock>
                            </StackPanel>
                        </Expander.Header>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="auto"/>
                                    <RowDefinition  Height="auto"/>
                                </Grid.RowDefinitions>
                                <Pickers:ColorPickerFullWithAlpha   HorizontalAlignment="Left" Name="cpFullAlpha" />
                                <StackPanel Orientation="Horizontal" Grid.Row="1">
                                    <Button Margin=" 2,2,2,2" Name="btFullAlphaAccept" Click="btFullAlphaAccept_Click">Accept</Button>
                                    <Button Margin=" 2,2,2,2" Name="btFullAlphaCancel" Click="btFullAlphaCancel_Click">Cancel</Button>
                                </StackPanel>
                            </Grid>
                    </Expander>
                </StackPanel>
               </ScrollViewer>
            </TabItem>

            <TabItem Header="Dialogs and Color Chips" IsEnabled="True">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="216" />
                        <RowDefinition Height="161" />
                        <RowDefinition Height="24*" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="177" />
                        <ColumnDefinition Width="524" />
                    </Grid.ColumnDefinitions>
                    <Rectangle Width="39" Height="32" Fill="#FFFF00B1" Margin="31,35,107,149" Name="colorRect" MouseDown="colorRect_MouseDown" />
                    <Rectangle Width="39" Height="32" Fill="#FFEBEB3F" Margin="95,0,43,149" Name="alphaColorRect" MouseDown="alphaColorRect_MouseDown" VerticalAlignment="Bottom" />
                    <my6:ColorChip HorizontalAlignment="Left" Margin="36,132,0,0" Name="ccStandard" VerticalAlignment="Top" Height="28" Width="30" ColorDialog="Standard" Color="#FF375EE2" />
                    <Rectangle Height="120" HorizontalAlignment="Left" Margin="123,91,0,0" Name="rectangle1" Stroke="#FF8D8D8D" VerticalAlignment="Top" Width="20" Fill="{Binding ElementName=ccStandard, Path=Brush}" Grid.Column="1" />
                   
                    <Border Margin="51,49,70,37"    Grid.Row="1" Padding="3" BorderBrush="DarkGray"
                            Background="Gainsboro"
                            BorderThickness="2" CornerRadius="2" Height="75" Width="56">
                    <my6:ForegroundBackgroundChip HorizontalAlignment="Left" 
                      Name="foregroundBackgroundChip" VerticalAlignment="Top" DefaultBackground="White"
                      DefaultForeground="Black" ColorDialog="FullWithAlpha" ForegroundColor="#FF9D1C1C" BackgroundColor="#FF2BB14A" ForegroundBrushChanged="foregroundBackgroundChip_ForegroundBrushChanged" BackgroundColorChanged="foregroundBackgroundChip_BackgroundColorChanged" />
                    </Border>
                    
                    <my6:ColorChip HorizontalAlignment="Left" Margin="94,176,0,0" Name="ccFull" VerticalAlignment="Top" Height="30" Width="30" Color="#FFC72424" />
                    <TextBlock Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="6,20,0,0" Name="textBlock1" Text="ForegroundBackgroundChip" VerticalAlignment="Top" />
                    <Ellipse Grid.Column="1" Grid.Row="1" Height="85" HorizontalAlignment="Left" Margin="34,49,0,0" Name="ellipse1" Stroke="{Binding ElementName=foregroundBackgroundChip, Path=ForegroundBrush}" VerticalAlignment="Top" Width="73" Fill="{Binding ElementName=foregroundBackgroundChip, Path=BackgroundBrush}" StrokeThickness="5" />
                    <TextBlock Grid.Column="1" Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="42,20,0,0" Name="textBlock2" Text="Databound" VerticalAlignment="Top" />
                    <Rectangle Grid.Column="1" Grid.Row="1" Height="78" HorizontalAlignment="Left" Margin="152,52,0,0" Name="rectFGEvent" Stroke="#FF9D1C1C" VerticalAlignment="Top" Width="65" StrokeThickness="5" Fill="#FF2BB14A" />
                    <TextBlock Grid.Column="1" Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="155,20,0,0" Name="textBlock3" Text="Via Events" VerticalAlignment="Top" />
                    <my6:ColorChip Height="30" HorizontalAlignment="Left" Margin="94,132,0,0" Name="ccFullAlpha" VerticalAlignment="Top" Width="30" Color="#D7FFFF45" ColorDialog="FullWithAlpha" />
                    <my6:ColorChip Height="30" HorizontalAlignment="Left" Margin="36,176,0,0" Name="ccStandardAlpha" VerticalAlignment="Top" Width="30" Color="#CA743FEB" ColorDialog="StandardWithAlpha" />
                    <Rectangle Grid.Column="1" Height="120" HorizontalAlignment="Left" Margin="86,91,0,0" Name="rectangle2" Stroke="#FF8D8D8D" VerticalAlignment="Top" Width="20" Fill="{Binding ElementName=ccFull, Path=Brush}" />
                    <Rectangle Grid.Column="1" Height="20" HorizontalAlignment="Left" Margin="55,125,0,0" Name="rectangle3" Stroke="#FF8D8D8D" VerticalAlignment="Top" Width="120" Fill="{Binding ElementName=ccFullAlpha, Path=Brush}" />
                    <Rectangle Grid.Column="1" Height="20" HorizontalAlignment="Left" Margin="55,160,0,0" Name="rectangle4" Stroke="#FF8D8D8D" VerticalAlignment="Top" Width="120" Fill="{Binding ElementName=ccStandardAlpha, Path=Brush}" />
                    <TextBlock Height="23" HorizontalAlignment="Left" Margin="32,105,0,0" Name="textBlock4" Text="ColorChip Samples" VerticalAlignment="Top" />
                    <TextBlock Height="23" HorizontalAlignment="Left" Margin="29,6,0,0" Name="textBlock5" Text="Rectangles with Dialogs" VerticalAlignment="Top" />
                </Grid>
            </TabItem>
        </TabControl>
        
    </Grid>
</Window>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

KenJohnson
Software Developer (Senior)
United States United States
Written software for what seems like forever. I'm currenly infatuated with WPF. Hopefully my affections are returned.

| Advertise | Privacy | Mobile
Web03 | 2.8.140827.1 | Last Updated 26 Dec 2010
Article Copyright 2010 by KenJohnson
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid