Create custom menu with a button wpf - wpf

Question

This is my custom title bar:
That three dot button is a button control. I want to create a menu like this (drew by paint!):
But I don't have any idea. I know there is a "Menu" control but I couldn't use it as I wanted.
"More" button code:
<Button x:Name="More" Grid.Column="1" Style="{DynamicResource TitleBarButton}" IsTabStop="False" Focusable="False">
<Button.Background>
<ImageBrush ImageSource="icons/More.png"/>
</Button.Background>
</Button>

Answer 1

You may replace the Button with a ToggleButton and use a Popup that you bind to the ToggleButton's IsChecked property:
<ToggleButton x:Name="More" Grid.Column="1" Style="{DynamicResource TitleBarButton}" IsTabStop="False" Focusable="False">
<ToggleButton.Background>
<ImageBrush ImageSource="icons/More.png"/>
</ToggleButton.Background>
</ToggleButton>
<Popup IsOpen="{Binding IsChecked, ElementName=More}"
PlacementTarget="{Binding ElementName=More}"
Placement="Bottom">
<StackPanel Width="100" Background="Yellow">
<TextBlock Text="Check For Updates" />
<Grid Background="DarkGray" Height="3" />
<TextBlock Text="Do something else" />
</StackPanel>
</Popup>
You may of course replace the contents of the Popup with whatever you want.

Answer 2

enter image description here
You may need setup menu items to act as buttons
(more WPF button feature int this book)
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="40" />
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="Green">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1.0*" />
<ColumnDefinition Width="40" />
<ColumnDefinition Width="40" />
<ColumnDefinition Width="40" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="1" >
<Menu Height="40" Width="40" Background="Green" >
<MenuItem >
<!-- MENU HEADER -->
<MenuItem.Header>
<Border>
<Image Source="/WpfMenuButton;component/Images/DotsImg.PNG" />
</Border>
</MenuItem.Header>
<!-- MENU ITEM UPDATE -->
<MenuItem Click="CheckUpdate_Click" Background="Chocolate">
<MenuItem.Header>
<TextBlock Text="Check for update" VerticalAlignment="Center" HorizontalAlignment="Center"
Height="30" Width="100" />
</MenuItem.Header>
</MenuItem>
<!-- MENU ITEM WIFI -->
<MenuItem Click="DoSomethingElse_Click" Background="LightGreen">
<MenuItem.Header>
<TextBlock Text="Do something else" VerticalAlignment="Center"
HorizontalAlignment="Center" Height="30" Width="140" />
</MenuItem.Header>
</MenuItem>
<!-- MENU ITEM ABOUT -->
<MenuItem Click="MenuAbout_Click" Background= "LightBlue">
<MenuItem.Header>
<TextBlock Text="About" VerticalAlignment="Center" HorizontalAlignment="Center"
Height="30" Width="140" />
</MenuItem.Header>
</MenuItem>
</MenuItem>
</Menu>
</Grid>
<Grid Grid.Column="2" >
<Button Content="-" Foreground="White" FontSize="28" Background="Green"/>
</Grid>
<Grid Grid.Column="3" >
<Button Content="X" Foreground="White" FontSize="28" Background="Green"/>
</Grid>
</Grid>
</Grid>