かずきのBlog

[WPF][C#]イメージのリスト（いい具合に横並び）

kazuki@wankuma.com (かずき) — Thu, 09 Oct 2008 23:19:00 GMT

Vistaの背景画像選ぶときみたいなリストボックスを作りたいということで、叩き台を作ってみた。後は微調整でいけるのかな？

とりあえずXAMLだけを。

<Window x:Class="WpfImageList.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfImageList"
    Title="Window1" Height="300" Width="300" Loaded="Window_Loaded">
    <Window.Resources>
        <local:ImageSizeConverter x:Key="imageSizeConverter" />
    </Window.Resources>
    <Grid>
        <ListBox ItemsSource="{Binding}" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Image Source="{Binding Converter={StaticResource imageSizeConverter}}"/>
                </DataTemplate>
            </ListBox.ItemTemplate>
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel ItemHeight="100" ItemWidth="100" />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        </ListBox>
    </Grid>
</Window>

ListBoxのItemTemplateで、ListBoxItemに画像を表示している部分と、ListBoxのItemsPanelで表示にWrapPanelを使ってるのが特徴。横スクロールはイラナイ（というか有るとWrapPanelが横方向に無限に広がるため折り返さない）のでScrollViewer.HorizontalScrollBarVisibility="Disabled"にしている。

ItemTemplateをもうちょとっと格好良くすればそっくりになるかな？
その他の部分については、下記のプロジェクト参照してください。

[Other]最近は

kazuki@wankuma.com (かずき) — Tue, 07 Oct 2008 02:28:00 GMT

最近会社の部署内で、ボーリングのスコア計算のプログラムを作るということがPGのネタのお題にあがっている。
最後をどう扱うか？テストどうやるか？というところがポイントになるらしぃ。

確かに、ボーリングのスコアの数え方はとてもシンプル。Wikipediaには下のように書いてある。

フレームにおいてスペア・ストライクがない場合（オープンフレームと呼ぶ）、2回の投球で倒したピンの本数がそのフレームの得点となる。
スペアを出した場合、倒した本数である10点に加え、次の1投球で倒したピンの本数がこのフレームの得点に加算される。
ストライクを出した場合、倒した本数である10点に加え、続く2投球で倒したピンの本数が加算される。つまり次の投球もストライクだった場合は、さらにその次の投球（2フレーム先の第1投球）で倒したピンの本数まで加算される。
第10フレームのみ、スペア・ストライクを出した場合、3投して倒したピンの総数を第10フレームの得点として計算する。
各フレームの得点の合計が1ゲームの得点となる。最高得点は300点となる。

シンプルだけど、実装はそれなりに大変で、テストも大変。う～ん、どう組もう。

[Java]Spring Frameworkのメンテナンスポリシーが変わったみたい？

kazuki@wankuma.com (かずき) — Thu, 02 Oct 2008 23:12:00 GMT

ひがやすをさんのBlogで見たんだけど、どうもSpring Frameworkのメンテナンスポリシーが変わるみたいだ。
http://d.hatena.ne.jp/higayasuo/20080921/1221962998

自分は、原文すら読んでないので、何がどうかわったのか言及するのは控えるけど、今後どうなっていくのか様子を見ておかないといけないかも。

誰かが定期的にビルドしてリリースしてくれるようになったりしないかな？

[Other]9月度ページビュー

kazuki@wankuma.com (かずき) — Thu, 02 Oct 2008 22:24:00 GMT

9月も終わり、10月になりました。今年度の後半もスタートです。
ということで9月度のPV

61514ページビュー

今月もありがとうございました。まだまだ書くことは尽きなさそうです。

[WPF][C#]ListViewの行を交互に色を変える

kazuki@wankuma.com (かずき) — Thu, 02 Oct 2008 08:14:00 GMT

nakamuraさんも同じことをされていたけど、違うアプローチから縞々をしてみようと思う。
Nakamura Blog:ListViewを縞々にする

やり方は基本的に前にやったListBoxの時と同じ。
さくっとしてみよう。

ListViewに表示するデータの準備

まず、表示するデータがないと話しにならない。いつもどおりのPersonクラスを作成する。

namespace WpfApplication4
{
    public class Person
    {
        public int No { get; set; }
        public string Name { get; set; }
    }
}

これをWindowのコンストラクタでDataContextに設定する。

using System.Windows;

namespace WpfApplication4
{
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
            DataContext = new[]
            {
                new Person { No = 1, Name = "田中　太郎" },
                new Person { No = 2, Name = "鈴木　太郎" },
                new Person { No = 3, Name = "田中　次郎" },
                new Person { No = 4, Name = "田中　三郎" },
                new Person { No = 5, Name = "田中　四郎" },
                new Person { No = 6, Name = "田中　五郎" },
                new Person { No = 7, Name = "田中　六郎" },
                new Person { No = 8, Name = "木村さん" },
            };
        }
    }
}

