その１：http://blogs.wankuma.com/kazuki/archive/2009/01/12/166166.aspx
前回は、フォルダを開く処理まで作った。
まだ、見た目的には画像が１つも出てきてないので画像ビューワ作ってるのかあやしい部分もある。
ということで、サムネイルを表示する部分からさくっと作っていこうと思う。
サムネイルを作成する
サムネイルは、ListBoxのItemTemplateとItemsPanelを差し替えることで実現する。
とりあえず、ListBox用のStyleをApp.xamlに定義する。
<Application x:Class="WpfImageViewerApplication.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Startup="Application_Startup"
StartupUri="ViewerWindow.xaml">
<Application.Resources>
<Style x:Key="listBoxThumbnailStyle" TargetType="{x:Type ListBox}">
<!-- ここにスタイルを定義していく -->
</Style>
</Application.Resources>
</Application>
ViewerWindow.xamlのListBoxに、このスタイルを設定する。
<!-- サムネイル用のスタイルを適用 -->
<ListBox DockPanel.Dock="Top"
Style="{StaticResource listBoxThumbnailStyle}"
ItemsSource="{Binding Images}">
</ListBox>
App.xamlのスタイルを仕上げていく。
- 何も表示されてない時に、潰れてるのはみっともないのでMinHeightを60くらいに設定
<Setter Property="MinHeight" Value="60" />
- なんとなく余白を持たせるためにPaddingに5を設定
<Setter Property="Padding" Value="5" />
- ImageInfoクラスのPathプロパティにある画像を表示したいのでItemTemplateをImageにする
画像間にも適当な余白を持たせるためにMarginも設定しておく
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Image Margin=”5” Width="50" Height="50" Source="{Binding Path}" />
</DataTemplate>
</Setter.Value>
</Setter>
- 横並びにたいしので、ItemsPanelをOrientationにHorizontalを設定したStackPanelにする。
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
ここまでで、ListBoxのスタイルは下のようになる。
<Style x:Key="listBoxThumbnailStyle" TargetType="{x:Type ListBox}">
<Setter Property="Padding" Value="5" />
<Setter Property="MinHeight" Value="70" />
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Image Margin="5" Width="50" Height="50" Source="{Binding Path}" />
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
実行すると、それっぽくなってくる。
次は、選択した画像を表示する部分を作っていこうと思う。
メインの画像表示部分を作る
画像ビューワの一番メインとなるところ。
画像を表示する部分を作っていこうと思う。とりあえず、サムネイルで選択されたものをデデーンと大きく表示するという動きを実現するために、ListBoxにIsSynchronizedWithCurrentItem="True"を追加する。
<ListBox DockPanel.Dock="Top"
Style="{StaticResource listBoxThumbnailStyle}"
IsSynchronizedWithCurrentItem="True"
ItemsSource="{Binding Images}">
</ListBox>
これで、ListBoxの選択状態に連動してデータを表示するということが出来るようになる。
次に、画面の下部のImageに手を入れていく。SourceにImagesのPathを指定して、画像がImageタグの占有する大きさによってサイズ調整されないようにStretchにNoneを指定する。
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Image Source="{Binding Images/Path}" Stretch="None" />
</ScrollViewer>
ここまでで、実行すると下のようになる。大分画像ビューワらしくなってきた。
拡大/縮小・回転機能を作る
最後に、おまけ的な機能の拡大/縮小・回転機能を作っていく。
画面上部のスライダーを動かすことで、画像が大きくなったり小さくなったり、ぐるぐる回ったりするWPFらしい？機能になる。
とりあえず、今のスライダーの部分は張りぼてなので、スライダーを動かすと、ちゃんと連動して横のテキストが更新されるようにするところから作っていこうと思う。
やり方は簡単。下の要領で出来る。
- TextBlockのTextをスライダーのValueとバインドする
- StringFormatでフォーマットを指定する
とても簡単。
<GroupBox Header="拡大/縮小">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding ElementName=sliderZoom, Path=Value, StringFormat=0.0倍：}" />
<Slider Name="sliderZoom" Minimum="0.1" Maximum="5.0" Width="75" Value="1"/>
</StackPanel>
</GroupBox>
<GroupBox Header="回転">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding ElementName=sliderRotate, Path=Value, StringFormat=000度：}" />
<Slider Name="sliderRotate" Minimum="0" Maximum="360" Width="75" SmallChange="1" LargeChange="90" />
</StackPanel>
</GroupBox>
これで、実行すると下のようにスライダーに連動してテキストが変わるようになる。
実行してスライダーを動かすと…
テキストの値もちゃんと変わる！
後は、このスライダーの値に連動してImageの拡大縮小や回転をするようにするだけだ。
やり方は、ImageのLayoutTransformに拡大縮小の変換を行うScaleTransformと、回転の変換を行うRotateTransformを設定して、スライダーとバインドする。
<Image Source="{Binding Images/Path}" Stretch="None">
<Image.LayoutTransform>
<TransformGroup>
<!-- 拡大縮小 -->
<ScaleTransform
ScaleX="{Binding ElementName=sliderZoom, Path=Value}"
ScaleY="{Binding ElementName=sliderZoom, Path=Value}" />
<!-- 回転 -->
<RotateTransform
Angle="{Binding ElementName=sliderRotate, Path=Value}" />
</TransformGroup>
</Image.LayoutTransform>
</Image>
実行すると、下のような感じに拡大縮小や回転が出来るようになる。
細かい部分の調整
最後に微調整をしたら完成です。
適度な余白を設けたり、スクロールビューワの背景を黒にしたりすれば完成。
最初と違うところは、「WPF イメージビューワ」だったタイトルが「WPF画像ビューワ」になってるくらいかな。
最終的な見た目の調整も終えたソースは下からDL可能です。