Cara: Membuat Perancang Aktivitas Kustom

Perancang aktivitas khusus biasanya diimplementasikan sehingga aktivitas yang terkait dengannya dapat disusun dengan aktivitas lain yang perancangnya dapat ditempatkan ke platform desain bersama dengannya. Fungsionalitas ini mengharuskan perancang aktivitas kustom menyediakan "drop zone" atau zona pelepasan tempat aktivitas arbitrer dapat ditempatkan dan juga sarana untuk mengelola pengumpulan elemen yang dihasilkan pada platform desain. Topik ini menjelaskan cara membuat perancang aktivitas kustom yang berisi zona pelepasan dan cara membuat perancang aktivitas khusus yang menyediakan fungsionalitas pengeditan yang diperlukan untuk mengelola koleksi elemen perancang.

Perancang aktivitas kustom biasanya mewarisi dari ActivityDesigner yang merupakan jenis perancang aktivitas dasar default untuk aktivitas apa pun tanpa perancang tertentu. Jenis ini memberikan pengalaman waktu desain untuk berinteraksi dengan grid properti dan mengonfigurasi aspek dasar seperti mengelola warna dan ikon.

ActivityDesigner menggunakan dua kontrol pembantu, WorkflowItemPresenter dan WorkflowItemsPresenter untuk mempermudah pengembangan perancang aktivitas kustom. Kedua kontrol tersebut menangani fungsionalitas umum seperti menarik dan melepas elemen turunan, penghapusan, pemilihan, dan penambahan elemen turunan tersebut. Kontrol WorkflowItemPresenter memungkinkan elemen antarmuka pengguna turunan tunggal di dalamnya, menyediakan "drop zone". Di sisi lain, WorkflowItemsPresenter dapat memberikan dukungan beberapa elemen UI, termasuk fungsionalitas tambahan seperti pengurutan, pemindahan, penghapusan, dan penambahan elemen turunan.

Bagian penting lainnya yang perlu disorot dalam implementasi perancang aktivitas khusus berkaitan dengan cara pengeditan visual cenderung menggunakan pengikatan data WPF ke instans yang disimpan dalam memori konten yang diedit di perancang. Hal ini dilakukan oleh pohon Model Item, yang juga bertanggung jawab untuk mengaktifkan pemberitahuan perubahan dan pelacakan kejadian seperti perubahan dalam status.

Topik ini menguraikan dua prosedur.

Prosedur pertama menjelaskan cara membuat perancang aktivitas kustom dengan WorkflowItemPresenter yang menyediakan zona pelepasan yang menerima aktivitas lain. Prosedur ini didasarkan pada sampel Perancang Komposit Kustom - Penyaji Item Alur Kerja.
Prosedur kedua menjelaskan cara membuat perancang aktivitas kustom dengan WorkflowItemsPresenter yang menyediakan fungsionalitas yang diperlukan untuk mengedit kumpulan elemen yang dicakup. Prosedur ini didasarkan pada sampel Perancang Komposit Kustom - Penyaji Item Alur Kerja.

Untuk membuat perancang aktivitas kustom dengan zona pelepasan menggunakan WorkflowItemPresenter

Mulai Visual Studio 2010.
Pada menu File, arahkan ke Baru, lalu pilih Proyek.

Kotak dialog Proyek Baru terbuka.
Di panel Templat Terinstal, pilih Windows dari kategori bahasa pemrogram pilihan Anda.
Di panel Templat, pilih Aplikasi WPF.
Dalam kotak Nama masukkanUsingWorkflowItemPresenter.
Dalam kotak Lokasi, masukkan direktori tempat Anda ingin menyimpan proyek Anda, atau klik Telusuri untuk menavigasi ke dalamnya.
Dalam kotak Solusi, terima nilai default.
Klik OK.
Klik kanan file MainWindows.xaml di Penjelajah Solusi, pilih Hapus dan konfirmasi OK dalam kotak dialog Microsoft Visual Studio.
Klik kanan proyek UsingWorkflowItemPresenter di Penjelajah Solusi, pilih Tambahkan, lalu Item Baru... untuk memunculkan dialog Tambahkan Item Baru dan pilih kategori WPF dari bagian Templat Terinstal di sebelah kiri.
Pilih templat Jendela (WPF), beri nama RehostingWFDesigner, dan klik Tambahkan.

