2011-10-28 58 views
9

¿Cómo es posible crear un menú vertical en el lado izquierdo de la ventana en Visual Studio (en un wpf) con xaml como el de http://www.wpftutorial.net/? Intento el código:Crear un menú vertical en un Wpf

<Menu DockPanel.Dock="Left" VerticalAlignment="Top" Background="Gray" BorderBrush="Black"> 

pero no es la tarea, ya que presenta un menú horizontal en la parte superior.

No es necesario hacerlo definitivamente desde el menú de control. Si cualquier otro control con apariencia similar es apropiado, es aceptable.

+0

¿Tiene una '' DockPanel' alrededor del Menu'? – Jon

+0

Sí, lo hago, no puede funcionar de otra manera. – arjacsoh

+0

puede usar la respuesta aceptada y crear su propia cuenta o https://github.com/beto-rodriguez/MaterialMenu que esté listo para usar –

Respuesta

42

Claro, sólo cambiar MenuItem.ItemsPanel utilizar un StackPanel vertical en lugar de horizontal del defecto uno

<Menu> 
    <Menu.ItemsPanel> 
     <ItemsPanelTemplate> 
      <VirtualizingStackPanel Orientation="Vertical"/> 
     </ItemsPanelTemplate> 
    </Menu.ItemsPanel> 

</Menu> 
+1

@arjacsoh Si el menú es el último elemento que se agrega al DockPanel, entonces por predeterminado, se estirará para llenar todo el espacio restante. Establezca 'LastChildFill =" False "' en su DockPanel, o agregue otro elemento después del menú. El siguiente es un buen enlace para hacerse una idea de los diferentes diseños de WPF: http://www.codeproject.com/KB/WPF/WPFLayoutQS.aspx – Rachel

1

anwer aceptada es buena. Pero es un largo camino para que funcione una buena barra lateral. puede usar este control si lo que necesita ahora es un menú de trabajo.

https://github.com/beto-rodriguez/MaterialMenu

puede instalarlo desde Nuget también.

aquí es un ejemplo

<materialMenu:SideMenu HorizontalAlignment="Left" x:Name="Menu" 
          MenuWidth="300" 
          Theme="Default" 
          State="Hidden"> 
     <materialMenu:SideMenu.Menu> 
      <ScrollViewer VerticalScrollBarVisibility="Hidden"> 
       <StackPanel Orientation="Vertical"> 
        <Border Background="#337AB5"> 
         <Grid Margin="10"> 
          <TextBox Height="150" BorderThickness="0" Background="Transparent" 
           VerticalContentAlignment="Bottom" FontFamily="Calibri" FontSize="18" 
           Foreground="WhiteSmoke" FontWeight="Bold">Welcome</TextBox> 
         </Grid> 
        </Border> 
        <materialMenu:MenuButton Text="Administration"></materialMenu:MenuButton> 
        <materialMenu:MenuButton Text="Packing"></materialMenu:MenuButton> 
        <materialMenu:MenuButton Text="Logistics"></materialMenu:MenuButton> 
       </StackPanel> 
      </ScrollViewer> 
     </materialMenu:SideMenu.Menu> 
    </materialMenu:SideMenu> 

enter image description here

+2

Aunque este es un buen proyecto, "trabajar ahora" es un poco estirar (lo intenté) y no hace lo que pidió el OP, lo que hace la respuesta aceptada. OP pidió un menú, no una barra lateral. –

Cuestiones relacionadas