如何在 SilverLight 中使用触发器调用方法创建元素？

Question

这个问题是上一个问题的延续。( 如何我可以在 SilverLight 中组合一些 UserControls 吗？） 我有 3 个具有不同颜色属性的视图模型。

按下元素上的按钮后，如何使用触发器调用方法创建用户控件的元素。

这是我通过触发操作升级的该元素的代码。

<UserControl x:Class="SilverlightApplication14.NodePicture"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:SilverlightApplication14"
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity">


    <Grid x:Name="LayoutRootNodePicture" Height="100" Width="100"
      HorizontalAlignment="Center">
        <Canvas x:Name="ParentCanvas" Background="{Binding NodeColor}" Width="100" Height="100" >
        </Canvas>
        <Image HorizontalAlignment="Center"
                   Source="add.png"
                   Stretch="Fill"
                   Width="16"
                   VerticalAlignment="Top"
                   Margin="0,0,2,2"
                   Height="16" >
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseLeftButtonDown">
                    <local:Add />
                </i:EventTrigger>
            </i:Interaction.Triggers>

        </Image>
    </Grid>
</UserControl>

以及带有触发操作的代码

namespace SilverlightApplication14
{
    public class Add : TriggerAction<FrameworkElement>
    {

        protected override void Invoke(object parameter)
        {
            var vm = AssociatedObject.DataContext as NodeViewModel;
            if (vm != null)
            {
                if (vm.Nodes == null)
                {
                    vm.Nodes = new ObservableCollection<NodeViewModel>();
                }
                var child = new NodeViewModel { NodeColor = new SolidColorBrush(Color.FromArgb(255, 255, 0, 0)) };
                vm.Nodes.Add(child);
            }

            }
        }
    }

更新的代码：

       <Grid>
  <Grid.Resources>
            <Style  x:Key="myStyle" TargetType="ListBoxItem">
                <Setter Property="Background" Value="Khaki" />
                <Setter Property="Foreground" Value="DarkSlateGray" />
                <Setter Property="Margin" Value="5" />
                <Setter Property="FontStyle" Value="Italic" />
                <Setter Property="FontSize" Value="14" />
                <Setter Property="BorderBrush" Value="DarkGray" />
            </Style>
        </Grid.Resources>

        <ListBox ItemsSource="{Binding Nodes}" ItemContainerStyle="{StaticResource myStyle}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                <local:NodePicture DataContext="{Binding}" />


            </DataTemplate>
            </ListBox.ItemTemplate>
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>

    </ListBox>
        </Grid>

有一个简单的（或正确的方法）方法来做到这一点吗？

Answer 1

最好在视图模型中使用业务逻辑，而触发器则用于使用 UI。
我会将触发器更改为命令：

<Button Command="{Binding AddCommand}">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Image ... />
        </ControlTemplate>
    </Button.Template>
 </Button>

当用户单击按钮时，将调用 AddCommand。它可以在视图模型中实现，因此：

public class NodeViewModel
{
    public NodeViewModel()
    {
        this.AddCommand = new RelayCommand(obj => { /* do something */ });
    }

    public RelayCommand AddCommand { get; private set; }
    //...
}

RelayCommand 类是可能的实现之一，可以使用 MVVM Light 框架下载这里。