5

パイプ ネットワーク描画アプリ用に、一部の WinForm コードを WPF に変換しようとしています。私はこのペイントアプリの記事に基づいています：

http://www.codeproject.com/Articles/22776/WPF-DrawTools

これは私が WinForms に持っていたもので、カスタマイズ可能なウィンドウがもっと必要なので、変換しようとしています。次のことを行う必要があります。

a) キャンバスをクリックしてノードを描画します b) 前述のノードをクリックしてドラッグします c) ノードにカーソルを合わせて強調表示します d) ノードをリンクで接続します

キャンバスに四角形を描画する次のコードがありますが、レンダリングが開始されたときにキャンバスに何も表示されません。メッセージボックスを配置するとプログラムがクラッシュするため、起動されたと比較的確信しています。

protected override void OnRender(DrawingContext drawingContext)
    {
        base.OnRender(drawingContext);
        SolidColorBrush mySolidColorBrush = new SolidColorBrush();
        mySolidColorBrush.Color = Colors.LimeGreen;
        Pen myPen = new Pen(Brushes.Blue, 10);            
        Rect myRect = new Rect(50, 50, 500, 500);

        drawingContext.DrawRectangle(mySolidColorBrush, myPen, myRect);            
    }

    private void myCanvas_MouseDown(object sender, MouseButtonEventArgs e)
    {
        System.Windows.Forms.MessageBox.Show("click event fired");                         

        DrawingVisual vs = new DrawingVisual();
        DrawingContext dc = vs.RenderOpen();

        OnRender(dc);
    }

「起動」メッセージ ボックスは、クリック イベントが発生することを確認するためにそこにあります。XML:

<TabItem Header="View Results">
            <Canvas Background="WhiteSmoke" Name="myCanvas" MouseDown="myCanvas_MouseDown" >                    
            </Canvas>
</TabItem>

何を与える？記事の男はユーザー コントロールを使用しています...それが問題を抱えている理由ですか? WPFは私を狂わせます...私は何か完全に間違ったことをしているように感じますが、この件に関して見つけることができるドキュメントはほとんどありません。

4

1 に答える 1

7

これは、私が 20 分で作成した簡単な例です。

XAML:

<Window x:Class="NodesEditor.MainWindow"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:NodesEditor"
        Title="Window1" Height="800" Width="800" x:Name="view">
    <Grid Margin="10">
        <Grid.Resources>
            <!-- This CompositeCollection basically Concatenates the Nodes and Connectors in a single one -->
            <CompositeCollection x:Key="Col">
                <CollectionContainer Collection="{Binding DataContext.Connectors,Source={x:Reference view}}"/>
                <CollectionContainer Collection="{Binding DataContext.Nodes,Source={x:Reference view}}"/>
            </CompositeCollection>

            <!-- This is the DataTemplate that will be used to render the Node class -->
            <DataTemplate DataType="{x:Type local:Node}">
                <Thumb DragDelta="Thumb_Drag">
                    <Thumb.Template>
                        <ControlTemplate TargetType="Thumb">
                            <Ellipse Height="10" Width="10" Stroke="Black" StrokeThickness="1" Fill="Blue"
                                     Margin="-5,-5,5,5" x:Name="Ellipse"/>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsDragging" Value="True">
                                    <Setter TargetName="Ellipse" Property="Fill" Value="Yellow"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Thumb.Template>
                </Thumb>
            </DataTemplate>

            <!-- This is the DataTemplate that will be used to render the Connector class -->
            <DataTemplate DataType="{x:Type local:Connector}">
                <Line Stroke="Black" StrokeThickness="1"
                      X1="{Binding Start.X}" Y1="{Binding Start.Y}"
                      X2="{Binding End.X}" Y2="{Binding End.Y}"/>
            </DataTemplate>
        </Grid.Resources>

        <!-- This Border serves as a background and the VisualBrush used to paint its background serves as the "Snapping Grid" -->
        <!-- The "Snapping" Actually occurs in the Node class (see Node.X and Node.Y properties), it has nothing to do with any UI Elements -->
        <Border>
            <Border.Background>
                <VisualBrush TileMode="Tile"
                             Viewport="0,0,50,50" ViewportUnits="Absolute" 
                             Viewbox="0,0,50,50" ViewboxUnits="Absolute">
                    <VisualBrush.Visual>
                        <Rectangle Stroke="Darkgray" StrokeThickness="1" Height="50" Width="50"
                                   StrokeDashArray="5 3"/>
                    </VisualBrush.Visual>
                </VisualBrush>
            </Border.Background>
        </Border>
        <ItemsControl>
            <ItemsControl.ItemsSource>
                <StaticResource ResourceKey="Col"/>
            </ItemsControl.ItemsSource>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas IsItemsHost="True"/>
                </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>
    </Grid>
</Window>

コードビハインド:

using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls.Primitives;

namespace NodesEditor
{
    public partial class MainWindow : Window
    {
        public List<Node> Nodes { get; set; }
        public List<Connector> Connectors { get; set; }

        public MainWindow()
        {
            InitializeComponent();

            Nodes = NodesDataSource.GetRandomNodes().ToList();
            Connectors = NodesDataSource.GetRandomConnectors(Nodes).ToList();

            DataContext = this;
        }

        private void Thumb_Drag(object sender, DragDeltaEventArgs e)
        {
            var thumb = sender as Thumb;
            if (thumb == null)
                return;

            var data = thumb.DataContext as Node;
            if (data == null)
                return;

            data.X += e.HorizontalChange;
            data.Y += e.VerticalChange;
        }
    }
}

データ・モデル：

public class Node: INotifyPropertyChanged
    {
        private double _x;
        public double X
        {
            get { return _x; }
            set
            {
                //"Grid Snapping"
                //this actually "rounds" the value so that it will always be a multiple of 50.
                _x = (Math.Round(value / 50.0)) * 50;
                OnPropertyChanged("X");
            }
        }

        private double _y;
        public double Y
        {
            get { return _y; }
            set
            {
                //"Grid Snapping"
                //this actually "rounds" the value so that it will always be a multiple of 50.
                _y = (Math.Round(value / 50.0)) * 50;
                OnPropertyChanged("Y");
            }
        }


        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged(string propertyName)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }

public class Connector
{
    public Node Start { get; set; }
    public Node End { get; set; }
}

ランダム データ ソース (例を何かで埋めるため)

using System;
using System.Collections.Generic;
using System.Linq;

namespace NodesEditor
{
    public static class NodesDataSource
    {
        public static Random random = new Random();

        public static Node GetRandomNode()
        {
            return new Node
                {
                    X = random.Next(0,500),
                    Y = random.Next(0,500)
                };

        }

        public static IEnumerable<Node> GetRandomNodes()
        {
            return Enumerable.Range(5, random.Next(6, 10)).Select(x => GetRandomNode());
        }

        public static Connector GetRandomConnector(IEnumerable<Node> nodes)
        {
            return new Connector { Start = nodes.FirstOrDefault(), End = nodes.Skip(1).FirstOrDefault() };
        }

        public static IEnumerable<Connector> GetRandomConnectors(List<Node> nodes)
        {
            var result = new List<Connector>();
            for (int i = 0; i < nodes.Count() - 1; i++)
            {
                result.Add(new Connector() {Start = nodes[i], End = nodes[i + 1]});
            }
            return result;
        }
    }
}

これは、私のコンピューターでは次のように表示されます。

ここに画像の説明を入力

于 2013-03-15T02:14:35.553 に答える