泥庭

2011年10月21日

初めてのWindows Phone アプリ作成

Filed under: .NET, Windows Phone, WPF — タグ: , — yone64 @ 11:46 PM

第70回codeseek勉強会&第11回日本C#ユーザー会 勉強会に参加してきました。
テーマは「Windows Phone 7 アプリ駆け込み制作」。Windows Phone アプリの作成経験はありませんでしたが、未経験でもOKということなので…。

特に作るものを決めていなかったので、15パズルでも作るかな?と思ったが、ドラッグとか面倒だったらやだなぁという理由で、ライツアウトっぽいものを作ることに決定。
これなら、2時間でそこそこできそうかも。
そして、2時間立ってできたものが↓、Buttonを5×5に並べただけ終了、動きません。

image

ボタンを 5 × 5 で25個配置するのだけなのだが、ここでXamlにButtonタグを25個書いたら負けだと思っているので、Xamlは↓のような感じのものを記述。
WPFでは、GridにBindingを利用してアイテムを配置する時によくやる手段です。

<ItemsControl ItemsSource="{Binding CellDataCollection}" Grid.Column="1">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
            </Grid>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Button Content="{Binding Content}"
                    Command="{Binding Path=DataContext.Command,RelativeSource={RelativeSource AncestorType=Window}}"
                    CommandParameter="{Binding}"
                    />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.ItemContainerStyle>
        <Style>
            <Setter Property="Grid.Column" Value="{Binding XPosition}"/>
            <Setter Property="Grid.Row" Value="{Binding YPosition}"/>
        </Style>
    </ItemsControl.ItemContainerStyle>
</ItemsControl>

ところが、思った通りに動かない。というかコンパイルが通らない。ItemsPanel.ItemContainerStyleがないだと…。

仕方がないので、ItemsPanelTemplateをGridからUniformGridに変更することを検討。しかし、UniFormGridもないことが判明…。

ここで、ButtonをDataTemplateで配置することをあきらめる。結局Buttonタグを25個並べることに。敗北感が漂う。

あきらめたXamlは↓な感じ。Buttonを25個配置せざるを得ないとはいえ、同じことを何度も書くのは嫌なのでStyleを使うことに。

<Grid Grid.Row="1">
    <Grid.Resources>
        <Style TargetType="Button" x:Key="{x:Type Button}">
            <Setter Property="Grid.Column" Value="{Binding XPosition}"/>
            <Setter Property="Grid.Row" Value="{Binding YPosition}"/>
            <Setter Property="Grid.Content" Value="{Binding Content}"/>
        </Style>
    </Grid.Resources>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <Button DataContext="{Binding DataCollection[0]}"/>
    <Button DataContext="{Binding DataCollection[1]}" />
    <Button DataContext="{Binding DataCollection[2]}" />
    <Button DataContext="{Binding DataCollection[3]}" />
    <Button DataContext="{Binding DataCollection[4]}" />
    <Button DataContext="{Binding DataCollection[5]}" />
    <Button DataContext="{Binding DataCollection[6]}" />
    <Button DataContext="{Binding DataCollection[7]}" />
    <Button DataContext="{Binding DataCollection[8]}" />
    <Button DataContext="{Binding DataCollection[9]}" />
    <Button DataContext="{Binding DataCollection[10]}" />
    <Button DataContext="{Binding DataCollection[11]}" />
    <Button DataContext="{Binding DataCollection[12]}" />
    <Button DataContext="{Binding DataCollection[13]}" />
    <Button DataContext="{Binding DataCollection[14]}" />
    <Button DataContext="{Binding DataCollection[15]}" />
    <Button DataContext="{Binding DataCollection[16]}" />
    <Button DataContext="{Binding DataCollection[17]}" />
    <Button DataContext="{Binding DataCollection[18]}" />
    <Button DataContext="{Binding DataCollection[19]}" />
    <Button DataContext="{Binding DataCollection[20]}" />
    <Button DataContext="{Binding DataCollection[21]}" />
    <Button DataContext="{Binding DataCollection[22]}" />
    <Button DataContext="{Binding DataCollection[23]}" />
    <Button DataContext="{Binding DataCollection[24]}" />
</Grid> 

しかし、これもうまくいかない。再びコンパイルエラー。

Silverlightでは、StyleのKeyでTypeを指定することができないそうだ。Styleは必ずResourceを指定して適用することが必要らしい。

そろそろ涙目だが、仕方がないのでResourceの指定を追加。(VisualStudioのAlt+範囲選択がありがたい)

やっぱり、うまくいかない。さらに調べたところ、StyleのValueでBindingを指定してもうまく反映されないようです。(固定値なら反映されるのにぃ。)

結局、Styleも使えずじまい。すべてのボタンで同じ値を設定するという何とも残念な結果に。最終的に↓になりました。

