回答編集履歴

  マスをひとつひとつ作っていくことも可能ですが、XAML・C#コード共膨れ上がりそうなので`ItemsControl`と`DataTemplate`で作るようにしました。

  思ったようにバインディングできなかったりと作るのに一苦労ですが、できてしまえば色を何個でも追加できるのでこういった繰り返すものに最適です。

  

  <Window

  x:Class="Questions235362.MainWindow"

  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  xmlns:local="clr-namespace:Questions235362"

  MaxWidth="820"

  SizeToContent="WidthAndHeight">

  <Window.Resources>

  <local:BrushConverter x:Key="brushConverter" />

  </Window.Resources>

  <Grid>

  <Grid.RowDefinitions>

  <RowDefinition Height="Auto" />

  <RowDefinition />

  </Grid.RowDefinitions>

  <Label

  HorizontalAlignment="Center"

  VerticalAlignment="Center"

  Content="Color Pallet"

  FontSize="16" />

  <Button

  MinWidth="80"

  Margin="0,0,10,0"

  HorizontalAlignment="Right"

  VerticalAlignment="Center"

  Click="BtnOk_Click"

  Content="OK" />

 

  <ItemsControl x:Name="itemsControl" Grid.Row="1">

  <ItemsControl.ItemsPanel>

  <ItemsPanelTemplate>

  <WrapPanel Orientation="Horizontal" />

  </ItemsPanelTemplate>

  </ItemsControl.ItemsPanel>

  <ItemsControl.ItemTemplate>

  <DataTemplate>

  <Border

  Width="200"

  BorderBrush="Gray"

  BorderThickness="1">

  <Border.Background>

  <MultiBinding Converter="{StaticResource brushConverter}">

  <Binding ElementName="Sld10R" Path="Value" />

  <Binding ElementName="Sld10G" Path="Value" />

  <Binding ElementName="Sld10B" Path="Value" />

  </MultiBinding>

  </Border.Background>

  <StackPanel>

  <Grid>

  <Grid.ColumnDefinitions>

  <ColumnDefinition />

  </Grid.ColumnDefinitions>

  <Label VerticalAlignment="Center" Content="R" />

  <Slider

  Name="Sld10R"

  Grid.Column="1"

  Maximum="255"

  Value="{Binding R}" />

  <TextBox

  Grid.Column="2"

  Width="50"

  Margin="5,0"

  InputMethod.PreferredImeConversionMode="Alphanumeric"

  InputMethod.PreferredImeState="On"

  MaxLength="3"

  PreviewTextInput="TextBox_PreviewTextInput"

  Text="{Binding Value, ElementName=Sld10R, UpdateSourceTrigger=PropertyChanged}" />

  </Grid>

  <Grid>

  <Grid.ColumnDefinitions>

  <ColumnDefinition />

  </Grid.ColumnDefinitions>

  <Label VerticalAlignment="Center" Content="G" />

  <Slider

  Name="Sld10G"

  Grid.Column="1"

  Maximum="255"

  Value="{Binding G}" />

  <TextBox

  Grid.Column="2"

  Width="50"

  Margin="5,0"

  InputMethod.PreferredImeConversionMode="Alphanumeric"

  InputMethod.PreferredImeState="On"

  MaxLength="3"

  PreviewTextInput="TextBox_PreviewTextInput"

  Text="{Binding Value, ElementName=Sld10G, UpdateSourceTrigger=PropertyChanged}" />

  </Grid>

  <Grid>

  <Grid.ColumnDefinitions>

  <ColumnDefinition />

  </Grid.ColumnDefinitions>

  <Label VerticalAlignment="Center" Content="B" />

  <Slider

  Name="Sld10B"

  Grid.Column="1"

  Maximum="255"

  Value="{Binding B}" />

  <TextBox

  Grid.Column="2"

  Width="50"

  Margin="5,0"

  InputMethod.PreferredImeConversionMode="Alphanumeric"

  InputMethod.PreferredImeState="On"

  MaxLength="3"

  PreviewTextInput="TextBox_PreviewTextInput"

  Text="{Binding Value, ElementName=Sld10B, UpdateSourceTrigger=PropertyChanged}" />

  </Grid>

  </StackPanel>

  </Border>

  </DataTemplate>

  </ItemsControl.ItemTemplate>

  <!--

  C#コードから色を追加することになるでしょうが、何もないとデザインしずらいので仮に入れておく。

  完成したら削除すればよい。

  -->

  <Color>#E18F9B</Color>

  <Color>#C41A41</Color>

  <Color>#E2694A</Color>

  <Color>#90673E</Color>

  </ItemsControl>

  </Grid>

  </Window>

  ```

 

  using System;

  using System.Diagnostics;

  using System.Globalization;

  using System.Linq;

  using System.Text.RegularExpressions;

  using System.Windows;

  using System.Windows.Controls;

  using System.Windows.Data;

  using System.Windows.Input;

  using System.Windows.Media;

 

  namespace Questions235362

  {

  public partial class MainWindow : Window

  {

  public MainWindow()

  {

  InitializeComponent();

  // コードから色を追加する場合（色のチョイスに特に意味はありません）

  //itemsControl.Items.Add(Color.FromRgb(255, 255, 255));

  itemsControl.Items.Add(ColorConverter.ConvertFromString("#EFA92A"));

  itemsControl.Items.Add(ColorConverter.ConvertFromString("#D68E31"));

  itemsControl.Items.Add(ColorConverter.ConvertFromString("#A0CA5A"));

  itemsControl.Items.Add(ColorConverter.ConvertFromString("#006D4D"));

  itemsControl.Items.Add(ColorConverter.ConvertFromString("#134A63"));

  itemsControl.Items.Add(ColorConverter.ConvertFromString("#009C9E"));

  itemsControl.Items.Add(ColorConverter.ConvertFromString("#B974A4"));

  itemsControl.Items.Add(ColorConverter.ConvertFromString("#634E86"));

  itemsControl.Items.Add(ColorConverter.ConvertFromString("#7B8075"));

  itemsControl.Items.Add(ColorConverter.ConvertFromString("#212222"));

  itemsControl.Items.Add(ColorConverter.ConvertFromString("#FFFDE6"));

  itemsControl.Items.Add(ColorConverter.ConvertFromString("#F6FBF6"));

  }

 

  private void BtnOk_Click(object sender, RoutedEventArgs e)

  {

  Debug.WriteLine(itemsControl.Items.Count); // 色の個数

  Debug.WriteLine((Color)itemsControl.Items[0]); // いっこめの色（左上）

 

  // パレット色の配列

  Color[] colors = itemsControl.Items.OfType<Color>().ToArray();

 

  var s = string.Join("\n", colors.Select(c => $"{c} R:{c.R} G:{c.G} B:{c.B}"));

  MessageBox.Show(s, "パレット一覧");

  }

 

  // TextBoxの入力制限

  private readonly Regex regex = new Regex("[0-9]+");

  private void TextBox_PreviewTextInput(object sender, TextCompositionEventArgs e)

  {

  e.Handled = true;

  if(sender is TextBox textBox)

  {

  string text;

  if(0 < textBox.SelectedText.Length)

  text = textBox.Text.Replace(textBox.SelectedText, e.Text);

  else

  text = textBox.Text.Insert(textBox.CaretIndex, e.Text);

 

  if(3 < text.Length) return;

  if(!regex.IsMatch(text)) return;

  if(!int.TryParse(text, out var i)) return;

  if(255 < i) return;

 

  e.Handled = false;

  }

  }

  }

 

  // RGB値からBrushに変換

  internal class BrushConverter : IMultiValueConverter

  {

  public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)

  => new SolidColorBrush(Color.FromRgb(System.Convert.ToByte(values[0]), System.Convert.ToByte(values[1]), System.Convert.ToByte(values[2])));

  public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)

  => throw new NotSupportedException();

  }

  }

  ```

 

  [IntegerUpDown · xceedsoftware/wpftoolkit Wiki](https://github.com/xceedsoftware/wpftoolkit/wiki/IntegerUpDown) こういったものを使ったほうが楽です。

 

  XAMLではバインディングやテンプレート等非常に強力な機能がありますので、ゆっくりでも勉強していただけたらと思います。

 

 

  [ItemsControl 攻略 ～ 外観のカスタマイズ | grabacr.nét](http://grabacr.net/archives/1240)

 

  [WPF4.5入門](https://www.slideshare.net/okazuki0130/wpf45-38048141)

  [WPF 4.5入門 | 大田一希 | 工学 | Kindleストア | Amazon](https://www.amazon.co.jp/WPF-4-5%E5%85%A5%E9%96%80-%E5%A4%A7%E7%94%B0%E4%B8%80%E5%B8%8C-ebook/dp/B015WXYUUU/ref=sr_1_4?qid=1579158573&s=digital-text&sr=1-4&text=%E5%A4%A7%E7%94%B0%E4%B8%80%E5%B8%8C)

  内容は同じだと思います。

 

  [ » WPF 学習用ドキュメント作りました](http://kisuke0303.sakura.ne.jp/blog/?p=340)