WPF でC#で<Grid>の一部の枠内の背景色をつけたい

WPFのWindowに<Grid>での縦横の枠を作り、その枠のうちのいくつかに、背景色を設定したいと思っています。
各枠内にRGB設定用のスライダーをR用、G用、B用の３つずつ、それぞれ作っています(今回は、最初の枠だけをサンプルで載せました)。
このようにしたもので、RGBの設定をするたびにそれぞれの枠背景色が指定通り変わるようにしたいのです。下部に載せたようなRectangleを使うことでもいいのです。

私の問題として、MVVMが使えないので、C#で操作できるようにしたいと思います。
もちろん、XAMLでもできるようになればうれしいのですが、残念ながらアレンジできません。

XAML
1    <Grid x:Name="ColorGrid">
2        <Grid.RowDefinitions>
3            <RowDefinition Height="1.5*"/>
4            <RowDefinition Height="3*"/>
5            <RowDefinition Height="3*"/>
6            <RowDefinition Height="3*"/>
7        </Grid.RowDefinitions>
8        <Grid.ColumnDefinitions>
9            <ColumnDefinition Width="4*"/>
10            <ColumnDefinition Width="4*"/>
11            <ColumnDefinition Width="4*"/>
12            <ColumnDefinition Width="4*"/>
13        </Grid.ColumnDefinitions>
14
15        <Label Content="Color Pallet" Grid.Column="1" HorizontalAlignment="Left" Margin="159,17,0,0" VerticalAlignment="Top" Grid.ColumnSpan="2" FontSize="16"/>
16        <Button Content="Cancel" Grid.Row="0" Grid.Column="3" x:Name="BtnCancel" HorizontalAlignment="Left" Height="46" Width="48" Margin="120,7,0,0" VerticalAlignment="Top" Click="BtnCancel_Click"/>
17
18        <Label Grid.Row="1" Grid.Column="0" Content="R" HorizontalAlignment="Left" Margin="10,64,0,0" VerticalAlignment="Top"/>
19        <Label Grid.Row="1" Grid.Column="0" Content="G" HorizontalAlignment="Left" Margin="10,78,0,0" VerticalAlignment="Top"/>
20        <Label Grid.Row="1" Grid.Column="0" Content="B" HorizontalAlignment="Left" Margin="10,92,0,0" VerticalAlignment="Top"/>
21        <TextBox Name="Box10R" Text="R" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" Height="19" Margin="160,68,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="27" MaxLength="3" InputMethod.PreferredImeState="On" InputMethod.PreferredImeConversionMode="Alphanumeric" TextChanged="Box10R_TextChanged"/>
22        <TextBox Name="Box10G" Text="G" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" Height="19" Margin="160,82,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="27" MaxLength="3" InputMethod.PreferredImeState="On" InputMethod.PreferredImeConversionMode="Alphanumeric" TextChanged="Box10G_TextChanged"/>
23        <TextBox Name="Box10B" Text="B" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" Height="19" Margin="160,96,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="27" MaxLength="3" InputMethod.PreferredImeState="On" InputMethod.PreferredImeConversionMode="Alphanumeric"/>
24
25        <Slider Name="Sld10R" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" Height="9" Margin="30,84,0,0" VerticalAlignment="Top" Width="128" Minimum="0" Maximum="255" ValueChanged="Sld10_ValueChanged" Value="255">
26            <Slider.RenderTransform>
27                <TransformGroup>
28                    <ScaleTransform ScaleY="-1"/>
29                    <SkewTransform/>
30                    <RotateTransform/>
31                    <TranslateTransform/>
32                </TransformGroup>
33            </Slider.RenderTransform>
34        </Slider>
35        <Slider Name="Sld10G" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" Height="9" Margin="30,98,0,0" VerticalAlignment="Top" Width="128" Maximum="255" ValueChanged="Sld10_ValueChanged" Value="255">
36            <Slider.RenderTransform>
37                <TransformGroup>
38                    <ScaleTransform ScaleY="-1"/>
39                    <SkewTransform/>
40                    <RotateTransform/>
41                    <TranslateTransform/>
42                </TransformGroup>
43            </Slider.RenderTransform>
44        </Slider>
45        <Slider Name="Sld10B" Grid.Row="1" Grid.Column="0"  HorizontalAlignment="Left" Height="9" Margin="30,112,0,0" VerticalAlignment="Top" Width="128" Maximum="255" ValueChanged="Sld10_ValueChanged" Value="255">
46            <Slider.RenderTransform>
47                <TransformGroup>
48                    <ScaleTransform ScaleY="-1"/>
49                    <SkewTransform/>
50                    <RotateTransform/>
51                    <TranslateTransform/>
52                </TransformGroup>
53            </Slider.RenderTransform>
54        </Slider>