これで準備完了。

ListViewにデータを表示する

表示のさせ方自体は前にもしてるから、さくっとXAMLだけ紹介。

<Window x:Class="WpfApplication4.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid>
        <ListView ItemsSource="{Binding}" AlternationCount="2">
            <ListView.View>
                <GridView>
                    <GridView.Columns>
                        <GridViewColumn Header="No" DisplayMemberBinding="{Binding No}" />
                        <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}" />
                    </GridView.Columns>
                </GridView>
            </ListView.View>
        </ListView>
    </Grid>
</Window>

普通にデータが表示されるようになった。いい感じ。

ついに縞々

縞々にするため？に.NET Framework 3.5 SP1から追加されたAlternationCountプロパティをListViewに追加する。縞々なので2を指定した。

<ListView ItemsSource="{Binding}" AlternationCount="2">

そしてListViewのItemContainerStyleでItemsControl.AlternationIndexでTriggerをかけて背景色を変えるようにする。

<ListView.ItemContainerStyle>
    <Style TargetType="{x:Type ListViewItem}">
        <Style.Triggers>
            <!-- 奇数行だけ金色！ -->
            <Trigger Property="ItemsControl.AlternationIndex" Value="0">
                <Setter Property="Background" Value="Gold" />
            </Trigger>
        </Style.Triggers>
    </Style>
</ListView.ItemContainerStyle>

実行すると縞々にはなってるが…

No3の田中　次郎さんの行をマウスで選択しているのにハイライトが非常にわかりにくい。選択されてるときは、背景色を指定しないように改良してみよう。
やりたいこととしては、ItemsControl.AlternationIndexが0で、選択されてない行だけ色を変えたいということなのでMultiTriggerを使ってやってみた。

<ListView.ItemContainerStyle>
    <Style TargetType="{x:Type ListViewItem}">
        <Style.Triggers>
            <MultiTrigger>
                <!-- 奇数行で、選択されてない行は金色!! -->
                <MultiTrigger.Conditions>
                    <Condition Property="ItemsControl.AlternationIndex" Value="0" />
                    <Condition Property="IsSelected" Value="False" />
                </MultiTrigger.Conditions>
                <Setter Property="Background" Value="Gold" />
            </MultiTrigger>
        </Style.Triggers>
    </Style>
</ListView.ItemContainerStyle>

こうすると、選択行の色は変わらない。でも、これはこれでイマイチかな…。

選択されてる行でAlternationIndexが0の行にそれっぽい色をつける様なMultiTriggerを設定すれば良さそうだ。早速やってみよう。

<ListView.ItemContainerStyle>
    <Style TargetType="{x:Type ListViewItem}">
        <Style.Triggers>
            <!-- 選択されてない奇数行は紫色っぽい色で -->
            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="ItemsControl.AlternationIndex" Value="0" />
                    <Condition Property="IsSelected" Value="False" />
                </MultiTrigger.Conditions>
                <Setter Property="Background" Value="#ffee00ff" />
            </MultiTrigger>
            <!-- 選択されてる奇数行は透明っぽい紫色で -->
            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="ItemsControl.AlternationIndex" Value="0" />
                    <Condition Property="IsSelected" Value="True" />
                </MultiTrigger.Conditions>
                <Setter Property="Background" Value="#44ee00ff"/>
            </MultiTrigger>
        </Style.Triggers>
    </Style>
</ListView.ItemContainerStyle>

これで実行するとそれっぽくなってる。

