Context Menu Left Click - wpf

Question

I have a context menu which used to be a pop up menu. When I first load the program the context menu is empty as the menu items are bound to a list. However if I load the program and right click first the list is fine and then I can go to left click and the list appears. I'll show images to help my description:
Left click first
Right click first and also left click after
Can anyone help me understand why this has happened and how to fix it?
Edit - Xaml
<DataTemplate x:Key="AddNodeTemplate">
<StackPanel>
<Button x:Name="buttonAdd">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Style.Triggers>
<EventTrigger RoutedEvent="Click">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="ContextMenu.IsOpen">
<DiscreteBooleanKeyFrame KeyTime="0:0:0" Value="True"/>
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border BorderThickness="0">
<ContentPresenter/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
<Canvas>
<Image Source="Images/bkg_plus.png" Width="30" Height="30" Panel.ZIndex="5"/>
<Rectangle Stroke="LightGray" StrokeDashArray="2 2" Width="120" Height="30" VerticalAlignment="Center" Margin="0,0,0,0"
Tag="{Binding RelativeSource={RelativeSource AncestorType={x:Type syncfusion:Node}}}">
<Rectangle.Fill>
<SolidColorBrush Color="LightGray"/>
</Rectangle.Fill>
</Rectangle>
<TextBlock Text="Add Property" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="30 10 0 0" Background="Transparent"/>
</Canvas>
<Button.ToolTip>
<ToolTip>
<Label Content="Add Property"/>
</ToolTip>
</Button.ToolTip>
<Button.ContextMenu>
<ContextMenu ItemsSource="{Binding AvailableProperties}">
<ContextMenu.Resources>
<Style TargetType="MenuItem">
<Setter Property="Header" Value="{Binding Path=Name}"/>
<Setter Property="ToolTip" Value="{Binding Path=ToolTips}"/>
<Setter Property="Command" Value="{Binding Path=Command}"/>
<Setter Property="CommandParameter" Value="{Binding Path=CommandParameter}"/>
<!--<Setter Property="Icon" Value="{Binding Icon , Converter={StaticResource ImageToSourceConverter}"/>-->
</Style>
</ContextMenu.Resources>
</ContextMenu>
</Button.ContextMenu>
</Button>
</StackPanel>
</DataTemplate>
New Result
Ok so this is now what happens when I do left click first
So I have tried using a pop up and have a menu inside this and this is my XAML for the result, the only problem now is I want to change the highlighted background when the mouse is hovered over the "Add Existing Property" does anyone know how to do that and also move the menu over to the right I'll post a picture up to explain
<DataTemplate x:Key="AddNodeTemplate">
<Border BorderThickness="1" Background="#F7F7F7">
<Border.BorderBrush>
<DrawingBrush Viewport="8,8,8,8" ViewportUnits="Absolute" TileMode="Tile">
<DrawingBrush.Drawing>
<DrawingGroup>
<GeometryDrawing Brush="#F7F7F7">
<GeometryDrawing.Geometry>
<GeometryGroup>
<RectangleGeometry Rect="0,0,50,50"/>
<RectangleGeometry Rect="50,50,50,50"/>
</GeometryGroup>
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</Border.BorderBrush>
<StackPanel>
<ToggleButton Height="30" Width="120" Style="{StaticResource ChromelessToggleButton}" x:Name="toggleButtonAdd" IsHitTestVisible="{Binding ElementName=Popup, Path=IsOpen, Mode=OneWay, Converter={StaticResource OppositeBooleanConverter}}">
<ToggleButton.ToolTip>
<ToolTip>
<Label Content="Add Property"/>
</ToolTip>
</ToggleButton.ToolTip>
</ToggleButton>
<Popup IsOpen="{Binding IsChecked, ElementName=toggleButtonAdd}" x:Name="Popup" StaysOpen="False" Placement="Right">
<Border BorderBrush="Black" BorderThickness="0" Background="#F7F7F7">
<StackPanel Margin="5,10,5,5" Orientation="Horizontal">
<Menu Background="#F7F7F7">
<Menu.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</Menu.ItemsPanel>
<MenuItem Header="Add Exisiting Properties">
<ListBox BorderBrush="Black" BorderThickness="0" Background="Transparent" Margin="5" Padding="4" Width="130"
ItemsSource="{Binding Path=AvailableProperties}" SelectionChanged="Selector_OnSelectionChanged">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="Black"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#5194C7"/>
<Setter Property="FontWeight" Value="Bold"/>
</Trigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Icon, Converter={StaticResource ImageToSourceConverter}}" Width="12" Height="12" Margin="3" VerticalAlignment="Center"/>
<TextBlock Text="{Binding Name}" VerticalAlignment="Center"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</MenuItem>
<MenuItem Header="Upscale Well logs">
</MenuItem>
<MenuItem Header="Upscale well_top attributes">
</MenuItem>
<MenuItem Header="Upscale point attributes">
</MenuItem>
<MenuItem Header="Calculate">
</MenuItem>
</Menu>
</StackPanel>
</Border>
</Popup>
</StackPanel>
</Border>
</DataTemplate>
Picture of menu right under the popup rather than to the right like the above pictures I want the background to be blue rather than the gray background as in the picture below

Answer 1

You can do this by adding a Context Menu and Style like below, I dont think its necessary to go with ListBox inside MenuItem
<Button.ContextMenu>
<ContextMenu ItemsSource="{Binding AvailableProperties}">
<ContextMenu.Resources>
<Style TargetType="MenuItem">
<Setter Property="Header" Value="{Binding Path=Name}"/>
<Setter Property="ToolTip" Value="{Binding Path=ToolTips}"/>
<Setter Property="Command" Value="{Binding Path=Command}"/>
<Setter Property="CommandParameter" Value="{Binding Path=CommandParameter}"/>
<Setter Property="Icon" Value="{Binding Icon , Converter={StaticResource ImageToSourceConverter}"/>
</Style>
</ContextMenu.Resources>
</ContextMenu>
</Button.ContextMenu>