CheckBoxStyle の修正：スタイルを作ったら辞書に登録♪

#wpdev_jp #win8dev_jp

さて、前回の作ったCheckBox Style をちょっと修正。こういったオリジナルの部品は単体のファイルとして保存しておくといいですね。

リソースはまとめて再利用

リソースは ResourceDictionary ファイルとして保存しておくと便利なのでお勧めです。今回のリソースも ResourceDictionary  にまとめてみました。この ResourceDictionary  は Windows 8 / Windows Phone 8 のいずれにも利用可能です。

使い方

まずは、プロジェクトを作ります。そして、プロジェクトにリソースファイルを追加します。

アプリケーションでリソースファイルが使えるように App.xaml に以下の行を追加します。

App.xaml

 <Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Common/StandardStyles.xaml"/>
            <!--以下の行を挿入-->
            <ResourceDictionary Source="Dictionary.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

ではコントロールを配置して、使ってみます。 MainPage.xaml のページの CheckBox コントロールを配置します。mycheck と名前を付けておきましょう。で、プロパティの寄せ集めのStyle から ローカルリソース＞FunnyCheckBox を選択します。併せてボタンも配置します。

こんな感じで。

MainPage.xaml

 <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <!--以下を追加-->
    <StackPanel Width="200" VerticalAlignment="Center">
        <CheckBox x:Name="mycheck" Content="ちぇっくぼっくす" 
                    Style="{StaticResource FunnyCheckBoxStyle}" />
        <Button Content="Enable / Disable Change" 
                Click="Button_Click_1"/>
    </StackPanel>
    <!--ここまで-->
</Grid>

あとは、C#の方（MainPage.xaml.cs ）で、Enable/Disable の切り替えをするためのコードを実装。あくまでテスト用です。

MainPage.xaml.cs

 private void Button_Click_1(object sender, RoutedEventArgs e)
{
    mycheck.IsEnabled = !mycheck.IsEnabled;
}

実行結果

以上で完成です。F5キーを押して実行してみましょう。チェックボックスなんでクリックすればチェック状態が変わります。ちょっとまだうまくいかない部分もありますが。まぁなんとか動くはず。下のボタンで Enable / Disabel の状態を切り替えることができます。

左から Unchecked , Checked, Disabled。 動かすとわかりますがアニメーションで切り替わります。

実際、これを作るのにコードは一切書いてません。すべてBlend の機能で作画からコントロールテンプレートの作成、そして各状態での表示の切り替えに、アニメーションの設定を行ってます。リソースへの抽出ももちろんBlend。 もちろん XAML も基本的にはいじってません。

作るプロセスをどこかでご紹介したいですね。

絵をどう扱う？

今回の絵はBlendで描いてます。すべてパスオブジェクト。

PowerPoint でキャラを描く記事の時に Illustrator  でやればいいのに、というメッセージがたくさんありました。作った絵を使う方法として、jpgであるならばそれの方がベターかもしれません。でも、最終的にベクトルベースのグラフィックオブジェクトとして PowerPoint や アプリで使うことが目的なら、その環境で作ったほうがいいんですよね。今回のようにベクトルベースのパーツなら、拡大縮小してもクオリティは変わりませんし、パーツごとに動かすこともできます。

Illustrator のデータをBlendで読み込むことができますが、まだ変換効率がよくない感じがします。ちょっと無駄なオブジェクトを作ってしまうんですよね。機械変換だから仕方がないですが。それよりは(べた塗で大丈夫なら）Blendで描いてしまったほうが良いかと(個人的には）思います。

Dictionary.xaml