WPF canvasにEllipseを追加する時の位置指定方法

Question

前提・実現したいこと

C#,WPFでcanvasに指定した座標に点を描画したい為、
Ellipseを使おうと思いましたが、canvasの左上にしか描画できません。

指定した座標に描画する方法を教えてください・・・。
Ellipse以外で指定した座標を描画する方法がありましたら教えて頂けると助かります。
lineを使用して線ではなく、点で描画したいです。

理解度が低い状態で作成をしておりますので、初歩的な誤りがあるかもしれませんが、
宜しくお願いします。

該当のソースコード　断片的に抜き出しています。

            Style gridStyle = this.FindResource("GridStyle") as Style;
　　　　　　 //座標を変数に代入
            for (i = 0; i < count;i++)
            {
                DataX_s[i] = 100 + i;
                DataY_s[i] = 300;
            }

            for (i = 0; i < count; i++)
            {
                Ellipse ell = new Ellipse()
                {
                　 //この辺でX,Y座標を指定する・・・？
                   Style = gridStyle,
                };
                canvas.Children.Add(ell);
            }

<Window.Resources>
    <Style x:Key="GridStyle" TargetType="Ellipse">
        <Setter Property="StrokeThickness" Value="1" />
        <Setter Property="Stroke" Value="Black" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="Width" Value="1"/>
        <Setter Property="Height" Value="1"/>
    </Style>
</Window.Resources>

<Grid Width="700" Margin="0,0,-1,0" HorizontalAlignment="Left" VerticalAlignment="Top" Height="520">
　　<Canvas x:Name="canvas" Background="White" Margin="0,0,0,0" Width="550" Height="300"/>
</Grid

Comments

[dodox86]

先のご質問と求めるところは実質、同じですね。
「WPF Canvasに指定した座標を黒く描画することができない。(lineなどで線ではなく指定した座標のみ)」
https://teratail.com/questions/243339

初心者の方のようですので強く非難はしたくありませんが、推奨される行為ではありませんので、teratail運営に先の質問の削除依頼を出しましょう。（あるいは先の質問を適切に編集して、この質問の削除依頼を出してください）回答がつくと削除依頼ができなくなります。

[Arumi]

削除リクエストしておきました

Answer 1

動作検証した関係でusing以外全文貼り付けします。

namespace CanvasTest
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        int count = 10;
        double[] DataX_s;
        double[] DataY_s;

        public MainWindow()
        {
            InitializeComponent();

            DataX_s = new double[count];
            DataY_s = new double[count];

            Style gridStyle = this.FindResource("GridStyle") as Style;
            //座標を変数に代入
            for (var i = 0; i < count; i++)
            {
                // 1ずつのインクリメントではべた塗りになってしまったので20ずつ増やします。
                DataX_s[i] = 100 + i * 20;

                // ここが問題でした。canvasのHeightが300なのにEllipseの左上点Y座標が300だったので、canvasの外側に描画されていました。
                DataY_s[i] = 100;
            }

            for (var i = 0; i < count; i++)
            {
                Ellipse ell = new Ellipse()
                {
                    //この辺でX,Y座標を指定する・・・？
                    Style = gridStyle,
                };
                canvas.Children.Add(ell);

                // この2行を追加で左上座標を設定できると思います。
                Canvas.SetLeft(ell, DataX_s[i]);
                Canvas.SetTop(ell, DataY_s[i]);
            }
        }
    }
}

DataY_s[i] = 300;

になっていたので、canvasの下方向外側に描画していたようです。

<Window x:Class="CanvasTest.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:CanvasTest"
        mc:Ignorable="d"
        Background="Gray"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <Style x:Key="GridStyle" TargetType="Ellipse">
            <Setter Property="StrokeThickness" Value="1" />
            <Setter Property="Stroke" Value="Black" />
            <Setter Property="SnapsToDevicePixels" Value="True" />
            <Setter Property="Width" Value="50"/>
            <Setter Property="Height" Value="50"/>
        </Style>
    </Window.Resources>
    <Grid>
        <Canvas Name="canvas" 
                Background="White" 
                Margin="0,0,0,0" 
                Width="550" 
                Height="300"/>
    </Grid>
</Window>

<Setter Property="Width" Value="50"/>            
<Setter Property="Height" Value="50"/>

Ellipseの幅と高さも変更しました。
Value="1"でも表示されないことはないですが、高さ幅1ピクセルなので点になると思います。

Comments

[Arumi]

動作検証までありがとうございます。
元々答えを頂いていたのにも関わらずこんな初歩的なミスをしてしまっていたのですね・・・。

本当に助かりました、ありがとうございます！

Answer 2

動作検証はしておりませんが…

Style gridStyle = this.FindResource("GridStyle") as Style;
　　　　　　 //座標を変数に代入
for (i = 0; i < count;i++)
{
    DataX_s[i] = 100 + i;
    DataY_s[i] = 300;
}

for (i = 0; i < count; i++)
{
    Ellipse ell = new Ellipse()
    {
    　 //この辺でX,Y座標を指定する・・・？
        Style = gridStyle,
    };
    canvas.Children.Add(ell);

    // この2行を追加で左上座標を設定できると思います。
    Canvas.SetLeft(ell, DataX_s[i]);
    Canvas.SetTop(ell, DataY_s[i];)
}

【修正】
失礼いたしました。

canvas.SetLeft(ell, DataX_s[i]);
canvas.SetTop(ell, DataY_s[i];)

ではなく、

Canvas.SetLeft(ell, DataX_s[i]);
Canvas.SetTop(ell, DataY_s[i];)

でした。

SetLeftおよびSetTopはcanvasというインスタンス名でアクセスできるインスタンスメソッドではなく、Canvas.SetLeft()というようにクラス名でアクセスするクラスメソッドでした。

Javaでいうところのstatic（静的）メソッドにあたります。

申し訳ございませんでした。

Comments

[Arumi]

回答ありがとうございます！
canvas.SetLeft(ell, DataX_s[i]);と記載するとインスタンス参照でアクセスできません～。とエラーになり。
Canvas.SetLeft~~ に変更するとエラーは出ませんが、左上にさえ表示されなくなってしまいます・・・。

[TN8001]

DataY_s[i] = 100;
位にしたら出るんじゃないですか。

正確には
Canvas.SetLeft(ell, DataX_s[i] - ell.Width / 2);
じゃないかと思いますが、Width=１だと変わんないかもしれませんね。

大量にEllipseが追加されるなら、OnRenderで自分で描いたほうがいいかもしれません。

[quadii.shii]

クラスメソッド間違い、インスタンスメソッドは回答を修正しました。
表示されない件は別の理由であると思いますので、精読してみます。

[Arumi]

TN8001さん、ありがとうございます。
大量に追加される可能性もあるので、OnRenderについて調べてみます。
情報ありがとうございます。