可以'；无法使用Click或Command来处理动态创建的MenuFlyOutItems
本文关键字：处理 Command 动态 创建 MenuFlyOutItems Click 可以 | 更新日期: 2024-10-22 17:49:21
我有一个TreeView，里面有几个层。每个项都填充了MenuFlyoutItem的ObservableCollection，这取决于它在运行时动态创建的对象类型。需要注意的是，这是在Windows 10通用应用程序中，因此任何解决方案或建议都需要与它们相关。
TreeView对象的创建方式如下：
public TreeViewItemModel(object thing)
{
MenuItems.Clear();
if (thing.GetType() == typeof (Space))
{
var space = (Space)thing;
var parentName = string.Empty;
if (space.Parent != null)
{
parentName = space.Parent.Name;
}
Name = space.Name;
ParentName = parentName;
Id = space.Id;
var addDeviceMenuItem = new MenuFlyoutItem { Name = "AddDevice", Text = "Add Device"};
var addSensorMenuItem = new MenuFlyoutItem { Name = "AddSensor", Text = "Add Sensor" };
var addSpaceMenuItem = new MenuFlyoutItem { Name = "AddSpace", Text="Add Space"};
var updateMenuItem = new MenuFlyoutItem { Name = "UpdateSpaceInfo", Text = "Update Space Info" };
var deleteMenuItem = new MenuFlyoutItem { Name = "DeleteSpace", Text = "Delete Space" };
var items = new ObservableCollection<MenuFlyoutItem> {addDeviceMenuItem, addSensorMenuItem,addSpaceMenuItem, updateMenuItem, deleteMenuItem};
MenuItems = items;
Children = new ObservableCollection<TreeViewItemModel>(space.Children.Select(s => new TreeViewItemModel(s)).Union(space.Devices.Select(d => new TreeViewItemModel(d)).Union(space.Sensors.Select(sensor => new TreeViewItemModel(sensor)))));
}
else if (thing.GetType() == typeof (Device))
{
var device = (Device) thing;
var parentName = device.Space.Name;
Name = device.Name;
ParentName = parentName;
Id = device.Id;
var addMenuItem = new MenuFlyoutItem { Name = "AddSensor", Text = "Add Sensor" };
var updateMenuItem = new MenuFlyoutItem { Name = "UpdateDeviceInfo", Text = "Update Device Info" };
var deleteMenuItem = new MenuFlyoutItem { Name = "DeleteDevice", Text = "Delete Device" };
var items = new ObservableCollection<MenuFlyoutItem> { addMenuItem, updateMenuItem, deleteMenuItem };
MenuItems = items;
Children = new ObservableCollection<TreeViewItemModel>(device.Sensors.Select(s => new TreeViewItemModel(s)));
}
else if (thing.GetType() == typeof(Sensor))
{
var sensor = (Sensor) thing;
var space = sensor.Space.Name ?? string.Empty;
var device = sensor.Device;
ParentName = device == null ? "No Matching Device" : device.Name;
Name = sensor.Id.ToString();
Id = sensor.Id;
ParentName = space;
var updateMenuItem = new MenuFlyoutItem { Name = "UpdateSensorInfo", Text = "Update Sensor Info" };
var deleteMenuItem = new MenuFlyoutItem { Name = "DeleteSensor", Text = "Delete Sensor" };
var items = new ObservableCollection<MenuFlyoutItem> {updateMenuItem, deleteMenuItem};
MenuItems = items;
Children = null;
}
}
我在xaml中的树视图如下：
<controls:TreeView x:Name="TreeViewList" Grid.Row="0" Margin="5" ItemsSource="{Binding TreeSpaces}">
<controls:TreeView.ItemTemplate>
<DataTemplate>
<data:DataTemplateExtensions.Hierarchy>
<data:HierarchicalDataTemplate ItemsSource="{Binding Children}"/>
</data:DataTemplateExtensions.Hierarchy>
<Button x:Name="TreeButton" Content="{Binding Name}" BorderThickness="0" BorderBrush="Transparent" Background="Transparent">
<Button.Flyout>
<Flyout common:BindableFlyout.ItemsSource="{Binding MenuItems}">
<common:BindableFlyout.ItemTemplate>
<DataTemplate>
<MenuFlyoutItem Text="{Binding Text}"/>
</DataTemplate>
</common:BindableFlyout.ItemTemplate>
</Flyout>
</Button.Flyout>
</Button>
</DataTemplate>
</controls:TreeView.ItemTemplate>
</controls:TreeView>
我似乎无法在MenuFlyoutItem上触发任何形式的事件处理。
最初，我尝试了<MenuFlyoutItem Name={Binding Name} Text={Binding Text} view:EventHandlers.Attach="Click"/>。这可以通过自定义MVVM实现将事件附加到ViewModel处理程序。在幕后，我们的附加机制采用对象的名称并与Click相关联，因此如果名称为SaveButton：public void SaveButton_Click(object sender, RoutedEventArgs e)，则在视图模型中会是这样。现在，我通常从来没有遇到过这个问题，但我认为这个问题可能源于试图对MenuFlyoutItem的Name使用DataBinding，而不是传统的x:Name="blah blah"；然而，尝试也没有奏效。我想这可能是因为它是一个MenuFlyoutItem，而不是一个按钮，所以我试着用所有相应的东西把它改成<Button/>，但也不起作用。因此，我返回MenuFlyoutItem，并尝试使用Command属性。即CCD_ 5。然后在我的ViewModel中，我有以下内容：
public RelayCommand<object> MenuItemSelected { get; internal set; }
public TreeViewPageVM()
{
MenuItemSelected = new RelayCommand<object>(TestAction);
}
private void TestAction(object sender)
{
}
那也没用。。。因此，尽管我很想使用MVVM，但我还是尝试了使用传统的<MenuFlyoutItem x:Name="MenuItem" Text="{Binding Text} Click="MenuItem_Clicked"和相应的private void MenuItem_Clicked(object sender, RoutedEventArgs e)处理程序进行代码隐藏。令我惊讶的是，这也没有奏效。因此，我不确定是什么原因导致了MenuFlyoutItem生成事件的能力受到抑制，但如果能提供一些帮助，我将不胜感激。
理想情况下，无论是单击事件还是命令事件，我都希望在ViewModel中处理它，并且我希望命令或单击事件能够获取生成弹出菜单的按钮上的Content（在事件的后期处理过程中我需要它）以及单击的MenuFlyoutItem中的Text。
以防需要进一步澄清：我会在树中有这样的对象
----Object1
--------SubObject
如果我单击"子对象"（在本例中是一个附加了弹出按钮的按钮），则会显示一个弹出菜单，其中包含"添加"、"更新"、"删除"等选项。例如，当我单击/点击Add时，我需要我的结束事件处理程序或命令知道SubObject（特别是它是Content，因为它是一个按钮）和被单击的MenuFlyoutItem（特别是Text属性，这样我就知道我是否需要添加、更新或删除）。
上面给出的快速而正确的答案（即在创建MenuFlyoutItem的同一代码中添加命令）会导致您的代码违反MVVM模式，因为您在ViewModel中创建View的控件，所以更好的解决方案是
1） 实现弹出的ViewModel
public class DeviceViewModel
{
public string Name { get; set; }
internal int treeNum;
private DelegateCommand flyoutCommand;
public ICommand FlyoutCommand
{
get
{
if (flyoutCommand == null)
{
flyoutCommand = new DelegateCommand((parameter) => FlyoutLogic(), (parameter) => CanFlyout());
}
return flyoutCommand;
}
}
private bool CanFlyout()
{
return true;
}
private void FlyoutLogic()
{
Debug.WriteLine("here we go " + Name + treeNum);
}
}
2） 实例化ViewModel
var addDeviceMenuItem = new DeviceViewModel { Name = "AddDevice", treeNum = _itemId };
var addSensorMenuItem = new DeviceViewModel { Name = "AddSensor", treeNum = _itemId };
var addSpaceMenuItem = new DeviceViewModel { Name = "AddSpace", treeNum = _itemId };
var updateMenuItem = new DeviceViewModel { Name = "UpdateSpaceInfo", treeNum = _itemId };
var deleteMenuItem = new DeviceViewModel { Name = "DeleteSpace", treeNum = _itemId };
var items = new ObservableCollection<DeviceViewModel> { addDeviceMenuItem, addSensorMenuItem, addSpaceMenuItem, updateMenuItem, deleteMenuItem };
tree.Add(
new TreeItemModel
{
Branch = b,
Depth = d,
Text = "Item " + _itemId++,
Children = BuildTree(d, b),
MenuItems = items
});
带有
ObservableCollection<DeviceViewModel> _menuItems;
public ObservableCollection<DeviceViewModel> MenuItems
{
get { return _menuItems; }
set { this.SetProperty(ref _menuItems, value); }
}
3） 最后将XAML绑定到ViewModel
<controls:TreeView x:Name="TreeViewList" Grid.Row="0" Margin="5" ItemsSource="{Binding TreeItems}">
<controls:TreeView.ItemTemplate>
<DataTemplate>
<data:DataTemplateExtensions.Hierarchy>
<data:HierarchicalDataTemplate ItemsSource="{Binding Children}"/>
</data:DataTemplateExtensions.Hierarchy>
<Button
x:Name="TreeButton" Content="{Binding Text}" BorderThickness="3" Background="Transparent">
<Button.Flyout>
<Flyout common:BindableFlyout.ItemsSource="{Binding MenuItems}">
<common:BindableFlyout.ItemTemplate>
<DataTemplate>
<MenuFlyoutItem Text="{Binding Name}" Command="{Binding FlyoutCommand}"/>
</DataTemplate>
</common:BindableFlyout.ItemTemplate>
</Flyout>
</Button.Flyout>
</Button>
</DataTemplate>
</controls:TreeView.ItemTemplate>
</controls:TreeView>
您可以在创建MenuFlyoutItem的同一代码中添加命令，因此
var addDeviceMenuItem = new MenuFlyoutItem { Name = "AddDevice", Text = "Add Device"
};
addDeviceMenuItem.Command = AddDeviceCommand;