Buka file RehostingWFDesigner.xaml dan tempelkan kode berikut ke dalamnya untuk menentukan antarmuka pengguna untuk aplikasi:

<Window x:Class=" UsingWorkflowItemPresenter.RehostingWFDesigner"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sapt="clr-namespace:System.Activities.Presentation.Toolbox;assembly=System.Activities.Presentation"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="Window1" Height="600" Width="900">
    <Window.Resources>
        <sys:String x:Key="AssemblyName">System.Activities, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35</sys:String>
    </Window.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="7*"/>
            <ColumnDefinition Width="3*"/>
        </Grid.ColumnDefinitions>
        <Border Grid.Column="0">
            <sapt:ToolboxControl Name="Toolbox">
                <sapt:ToolboxCategory CategoryName="Basic">
                    <sapt:ToolboxItemWrapper AssemblyName="{StaticResource AssemblyName}" >
                        <sapt:ToolboxItemWrapper.ToolName>
                            System.Activities.Statements.Sequence
                        </sapt:ToolboxItemWrapper.ToolName>
                       </sapt:ToolboxItemWrapper>
                    <sapt:ToolboxItemWrapper  AssemblyName="{StaticResource AssemblyName}">
                        <sapt:ToolboxItemWrapper.ToolName>
                            System.Activities.Statements.WriteLine
                        </sapt:ToolboxItemWrapper.ToolName>

                    </sapt:ToolboxItemWrapper>
                    <sapt:ToolboxItemWrapper  AssemblyName="{StaticResource AssemblyName}">
                        <sapt:ToolboxItemWrapper.ToolName>
                            System.Activities.Statements.If
                        </sapt:ToolboxItemWrapper.ToolName>

                    </sapt:ToolboxItemWrapper>
                    <sapt:ToolboxItemWrapper  AssemblyName="{StaticResource AssemblyName}">
                        <sapt:ToolboxItemWrapper.ToolName>
                            System.Activities.Statements.While
                        </sapt:ToolboxItemWrapper.ToolName>

                    </sapt:ToolboxItemWrapper>
                </sapt:ToolboxCategory>
            </sapt:ToolboxControl>
        </Border>
        <Border Grid.Column="1" Name="DesignerBorder"/>
        <Border Grid.Column="2" Name="PropertyBorder"/>
    </Grid>
</Window>

Untuk mengaitkan perancang aktivitas dengan jenis aktivitas, Anda harus mendaftarkan perancang aktivitas tersebut dengan penyimpanan metadata. Untuk melakukannya, tambahkan metode RegisterMetadata ke kelas RehostingWFDesigner. Dalam cakupan metode RegisterMetadata, buat objek AttributeTableBuilder dan panggil metode AddCustomAttributes untuk menambahkan atribut ke dalamnya. Panggil metode AddAttributeTable untuk menambahkan AttributeTable ke penyimpanan metadata. Kode berikut berisi logika hosting ulang untuk perancang. Kode ini mendaftarkan metadata, memasukkan SimpleNativeActivity ke dalam kotak alat, dan membuat alur kerja. Masukkan kode ini ke dalam file RehostingWFDesigner.xaml.cs.

using System;
using System.Activities.Core.Presentation;
using System.Activities.Presentation;
using System.Activities.Presentation.Metadata;
using System.Activities.Presentation.Toolbox;
using System.Activities.Statements;
using System.ComponentModel;
using System.Windows;

namespace UsingWorkflowItemPresenter
{
    // Interaction logic for RehostingWFDesigner.xaml
    public partial class RehostingWFDesigner
    {
        public RehostingWFDesigner()
        {
            InitializeComponent();
        }

        protected override void OnInitialized(EventArgs e)
        {
            base.OnInitialized(e);
            // Register metadata.
            (new DesignerMetadata()).Register();
            RegisterCustomMetadata();
            // Add custom activity to toolbox.
            Toolbox.Categories.Add(new ToolboxCategory("Custom activities"));
            Toolbox.Categories[1].Add(new ToolboxItemWrapper(typeof(SimpleNativeActivity)));

            // Create the workflow designer.
            var wd = new WorkflowDesigner();
            wd.Load(new Sequence());
            DesignerBorder.Child = wd.View;
            PropertyBorder.Child = wd.PropertyInspectorView;

        }

