Как я могу создать элементы с методом запуска триггера в SilverLight? - PullRequest
Новая
       43

Как я могу создать элементы с методом запуска триггера в SilverLight?

0 голосов
/ 29 сентября 2011

Этот вопрос является продолжением предыдущего. ( Как мне объединить некоторые пользовательские элементы управления в 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>

Есть ли простой (или правильный) способ сделать это?

1 Ответ

1 голос
/ 01 октября 2011

Предпочтительно работать с бизнес-логикой в ​​моделях представления, тогда как триггеры предназначены для работы с пользовательским интерфейсом. Я бы изменил триггер на команду: 

<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 здесь .

...