Ningの張のブログ

導入

これは、カスタマイズのSilverlight Toolkitのコントロールシリーズの第2の投稿です。 このポストは、示してカスタマイズする方法Expanderをからよく尋ねられたのカスタマイズを提供するSilverlightをToolkitのフォーラム 。

パンダのカスタマイズ

Expanderをカスタマイズするには、非常にそのAPIとデフォルトを理解することが重要テンプレートであり、どのように知っては再コントロールをテンプレートにブレンドを使用する。 私はポストだ以前の非常に私のお勧めをお読みのSilverlight Toolkitのエキスパンダーコントロールがある場合はまだ。 キーはパンダをカスタマイズする：

• 特に、そのコントロールの契約エクスパンダインターフェイスを理解する：
  • Expanderは1つのテンプレートパーツを期待して、トグルボタンは、名前の"ExpanderButton"は、そのテンプレートをします。 そのは、/崩壊関数展開、この部分をテンプレートの存在に依存し、Silverlightは2つの方法をバインディングをサポートしていないため。
  • Expanderは拡張を含む、2つの視覚的な状態を倒壊）ユーザーは、そのが展開して閉じる動作をカスタマイズするためのExpansionStates視覚状態グループ（公開されます。
  • Expanderは）ユーザが各4つの方向性を展開のためのレイアウトをカスタマイズするためにExpandDown、ExpandUp、ExpandLeft、ExpandRightを含むExpandDirectionStates視覚状態グループ（公開されます。
  • Expanderはまた、ユーザー向けのヘッダとコンテンツ部分をカスタマイズするHeaderTemplateとContentTemplateプロパティを公開します。 あなたからのカスタマイズの種類をこの見つけることができますSilverlightコントロールツールキットのサンプル 。

• パンダのデフォルトテンプレートを理解する。 下のスクリーンショットは、既定のテンプレートどのように4つのは、/ ExpansionStatesとExpandDirectionStates視覚的な状態のグループの絵コンテを提供することにより崩壊の拡大の動作方向を拡大するのレイアウトを処理する：
  • 全体のヘッダーテンプレートトグルボタンので、とにかくヘッダーに/コンテンツエリアを折りたたむ展開可能性がありますクリックしている。
  • これは、レイアウトに2 × 2グリッドを使用してヘッダーとコンテンツエリア。
  • それはExpandDirectionによるとExpandDirectionStatesの状態アニメーションを持つことでパンダを産む：
    • それは彼らのGrid.RowとGrid.Columnプロパティをアニメーションでヘッダーとコンテンツエリアを産む。
    • これは正しくそのテンプレートを変更して、ヘッダのトグルボタンを描画します。
  • これは、/ ExpanionStatesの状態遷移での視認性の属性をアニメーションでコンテンツ領域を壊してしまう展開されます。

以下のスクリーンショットは、最も尋ねカスタマイズを示しています。 ている場合はSilverlightは2.0とインストールされて読者は、ライブのSilverlightアプリケーションをサポートする場合は、それをここにも遊ぶことができます：

• PDC08でパンダを示して、現在のリリースCodePlexの上。 またExpanderRightHeaderTemplate（使用のバグは、右にExpandDirectionを設定する場合）が高いCPUとメモリの使用量を発生している。 これは固定され、修正プログラムは、数週間後に私たちの次のリリースになります。 私は不便をおかけしお詫び申し上げます。 パンダは私の非常に最初のSilverlightのコントロールです。 私は数ヶ月前ショーのチームに参加する前に、私は、SilverlightやWPFのについては何も知りませんでしたし、私はまだどのように壊れやすいXAMLおよびアニメーションは信じることができない。 それは私に長い時間を1つの文字修正：多数の1つ（うち）ObjectAnimationKeyFrames追跡にかかった期間は誤って設定属性が"1"の代わりに"0"。 それは/メモリのSilverlightランタイムのナットと豚のCPU行きました。
• の新（ExpanderStyle）新しい間もなくリリースされるテンプレートを示しています。
• フェードインは、/アウト（ExpanderFadeStyle）は/とてコンテンツをフェードインする不透明度をアニメーションで動作を折りたたむ展開をカスタマイズします。
• スケールでは、/アウト（ExpanderScaleStyle）は/ 1と0の間で展開するScaleTransform.ScaleXとScaleTransform.ScaleYをアニメーションとコンテンツを縮小によって動作を折りたたむ展開をカスタマイズします。
• [いいえ]ボタンは、（ExpanderNoButtonStyle）矢印トグルボタンで円を削除してレイアウトをカスタマイズします。 あなたはまだ/コンテンツを閉じる展開することができますマウスまたはキーボード。
• ボトム/右のボタンを（ExpanderBottomRightButtonStyle）矢印で下にヘッダーの/右の部分トグルボタンを円を入れてレイアウトをカスタマイズします。

ソースコード

あなたが圧縮されたプロジェクトファイルを見つけることができます：

結論

パンダは私のブログに最上位のキーワードをされている。 これは非常に便利な制御、比較的ハードカスタマイズすることです。 うまくいけば、この記事は、カスタマイズエキスパンダー使用してのお手伝いをします。 ありがとう！