ExtendedLibrary for WPF/Silverlight
手順 3：アコーディオンペインの追加
Accordion > Accordion for Silverlight クイックスタート > 手順 3：アコーディオンペインの追加

前の手順では、C1Accordion コントロールの外観と動作をカスタマイズしました。この手順では、いくつかのアコーディオンペインを追加します。これらのペインは、後でカスタマイズし、コンテンツを追加します。

次の手順に従います。

  1. カーソルを <c1:C1Accordion> タグと </c1:C1Accordion> タグの間に置き、［Enter］キーを押します。

  2. ツールバーに移動し、C1AccordionItem アイコンをクリックして、コントロールにアコーディオンペインを追加します。C1Accordion コントロールに合計３つの C1AccordionItem が追加されるように、この手順をもう２回繰り返します。XAML マークアップは次のようになります。

    XAML
    コードのコピー 
    <c1:C1AccordionItem></c1:C1AccordionItem>
<c1:C1AccordionItem></c1:C1AccordionItem>
<c1:C1AccordionItem></c1:C1AccordionItem>

  3. Header="Pane 1" を最初の <c1:C1AccordionItem> タグに、Header="Pane 2" を２番目の <c1:C1AccordionItem> タグに、 Header="Pane 3" を３番目の <c1:C1AccordionItem> タグに追加します。XAML マークアップは次のようになります。

    XAML
    コードのコピー 
    <c1:C1AccordionItem Header="ペイン 1"></c1:C1AccordionItem>
<c1:C1AccordionItem Header="ペイン 2"></c1:C1AccordionItem>
<c1:C1AccordionItem Header="ペイン 3"></c1:C1AccordionItem>

  4. Background="Aqua" を最初の <c1:C1AccordionItem> タグに、Background="AliceBlue" を２番目の <c1:C1AccordionItem> タグに、 Background="LawnGreen" を３番目の <c1:C1AccordionItem> タグに追加します。XAML マークアップは次のようになります。

    XAML
    コードのコピー 
    <c1:C1AccordionItem Header="ペイン 1" Background="Aqua"></c1:C1AccordionItem>
<c1:C1AccordionItem Header="ペイン 2" Background="AliceBlue"></c1:C1AccordionItem>
<c1:C1AccordionItem Header="ペイン 3" Background="LawnGreen"></c1:C1AccordionItem>

  5. 次の手順に従って、最初の２つのアコーディオンペインにコンテンツを追加します。

    1. Content="テキスト" を最初の <c1:C1AccordionItem> タグに追加します。XAML は次のようになります。 <c1:C1AccordionItem Header="ペイン 1" Background="Aqua" Content="テキスト">

    2. カーソルを２組目の <c1:C1AccordionItem> タグと </c1:C1AccordionItem> タグの間に置き、［Enter］キーを押します。

    3. ツールボックスに移動し、［Calendar］アイコンをダブルクリックして、Calendar コントロールを２番目のペインのコンテンツとして追加します。XAML は次のようになります。

      XAML
      コードのコピー 
      <c1:C1AccordionItem Header="ペイン 2" Background="AliceBlue">
    <sdk:Calendar></sdk:Calender>
</c1:C1AccordionItem>

  6. IsExpanded="True" を２番目の <c1:C1AccordionItem> タグに追加します。XAML は次のようになります。

    XAML
    コードのコピー 
    <c1:C1AccordionItem Header="ペイン 2" Background="AliceBlue" IsExpanded="True">

    これにより、Calendar コントロールを保持する２番目のアコーディオンペインが実行時に展開されます。

この手順では、C1Accordion コントロールに３つのアコーディオンペインを追加し、２つのアコーディオンペインにコンテンツを追加しました。次の手順では、プロジェクトを実行し、コントロールの実行時の機能を確認します。

 

 

Copyright © GrapeCity, Inc. All rights reserved.