NetworkView:一个WPF自定义控件的可视化和编辑网络，图形和流图表

    

    <NetworkUI:NetworkView

        x:Name="networkControl"

        ...

        NodesSource="{Binding Network.Nodes}"

        ConnectionsSource="{Binding Network.Connections}"

        ...

        />

    

    <DataTemplate

        DataType="{x:Type NetworkModel:NodeViewModel}"

        >

        <Grid

            Width="120"

            Height="60"

            >



            <!-- This rectangle is the main visual for the node. -->

            <Rectangle

                Stroke="Black"

                Fill="White"

                RadiusX="4"

                RadiusY="4"

                />



            <!-- 

            This grid contains the node's name and connectors.

            The margin is negative so that the connectors overlap the body of the node and it's selection border.

            -->

            <Grid

                Margin="-8"

                >

                <Grid.ColumnDefinitions>

                    <ColumnDefinition Width="Auto" />

                    <ColumnDefinition Width="*" MinWidth="10" />

                    <ColumnDefinition Width="Auto" />

                </Grid.ColumnDefinitions>

                <Grid.RowDefinitions>

                    <RowDefinition Height="Auto" />

                    <RowDefinition Height="*" /> 

                    <RowDefinition Height="Auto" />                                

                </Grid.RowDefinitions>



                <!-- The name of the node. -->

                <TextBlock

                    Grid.Column="1"

                    Grid.Row="1"

                    Text="{Binding Name}"

                    HorizontalAlignment="Center"

                    VerticalAlignment="Center"

                    />



                <!-- ... Define the node's four connectors, one on each edge of the node. ... -->

                

            </Grid>

        </Grid>

    </DataTemplate>

    

    <NetworkUI:ConnectorItem 

        Grid.Row="0"

        Grid.Column="1"

        DataContext="{Binding Connectors[0]}"

        />

    

    <Style 

        TargetType="{x:Type NetworkUI:ConnectorItem}"

        >

        

        <!-- 

        Data-binding for the connector hotspot.

        ConnectorItem automatically computes its center points and assings this value

        to the 'Hotspot' property.  This data-binding then 'pushes' the value into the application

        view-model.

        -->

        <Setter 

            Property="Hotspot"

            Value="{Binding Hotspot, Mode=OneWayToSource}"

            />

        

        <!-- The visual template. -->

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate 

                    TargetType="{x:Type NetworkUI:ConnectorItem}"

                    >

                    <Rectangle

                        Stroke="Black"

                        Fill="White"                            

                        Cursor="Hand"

                        Width="12"

                        Height="12"

                        RadiusX="1"

                        RadiusY="1"

                        />

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

    <DataTemplate

        DataType="{x:Type NetworkModel:ConnectionViewModel}"

        >



        <!-- The connection is represented by a simple arrow. -->

        <local:Arrow

            Stroke="Black"

            StrokeThickness="2"

            Fill="Black"

            Start="{Binding SourceConnectorHotspot}"

            End="{Binding DestConnectorHotspot}"

            IsHitTestVisible="False"

            />

    </DataTemplate>

    /// <summary>

    /// Convenient accessor for the view-model.

    /// </summary>

    public MainWindowViewModel ViewModel

    {

        get

        {

            return (MainWindowViewModel)this.DataContext;

        }

    }

    private void DeleteSelectedNodes_Executed(object sender, ExecutedRoutedEventArgs e)

    {

        this.ViewModel.DeleteSelectedNodes();

    }

    public void DeleteSelectedNodes()

    {

        // Take a copy of the nodes list so we can delete nodes while iterating.

        var nodesCopy = this.Network.Nodes.ToArray();



        foreach (var node in nodesCopy)

        {

            if (node.IsSelected)

            {

                DeleteNode(node);

            }

        }

    }

    public void DeleteNode(NodeViewModel node)

    {

        //

        // Remove all connections attached to the node.

        //

        this.Network.Connections.RemoveRange(node.AttachedConnections);



        //

        // Remove the node from the network.

        //

        this.Network.Nodes.Remove(node);

    }

    

    private void CreateNode_Executed(object sender, ExecutedRoutedEventArgs e)

    {

        Point newNodeLocation = Mouse.GetPosition(networkControl);

        this.ViewModel.CreateNode("New Node!", newNodeLocation);

    }

    

    public NodeViewModel CreateNode(string name, Point nodeLocation)

    {

        var node = new NodeViewModel(name);

        node.X = nodeLocation.X;

        node.Y = nodeLocation.Y;



        //

        // Create the default set of four connectors.

        //

        node.Connectors.Add(new ConnectorViewModel());

        node.Connectors.Add(new ConnectorViewModel());

        node.Connectors.Add(new ConnectorViewModel());

        node.Connectors.Add(new ConnectorViewModel());



        //

        // Add the new node to the view-model (and therefore to the UI).

        //

        this.Network.Nodes.Add(node);



        return node;

    }

    <NetworkUI:NetworkView

        ...

        ConnectionDragStarted="networkControl_ConnectionDragStarted"

        ConnectionDragging="networkControl_ConnectionDragging"

        ConnectionDragCompleted="networkControl_ConnectionDragCompleted"

        />

    private void networkControl_ConnectionDragStarted(object sender, ConnectionDragStartedEventArgs e)

    {

        var draggedOutConnector = (ConnectorViewModel)e.ConnectorDraggedOut;

        var curDragPoint = Mouse.GetPosition(networkControl);



        //

        // Delegate the real work to the view model.

        //

        var connection = this.ViewModel.ConnectionDragStarted(draggedOutConnector, curDragPoint);



        //

        // Must return the view-model object that represents the connection via the event args.

        // This is so that NetworkView can keep track of the object while it is being dragged.

        //

        e.Connection = connection;

    }

    public ConnectionViewModel ConnectionDragStarted(ConnectorViewModel draggedOutConnector, Point curDragPoint)

    {

        // ... remove existing connection ...



        //

        // Create a new connection to add to the view-model.

        //

        var connection = new ConnectionViewModel();





        //

        // Link the source connector to the connector that was dragged out.

        //

        connection.SourceConnector = draggedOutConnector;



        // ... rest of the method ...

    }

    

    /// <summary>

    /// The source connector the connection is attached to.

    /// </summary>

    public ConnectorViewModel SourceConnector

    {

        get

        {

            return sourceConnector;

        }

        set

        {

            if (sourceConnector == value)

            {

                return;

            }



            if (sourceConnector != null)

            {

                Trace.Assert(sourceConnector.AttachedConnection == this);



                sourceConnector.AttachedConnection = null;

                sourceConnector.HotspotUpdated -= new EventHandler<eventargs>(sourceConnector_HotspotUpdated);

            }



            sourceConnector = value;



            if (sourceConnector != null)

            {

                Trace.Assert(sourceConnector.AttachedConnection == null);



                sourceConnector.AttachedConnection = this;

                sourceConnector.HotspotUpdated += new EventHandler<eventargs>(sourceConnector_HotspotUpdated);

                this.SourceConnectorHotspot = sourceConnector.Hotspot;

            }



            OnPropertyChanged("SourceConnector");

        }

    }

   

    public ConnectionViewModel ConnectionDragStarted(ConnectorViewModel draggedOutConnector, Point curDragPoint)

    {

        // ... remove existing connection ...



        // ... create new connection and set source connector ...





        // .. set DestConnectorHotspot from currnet mouse position ...



        //

        // Add the new connection to the view-model.

        //

        this.Network.Connections.Add(connection);



        return connection;

    }

   

    public void ConnectionDragging(ConnectionViewModel connection, Point curDragPoint)

    {

        //

        // Update the destination connector hotspot while the user is dragging the connection.

        //

        connection.DestConnectorHotspot = curDragPoint;

    }

    public void ConnectionDragCompleted(ConnectionViewModel newConnection, ConnectorViewModel connectorDraggedOut, ConnectorViewModel connectorDraggedOver)

    {

        // ... if connection creation is canceled, remove the connection ...



        // ... remove existing connection ...



        //

        // Finalize the connection by attaching it to the connector

        // that the user dropped the connection on.

        //

        newConnection.DestConnector = connectorDraggedOver;

    }

    <Window.Resources>



        <ResourceDictionary>

            <ResourceDictionary.MergedDictionaries>

                <!-- 

                Merge in the resource dictionary that is shared between the main window and the overview window.

                -->

                <ResourceDictionary 

                    Source="SharedVisualTemplates.xaml"

                    />

            </ResourceDictionary.MergedDictionaries>



            <!-- ... other resources ... -->



        </ResourceDictionary>



    <Window.Resources>            

    <DataTemplate

        x:Key="inputConnectorTemplate"

        >

        <Grid

            Margin="0,2,0,0"

            >

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="Auto" />

                <ColumnDefinition Width="*" />

            </Grid.ColumnDefinitions>



            <!-- The 'ConnectorItem' or anchor point for the connector. -->

            <NetworkUI:ConnectorItem 

                Grid.Column="0"

                Width="15"

                Height="15"

                Cursor="Hand"                    

                />



            <!-- The name of the connector. -->            

            <TextBlock

                Grid.Column="1"

                Margin="5,0,0,0"

                Text="{Binding Name}"

                VerticalAlignment="Center"

                />

        </Grid>

    </DataTemplate>

    <ScrollViewer

        ...

        >

        

        <ZoomAndPan:ZoomAndPanControl

            ...

            >

            <AdornerDecorator>                

                <Grid

                    ...

                    >



                    <NetworkUI:NetworkView

                        ...

                        />

                    

                    <Canvas

                        x:Name="dragZoomCanvas"

                        ...

                        >

                        <Border 

                            ...

                            />

                    </Canvas>

                    

                </Grid>

            </AdornerDecorator>

        </ZoomAndPan:ZoomAndPanControl>

    </ScrollViewer>

    <!-- Define a data-template for the 'NodeViewModel' class. -->    

    <DataTemplate

        DataType="{x:Type NetworkModel:NodeViewModel}"

        >



        <!-- 

        An adorned control is used, to represent the node. 

        When the user hovers the mouse cursor over the node, the 

        'delete node' adorner pops up and allows them to delete the node.

        -->

        <ac:AdornedControl

            ...

            IsMouseOverShowEnabled="{Binding ElementName=networkControl, Path=IsNotDragging}"

            >



            <!-- ... node visuals ... -->



            <ac:AdornedControl.AdornerContent>



                <!-- 

                This is the content for the 'delete node' adorner that pops up when the user hovers the mouse over the node.

                It displays a button that the user can click to delete the node.

                -->

                

                <!-- ... delete node mouse-hover button -->

                

            </ac:AdornedControl.AdornerContent>

        </ac:AdornedControl>                    

    </DataTemplate>            

    

    <Grid

        MinWidth="120"



        Margin="10,6,10,6"

        SizeChanged="Node_SizeChanged"

        >



        <!-- This rectangle is the main visual for the node. -->



        <Rectangle

            Stroke="{StaticResource nodeBorderBrush}"

            StrokeThickness="1.3"

            RadiusX="4"

            RadiusY="4"

            Fill="{StaticResource nodeFillBrush}"

            />



        <!-- 

        This grid contains the node's connectors.

        The margin is negative so that the connectors overlap the body of the node and it's selection border.

        -->

        <Grid

            Margin="-6,4,-6,4"

            >

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="Auto" />

                <ColumnDefinition Width="*" MinWidth="10" />

                <ColumnDefinition Width="Auto" />

            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>

                <RowDefinition Height="Auto" />

                <!-- spacer -->

                <RowDefinition Height="2" />                    

                <RowDefinition Height="Auto" />

            </Grid.RowDefinitions>



            <!-- The name of the node. -->                

            <TextBlock

                Grid.Column="0"

                Grid.ColumnSpan="3"

                Grid.Row="0"

                Text="{Binding Name}"

                HorizontalAlignment="Center"

                VerticalAlignment="Center"

                />

                

                <!-- ... Visuals for connectors defined here ... -->                



            </Grid>

    </Grid>

    <!-- Displays the node's input connectors. -->                

    <ItemsControl

        Grid.Column="0"

        Grid.Row="2"

        ItemsSource="{Binding InputConnectors}"

        ItemTemplate="{StaticResource inputConnectorTemplate}"

        />



    <!-- Displays the node's output connectors. -->

    <ItemsControl

        Grid.Column="2"

        Grid.Row="2"

        ItemsSource="{Binding OutputConnectors}"

        ItemTemplate="{StaticResource outputConnectorTemplate}"

        />

    

    CommandParameter="{Binding}"