AdobeのAIRでRSS Readerを作ってみてる連載が@ITにある。
連載目次：http://www.atmarkit.co.jp/fwcr/index/index_airwidget.html
とりあえず、似たようなものをWPFで作ってみようと思う。
WpfRssReaderという名前でプロジェクトを新規作成する。
デフォルトであるWindow1とRssReaderWindowと名前を変更！！リファクタリングで変更してもxamlの中までは変更に対応してないので、App.xamlとRssReaderWindow.xamlの中も名前を変更しておく。
Windowのタイトルは「RSSリーダ」にしてみた。
Windowのサイズは800x600みたいなので、そういう風に設定する！
まだ、何も目新しいことはしてないけど、ここまでのXAMLを下に書いてみる。
<Window x:Class="WpfRssReader.RssReaderWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="RSSリーダ" Height="600" Width="800">
<Grid>
</Grid>
</Window>
次は、画面を左右に分断してサイズを変えれるようにしないといけない。
幅の比率は3:7になってるので、3*と7*を設定した。その間にGridSplitｔerを入れるためのカラムを3pxで設定した。
右側は、まだまだ作りこむみたいなのでとりあえず放置。左半分から仕上げてみようと思う。
RSS一覧とヘッダを表示して、リストボックスとボタンを２つ置くというレイアウトになってるので、それを再現してみようと思う。
HeaderedContentControlを左側においてHeaderにRSS一覧という文字列を設定する。
そして、コンテンツにはDockPanelを置いてリストボックスとStackPanel上に水平に並べたボタンを２つ配置する。
ここまでのXAMLと実行結果は下のようになる。
<Window x:Class="WpfRssReader.RssReaderWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="RSSリーダ" Height="600" Width="800">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="3" />
<ColumnDefinition Width="7*" />
</Grid.ColumnDefinitions>
<HeaderedContentControl Grid.Column="0"
Header="RSS一覧">
<DockPanel>
<StackPanel DockPanel.Dock="Bottom"
Orientation="Horizontal"
HorizontalAlignment="Center">
<Button Content="+" />
<Button Content="-" />
</StackPanel>
<ListBox />
</DockPanel>
</HeaderedContentControl>
<GridSplitter Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<Grid Grid.Column="2">
</Grid>
</Grid>
</Window>
…まだまだ本物には程遠い。特にListBoxのつぶれ具合が悲しい雰囲気をかもしだしてる。
ということで、StyleとControlTemplateを使って見た目を揃えに入ろうと思う。Styleは、リソースディクショナリで作ってみようと思う。
RssReaderStyleDictionary.xamlという名前でリソースディクショナリを作成する。
App.xamlのResourcesプロパティにRssReaderStyleDictionary.xamlを追加する。
<Application x:Class="WpfRssReader.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="RssReaderWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="RssReaderStyleDictionary.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
これで下準備完了！早速Styleを定義してみる。
HeaderedContentControlは、Templateを差し替えてListBoxがいっぱいに広がるようにする。
そして、ButtonはMarginとMinWidthを指定して、それっぽい感じにしてみた。
最後に、Windowにもマージンを設定してるみたいなので、そういうStyleも定義した。
RssReaderStyleDictionary.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- RSS ReaderのWindowのスタイル -->
<Style x:Key="windowStyle" TargetType="{x:Type Window}">
<Setter Property="Margin" Value="10" />
</Style>
<!-- RSS ReaderのHeaderedContentControlのテンプレートとスタイル-->
<ControlTemplate x:Key="rssHeaderedContentControlTemplate" TargetType="{x:Type HeaderedContentControl}">
<Border Margin="10">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border Grid.Row="0" Margin="0,0,0,10">
<ContentPresenter ContentSource="Header" />
</Border>
<ContentPresenter Grid.Row="1" />
</Grid>
</Border>
</ControlTemplate>
<Style x:Key="rssHeaderedContentControlStyle" TargetType="{x:Type HeaderedContentControl}">
<Setter Property="Template" Value="{StaticResource rssHeaderedContentControlTemplate}" />
</Style>
<!-- RSS Readerのボタンスタイル -->
<Style x:Key="rssReaderButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Margin" Value="5" />
<Setter Property="MinWidth" Value="50" />
</Style>
</ResourceDictionary>そして、Window側では、StaticResourceを使って定義したスタイルをあてる。
ついでに、ListBoxにダミーデータを表示するためにListBoxItemを追加しておいた。
<Window x:Class="WpfRssReader.RssReaderWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="RSSリーダ" Height="600" Width="800"
Style="{StaticResource windowStyle}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="3" />
<ColumnDefinition Width="7*" />
</Grid.ColumnDefinitions>
<HeaderedContentControl Grid.Column="0"
Header="RSS一覧"
Style="{StaticResource rssHeaderedContentControlStyle}">
<DockPanel>
<StackPanel DockPanel.Dock="Bottom"
Orientation="Horizontal"
HorizontalAlignment="Center">
<Button Content="+" Style="{StaticResource rssReaderButtonStyle}" />
<Button Content="-" Style="{StaticResource rssReaderButtonStyle}" />
</StackPanel>
<ListBox>
<ListBoxItem Content="かずきのBlog" />
<ListBoxItem Content="ダミーアイテム" />
</ListBox>
</DockPanel>
</HeaderedContentControl>
<GridSplitter Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<Grid Grid.Column="2">
</Grid>
</Grid>
</Window>
これを実行すると、ちょびっとそれっぽくなる。
今日は眠いのでここまで。
ここまでの状態のVisual Studio 2008のプロジェクトはこちら。