在WPF中，構建帶有按鈕和彈出窗口的UserControl，以及單擊菜單項時如何隱藏彈出窗口？

Question

我建立一個名為MenuPopup的UserControl。 我在帶有MVVM的項目中使用了此控件。

像這樣：

但是現在，我不希望單擊一個MenuItem之后隱藏彈出窗口。 如果通過Menuitems的Click事件將其隱藏，那么如何將命令綁定到ViewModel以處理業務邏輯？

<!--MenuPopup.xaml-->
<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
    mc:Ignorable="d"
    x:Class="WpfApplication10.MenuPopup"
    x:Name="UserControl">

    <UserControl.Resources>
        <Style x:Key="ButtonFocusVisual">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#F3F3F3" Offset="0"/>
            <GradientStop Color="#EBEBEB" Offset="0.5"/>
            <GradientStop Color="#DDDDDD" Offset="0.5"/>
            <GradientStop Color="#CDCDCD" Offset="1"/>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF707070"/>

        <Geometry x:Key="ArrowGraph">M 3,6 L 13,6 L 8,12 Z</Geometry>
        <Geometry x:Key="LineGraph" >M 12.3,7 L 9,11</Geometry>

        <Style x:Key="ArrowMenuButtonStyle" TargetType="{x:Type Button}">
            <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
            <Setter Property="Background" Value="#00FFFFFF"/>
            <Setter Property="BorderBrush" Value="#FFFFFFFF"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Padding" Value="1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <Border BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" BorderThickness="1"/>
                            <Path x:Name="ArrowPath" Data="{StaticResource ArrowGraph}" Fill="#FFFFFFFF"/>
                            <Path x:Name="LinePath" Data="{StaticResource LineGraph}" Fill="#FFD5D5D5" />
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsKeyboardFocused" Value="true"/>
                            <Trigger Property="ToggleButton.IsChecked" Value="true"/>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="#ADADAD"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="Background"  Value="#FF219266"/>
                                <Setter Property="BorderBrush" Value="#FF167559"/>
                                <Setter Property="Fill" TargetName="LinePath" Value="#FF1E7B57"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="true">
                                <Setter Property="Background"  Value="#FF219266"/>
                                <Setter Property="BorderBrush" Value="#FF7ABEA3"/>
                                <Setter Property="Fill" TargetName="LinePath" Value="#FF1E7B57"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot">
        <Grid>
            <Button x:Name="MenuButton" Click="MenuButton_Click" Content="" Width="16" Height="16" BorderThickness="0" Padding="0" Style="{DynamicResource ArrowMenuButtonStyle}" />
            <Popup x:Name="MenuButtonPopup" StaysOpen="False" PlacementTarget="{Binding ElementName=MenuButton}" >
                <Grid>
                    <Border Background="White">
                        <StackPanel >
                            <MenuItem Header="XX1" />
                            <MenuItem Header="XX2" />
                        </StackPanel>
                    </Border>
                </Grid>
            </Popup>
        </Grid>
    </Grid>
</UserControl>

。

// MenuPopup.xaml.cs
namespace WpfApplication10
{
    /// <summary>
    /// Interaction logic for MenuPopup.xaml
    /// </summary>
    public partial class MenuPopup : UserControl
    {

        public MenuPopup()
        {
            this.InitializeComponent();
        }

        private void MenuButton_Click(object sender, RoutedEventArgs e)
        {
            MenuButtonPopup.IsOpen = true;
        }
    }
}

更新：

現在，我同時使用click事件（哪個按鈕）和命令。 代碼隱藏文件中的click事件處理程序，以及ViewModel中的命令。

<!--parts in MenuPopup.xaml -->
<Grid x:Name="LayoutRoot">
    <Button x:Name="MenuButton" Click="MenuButton_Click" Content="" Width="16" Height="16" BorderThickness="0" Padding="0" Style="{DynamicResource ArrowMenuButtonStyle}" />
    <Popup x:Name="MenuButtonPopup" StaysOpen="False" PlacementTarget="{Binding ElementName=MenuButton}" >
        <Grid>
            <Border Background="White">
                <StackPanel >
                    <MenuItem Header="XX1" Click="MenuItem_Click" Command="{Binding IncreaseCommand}"/>
                    <MenuItem Header="XX2" Click="MenuItem_Click" />
                </StackPanel>
            </Border>
        </Grid>
    </Popup>
</Grid>

。

// MenuPopup.xaml.cs
namespace WpfApplication10
{
    /// <summary>
    /// Interaction logic for MenuPopup.xaml
    /// </summary>
    public partial class MenuPopup : UserControl
    {

        public MenuPopup()
        {
            this.InitializeComponent();
        }

        private void MenuButton_Click(object sender, RoutedEventArgs e)
        {
            MenuButtonPopup.IsOpen = true;
        }

        private void MenuItem_Click(object sender, RoutedEventArgs e)
        {
            MenuButtonPopup.IsOpen = false;
        }
    }
}

。

// MainViewModel.cs
using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Command;

namespace WpfApplication10.ViewModel
{
    public class MainViewModel : ViewModelBase
    {
        public MainViewModel()
        {
            IncreaseCommand = new RelayCommand(() => ++Cnt);
        }

        private int cnt = 0;
        public int Cnt
        {
            get { return cnt; }
            set { cnt = value; RaisePropertyChanged("Cnt"); }
        }

        private RelayCommand increaseCommand;
        public RelayCommand IncreaseCommand { get; private set; }
    }
}

Answer 1

您可以在ViewModel上將bool屬性設置為IsPopupOpen，並將Popup.IsOpen綁定到此屬性。 現在將按鈕Command綁定到ViewModel中定義的命令，並將您的命令處理程序中的IsPopupOpen設置為false。

謝謝