<Grid Grid.Row="1">
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <Button Grid.Column="{Binding XPosition}" Grid.Row="{Binding YPosition}" Content="{Binding Content}" DataContext="{Binding DataCollection[0]}"/>
    <Button Grid.Column="{Binding XPosition}" Grid.Row="{Binding YPosition}" Content="{Binding Content}" DataContext="{Binding DataCollection[1]}" />
    <Button Grid.Column="{Binding XPosition}" Grid.Row="{Binding YPosition}" Content="{Binding Content}" DataContext="{Binding DataCollection[2]}" />
    <Button Grid.Column="{Binding XPosition}" Grid.Row="{Binding YPosition}" Content="{Binding Content}" DataContext="{Binding DataCollection[3]}" />
    <Button Grid.Column="{Binding XPosition}" Grid.Row="{Binding YPosition}" Content="{Binding Content}" DataContext="{Binding DataCollection[4]}" />
    <Button Grid.Column="{Binding XPosition}" Grid.Row="{Binding YPosition}" Content="{Binding Content}" DataContext="{Binding DataCollection[5]}" />
    <Button Grid.Column="{Binding XPosition}" Grid.Row="{Binding YPosition}" Content="{Binding Content}" DataContext="{Binding DataCollection[6]}" />
    <Button Grid.Column="{Binding XPosition}" Grid.Row="{Binding YPosition}" Content="{Binding Content}" DataContext="{Binding DataCollection[7]}" />
    <Button Grid.Column="{Binding XPosition}" Grid.Row="{Binding YPosition}" Content="{Binding Content}" DataContext="{Binding DataCollection[8]}" />
    <Button Grid.Column="{Binding XPosition}" Grid.Row="{Binding YPosition}" Content="{Binding Content}" DataContext="{Binding DataCollection[9]}" />
    <Button Grid.Column="{Binding XPosition}" Grid.Row="{Binding YPosition}" Content="{Binding Content}" DataContext="{Binding DataCollection[10]}" />
    <Button Grid.Column="{Binding XPosition}" Grid.Row="{Binding YPosition}" Content="{Binding Content}" DataContext="{Binding DataCollection[11]}" />
    <Button Grid.Column="{Binding XPosition}" Grid.Row="{Binding YPosition}" Content="{Binding Content}" DataContext="{Binding DataCollection[12]}" />
    <Button Grid.Column="{Binding XPosition}" Grid.Row="{Binding YPosition}" Content="{Binding Content}" DataContext="{Binding DataCollection[13]}" />
    <Button Grid.Column="{Binding XPosition}" Grid.Row="{Binding YPosition}" Content="{Binding Content}" DataContext="{Binding DataCollection[14]}" />
    <Button Grid.Column="{Binding XPosition}" Grid.Row="{Binding YPosition}" Content="{Binding Content}" DataContext="{Binding DataCollection[15]}" />
    <Button Grid.Column="{Binding XPosition}" Grid.Row="{Binding YPosition}" Content="{Binding Content}" DataContext="{Binding DataCollection[16]}" />
    <Button Grid.Column="{Binding XPosition}" Grid.Row="{Binding YPosition}" Content="{Binding Content}" DataContext="{Binding DataCollection[17]}" />
    <Button Grid.Column="{Binding XPosition}" Grid.Row="{Binding YPosition}" Content="{Binding Content}" DataContext="{Binding DataCollection[18]}" />
    <Button Grid.Column="{Binding XPosition}" Grid.Row="{Binding YPosition}" Content="{Binding Content}" DataContext="{Binding DataCollection[19]}" />
    <Button Grid.Column="{Binding XPosition}" Grid.Row="{Binding YPosition}" Content="{Binding Content}" DataContext="{Binding DataCollection[20]}" />
    <Button Grid.Column="{Binding XPosition}" Grid.Row="{Binding YPosition}" Content="{Binding Content}" DataContext="{Binding DataCollection[21]}" />
    <Button Grid.Column="{Binding XPosition}" Grid.Row="{Binding YPosition}" Content="{Binding Content}" DataContext="{Binding DataCollection[22]}" />
    <Button Grid.Column="{Binding XPosition}" Grid.Row="{Binding YPosition}" Content="{Binding Content}" DataContext="{Binding DataCollection[23]}" />
    <Button Grid.Column="{Binding XPosition}" Grid.Row="{Binding YPosition}" Content="{Binding Content}" DataContext="{Binding DataCollection[24]}" />
</Grid>

で、結局ボタンを25個XAMLで並べたところで終了してしまいました。

どう書くのが正解なんだろう。

広告

コメントする »

まだコメントはありません。

RSS feed for comments on this post. TrackBack URI

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

WordPress.com で無料サイトやブログを作成.

%d人のブロガーが「いいね」をつけました。