2013年01月15日

[C# WPF]色選択コンボボックスを作る

今回は色選択コンボボックスを作ってみます。

色選択ダイアログもありますが、
いくつかの独自に用意した色の中から
ひとつを選びたいという時はComboBoxのほうがいいと思います。

以下サンプルです。

xamlです。

<Window.Resources>
<x:Array x:Key="ColorItems" Type="s:Color">
<s:Color>Black</s:Color>
<s:Color>Red</s:Color>
<s:Color>Blue</s:Color>
<s:Color>Yellow</s:Color>
<s:Color>Green</s:Color>
</x:Array>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<ComboBox ItemsSource="{StaticResource ColorItems}"
SelectedValue="{Binding Color, UpdateSourceTrigger=PropertyChanged}"
Width="90" Height="23" Margin="5">
<ComboBox.ItemTemplate>
<DataTemplate>
<Border Width="80" Height="20" Margin="5,0">
<Border.Background>
<s:SolidColorBrush Color="{Binding}"/>
</Border.Background>
</Border>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<TextBlock Text="Text" Height="23" Margin="5">
<TextBlock.Foreground>
<s:SolidColorBrush Color="{Binding Color}"/>
</TextBlock.Foreground>
</TextBlock>
</StackPanel>
</Grid>


ソースです。

public partial class MainWindow : Window, INotifyPropertyChanged
{
private Color color = Colors.Black;
public Color Color
{
get { return color; }
set
{
color = value;
OnPropertyChanged("Color");
}
}

public MainWindow()
{
InitializeComponent();

this.DataContext = this;
}

public event PropertyChangedEventHandler PropertyChanged = (s, e) => { };

private void OnPropertyChanged(string name)
{
PropertyChanged(this, new PropertyChangedEventArgs(name));
}
}


色の定義もxamlに記述しています。
TextBlockの文字色がComboBoxで選択した色になります。
ソースはBindするプロパティを定義してあるだけです。

実行結果は以下のようになります。
2.jpg

DataGridComboBoxColumnの場合は以下のようにします。

xamlです。

<Window.Resources>
<x:Array x:Key="ColorItems" Type="s:Color">
<s:Color>Black</s:Color>
<s:Color>Red</s:Color>
<s:Color>Blue</s:Color>
<s:Color>Yellow</s:Color>
<s:Color>Green</s:Color>
</x:Array>
<x:Array x:Key="DataGridItems" Type="local:TestClass">
<local:TestClass Color="Black" Text="AAA"/>
<local:TestClass Color="Black" Text="BBB"/>
<local:TestClass Color="Black" Text="CCC"/>
</x:Array>
</Window.Resources>
<Grid>
<DataGrid ItemsSource="{StaticResource DataGridItems}" AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridComboBoxColumn Header="色" ItemsSource="{StaticResource ColorItems}"
SelectedValueBinding="{Binding Color, UpdateSourceTrigger=PropertyChanged}">
<DataGridComboBoxColumn.ElementStyle>
<Style TargetType="ComboBox">
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Border Width="80" Height="20" Margin="5,0">
<Border.Background>
<s:SolidColorBrush Color="{Binding}"/>
</Border.Background>
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGridComboBoxColumn.ElementStyle>
<DataGridComboBoxColumn.EditingElementStyle>
<Style TargetType="ComboBox">
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Border Width="80" Height="20" Margin="5,0">
<Border.Background>
<s:SolidColorBrush Color="{Binding}"/>
</Border.Background>
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGridComboBoxColumn.EditingElementStyle>
</DataGridComboBoxColumn>
<DataGridTextColumn Header="テキスト" Binding="{Binding Text}" IsReadOnly="True">
<DataGridTextColumn.ElementStyle>
<Style TargetType="TextBlock">
<Setter Property="Foreground">
<Setter.Value>
<s:SolidColorBrush Color="{Binding Color}"/>
</Setter.Value>
</Setter>
</Style>
</DataGridTextColumn.ElementStyle>
</DataGridTextColumn>
</DataGrid.Columns>
</DataGrid>
</Grid>


ソースです。

public class TestClass : INotifyPropertyChanged
{
private Color color = Colors.Black;
public Color Color
{
get { return color; }
set
{
color = value;
OnPropertyChanged("Color");
}
}

public string Text { get; set; }

public TestClass()
{
}

public event PropertyChangedEventHandler PropertyChanged = (s, e) => { };

private void OnPropertyChanged(string name)
{
PropertyChanged(this, new PropertyChangedEventArgs(name));
}
}


ソースはDataGridのItemsSourceにするTestClass部分のみです。
DataGridのItemsSourceの定義もxamlに記述しています。

実行結果は以下のようになります。
2.jpg


posted by cw at 23:30| Comment(1) | TrackBack(0) | Tips | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
s:
は不要なのかな?
あるとエラーが出るし、なしで普通に動くし。
う〜ん、環境が違うからかな〜?
Posted by at 2014年07月08日 23:50
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。