2013年01月15日

[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 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

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


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

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

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