        void RegisterCustomMetadata()
        {
            var builder = new AttributeTableBuilder();
            builder.AddCustomAttributes(typeof(SimpleNativeActivity), new DesignerAttribute(typeof(SimpleNativeDesigner)));
            MetadataStore.AddAttributeTable(builder.CreateTable());
        }
    }
}

Klik kanan direktori Referensi di Penjelajah Solusi dan pilih Tambahkan Referensi untuk memunculkan dialog Tambahkan Referensi.
Klik tab .NET, temukan rakitan bernama System.Activities.Core.Presentation, pilih dan klik OK.
Dengan menggunakan prosedur yang sama, tambahkan referensi ke rakitan berikut:
1. System.Data.DataSetExtensions.dll
2. System.Activities.Presentation.dll
3. System.ServiceModel.Activities.dll
Buka file App.xaml dan ubah nilai StartUpUri menjadi "RehostingWFDesigner.xaml".
Klik kanan proyek UsingWorkflowItemPresenter di Penjelajah Solusi, pilih Tambahkan, lalu Item Baru... untuk memunculkan dialog Tambahkan Item Baru dan pilih kategori Alur Kerja dari bagian Templat Terinstal di sebelah kiri.
Pilih templat Perancang Aktivitas, beri nama SimpleNativeDesigner, dan klik Tambahkan.

Buka file SimpleNativeDesigner.xaml dan tempelkan kode berikut ke dalamnya. Perhatikan bahwa kode ini menggunakan ActivityDesigner sebagai elemen akar dan menunjukkan cara pengikatan digunakan untuk mengintegrasikan WorkflowItemPresenter ke dalam perancang Anda, sehingga jenis turunan dapat ditampilkan di perancang aktivitas komposit Anda.

Catatan

Skema untuk ActivityDesigner memungkinkan penambahan hanya satu elemen turunan ke definisi perancang aktivitas kustom Anda. Namun, elemen ini dapat berupa StackPanel, Grid, atau beberapa elemen antarmuka pengguna komposit lainnya.

<sap:ActivityDesigner x:Class=" UsingWorkflowItemPresenter.SimpleNativeDesigner"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:sap="clr-namespace:System.Activities.Presentation;assembly=System.Activities.Presentation"
    xmlns:sapv="clr-namespace:System.Activities.Presentation.View;assembly=System.Activities.Presentation">
    <sap:ActivityDesigner.Resources>
        <DataTemplate x:Key="Collapsed">
            <StackPanel>
                <TextBlock>This is the collapsed view</TextBlock>
            </StackPanel>
        </DataTemplate>
        <DataTemplate x:Key="Expanded">
            <StackPanel>
                <TextBlock>Custom Text</TextBlock>
                <sap:WorkflowItemPresenter Item="{Binding Path=ModelItem.Body, Mode=TwoWay}"
                                        HintText="Please drop an activity here" />
            </StackPanel>
        </DataTemplate>
        <Style x:Key="ExpandOrCollapsedStyle" TargetType="{x:Type ContentPresenter}">
            <Setter Property="ContentTemplate" Value="{DynamicResource Collapsed}"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding Path=ShowExpanded}" Value="true">
                    <Setter Property="ContentTemplate" Value="{DynamicResource Expanded}"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </sap:ActivityDesigner.Resources>
    <Grid>
        <ContentPresenter Style="{DynamicResource ExpandOrCollapsedStyle}" Content="{Binding}" />
    </Grid>
</sap:ActivityDesigner>

Klik kanan proyek UsingWorkflowItemPresenter di Penjelajah Solusi, pilih Tambahkan, lalu Item Baru... untuk memunculkan dialog Tambahkan Item Baru dan pilih kategori Alur Kerja dari bagian Templat Terinstal di sebelah kiri.
Pilih templat Aktivitas Kode, beri nama SimpleNativeActivity, dan klik Tambahkan.

Terapkan kelas SimpleNativeActivity dengan memasukkan kode berikut ke dalam file SimpleNativeActivity.cs:

using System.Activities;

namespace UsingWorkflowItemPresenter
{
    public sealed class SimpleNativeActivity : NativeActivity
    {
        // this property contains an activity that will be scheduled in the execute method
        // the WorkflowItemPresenter in the designer is bound to this to enable editing
        // of the value
        public Activity Body { get; set; }

