dragan10

The Silverlight Geek - ツールキットのリリースとテーマ

2008-12-17 01:13:10

本日Microsoft PDCにおいて、スコット・ガスリーがSilverlight Toolkitの一部として提供される新しいコントロールをいくつかデモしました。

(訳注:原文は10/28のポストです)

 Silverlight Toolkitは、これまでSilverlight Contol Packと呼ばれていたものです。

このツールキットは、Silverlight 2にコントロール群とテーマを提供します。

    * AutoCompleteBox
    * Chart
    * DockPanel
    * Label
    * Expander
    * TreeView
    * UpDown
    * ViewBox
    * WrapPanel
    * ImplicitStyleManager

これらのコントロールとそのソースコードは、Ms-Plライセンスの元、Codeplexから入手できます。

歴史的に見れば、チャートは追加でお金を払って手にするもので、サードパーティから提供されていましたが、Silverlightチームは広範かつ拡張性のある一連のチャートコントロールを、無料のソースコードも含めて提供します。私たちはたくさんのHDIビデオとチュートリアルを作成し、これらのコントロールを最大限使っていただけるようにするつもりです。すぐに使い始めたい人のため、Timはもうミニ・チュートリアルをポストずみです。

私は非常に単純なアプリケーションで、テーマを使い始めてみることにします。始めるに当たって、テーマDLLの参照をアプリケーションに追加してください。

便利なように、私はコントロールのDLL群をC:\Program Files (x86)\Microsoft SDKs\Silverlight\v2.0のサブディレクトリに入れているのでご注意ください。これは、そうしなければならないというわけではありません。

これでもう、テーマをBlendやVisual Studioに追加できるようになっています。最初はBlendから始めますが、Xamlがどのようになるのかということと、最低限の表面的なレベルでテーマが何をしてくれるものなのかを知るために、Visual Studioでの様子も見ていきましょう。

Blendでのテーマ

参照が追加できたら、テーマをコントロールとして扱うことができるようになります。シェブロンを開いて、"show all"をクリックし、"custom contols"を選択します(これらのコントロールが入っているのはコアではないことを覚えておいてください)。

ページへテーマを追加するのは、コントロールを追加するのと変わりありません。典型的なケースでは、テーマを上位のFrameworkElementに追加して、その子コントロールたち(内部に置かれたコントロール)にもまとめてテーマを適用することになるでしょう。

テーマが追加できたら、それをダブルクリックしてコンテナ化し、そのテーマの「中」にコントロールを追加すれば、それらのコントロールにテーマが適用されます。

テーマの中には一つだけしかコントロールを置けませんが、もちろんそのコントロールとしてはコンテナ・コントロールが使えます(普通の場合はそうなるでしょう)。以下のような感じになることでしょう。

   1: <UserControl
   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   4:     x:Class="ThemesTest.Page"
   5:     Width="800" Height="600"
   6:     xmlns:shinyRed="clr-namespace:Microsoft.Windows.Controls.Theming;assembly=Microsoft.Windows.Controls.Theming.ShinyRed"
   7:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   8:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   9:     mc:Ignorable="d">
  10: 
  11:     <Grid x:Name="LayoutRoot" Background="White">
  12:         <shinyRed:ShinyRedTheme HorizontalAlignment="Stretch" Margin="0" Width="Auto"
  13:          FontFamily="Verdana" FontSize="24" FontWeight="Bold">
  14:             <Grid Height="Auto" x:Name="InnerGrid" Width="Auto">
  15:               <Grid.ColumnDefinitions>
  16:                     <ColumnDefinition Width="0.1*"/>
  17:                     <ColumnDefinition Width="0.1*"/>
  18:                 </Grid.ColumnDefinitions>
  19: 
  20:                 <Button x:Name="btn"
  21:                     Height="72"
  22:                     HorizontalAlignment="Left"
  23:                     VerticalAlignment="Bottom"
  24:                     Width="244" Margin="0"
  25:                     Content="This button is themed"
  26:                     FontSize="18"  FontFamily="Verdana"/>
  27:                 <CheckBox
  28:                     HorizontalAlignment="Left"
  29:                     VerticalAlignment="Bottom"
  30:                     Margin="10,0,0,0"
  31:                     Width="150" Height="50"
  32:                     Content="CheckBox"
  33:                     Grid.Column="1" />
  34:             </Grid>
  35:         </shinyRed:ShinyRedTheme>
  36:     </Grid>   
  37: </UserControl>
 

注意してほしいのは、一番外側にグリッドを置いて、その中にテーマに入れ、そのテーマの中にもう一つグリッドをおいているところです。これでもう、いつもと同じ、プログラミングに戻ることができます。コントロールには何もしなくても、それらはテーマの中に生成されているので、ボタンやチェックボックスにテーマが適用されています。

