2015-10-13 42 views
5

ユニバーサル・ウィンドウズ・プラットフォームのHamburger-style SplitView controlは、IMOに最適です。しかし、私のプロジェクトにはWPFのフロントエンドがあります。UWPのSplitViewハンバーガーメニューに相当するWPFはありますか?

誰かがこれに相当するWPF(できればオープンソース)を知っていますか?

+0

マテリアルデザインXAMLツールキットとMahAppsには、それぞれ(オープンソースとフライアウト)http://materialdesigninxaml.netまたはhttp://mahapps.com/があります。どちらもオープンソースです。 –

+0

GitHubで同じハンバーガーメニューを利用できます[このビデオをチェック](https://www.youtube.com/watch?v=InVsajohErQ) – Sender

+0

@JamesWillockこれのサンプル実装を見たことがありますか?デフォルトの引き出しとフライアウトは、それは右に見えるようにビットワークを取るだろう – tofutim

答えて

2

GridSplitter制御とストーリーボードを使用して、あなたは非常に簡単にこれを設定することができます。ハンバーガーのように見えるようにするには、このコードを少し微調整する必要があるかもしれませんが、これはあなたをうまくやってくれるはずです。

<UserControl 
x:Class="Namespace.MainPage" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
x:Name="mainPage"> 

<Grid> 
    <Grid.Resources> 
     <Storyboard x:Name="CloseLeft"> 
      <DoubleAnimation x:Name="animNavLinksClose" 
          Storyboard.TargetName="mainPage" Storyboard.TargetProperty="NavLinksWidth" 
          To="0.0" Duration="00:00:00.2" /> 
     </Storyboard> 
     <Storyboard x:Name="OpenLeft"> 
      <DoubleAnimation x:Name="animNavLinksOpen" 
          Storyboard.TargetName="mainPage" Storyboard.TargetProperty="NavLinksWidth" 
          From="0" To="170" Duration="00:00:00.2" /> 
     </Storyboard> 
    </Grid.Resources> 

    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="170" x:Name="NavLinksColumn" /> 
     <ColumnDefinition Width="Auto" /> 
     <ColumnDefinition Width="*" /> 
    </Grid.ColumnDefinitions> 

    <Grid x:Name="grdNavLinks" Grid.Column="0"> 
     <!-- Navigation Buttons --> 
    </Grid> 

    <GridSplitter x:Name="spltNavLinks" Grid.Column="1" /> 

    <Grid x:Name="contentSection" Grid.Column="2"> 
     <!-- Content or Frame --> 
    </Grid> 
</Grid> 
</UserControl> 

次に、あなたがこの

// Begin Opening Animation 
OpenLeft.Begin(); 

// Begin Closing Animation 
CloseLeft.Begin(); 
+0

私はこれをまだ試していませんが、DisplayModeプロパティのUWPのCompactOverlayオプションをサポートしています。展開すると、テキストがオーバーレイとして表示され、折りたたまれてもアイコンだけが表示されます。 – BCA

+0

いいえ、独自のカスタムコントロールを実装する必要があります。カスタムコントロールは、CompactOverlay用の独自のロジックを含んでいます。私はWPFのようなことは認識していません。 WPFに簡単に移植できるSilverlightまたはWinPhone7/8の例をオンラインで検索してみてください。 –

2

でコードビハインドからストーリーボードを呼び出すことができます

hamburger image

関連する問題