Windows 10 UAP : Photo っぽいSplitView を作るには（途中）

 Win10 UAP のお手本として参考にしているMicrosoft の「Photo」、良く見ると結構謎な動きをしていて…

Win10 の Photo
ダンジョン出会いの奴面白いですね作画もいいし（関係無い）

• 動作からすると画面上部のバーはCommandBar (※)
• CommandBarの上には基本AppBarButton、AppBarToggleButton, Splitterくらいしか置けないはずなんだけど何故か「Collection」という字が乗っている
• CommandBar、の親のTopAppBar・BottomAppBarはPageに生やすので、その上に何か乗ったりはしないはずなんだけど、SplitViewのPaneを展開すると上に被さってるように見える

※ CommandBar・AppBar共に見え方がWin8.1から変わっています　既定はボタンが見えてる状態の「Compact」State 　昔のツールバーチックな使い方が想定されてるように見えます。

どうやってんでしょうね？


うーｎうーｎとそれっぽいのを作ってみたのが下です。

フォトのまねっこ

実現のキモとしては、

• CommandBarのCompositeModeをMinBlendにして、他のElementの上書きを許す　又下の文字を透かす
• そのままだとAppBarButtonのHoverが効かないので、ボタンのCompositeModeはそれぞれSourceOverに設定
• そのままだとSplitViewのPaneを展開したときにCommandBarのBgColorが透けて見えてしまうので、PaneのOpen・Closeに合わせてCommandBarのLeftMarginを変える（ダサい…）
• 「CommandBar上の」TextBlockは、実はCommandBarでは無くその下のRelativePanelに置いてしまう（ダサい…）

現状、動作の面でPhotoと違うのはCommandBar右端の「…」のHoverEffectが効かない所です。

ただ、ご覧になると判るようにかなり無理やりなので、今後の保守性・拡張性、また電話用にVisualState をくっつけていくと破綻するのでは…等、大いに不安が残る所です。
話半分で見て下さい。

加えて、CodeBehindでCommandBarのMarginを変えています。

 

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            if (mySplitter.IsPaneOpen)
            {
                cbTop.Margin = new Thickness(mySplitter.CompactPaneLength, 0, 0, 0);
                mySplitter.IsPaneOpen = false;
            }
            else
            {
                cbTop.Margin = new Thickness(gdSplitterPane.ActualWidth, 0, 0, 0);
                mySplitter.IsPaneOpen = true;
            }
        }