これが様々なコントロールにどう影響するかを見るために、少し大きなアプリケーションを作ってみました。このアプリケーションは二つのグリッドを持っていて、一つのグリッドにはテーマが適用されたコントロールがいくつも置かれており、二つ目のグリッドには同じコントロールが、テーマの適用なしに置かれています。

page.xamlは以下の通りです。

<UserControl xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="themes1.Page"
Width="700" Height="650"
xmlns:rainerPurple="clr-namespace:Microsoft.Windows.Controls.Theming;assembly=Microsoft.Windows.Controls.Theming.RainierPurple"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
<Grid x:Name="outer">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*" />
        <ColumnDefinition Width="1*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="1*" />
        <RowDefinition Height="1*" />
    </Grid.RowDefinitions>
    <rainerPurple:RainierPurpleTheme Margin="0,0,0,0"     >
        <Grid x:Name="LayoutRoot" Background="White" Height="600" Width="320" Grid.Column="0" Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.1*"/>
                <ColumnDefinition Width="0.1*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="0.1*"/>
                <RowDefinition Height="0.1*"/>
                <RowDefinition Height="0.8*"/>
            </Grid.RowDefinitions>
            <Button Width="100" Content="Click Me" x:Name="myButton" HorizontalAlignment="Left" FontFamily="Verdana" FontSize="14"  Margin="5,0,0,0" VerticalAlignment="Bottom"/>
            <CheckBox Grid.Column="1" Content="Theme engaged" HorizontalAlignment="Left" IsChecked="True" FontSize="14" FontFamily="Verdana" Margin="5,0,0,0" d:LayoutOverrides="Height" VerticalAlignment="Bottom"/>
            <basics:Calendar DisplayMode="Month" IsTodayHighlighted="True" Grid.Row="2" Grid.Column="0" HorizontalAlignment="Left" Margin="5,0,0,0" Width="150" VerticalAlignment="Top" />
            <PasswordBox Width="111" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" Height="30" Margin="5,0,0,0" VerticalAlignment="Bottom" RenderTransformOrigin="0.5,0.5" />
            <StackPanel HorizontalAlignment="Stretch" Margin="0,0,0,0"
            Grid.Row="1" Grid.Column="1" Orientation="Horizontal">
                <RadioButton x:Name="rb1" GroupName="Grp1" Content="yes" IsChecked="true" Width="50" Height="20" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="5,0,0,0" />
                <RadioButton x:Name="rb2" GroupName="Grp1" Content="no" Width="50" Height="20" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="5,0,0,0" />
            </StackPanel>
            <Button Height="42" Margin="36,82,46,0" VerticalAlignment="Top" Grid.Column="1" Grid.Row="2" Content="Button"/>
        </Grid>
    </rainerPurple:RainierPurpleTheme>
    <Grid x:Name="LayoutRoot2" Background="White" Height="600" Width="320" Grid.Row="0" Grid.Column="1" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.1*"/>
            <ColumnDefinition Width="0.1*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="0.1*"/>
            <RowDefinition Height="0.1*"/>
            <RowDefinition Height="0.8*"/>
        </Grid.RowDefinitions>
        <Button Width="100" Content="Click Me" x:Name="myButton2" HorizontalAlignment="Left" FontFamily="Verdana" FontSize="14" Margin="5,0,0,0" VerticalAlignment="Bottom"/>
        <CheckBox Grid.Column="1" Content="Theme engaged" HorizontalAlignment="Left" IsChecked="True" FontSize="14" FontFamily="Verdana" Margin="5,0,0,0" d:LayoutOverrides="Height" VerticalAlignment="Bottom"/>
        <basics:Calendar DisplayMode="Month" IsTodayHighlighted="True" Grid.Row="2" Grid.Column="0" HorizontalAlignment="Left" Margin="5,0,0,0" Width="150" VerticalAlignment="Top" />
        <PasswordBox Width="111" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" Height="30" Margin="5,0,0,0" VerticalAlignment="Bottom" RenderTransformOrigin="0.5,0.5" />
        <StackPanel HorizontalAlignment="Stretch" Margin="0,0,0,0"
            Grid.Row="1" Grid.Column="1" Orientation="Horizontal">
            <RadioButton x:Name="rb1a" GroupName="Grp1" Content="yes" IsChecked="true" Width="50" Height="20" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="5,0,0,0" />
            <RadioButton x:Name="rb2a" GroupName="Grp1" Content="no" Width="50" Height="20" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="5,0,0,0" />
        </StackPanel>
    </Grid>
</Grid>
</UserControl>
 

画面はこのようになります(場所を節約するために調整してあります)。

テーマはApp.xamlでなく.dllにあることにご注意ください。これらのテーマを使って、スタイルやテンプレートを追加するのも自由です。

すでに述べたとおり、このミニ・チュートリアルははじめの一歩に過ぎず、包括的なものではありません。これが役立ちますよう。

 (原文はこちら



※このエントリは ブロガーにより投稿されたものです。朝日インタラクティブ および ZDNet Japan編集部の見解・意向を示すものではありません。
  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]