[WPF][C#]Visual Studio 2008 SP1のWPFデザイナの使い方

kazuki@wankuma.com (かずき) — Wed, 01 Oct 2008 08:01:00 GMT

Visual Studio 2005でアドインという形でVisual Studio上でのWPFアプリケーションの開発がサポートされるようになりました。そこからVS2008 → VS2008 SP1とバージョンアップを経てそこそこ使いやすいものになってます。
VS2008までは、デザイナ画面を使うといってもプレビュー画面程度にしか使ってませんでした。ほとんどXAMLを手打ち！！という漢らしい方法で開発してました。でも、SP1でデザイナもパワーアップしてWindowsFormで出来ること程度のことが出来る感じになってます。

ということでどんな事が出来るかというと…

ツールボックスからドラッグアンドドロップすることで任意の場所にボタンとかを置くことが出来る。コレ位に関してはVS2005のころから出来てたので別に驚くことは無い。

このコントロールをマウスでつかんで画面内の何処に動かすのか移動させることが出来る。その際に、ガイドも出てきてきっちり揃えたレイアウトとかがやりやすくなっている。

そして、ウィンドウがサイズ変更されたときにコントロールのサイズをどうするのかということもデザイナで指定できるようになっている。WindowsFormでいうところのAnchorと同じことが出来る。
やり方は簡単。デザイナ上でコントロールを選択すると、左側と上側に三角形が表示される。この状態は、WindowsFormでAnchorにTopとLeftを指定したのと同じ動きをする。

これにAnchorにRightを設定したのと同じ動きをさせる設定をしようと思う。これは、コントロールの右側に表示されてる丸い部分をクリックすればいい。クリックすると丸から三角に変わる。

これで、ウィンドウサイズを変えるとボタンのサイズも変わるようになる。

こんな感じで、裏ではWPFのGridレイアウトの動きとマージンやWidth Heightを駆使しつつWindowsFormと同じような感じで画面デザインが出来るようになっている。WPFの流儀に従ってるかと言われるとう～んどうだろ？って感じもするけど、これで設定したほうが楽な場合もあるので使える部分では使っていこうと思う。

後は、Gridを選択した状態で画面の上と左に表示される青い帯みたいな部分をクリックするとColumnDefinitionとRowDefinitionが設定できるようになっている。

まぁ、WindowsForm的にデザイナでレイアウトしたい！ってときに使う機能かというと微妙な気はする。

最後に、プロパティウィンドウでイベントの設定も出来る。今まで出来なかったのが不思議でならない。

[Other]MCP:70-502受けてきた

kazuki@wankuma.com (かずき) — Tue, 30 Sep 2008 16:16:00 GMT

TS: Microsoft .NET Framework 3.5, Windows Presentation Foundation Application Development
http://www.microsoft.com/japan/learning/mcp/exam.aspx?cert=1&id=70-502

仕事を休んで受けてきた。
700点がボーダーのところ889点で合格できた。良かった。
今期の成果に書けるわ～。

試験を受けるにあたって参考にしたリソース
MSDN：http://www.microsoft.com/japan/msdn/
とりあえず、全情報が乗ってるけど読み解くのは本よりしんどい。
本で気になったことを、調べるのに使ったかも。

エッセンシャルWPF

個人的に日本語のWPF本だとお勧めな一冊。
大体の部分がカバーされてるので、がっつり読んだ。現在もちょくちょく開いてます。

MCTS Self-Paced Training Kit

資格本探したら洋書しか見当たらなかったので資格の勉強用ということで買った。
模擬試験をPCでできるようなCDまでついてて結構よかった。
やっぱり実際試験受けてみると、英語で慣れてたのがいきなり日本語になってちょっと戸惑った。

試験自体は、問題にまだ間違いがあったりして楽しめる内容になってた。

[後で読む][WPF]WPFアプリケーションのローカライズの仕方

kazuki@wankuma.com (かずき) — Sun, 28 Sep 2008 20:56:00 GMT

MSDNの「方法：アプリケーションをローカライズする」
http://msdn.microsoft.com/ja-jp/library/ms746621(VS.80).aspx

ここに、locbamlを使ってWPFアプリケーションをローカライズする方法が書かれてる。

[WPF][C#]WebBrowserコントロールは？その３

kazuki@wankuma.com (かずき) — Sun, 28 Sep 2008 17:11:00 GMT

その２
http://blogs.wankuma.com/kazuki/archive/2008/01/26/119366.aspx

ずいぶん前に、WebBrowserコントロールの代わりに、Frameを使うといけた！って書いた。
でも、画像を表示しようとすると駄目だったのでションボリといった代物だった。

でも、.NET Framework 3.5/3.0のSP1から正真正銘WebBrowserが追加されたので悩む必要は無い。使い方も簡単で、XAMLでWebBrowserタグを使って画面に置くことが出来る。画面遷移はおなじみのNavigateメソッドでOK。ということで早速軽く試してみたよ。

テキストボックスとボタンとブラウザーを画面に配置。

<Window x:Class="WpfAnimationSample.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Browser">
    <DockPanel>
        <ToolBarTray DockPanel.Dock="Top">
            <ToolBar>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <TextBox Name="textBoxUrl" MinWidth="250"/>
                    <Button Grid.Column="1" 
                            Name="buttonNavigate"
                            Content="開く" Click="buttonNavigate_Click" />
                </Grid>
            </ToolBar>
        </ToolBarTray>
        <WebBrowser Name="browser" Navigated="browser_Navigated" />
    </DockPanel>
</Window>

ボタンクリックで画面遷移をして、画面遷移完了とともにTextBoxに遷移先のURLを表示するようにしてみた。

using System;
using System.Windows;
using System.Windows.Navigation;

namespace WpfAnimationSample
{
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }

        private void buttonNavigate_Click(object sender, RoutedEventArgs e)
        {
            browser.Navigate(new Uri(textBoxUrl.Text));
        }

        private void browser_Navigated(object sender, NavigationEventArgs e)
        {
            textBoxUrl.Text = browser.Source.ToString();
        }
    }
}