        protected override void CacheMetadata(NativeActivityMetadata metadata)
        {
           metadata.AddChild(Body);
           base.CacheMetadata(metadata);

        }

        protected override void Execute(NativeActivityContext context)
        {
            context.ScheduleActivity(Body);
        }
    }
}

Pilih Bangun Solusi dari menu Build.
Pilih Mulai Tanpa Penelusuran Kesalahan dari menu Debug untuk membuka jendela rancangan kustom yang dihosting ulang.

Untuk membuat perancang aktivitas kustom menggunakan WorkflowItemsPresenter

Prosedur untuk perancang aktivitas kustom kedua menyerupai prosedur pertama dengan beberapa modifikasi, yang pertama adalah memberi nama aplikasi kedua UsingWorkflowItemsPresenter. Selain itu, aplikasi ini tidak menentukan aktivitas kustom baru.

Perbedaan utama tercakup dalam file CustomParallelDesigner.xaml dan RehostingWFDesigner.xaml.cs. Berikut adalah kode dari file CustomParallelDesigner.xaml yang menentukan antarmuka pengguna:

<sap:ActivityDesigner x:Class=" UsingWorkflowItemsPresenter.CustomParallelDesigner"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:sap="clr-namespace:System.Activities.Presentation;assembly=System.Activities.Presentation"
    xmlns:sapv="clr-namespace:System.Activities.Presentation.View;assembly=System.Activities.Presentation">
    <sap:ActivityDesigner.Resources>
        <DataTemplate x:Key="Collapsed">
            <TextBlock>This is the Collapsed View</TextBlock>
        </DataTemplate>
        <DataTemplate x:Key="Expanded">
            <StackPanel>
                <TextBlock HorizontalAlignment="Center">This is the</TextBlock>
                <TextBlock HorizontalAlignment="Center">extended view</TextBlock>
                <sap:WorkflowItemsPresenter HintText="Drop Activities Here"
                                    Items="{Binding Path=ModelItem.Branches}">
                    <sap:WorkflowItemsPresenter.SpacerTemplate>
                        <DataTemplate>
                            <Ellipse Width="10" Height="10" Fill="Black"/>
                        </DataTemplate>
                    </sap:WorkflowItemsPresenter.SpacerTemplate>
                    <sap:WorkflowItemsPresenter.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </sap:WorkflowItemsPresenter.ItemsPanel>
                </sap:WorkflowItemsPresenter>
            </StackPanel>
        </DataTemplate>
        <Style x:Key="ExpandOrCollapsedStyle" TargetType="{x:Type ContentPresenter}">
            <Setter Property="ContentTemplate" Value="{DynamicResource Collapsed}"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding Path=ShowExpanded}" Value="true">
                    <Setter Property="ContentTemplate" Value="{DynamicResource Expanded}"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </sap:ActivityDesigner.Resources>
    <Grid>
        <ContentPresenter Style="{DynamicResource ExpandOrCollapsedStyle}" Content="{Binding}"/>
    </Grid>
</sap:ActivityDesigner>

Berikut adalah kode dari file RehostingWFDesigner.xaml.cs yang menyediakan logika hosting ulang:

using System;
using System.Activities.Core.Presentation;
using System.Activities.Presentation;
using System.Activities.Presentation.Metadata;
using System.Activities.Statements;
using System.ComponentModel;
using System.Windows;

namespaceUsingWorkflowItemsPresenter
{
    public partial class RehostingWfDesigner : Window
    {
        public RehostingWfDesigner()
        {
            InitializeComponent();
        }

        protected override void OnInitialized(EventArgs e)
        {
            base.OnInitialized(e);
            // Register metadata.
            (new DesignerMetadata()).Register();
            RegisterCustomMetadata();

            // Create the workflow designer.
            var wd = new WorkflowDesigner();
            wd.Load(new Sequence());
            DesignerBorder.Child = wd.View;
            PropertyBorder.Child = wd.PropertyInspectorView;

        }

        void RegisterCustomMetadata()
        {
            var builder = new AttributeTableBuilder();
            builder.AddCustomAttributes(typeof(Parallel), new DesignerAttribute(typeof(CustomParallelDesigner)));
            MetadataStore.AddAttributeTable(builder.CreateTable());
        }
    }
}

Lihat juga

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2023-04-08