この先、GridのRowやColumnで区切られた四角内に背景色をつけようと思います。
まず、それぞれの枠を取得することすらできませんでしたので、
<Rectangle x:Name="Rtg10" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" Height="126" VerticalAlignment="Top" Width="198" Stroke="Black"/>というようなRectangleを利用すべきかとも考えましたが、それでもコントロールできません。

参考になるサイトは見当たりませんでした。
もしも、直接の回答が煩わしければ、参考になるサイトの紹介でもありがたいと思います。
どうぞよろしくお願い致します。

len_souko

2020/01/15 14:32

１年以上利用しているのだからいい加減にコードは```で囲むくらいはやったらどうですか？ https://teratail.com/questions/145657 > 私の問題として、MVVMが使えないので、C#で操作できるようにしたいと思います。こちらも１年以上前の質問への回答から何も学ばずに勉強を一切していないかのように思えます当時の回答から検索すれば https://blog.okazuki.jp/entry/2014/12/23/180413 などのサイトが見つかるでしょうし、コードを試して１年もやってればそれなりに身についているはずです１年と３か月ちょっとで１５の質問をしてｰ8の評価があなたの行動に対するみんなの評価ですきつい表現ですが、自分で検索して調べたのかどうか、検索したのだとしたらキーワードは何だったのか、見当はずれな検索をしてたんじゃないの？とか、 > 参考になるサイトは見当たりませんでしたこれはコピペできるコードがなかったってだけじゃないのか？とか・・・ WPFをそれなりにいじっていれば「GridのRowやColumnで区切られた四角の枠を取得することすらできませんでした」なんて発想にはならないはずです

FacePanel

2020/01/15 23:33

ご指摘、ごもっともです。自力解決を目指して、もう一度、あきらめずに取り組んでみます。ありがとうございます。

行動規範の内容に同意します

回答2件

マスをひとつひとつ作っていくことも可能ですが、XAML・C#コード共膨れ上がりそうなのでItemsControlとDataTemplateで作るようにしました。
思ったようにバインディングできなかったりと作るのに一苦労ですが、できてしまえば色を何個でも追加できるのでこういった繰り返すものに最適です。

xml
1<Window
2  x:Class="Questions235362.MainWindow"
3  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5  xmlns:local="clr-namespace:Questions235362"
6  MaxWidth="820"
7  SizeToContent="WidthAndHeight">
8  <Window.Resources>
9    <local:BrushConverter x:Key="brushConverter" />
10  </Window.Resources>
11  <Grid>
12    <Grid.RowDefinitions>
13      <RowDefinition Height="Auto" />
14      <RowDefinition />
15    </Grid.RowDefinitions>
16    <Label
17      HorizontalAlignment="Center"
18      VerticalAlignment="Center"
19      Content="Color Pallet"
20      FontSize="16" />
21    <Button
22      MinWidth="80"
23      Margin="0,0,10,0"
24      HorizontalAlignment="Right"
25      VerticalAlignment="Center"
26      Click="BtnOk_Click"
27      Content="OK" />
28
29    <ItemsControl x:Name="itemsControl" Grid.Row="1">
30      <ItemsControl.ItemsPanel>
31        <ItemsPanelTemplate>
32          <WrapPanel Orientation="Horizontal" />
33        </ItemsPanelTemplate>
34      </ItemsControl.ItemsPanel>
35      <ItemsControl.ItemTemplate>
36        <DataTemplate>
37          <Border
38            Width="200"
39            BorderBrush="Gray"
40            BorderThickness="1">
41            <Border.Background>
42              <MultiBinding Converter="{StaticResource brushConverter}">
43                <Binding ElementName="Sld10R" Path="Value" />
44                <Binding ElementName="Sld10G" Path="Value" />
45                <Binding ElementName="Sld10B" Path="Value" />
46              </MultiBinding>
47            </Border.Background>
48            <StackPanel>
49              <Grid>
50                <Grid.ColumnDefinitions>
51                  <ColumnDefinition Width="Auto" />
52                  <ColumnDefinition />
53                  <ColumnDefinition Width="Auto" />
54                </Grid.ColumnDefinitions>
55                <Label VerticalAlignment="Center" Content="R" />
56                <Slider
57                  Name="Sld10R"
58                  Grid.Column="1"
59                  VerticalAlignment="Center"
60                  Maximum="255"
61                  Value="{Binding R}" />
62                <TextBox
63                  Grid.Column="2"
64                  Width="50"
65                  Margin="5,0"
66                  VerticalAlignment="Center"
67                  InputMethod.PreferredImeConversionMode="Alphanumeric"
68                  InputMethod.PreferredImeState="On"
69                  MaxLength="3"
70                  PreviewTextInput="TextBox_PreviewTextInput"
71                  Text="{Binding Value, ElementName=Sld10R, UpdateSourceTrigger=PropertyChanged}" />
72              </Grid>
73              <Grid>
74                <Grid.ColumnDefinitions>
75                  <ColumnDefinition Width="Auto" />
76                  <ColumnDefinition />
77                  <ColumnDefinition Width="Auto" />
78                </Grid.ColumnDefinitions>
79                <Label VerticalAlignment="Center" Content="G" />
80                <Slider
81                  Name="Sld10G"
82                  Grid.Column="1"
83                  VerticalAlignment="Center"
84                  Maximum="255"
85                  Value="{Binding G}" />
86                <TextBox
87                  Grid.Column="2"
88                  Width="50"
89                  Margin="5,0"
90                  VerticalAlignment="Center"
91                  InputMethod.PreferredImeConversionMode="Alphanumeric"
92                  InputMethod.PreferredImeState="On"
93                  MaxLength="3"
94                  PreviewTextInput="TextBox_PreviewTextInput"
95                  Text="{Binding Value, ElementName=Sld10G, UpdateSourceTrigger=PropertyChanged}" />
96              </Grid>
97              <Grid>
98                <Grid.ColumnDefinitions>
99                  <ColumnDefinition Width="Auto" />
100                  <ColumnDefinition />
101                  <ColumnDefinition Width="Auto" />
102                </Grid.ColumnDefinitions>
103                <Label VerticalAlignment="Center" Content="B" />
104                <Slider
105                  Name="Sld10B"
106                  Grid.Column="1"
107                  VerticalAlignment="Center"
108                  Maximum="255"
109                  Value="{Binding B}" />
110                <TextBox
111                  Grid.Column="2"
112                  Width="50"
113                  Margin="5,0"
114                  VerticalAlignment="Center"
115                  InputMethod.PreferredImeConversionMode="Alphanumeric"
116                  InputMethod.PreferredImeState="On"
117                  MaxLength="3"
118                  PreviewTextInput="TextBox_PreviewTextInput"
119                  Text="{Binding Value, ElementName=Sld10B, UpdateSourceTrigger=PropertyChanged}" />
120              </Grid>
121            </StackPanel>
122          </Border>
123        </DataTemplate>
124      </ItemsControl.ItemTemplate>
125      <!--
126        C#コードから色を追加することになるでしょうが、何もないとデザインしずらいので仮に入れておく。
127        完成したら削除すればよい。
128      -->
129      <Color>#E18F9B</Color>
130      <Color>#C41A41</Color>
131      <Color>#E2694A</Color>
132      <Color>#90673E</Color>
133    </ItemsControl>
134  </Grid>
135</Window>

cs
1using System;
2using System.Diagnostics;
3using System.Globalization;
4using System.Linq;
5using System.Text.RegularExpressions;
6using System.Windows;
7using System.Windows.Controls;
8using System.Windows.Data;
9using System.Windows.Input;
10using System.Windows.Media;
11
12namespace Questions235362
13{
14    public partial class MainWindow : Window
15    {
16        public MainWindow()
17        {
18            InitializeComponent();
19            // コードから色を追加する場合（色のチョイスに特に意味はありません）
20            //itemsControl.Items.Add(Color.FromRgb(255, 255, 255));
21            itemsControl.Items.Add(ColorConverter.ConvertFromString("#EFA92A"));
22            itemsControl.Items.Add(ColorConverter.ConvertFromString("#D68E31"));
23            itemsControl.Items.Add(ColorConverter.ConvertFromString("#A0CA5A"));
24            itemsControl.Items.Add(ColorConverter.ConvertFromString("#006D4D"));
25            itemsControl.Items.Add(ColorConverter.ConvertFromString("#134A63"));
26            itemsControl.Items.Add(ColorConverter.ConvertFromString("#009C9E"));
27            itemsControl.Items.Add(ColorConverter.ConvertFromString("#B974A4"));
28            itemsControl.Items.Add(ColorConverter.ConvertFromString("#634E86"));
29            itemsControl.Items.Add(ColorConverter.ConvertFromString("#7B8075"));
30            itemsControl.Items.Add(ColorConverter.ConvertFromString("#212222"));
31            itemsControl.Items.Add(ColorConverter.ConvertFromString("#FFFDE6"));
32            itemsControl.Items.Add(ColorConverter.ConvertFromString("#F6FBF6"));
33        }
34
35        private void BtnOk_Click(object sender, RoutedEventArgs e)
36        {
37            Debug.WriteLine(itemsControl.Items.Count);     // 色の個数
38            Debug.WriteLine((Color)itemsControl.Items[0]); // いっこめの色（左上）
39
40            // パレット色の配列
41            Color[] colors = itemsControl.Items.OfType<Color>().ToArray();
42
43            var s = string.Join("\n", colors.Select(c => $"{c} R:{c.R} G:{c.G} B:{c.B}"));
44            MessageBox.Show(s, "パレット一覧");
45        }
46
47        // TextBoxの入力制限
48        private readonly Regex regex = new Regex("[0-9]+");
49        private void TextBox_PreviewTextInput(object sender, TextCompositionEventArgs e)
50        {
51            e.Handled = true;
52            if(sender is TextBox textBox)
53            {
54                string text;
55                if(0 < textBox.SelectedText.Length)
56                    text = textBox.Text.Replace(textBox.SelectedText, e.Text);
57                else
58                    text = textBox.Text.Insert(textBox.CaretIndex, e.Text);
59
60                if(3 < text.Length) return;
61                if(!regex.IsMatch(text)) return;
62                if(!int.TryParse(text, out var i)) return;
63                if(255 < i) return;
64
65                e.Handled = false;
66            }
67        }
68    }
69
70    // RGB値からBrushに変換
71    internal class BrushConverter : IMultiValueConverter
72    {
73        public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
74            => new SolidColorBrush(Color.FromRgb(System.Convert.ToByte(values[0]), System.Convert.ToByte(values[1]), System.Convert.ToByte(values[2])));
75        public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
76            => throw new NotSupportedException();
77    }
78}

TextBoxの入力制限が雑です（クリップボードからの貼り付けができてしまう）
IntegerUpDown · xceedsoftware/wpftoolkit Wiki こういったものを使ったほうが楽です。

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

ItemsControl 攻略～外観のカスタマイズ | grabacr.nét

WPF4.5入門
 WPF 4.5入門 | 大田一希 | 工学 | Kindleストア | Amazon
内容は同じだと思います。

投稿2020/01/16 10:14

総合スコア9326

2020/01/16 11:46

余りにも私の希望に合致しているので、夢を見ているようです。まずは、このご紹介いただいたもので、勉強のとっかかりをさせていただきます。本音を申しますと、ほぼまるっきり知人や知識のない私のような者にとって、普通の優秀な方の参考サイトでは、分からないことが重なり合って、空間からの着地点が見つからないのです。一歩一歩進もうと思ってはいても、突っかかることだらけで、問題の部分とは違う所でまた突っかかります。とても残念なのですが、根本的に優秀な方に向けた解説では、敷居が高すぎて困ってました。まだ、これからもう一度始めますが、いよいよこれから皆さんと同様にコードや解説の読める人になれたらいいな、と思っています。

FacePanel

2020/01/16 12:11

ひとつ、お聞きしたいのですが、私がこのコードを自分で、貼り付けてみますと、 xamlの <local:BrushConverter x:Key="brushConverter" /> の部分に青い波線がついて、そこにマウスを置くと、BrushConverterは存在しないとの表示がでます。 BrushConverter does not exist in the namespace "clr-namespace:Quesitons235362".とのことです。これは、コードビハインドのC#のコードがxaml側に認識されていないということなのでしょうか。まだ、勉強前なのですが、ひとまずここを教えて下さると、助かります。どうぞよろしくお願い致します。

TN8001

2020/01/16 12:21

BrushConverterクラスはC#コードの下のほうにあります。 namespace Questions235362はご自身のものに変えてください。 x:Class="Questions235362.MainWindow" xmlns:local="clr-namespace:Questions235362" のQuestions235362はご自身のプロジェクト名に変えます。例えばWpfApp1だったら x:Class="WpfApp1.MainWindow" xmlns:local="clr-namespace:WpfApp1" のようになります。MainWindowも違う名前が付けているなら変えてください。

TN8001

2020/01/16 12:28

もしよくわからない場合はご自身のxamlの冒頭の部分 <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"> をコメントいただけると回答をそちらに合わせます。

FacePanel

2020/01/16 13:04

BrushConverterクラスは、 public partial class MainWindow : Window の{}に続けて記述するのではなくて、別のクラスを新たに作って、そこに記述するべきなのでしょうか？またまた、初歩以下の質問となるかも知れませんが、よろしくお願い致します。

TN8001

2020/01/16 13:14

普通はBrushConverter.csに書きますね。 VisualStudioでクラス名をクリックした後に出る電球マークから「型を BrushConverter.cs に移動」で簡単に作成できます。

FacePanel

2020/01/16 13:44

現在、XAMLでは、 <Window.Resources> の下に <local:BrushConverter x:Key="brushConverter" /> がありますが、local:BrushConverterの部分に青い波線がついています。また、Visual Studio では、このMainWindow.xamlのタブの他に、 MainWindow.xaml.csのタブが開いていて、そこには、usingの参照の後に namespace Questions235362 { public partial class MainWindow : Window { public MainWindow() { ... } private void BtnOk_Click(object sender, RoutedEventArgs e) { ... } private readonly Regex regex = new Regex("[0-9]+"); private void TextBox_PreviewTextInput(object sender, TextCompositionEventArgs e) { ... } } // 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(); } } となっています。この最後の、 // RGB値からBrushに変換 internal class BrushConverter : IMultiValueConverter を、別クラス(BrushConverter.cs)に移動するべきなのでしょうか？実は、ここで電球マークを出せないのです。仰ることが理解できていないようです。申し訳ありませんが、すがる思いで、食いついていきたいと思っています。

FacePanel

2020/01/16 13:47

ちなみに、WPF 実践のPDFは、27ページまで進みました。ちょっと理解が遅いかも知れませんが、じっくり進んで行きます。

TN8001

2020/01/16 13:56

クラスを追加すると using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace WpfApp1 { class BrushConverter { } } こんな感じのファイルができますね。それを using System; using System.Globalization; using System.Windows.Data; using System.Windows.Media; namespace WpfApp1 { 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(); } } こういう状態にしてください。

FacePanel

2020/01/16 23:55 編集

できました。ありがとうございます。当初は、波線がありましたが、今回それが消えました。

行動規範の内容に同意します

自己解決

ご紹介のサイトを熟読して勉強してみます。
その60「データバインディングを前提としたプログラミングモデル」の中のPrismの案内によって、
まず、
Prism : http://compositewpf.codeplex.com/
をダウンロードしました。

続く、WPFアプリケーションを作成してNuGetでPrism.Mvvmのパッケージを追加します。
どうしたら、追加できるのか？NuGetでパッケージを追加するとは、何を意味するのか？
nugetで、Prism.Mvvmを検索すると1,348ものパッケージがありますが、この中に
Prism.MVVMLibraryというものがありますが、これをダウンロードするのかどうか、とか。
などで、早速つっかえています。
ズッコケそうですが...。やはり、なかなか難しいですね。

投稿2020/01/15 23:34

編集2020/01/16 03:38

FacePanel

総合スコア48

Zuishin

2020/01/15 23:51

熟読して解決してから解決法を書いてください。それほど時間もかからずできるはずです。

FacePanel

2020/01/16 00:18

失礼しました。やってみます。ただ、まだ苦戦しています。

Zuishin

2020/01/16 03:50

回答が編集されたために私のコメントが意味不明になっています。元々の回答は次の一行でした。 > ご紹介のサイトを熟読して勉強してみます。

FacePanel

2020/01/16 06:18

大変申し訳ありませんでした。ここに編集すべきだったようですが、質問自体を編集してしまっておかしくなったようです。で、紹介いただいているサイトを読んだものの、それを読むための基礎もないためか、いま、さらに混乱しています。

x_x

2020/01/16 09:13

現状でもわたしには「ご紹介のサイト」が何を指しているのかわからないのですが、Prism と言っているところのことでしょうか？

FacePanel

2020/01/16 13:24

スミマセン、ご紹介されているすべてのサイトを読まないと、先に進まないのだろうと思ってました。で、結構難しくて分からないことが次から次へと出てくる感じです。もちろん、勉強不足のせいだと思うのですが、それにしてもかなり高いレベルの知識がないと読めないと思いました。特に、GitHubのあたりは、大容量のダウンロードとなった割には、どこをどうやって利用したらよいのかが分からなくて、理解不足による謎がさらに広がっただけで、知識は広がらないまま、右往左往してます。ダウンロードの必要のあるものが何かが分からないままの作業で、その先に糸口があるのかと探ってましたが、雲をつかむような状態で、このままでは、何年たっても何も解決しないかもと、不安になりました。根本的な、壁があるのかも知れません。人によっては、ちょっとは知識のある人たちとのつながりがあって、その方たちと接触することによって、謎を解く知恵を得ているのかも知れないし、とか感じます。

行動規範の内容に同意します

あなたの回答