写真を加工する 5.5 横スクロールするボタンメニュー

  • Article

#wp7dev_jp

さて、いろいろなエフェクトをつけてきましたが、この辺を選択できるメニューが必要です。

そこで横スクロールのボタンメニューを作るわけですが、いくつか方法はあります。

  • リストコントロールを使ってテンプレートを作り横方向リストコントロールにする
  • ピボットを使う
  • スクロールビューワーでボタンを並べる

そもそも使いたいのはメニューだけで画面は必要ないので、ピボットを使うシナリオはなし。リストコントロールも複数選択などはないので、ちょっとオーバースペックかな？ということで単純にスクロールビューワーを使うことにする。

こんな構造。

image

 

どの手法でもいいですが適材適所で。XAMLはシンプルにこんな感じ。横スクロールのバーは非表示にしておく。

 <ScrollViewer Height="146"

    HorizontalScrollBarVisibility="Hidden" 

    VerticalScrollBarVisibility="Disabled">

    <StackPanel Orientation="Horizontal">

        <Button x:Name="btnOriginal" Content="Original">

            <Button.Background>

                <ImageBrush Stretch="None" 

                    ImageSource="Images/Button/オリジナル.jpg"/>

            </Button.Background>

        </Button>

        <Button x:Name="nostalgic" Content="Nostalgic">

            <Button.Background>

                <ImageBrush Stretch="None" 

                    ImageSource="Images/Button/コントラスト.jpg"/>

            </Button.Background>

        </Button>

             :

    </StackPanel>

</ScrollViewer>

実際にはこんな感じになります。

ボタンはスクエアなボタンテンプレートを作成。名前なしのコントロールテンプレートなのでここのボタンのXAMLにはテンプレート参照は書きません。

image

UI もそれなりに整ってきた。

関連リンク