Question

这个问题是前一个问题的延续。（How can I combine some UserControls in SilverLight?）我有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框架here下载。

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

1 个答案: