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


#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 もそれなりに整ってきた。

関連リンク

Comments (0)