带有弹出窗口的按钮

Question

我有一个按钮，当用户将鼠标放在我想要显示弹出窗口的元素上时。 在此弹出窗口中，包含用户可以单击的按钮。 所有这些都在 Itemscontrol 中。

当用户将鼠标放在按钮上时，我已经显示了弹出窗口，但我不知道如何：

1) 如果用户没有“关注”弹出窗口，则隐藏弹出窗口。

2) 如果用户关注弹出窗口，则在关注按钮后，弹出窗口必须保持打开状态

我现在的代码：

 <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

这是一个如何实现下拉功能的简单示例。我分享这个的原因是：

a) 它继承了 ToggleButton，提供了我们需要的所有功能。

b) 小代码。

c) 有效！

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;
            }
        }
    }
}

如果您希望使用 UserControl 代替 ContextMenu，您可以简单地向所述控件添加一个名为 IsOpen 的新属性，并且按照与上述示例相同的逻辑，可以使用绑定仅在 ToggleButton 为检查。