C1DropDown の要素

C1DropDown コントロールは、ヘッダー領域とコンテンツ領域の２つのパーツで構成されます。ヘッダーはドロップダウンボックスが開いていないときに表示され、コンテンツはドロップダウン領域をクリックすると表示されます。次の図に、この２つのセクションを示します。

コンテンツは、まったく追加しないこともできますが、ヘッダー領域とコンテンツ領域の一方に追加することも両方に追加することもできます。XAML でコンテンツをヘッダー領域とコンテンツ領域に追加して、C1DropDown コントロールをカスタマイズできます。たとえば、次のマークアップでは、上の図のようなドロップダウンコントロールが作成されます。

	コードのコピー
<Xaml:C1DropDownButton Grid.Row="1" Background="White" x:Name="c1DropDown1" Padding="2" Width="150" HorizontalAlignment="Center" VerticalAlignment="Center" Xaml:C1NagScreen.Nag="True"> <Xaml:C1DropDownButton.Header> <Border x:Name="dropDownBorder" Background="White" /> </Xaml:C1DropDownButton.Header> <Xaml:C1DropDownButton.Content> <Xaml:C1TileListBox x:Name="colorListBox" Height="180" Orientation="Horizontal" ItemTapped="colorListBox_ItemTapped" SelectionMode="None" BorderBrush="{StaticResource ComboBoxPopupBorderThemeBrush}" BorderThickness="{StaticResource ComboBoxPopupBorderThemeThickness}" Background="{StaticResource ComboBoxPopupBackgroundThemeBrush}"> <Border Background="Black" BorderBrush="White" BorderThickness="1"/> <Border Background="DarkGray"/> <Border Background="White" BorderBrush="Black" BorderThickness="1"/> <Border Background="DarkBlue" /> <Border Background="Blue" /> <Border Background="Cyan" /> <Border Background="Teal" /> <Border Background="Green" /> <Border Background="Lime" /> <Border Background="SaddleBrown"/> <Border Background="Orange" /> <Border Background="Yellow" /> <Border Background="Maroon" /> <Border Background="Red" /> <Border Background="Magenta" /> </Xaml:C1TileListBox> </Xaml:C1DropDownButton.Content> </Xaml:C1DropDownButton>

コードのコピー

<Xaml:C1DropDownButton Grid.Row="1" Background="White" x:Name="c1DropDown1" Padding="2" Width="150" HorizontalAlignment="Center" VerticalAlignment="Center" Xaml:C1NagScreen.Nag="True">
            <Xaml:C1DropDownButton.Header>
               <Border x:Name="dropDownBorder" Background="White" />
            </Xaml:C1DropDownButton.Header>
            <Xaml:C1DropDownButton.Content>
                <Xaml:C1TileListBox x:Name="colorListBox"
                                  Height="180"
                                  Orientation="Horizontal"
                                  ItemTapped="colorListBox_ItemTapped"
                                  SelectionMode="None"
                                  BorderBrush="{StaticResource ComboBoxPopupBorderThemeBrush}"
                                  BorderThickness="{StaticResource ComboBoxPopupBorderThemeThickness}"
                                  Background="{StaticResource ComboBoxPopupBackgroundThemeBrush}">
                    <Border Background="Black" BorderBrush="White" BorderThickness="1"/>
                    <Border Background="DarkGray"/>
                    <Border Background="White" BorderBrush="Black" BorderThickness="1"/>

                    <Border Background="DarkBlue" />
                    <Border Background="Blue" />
                    <Border Background="Cyan" />

                    <Border Background="Teal" />
                    <Border Background="Green" />
                    <Border Background="Lime" />

                    <Border Background="SaddleBrown"/>
                    <Border Background="Orange" />
                    <Border Background="Yellow" />

                    <Border Background="Maroon" />
                    <Border Background="Red" />
                    <Border Background="Magenta" />
                </Xaml:C1TileListBox>
            </Xaml:C1DropDownButton.Content>
        </Xaml:C1DropDownButton>

ヘッダーとコンテンツを定義するために <Xaml:C1DropDown.Header> タグと <Xaml:C1DropDown.Content> タグが使用されていることに注意してください。これらのタグの内側にコントロールとコンテンツを追加できます。