7

私はWPFを初めて使用します。

マウスをクリックしてスムーズにドラッグできるように、Canvasに小さな円を描きたいです。

どうすればこれを達成できますか？

4

4 に答える 4

3

WPFでの要素の配置は親コンテナーに大きく依存するため、「それが何であれ」が重要です。Canvas内で20pxの何かを右に移動するのは簡単ですが（Canvas.Leftに追加するだけです）、グリッドで移動するのははるかに困難です（Column、ColumnSpan、Marginを処理する必要があります）。

キャンバス内で要素をドラッグする方法を説明するコードプロジェクトの記事があります：キャンバス内の要素のドラッグ

既存のCanvas/Grid内の他のコントロールではなく、その円だけを移動したい場合。（記事の）DragCanvasを通常のCanvas/Gridのオーバーレイとして使用することをお勧めします。

「円を描く」部分については、DragCanvas内の要素として楕円を使用するだけです。

于 2009-09-23T10:38:08.347 に答える
3

XAMLファイルでキャンバスと楕円を定義します。

<Canvas Background="White" Name="canvas" Width="950" Height="500" MouseDown="MouseMove">
    <Ellipse Name="bola" Canvas.Left="130" Canvas.Top="79" Width="50" Height="50" Fill="Green"  />
</Canvas>

キャンバスに属性があることに注意してくださいMouseDown="MouseMoveFunction"。キャンバスをクリックするたびに、そのイベントハンドラーが呼び出されます。マウスの動きに合わせて動かしたい場合は、MouseMove="MouseMoveFunction"

次に、マウスを動かすたびに楕円の位置を更新します。次のコードは、マウスイベントで呼び出される関数に入ります。

    private void MouseMove(object sender, MouseEventArgs e)
    {
        Point punto = e.GetPosition(canvas);
        int mouseX = (int)punto.X;
        int mouseY = (int)punto.Y;
        bola.SetValue(Canvas.LeftProperty, (double)mouseX); //set x
        bola.SetValue(Canvas.TopProperty, (double)mouseY); //set y

    }
于 2012-03-20T22:54:19.940 に答える
1

これはすべてコードで実行できましたが、キャンバスの子要素であるEllipse要素を移動できませんでした。

以下のコードをコピーして、再現できるようにしました。
まず、WPFExampleというWPFアプリを作成し、メインフォームに次のものがあることを確認します。

<Window x:Class="WPFExample.MainWindow"
        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:WPFExample"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525" Background="LightGray">
    <Grid>
        <Canvas HorizontalAlignment="Left" Name="MainCanvas"
                Height="300" Width="500" Margin="5,5,5,5" VerticalAlignment="Top" Background="LightYellow" MouseDown="Canvas_MouseDown" MouseMove="MainCanvas_MouseMove"
                />
        <Ellipse Name="post" Width="50" Height="50" Fill="Red" Margin="5,5,5,5"  />

    </Grid>
</Window>

次に、メインフォームにコードを追加します。

       private void Draw(Point m)
        {
            MainCanvas.Children.Clear();

            int mX = (int)m.X;
            int mY = (int)m.Y;
            Ellipse el = new Ellipse();
            el.Width = 15;
            el.Height = 15;
            el.SetValue(Canvas.LeftProperty, (Double)mX);
            el.SetValue(Canvas.TopProperty, (Double)mY);
            el.Fill = Brushes.Black;

            MainCanvas.Children.Add(el);
        }

        private void Canvas_MouseDown(object sender, MouseButtonEventArgs e)
        {
            Draw(e.GetPosition(MainCanvas));
        }

        private void MainCanvas_MouseMove(object sender, MouseEventArgs e)
        {
            Draw(e.GetPosition(MainCanvas));
        }

明らかに、Draw（）メソッドに注目してください。毎回キャンバスをクリアすることに注意してください。次に、マウスの位置に新しい楕円を黒い円として描画します。

これで、マウスを動かすたびに、黒い円がキャンバスから消去され、再度作成されてから、新しい場所に描画されます。これがアプリのスナップショットです。アプリを実行してマウスを動かすと、マウスを動かした場所で、まるでドラッグしているかのように黒い円が再描画されます。 黒丸の再描画

赤い楕円は私にとって問題があり、再描画することはできず、子のリストから削除して、この簡単な例のために再度追加することもできませんでした。

于 2016-09-01T19:33:45.413 に答える
0

WPF環境での長方形のドラッグアンドドロップのブログ投稿の例がありますが、MVVMアーキテクチャを使用しています。内容が長すぎてここで再現できませんが、手順はかなり単純なはずです。

また、長方形を楕円または他の独自の形状に置き換えることもかなり簡単です。

WPF/MVVMで長方形をドラッグアンドドロップします

于 2020-01-03T23:52:10.760 に答える