2015-10-13 11 views
5

Hamburger-style SplitView control nella piattaforma Windows universale è perfetto, IMO. Tuttavia, il mio progetto ha un frontend WPF.Esiste un equivalente WPF al menu Hamburger SplitView dell'UWP?

Qualcuno sa di un WPF equivalente a questo (preferibilmente open source)?

+0

Material Design In XAML Toolkit e MahApps sono simili (rispettivamente Drawer e Flyout) http://materialdesigninxaml.net o http://mahapps.com/ ... entrambi sono open source. –

+0

Lo stesso menu di hamburger disponibile su GitHub [guarda questo video] (https://www.youtube.com/watch?v=InVsajohErQ) – Sender

+0

@JamesWillock hai visto qualche esempio di implementazione di questo, il Drawer e il Flyout di default sembrano come ci vorrà ancora un po 'di lavoro per farlo sembrare giusto – tofutim

risposta

2

Utilizzando la GridSplitter di controllo e un StoryBoard, è possibile impostare questo abbastanza facilmente. Potrebbe essere necessario modificare questo codice un po 'per farlo apparire come l'hamburger, ma questo dovrebbe farti star bene sulla tua strada.

<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> 

Poi si può chiamare il proprio storyboard dal code-behind come questo

// Begin Opening Animation 
OpenLeft.Begin(); 

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

Non ho ancora provato questo, ma questo supporterà l'opzione CompactOverlay di UWP per la proprietà DisplayMode, dove espansa mostrerà il testo come una sovrapposizione e, quando compresso, mostrerà solo le icone? – BCA

+0

No, è necessario implementare il proprio controllo personalizzato per ciò che contiene la propria logica per CompactOverlay. Non sono a conoscenza di qualcosa del genere per WPF. Provare a cercare online gli esempi di Silverlight o WinPhone7/8 che possono essere facilmente trasferiti su WPF. –

Problemi correlati