実行して動きを試してみよう。
URLを入力して開くボタンを押すと…

ばっちり表示される。

画像自体の表示やPDFとかFlash, SilverlightもOKだ。要はIEで表示できれば大丈夫そう。

[WPF][C#]WPFのアニメーションその２「XAMLで書いてみよう」

kazuki@wankuma.com (かずき) — Thu, 25 Sep 2008 09:44:00 GMT

前回は、C#のコードでアニメーションを組み立てて実行した。実は、これも全てXAMLでかけてしまう。ということで書いてみようと思う。
とりあえず、前回のプロジェクトでC#のコードを書く前の段階に戻す。

<Window x:Class="WpfAnimeStudy.Window1"  
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
    Title="Window1" Height="300" Width="300">  
    <Canvas>  
        <Rectangle Name="animationTarget"  
                   Canvas.Top="10"    
                   Canvas.Left="10"    
                   Width="100"    
                   Height="100"    
                   Fill="Aqua" />  
        <Button Canvas.Bottom="10" Canvas.Left="10">きっかけ！</Button>  
    </Canvas>  
</Window>

ここにStoryboardとDoubleAnimationを追加していく。色々な書き方はあるが、ResourcesにStoryboardを追加してみようと思う。C#のコードで書いていたものをそのままXAML化。

<Window.Resources>
	<Storyboard x:Key="storyboard">
		<DoubleAnimation Storyboard.TargetProperty="Width"
						 Storyboard.TargetName="animationTarget"
						 Duration="0:0:10"
						 From="10" To="200" />
		<DoubleAnimation Storyboard.TargetProperty="Height"
						 Storyboard.TargetName="animationTarget"
						 Duration="0:0:10"
						 From="10" To="200" />
	</Storyboard>
</Window.Resources>

コードとちょっと違うのは、Storyboard.TargetNameという添付プロパティを使用しているところかな。
この添付プロパティを使うと、アニメーションさせたいターゲットを指定できる。この場合animationTargetという名前のRectangleをアニメーションさせたいので、Storyboard.TargetName=”animationTarget”という風になる。

最後に、このストーリーボードを開始する処理を書けば完成だ。これもXAMLでいける。クリック時にストーリーボードを起動するにはTriggersプロパティとEventTriggerとBeginStoryboardというものを使う。Triggersプロパティは、FrameworkElementという結構上の階層で定義されてるので、基本的に画面に置くコントロール系には全て備わっているプロパティです。

StyleやControlTemplate等にも同名のプロパティがあるが、これらはTriggerやDataTriggerやEventTriggerなんかをサポートするけど、FrameworkElement.TriggersではEventTriggerしかサポートしていない。今回の例では、ボタンクリックのイベントが拾えればいいのでEventTriggerが使えればいいので、これを使ってみようと思う。

<Button Canvas.Bottom="10" Canvas.Left="10">
	<Button.Triggers>
		<EventTrigger RoutedEvent="Button.Click">
			<BeginStoryboard Storyboard="{StaticResource storyboard}" />
		</EventTrigger>
	</Button.Triggers>
	きっかけ！
</Button>

EventTriggerで、Button.Clickが起きたらResources内のstoryboardを開始するように指定している。
これで完成だ。一応XAML全体を以下に示します。

<Window x:Class="WpfAnimeStudy.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
	<Window.Resources>
		<Storyboard x:Key="storyboard">
			<DoubleAnimation Storyboard.TargetProperty="Width"
							 Storyboard.TargetName="animationTarget"
							 Duration="0:0:10"
							 From="10" To="200" />
			<DoubleAnimation Storyboard.TargetProperty="Height"
							 Storyboard.TargetName="animationTarget"
							 Duration="0:0:10"
							 From="10" To="200" />
		</Storyboard>
	</Window.Resources>
	<Canvas>
		<Rectangle Name="animationTarget"  
                   Canvas.Top="10"    
                   Canvas.Left="10"    
                   Width="100"    
                   Height="100"    
                   Fill="Aqua" />
		<Button Canvas.Bottom="10" Canvas.Left="10">
			<Button.Triggers>
				<EventTrigger RoutedEvent="Button.Click">
					<BeginStoryboard Storyboard="{StaticResource storyboard}" />
				</EventTrigger>
			</Button.Triggers>
			きっかけ！
		</Button>
	</Canvas>
</Window>

実行結果は前回と同じなので割愛。
以上！