Bouton avec un pop-up

Question

J'ai un bouton, lorsque l'utilisateur place la souris sur l'élément que je veux afficher un popup. À l'intérieur de ce menu contextuel, contient des boutons sur lesquels l'utilisateur peut cliquer. Tout cela à l'intérieur d'un contrôle Items.

Je montre déjà le menu contextuel lorsque l'utilisateur a mis la souris sur le bouton, mais je ne sais pas comment:

1) Masquer pop-up si l'utilisateur n'a pas « focus » sur le menu contextuel.

2) Si le focus utilisateur sur pop-up, après avoir mis l'accent sur le bouton, la fenêtre doit rester ouvert

Mon code maintenant:

<Button x:Name="MyButton" MouseEnter="LabelShift_MouseDown" Background="{x:Null}" BorderBrush="{x:Null}" Style="{DynamicResource SquareButtonStyle}" > 
     <Grid MaxHeight="80"> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="3*"/> 
       <RowDefinition Height="2*"/> 
      </Grid.RowDefinitions> 
      <Viewbox Grid.Row="0" > 
       <TextBlock Name="Identifier" FontSize="26" Margin="10,10,10,10" Foreground="White" Text="{Binding Identifier}"/> 
      </Viewbox> 
      <Viewbox Grid.Row="1" VerticalAlignment="Bottom"> 
       <TextBlock Name="Value" FontSize="24" Margin="10,10,10,10" Foreground="White" Text="{Binding Total, StringFormat='C'}"/> 
      </Viewbox> 
     </Grid> 
     <Button.Triggers> 
      <EventTrigger RoutedEvent="MouseEnter"> 

       <BeginStoryboard> 
        <Storyboard> 
         <BooleanAnimationUsingKeyFrames 
            Storyboard.TargetName="ToolTip" 
            Storyboard.TargetProperty="IsOpen"> 
          <DiscreteBooleanKeyFrame 
             KeyTime="00:00:00" 
             Value="True" /> 
         </BooleanAnimationUsingKeyFrames> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger> 
      <EventTrigger RoutedEvent="MouseLeave"> 

       <BeginStoryboard> 
        <Storyboard> 
         <BooleanAnimationUsingKeyFrames 
            Storyboard.TargetName="ToolTip" 
            Storyboard.TargetProperty="IsOpen"> 
          <DiscreteBooleanKeyFrame 
             KeyTime="00:00:00" 
             Value="False" /> 
         </BooleanAnimationUsingKeyFrames> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger> 

     </Button.Triggers> 
    </Button> 


<Popup x:Name="ToolTip" PlacementTarget="{Binding ElementName=MyButton}" StaysOpen="True" Placement="Bottom" Height="Auto" Width="{Binding ActualWidth, ElementName=MyButton}" AllowsTransparency="True"> 
    <Grid> 
     <Border BorderBrush="#909090" BorderThickness="1" CornerRadius="1" > 
      <StackPanel Margin="10"> 
       <!-- Content/Elements--> 
      </StackPanel> 
     </Border> 
    </Grid> 
<Popup.Triggers> 
    <EventTrigger RoutedEvent="MouseEnter"> 

     <BeginStoryboard> 
      <Storyboard> 
       <BooleanAnimationUsingKeyFrames 
                    Storyboard.TargetName="ToolTip" 
                    Storyboard.TargetProperty="IsOpen"> 
        <DiscreteBooleanKeyFrame 
                     KeyTime="00:00:00" 
                     Value="True" /> 
       </BooleanAnimationUsingKeyFrames> 
      </Storyboard> 
     </BeginStoryboard> 
    </EventTrigger> 

</Popup.Triggers> 

Answer 1

Voici un exemple simple de la façon d'atteindre menu déroulant. La raison pour laquelle je partage est parce que:

a) Il hérite du ToggleButton, fournissant toutes les fonctionnalités dont nous avons besoin.

b) Petit code.

c) Cela fonctionne!

using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Controls.Primitives; 
using System.Windows.Data; 

namespace Controls 
{ 
    public class DropDownButton : System.Windows.Controls.Primitives.ToggleButton 
    { 
     public static readonly DependencyProperty DropDownProperty = DependencyProperty.Register("DropDown", typeof(ContextMenu), typeof(DropDownButton), new UIPropertyMetadata(null)); 
     public ContextMenu DropDown 
     { 
      get 
      { 
       return (ContextMenu)GetValue(DropDownProperty); 
      } 
      set 
      { 
       SetValue(DropDownProperty, value); 
      } 
     } 

     public DropDownButton() 
     { 
      // Bind the ToogleButton.IsChecked property to the drop-down's IsOpen property 
      Binding binding = new Binding("DropDown.IsOpen"); 
      binding.Source = this; 
      this.SetBinding(IsCheckedProperty, binding); 
     } 

     protected override void OnClick() 
     { 
      if (DropDown != null) 
      { 
       //If there is a drop-down assigned to this button, then position and display it 
       DropDown.PlacementTarget = this; 
       DropDown.Placement = PlacementMode.Bottom; 
       DropDown.IsOpen = true; 
      } 
     } 
    } 
} 

Si vous souhaitez utiliser un UserControl à la place du ContextMenu, vous pouvez simplement ajouter une nouvelle propriété à ladite commande appelé IsOpen, et, suivant la même logique que ci-dessus exemple, peut utiliser des liaisons pour montrer la UserControl seulement lorsque le ToggleButton est cochée.