寧Zhangさんのブログ

はじめ

これは、カスタマイズのSilverlight Toolkitのコントロールシリーズの第二の投稿です。 この記事では、パンダをカスタマイズする方法を示します、そしてほとんどのからのカスタマイズ依頼提供のSilverlight Toolkitの フォーラムを 。

パンダのカスタマイズ

エキスパンダーをカスタマイズするには、それはそのAPIとデフォルトのテンプレートを理解し、そして再テンプレートにコントロールをブレンドを使用する方法を知ることが非常に重要です。 私は非常に私の前のポスト読んでお勧めのSilverlight ToolkitのExpanderコントロールをまだお持ちでない場合。 パンダをカスタマイズするためのキー：

• ：パンダのインタフェース、特にそのコントロールコントラクトを理解する
  • パンダは、そのテンプレートの1つのテンプレートの一部、"ExpanderButton"という名前のトグルボタンを、期待しています。 Silverlightは双方向のバインディングをサポートしていないため、その展開/折りたたみ機能は、このテンプレートパーツの存在に依存します。
  • パンダは、ユーザーがその動作を展開したり折りたたんだりカスタマイズするためのExpansionStatesビジュアルステートグループを（開いたり閉じたりつのVisual状態を含む）を公開しています。
  • パンダは、4つの拡大方向のそれぞれのレイアウトをカスタマイズするユーザーのためExpandDirectionStatesビジュアルステートグループを（ExpandDown、ExpandUp、ExpandLeft、ExpandRightを含む）を公開しています。
  • パンダはまた、ヘッダとコンテンツの一部をカスタマイズするユーザーのためにHeaderTemplateおよびContentTemplateプロパティを公開します。 次の場所からこの種のカスタマイズを見つけることができるのSilverlightコントロールツールキットのサンプル 。

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

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

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

ソースコード

zipで固められたプロジェクトファイルを見つけることができます。

結論

パンダは私のブログへトップキーワードとなっている。 それは非常に有用なコントロールとカスタマイズが比較的困難です。 うまくいけばこの記事は、Expanderを使用してカスタマイズする際に役立ちます。 ありがとう！