[FIXED] How do I open/create a menu in WPf with Material Design

Issue

So I´m using Material Design and Caliburn micro. I want to get used to Material Design and im new to WPF. But i have to use both because of work. I want to have a Colorzone in the top of my form.

<materialDesign:ColorZone 
Mode="PrimaryLight"
Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="4"
Padding="16">
    <StackPanel
    Orientation="Horizontal">
        <ToggleButton
        Style="{DynamicResource MaterialDesignHamburgerToggleButton}">               
        </ToggleButton>
        <TextBlock
        VerticalAlignment="Center"
        Margin="16 0 0 0">
        Material Design In XAML Toolkit
        </TextBlock>
    </StackPanel>
</materialDesign:ColorZone>

I got the hamburger button on the right and when i start it the Animation works but how do i open a drawer or a menu when the button is clicked and how do i close it when it is pressed again. Where do i write the code what the button does?

Solution

So I found an Answer:

<materialDesign:ColorZone 
Mode="PrimaryLight"
Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="4"
Padding="16">
    <StackPanel
    Orientation="Horizontal">
        <ToggleButton

        Command="{x:Static materialDesign:DrawerHost.OpenDrawerCommand}"
        CommandParameter="{x:Static Dock.Left}"

        Style="{DynamicResource MaterialDesignHamburgerToggleButton}">               
        </ToggleButton>
        <TextBlock
        VerticalAlignment="Center"
        Margin="16 0 0 0">
        Material Design In XAML Toolkit
        </TextBlock>
    </StackPanel>
</materialDesign:ColorZone>

You have to Add the Command and a CommandParameter for the Hamburger Button.

Now we just need a Drawer that we can open:

<materialDesign:DrawerHost.LeftDrawerContent>
    <StackPanel Margin="16" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >
        <Button 
            Margin="25,10,25,10"
            VerticalAlignment="Top"
            cal:Message.Attach="DoCoolStuff()"

            Command="{x:Static materialDesign:DrawerHost.CloseDrawerCommand}"
            CommandParameter="{x:Static Dock.Left}">

            BlaBlaBlaYour Button Text here
        </Button>
        <Button    
    </StackPanel>
</materialDesign:DrawerHost.LeftDrawerContent>

So now we got a Menubar and A Drawer but they wont work until we write the them both into the following:

<materialDesign:DrawerHost Grid.RowSpan="3" Grid.ColumnSpan="4" Margin="0,0,0,0" BorderThickness="2" BorderBrush="{DynamicResource MaterialDesignDivider}" 
Panel.ZIndex="1">

<materialDesign:ColorZone...>
<materialDesign:DrawerHost.LeftDrawerContent...>

</materialDesign:DrawerHost>

It is important that we give the DrawerHost Panel.ZIndex = 1 because when you have a button where the Drawer should open the button will be in the Foreground but now the Drawer will be.

And thats it, now we have a menubar with a Hamburgerbutton that opens a drawer. A tip for the Button i Added it does not need the Command and the commandparameter but it help when you want to close the drawer when a button is pressed.

I hope i could help somebody

Answered By - user19143260

Answer Checked By - Timothy Miller (PHPFixing Admin)