Comment créer un canevas de couleur pour le sélecteur de couleur (wpf)

Question

Je souhaite créer un sélecteur de couleurs personnalisé comme dans Visual Studio ou Blend ou ici (http://www.codeproject.com/Articles/779105/Color-Canvas-and-Color-Picker-WPF-Toolkit). Et j'ai un problème. Je ne sais pas comment créer une toile de couleur comme sur le lien ci-dessus. (peut-être ce n'est pas une toile, c'est autre chose) Je ressemble à une toile avec un dégradé très inhabituel ... et je n'ai aucune idée de comment le faire en xaml. J'ai essayé de le dessiner dans Visual Studio, mais pas de chance .... Toute aide sera appréciée.

Merci à l'avance

Answer 1

La barre de couleur peuvent être créés avec un LinearGradientBrush régulier. Le panneau Level/Saturation peut être fait avec un LinearGradientBrush de la couleur appropriée le long de l'axe X et un autre comme un masque d'opacité le long du Y, avec le tout dessiné sur un fond noir.

<Window.Resources> 

    <!-- Change this to any pure hue i.e. no more than 2 rgb components set and at least 1 set to FF --> 
    <Color x:Key="CurrentColor">#00FF00</Color> 

    <LinearGradientBrush x:Key="HueBrush" StartPoint="0,0" EndPoint="0,1"> 
     <LinearGradientBrush.GradientStops> 
      <GradientStop Color="#FF0000" Offset="0" /> 
      <GradientStop Color="#FFFF00" Offset="0.167" /> 
      <GradientStop Color="#00FF00" Offset="0.333" /> 
      <GradientStop Color="#00FFFF" Offset="0.5" /> 
      <GradientStop Color="#0000FF" Offset="0.667" /> 
      <GradientStop Color="#FF00FF" Offset="0.833" /> 
      <GradientStop Color="#FF0000" Offset="1" /> 
     </LinearGradientBrush.GradientStops> 
    </LinearGradientBrush> 

    <VisualBrush x:Key="LevelSaturationBrush" TileMode="None"> 
     <VisualBrush.Visual> 
      <Canvas Background="Black" Width="1" Height="1" SnapsToDevicePixels="True"> 
       <Rectangle Width="1" Height="1" SnapsToDevicePixels="True"> 
        <Rectangle.Fill> 
         <LinearGradientBrush StartPoint="0,0" EndPoint="1,0"> 
          <LinearGradientBrush.GradientStops> 
           <GradientStop Color="White" Offset="0" /> 
           <GradientStop Color="{DynamicResource CurrentColor}" Offset="1" /> 
          </LinearGradientBrush.GradientStops> 
         </LinearGradientBrush> 
        </Rectangle.Fill> 
        <Rectangle.OpacityMask> 
         <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> 
          <LinearGradientBrush.GradientStops> 
           <GradientStop Color="#FFFFFFFF" Offset="0"/> 
           <GradientStop Color="#00FFFFFF" Offset="1"/> 
          </LinearGradientBrush.GradientStops> 
         </LinearGradientBrush> 
        </Rectangle.OpacityMask> 
       </Rectangle> 
      </Canvas> 
     </VisualBrush.Visual> 
    </VisualBrush> 

</Window.Resources> 

<StackPanel Orientation="Horizontal"> 
    <Rectangle Fill="{StaticResource LevelSaturationBrush}" Width="200" Height="200" Margin="10" Stroke="Black" StrokeThickness="1" SnapsToDevicePixels="True" /> 
    <Rectangle Fill="{StaticResource HueBrush}" Width="20" Height="200" Margin="10" Stroke="Black" StrokeThickness="1" SnapsToDevicePixels="True" /> 
</StackPanel> 

Résultat: