眠るシーラカンスと水底のプログラマー

　今回はExpanderViewを紹介します。

　 ExpanderViewはWindowsPhone標準のメールアプリでも利用されているので目にしたことがある方も多いと思います。

普段は折りたたまれているけど・・・クリックすると

スライドしてコントロールが表示されます

導入

　ExpanderViewの使い方もこれまでのコントロールと同様に「参照の追加」「xmlnsの追加」です。

参照の追加

NuGetで楽々追加だ

ｘｍｌnsの追加

   xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

　簡単なExpanderViewを表示してみよう。

            <toolkit:ExpanderView Header="ここをクリックすると">
                <toolkit:ExpanderView.Items>
                    <TextBlock Text="スライドしてコントロールが現れます"/>
                </toolkit:ExpanderView.Items>
            </toolkit:ExpanderView>

　最初から表示されているテキストはExpanderViewのHeaderに設定されている。

　スライドして表示される部分はExpanderView.Itemsに定義されている。

　続いてちょっと装飾してみる。

            <toolkit:ExpanderView Header="ここをクリックすると2"  Margin="3,144,-3,-144">
                <toolkit:ExpanderView.Items>
                    <StackPanel  Width="360">
                        <TextBlock Text="スライドしてコントロールが現れます"/>
                        <Image Source="/ExpanderViewSample;component/search_result_bg.png"></Image>
                    </StackPanel>
                </toolkit:ExpanderView.Items>
            </toolkit:ExpanderView>

画像を付けてみた。

同階層にほかのコントロールを配置するとがぶってしまう！！

テキストに重なってしまった！！

こういう場合はListBoxに入れ子にしてあげよう！！

            <ListBox Margin="3,443,-3,-443">
              <toolkit:ExpanderView Header="ここをクリックすると3" Width="420">
                <toolkit:ExpanderView.Items>
                    <StackPanel Width="360">
                        <TextBlock Text="スライドしてコントロールが現れます"/>
                        <Image Source="/ExpanderViewSample;component/search_result_bg.png"></Image>
                    </StackPanel>
                </toolkit:ExpanderView.Items>
            </toolkit:ExpanderView>
            <TextBlock Height="30" Text="ListBoxに入れてあげると重なりません" />
            </ListBox>

　これでスライドに合わせてテキストもダウンするようになった！！

　アコーディオンっぽいね。

 サンプルをダウンロードする(SDK7.1)

これまでの記事を読む

Tweet