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 | このブログの読者になる | 更新情報をチェックする

[C# WPF]キャンバスの倍率を設定できるようにする

Canvasにはさまざまな図形を配置する事ができますが、
今回はCanvasの表示倍率を変更できるようにします。

サンプルです。

[xaml]

<Window.Resources>
<x:Array x:Key="ScaleItems" Type="s:Int32">
<s:Int32>200</s:Int32>
<s:Int32>100</s:Int32>
<s:Int32>75</s:Int32>
<s:Int32>50</s:Int32>
<s:Int32>25</s:Int32>
</x:Array>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<ComboBox ItemsSource="{StaticResource ScaleItems}"
SelectedValue="{Binding Scale, UpdateSourceTrigger=PropertyChanged}"
Width="70" Height="23" Margin="5" HorizontalAlignment="Left"/>
<Canvas Grid.Row="1">
<Canvas.RenderTransform>
<ScaleTransform ScaleX="{Binding CanvasScale}" ScaleY="{Binding CanvasScale}"/>
</Canvas.RenderTransform>
<Rectangle Canvas.Left="100" Canvas.Top="100" Width="100" Height="40" Fill="Red"/>
<Ellipse Canvas.Left="200" Canvas.Top="30" Width="80" Height="80" Fill="Blue"/>
</Canvas>
</Grid>


[ソース]

public partial class MainWindow : Window, INotifyPropertyChanged
{
public int Scale
{
get { return (int)CanvasScale * 100; }
set { CanvasScale = value / 100.0; }
}

private double canvasScale = 1.0;
public double CanvasScale
{
get { return canvasScale; }
set
{
if (value > 0)
{
canvasScale = value;
}
OnPropertyChanged("CanvasScale");
}
}

public MainWindow()
{
InitializeComponent();

this.DataContext = this;
}

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

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


ComboBoxで倍率を設定します。
ComboBoxのリソースはxamlで定義しています。

倍率はCanvas.RenderTransformのScaleTransformに設定します。
設定値は0.0〜1.0の値になります。

ComboBoxで設定する値は%の値なので
ソースのプロパティで相互変換しています。

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

25%、100%、200%選択時です。
posted by cw at 23:00| Comment(3) | TrackBack(0) | Tips | このブログの読者になる | 更新情報をチェックする

[C# WPF]アイコンリストを作る

今回はアイコンリストを作ってみます。

サンプルです。

[xaml]

<Window.Resources>
<x:Array x:Key="ListItems" Type="local:ListItem">
<local:ListItem Name="Item1"/>
<local:ListItem Name="Item2"/>
<local:ListItem Name="Item3"/>
<local:ListItem Name="Item4"/>
<local:ListItem Name="Item5"/>
</x:Array>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<GridSplitter Width="3" HorizontalAlignment="Right" VerticalAlignment="Stretch"/>
<ListView Grid.Column="1" ItemsSource="{StaticResource ListItems}">
<ListView.ItemTemplate>
<DataTemplate>
<Button Content="{Binding Name}" Width="50" Height="50" Margin="5"/>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"
Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=ListView}}"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</Grid>


[ソース]

public class ListItem
{
public string Name { get; set; }

public ListItem()
{
}
}


ソースにはアイコンの元になる名前のみをもったクラスを定義しています。

xamlではListのItemTemplateでButtonを指定しています。
Contentに名前をBindしていますが、アイコンにすると見栄えもよくなります。
また、GridSplitterでアイコンリストの幅を大きくした時に
できるだけ多くのアイコンを表示できるようにする為に
ItemsPanelにWrapPanelを指定しています。

実行結果です。
1.jpg

GridSplitterでリストの幅を変更すると以下のようになります。
2.jpg
posted by cw at 22:30| Comment(0) | TrackBack(0) | Tips | このブログの読者になる | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

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