B站朝夕教育 【.NET9.0+WPF实战三类流程化业务逻辑控制】学习记录 【六】

播放地址：20241120-.NET9.0+WPF实战三类流程化业务逻辑控制-10_哔哩哔哩_bilibili

第14-15节 调整代码让拖拽到控制流程图里的模块产生位移

NodeModel新增两个属性X，Y记录控件的位置信息

    public abstract class NodeModel: ObservableObject
    {
        public abstract string Name { get; set; }
        private double x;
        public double X { get { return x; } set => SetProperty(ref x, value); }
        private double y;
        public double Y { get { return y; } set => SetProperty(ref y, value); }
        public abstract void Execute();
    }

调整MainViewModel的ListBox_Drop方法里获取拖拽到的位置，并赋值给NodeModel的X，Y

    public partial class MainViewModel
    {
        public ObservableCollection<NodeModel> ProcessList { get; set; } = new ObservableCollection<NodeModel>();

        public void ListViewItem_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            DragDrop.DoDragDrop((DependencyObject)sender, (sender as ListViewItem).Tag, DragDropEffects.Copy);
        }

        public void ListBox_Drop(object sender, DragEventArgs e)
        {
            string tag = e.Data.GetData(typeof(string)).ToString();
            var point = e.GetPosition((IInputElement)sender);
            //反射
            //根据字符串获取类型
            Type type = Assembly.GetEntryAssembly().GetType("WpfApp2." + tag);
            //根据类型创建实例
            NodeModel instance = (NodeModel)Activator.CreateInstance(type);
            instance.X=point.X;
            instance.Y=point.Y;
            ProcessList.Add(instance);
        }
        [RelayCommand]
        private void Execute()
        {
            foreach (var item in ProcessList)
            {
                item.Execute();
            }
        }
    }

调整界面MainView.xaml

重点注意ItemsControl需要设置属性Background，否则拖拽不了

其他代码详见内容

<Window x:Class="WpfApp2.MainView"
        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:local="clr-namespace:WpfApp2" xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
        mc:Ignorable="d"
        WindowStartupLocation="CenterScreen"
        Background="White"
        Title="MainView" Height="650" Width="1300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200" />
            <ColumnDefinition Width="300" />
            <ColumnDefinition />           
        </Grid.ColumnDefinitions>
        <Button Content="执行" HorizontalAlignment="Stretch" Margin="3"  Command="{Binding ExecuteCommand}" />
        <TextBlock Text="循序流程" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
        <TextBlock Text="流程图控制" Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
        <ListView Grid.Row="1" Grid.Column="0">
            <ListViewItem Content="AAA" Tag="ProcessA">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="PreviewMouseLeftButtonDown">
                        <i:CallMethodAction MethodName="ListViewItem_MouseLeftButtonDown" TargetObject="{Binding}" />
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </ListViewItem>
            <ListViewItem Content="BBB" Tag="ProcessB">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="PreviewMouseLeftButtonDown">
                        <i:CallMethodAction MethodName="ListViewItem_MouseLeftButtonDown" TargetObject="{Binding}" />
                    </i:EventTrigger>
                </i:Interaction.Triggers></ListViewItem>
            <ListViewItem Content="CCC" Tag="ProcessC">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="PreviewMouseLeftButtonDown">
                        <i:CallMethodAction MethodName="ListViewItem_MouseLeftButtonDown" TargetObject="{Binding}" />
                    </i:EventTrigger>
                </i:Interaction.Triggers></ListViewItem>
            <ListViewItem Content="DDD" Tag="ProcessD">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="PreviewMouseLeftButtonDown">
                        <i:CallMethodAction MethodName="ListViewItem_MouseLeftButtonDown" TargetObject="{Binding}" />
                    </i:EventTrigger>
                </i:Interaction.Triggers></ListViewItem>
        </ListView>
        <ListBox Grid.Row="1" Grid.Column="1" AllowDrop="True" ItemsSource="{Binding ProcessList}">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Drop">
                    <i:CallMethodAction MethodName="ListBox_Drop" TargetObject="{Binding}" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Name}">
                    </TextBlock>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <ItemsControl Grid.Row="1" Grid.Column="2" Background="Transparent" AllowDrop="true" ItemsSource="{Binding ProcessList}">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Drop">
                    <i:CallMethodAction MethodName="ListBox_Drop" TargetObject="{Binding}" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas Background="AliceBlue" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemContainerStyle>
                <Style TargetType="ContentPresenter">
                    <Setter Property="Canvas.Left" Value="{Binding X}"/>
                    <Setter Property="Canvas.Top" Value="{Binding Y}"/>
                </Style>
            </ItemsControl.ItemContainerStyle>

            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Border Width="120" Height="30" Background="White" CornerRadius="5" Name="border">
                            <TextBlock Text="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
                        </Border>
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</Window>

 

实现拖拽模块到流程图后产生位置变化并设置样式