2016-05-17 7 views
0

私のアプリはタブで文書を開き、ウェブブラウザーに似た各タブの一番上にはStackPanelの行にButtonsという行があり、文書に影響する機能があります。これらのButtonsは各文書を処理し、各文書に属しているため、文書とともにバインディングから動的に生成されます。UWP/WinRT:ウィンドウを新しい位置にリサイズしたときにボタンを移動する方法は?

私は、ウィンドウのサイズが一定の幅を下回ったときにスペースを節約するために、これらのボタンをFlyoutに移動し、必要に応じてスタイルを変更するようにしたいと考えています。

エッジブラウザは、ハブ、Webノート、および共有ボタンでこのような処理を行います。

どうすればいいですか? AdaptiveTriggersを使用するだけで可能ですか?または、これはコードの背後で行われますか?

答えて

1

あなたはあなたが小さな画面上で探している動作がオフの場合

if ((Window.Current.Bounds.Width < YOUR_WIDTH) || (Window.Current.Bounds.Height< YOUR_HEIGHT)) 
    { 
    // change Visibility or Move items 
    } 
0

でバウンドをチェックすると

page_SizeChanged 

を扱うことができるの後ろのコードでこれを行うにしたい場合キャンバスメニューを作成したら、これを行う方法の1つがあります。

オフキャンバスの拡張機能、あなたはmmenu

それを設定する方法の感触を得るためにこれをプレイされたために働くだろう1はたくさんのがあります。あなたが探しているスライド動作を提供します。

Mmenuは常にメニューを折りたたむので、最後のステップは、狭いビューポートでのみ折り畳まれるように動作を変更することです。これを行う1つの方法は、メニューをラッピングするクラス名を切り替えることです。あなたのメニューは、jQueryのドキュメント準備文の中、その後

<nav class="my-menu"> 
.... 
</nav> 

ある場合たとえば、あなたはビューポートが900px以上の幅である場合には、これは.MY-メニュークラスを削除します以下

$(window).resize(function() { 
if ($(window).width() >= 900){ 
    $('.my-menu').addClass('my-menu-off').removeClass('my-menu'); 
} else { 
    $('.my-menu-off').addClass('my-menu').removeClass('my-menu-off'); 
} 

}).trigger('resize'); 

ような何かを行うことができますメニューが崩壊することはありません。画面が<の場合、900pxのmmenuはその魔法を実行します。

私はアプローチがあなたの既存のHTMLに適応しやすいので、良いと思います。 jQueryがプロジェクトにまだ含まれていない場合は、jQueryとmmenu jsとcssファイルを追加するだけです。

幸運を祈る!

関連する問題