ラインをキャンバス上の1か所に置くには？

Question

キャンバスに2つの楕円があり、それらの間に線が描かれています。ウィンドウの高さが変更されると、ラインはY座標で移動を開始します。 1つの場所に行を留めたり、行で楕円を動かすにはどうすればよいですか？

<Window x:Class="LineEllipse.MainWindow" 
    Title="MainWindow" Height="768" Width="1366" WindowState="Maximized" SizeChanged="Window_SizeChanged"> 

<Window.DataContext> 
    <local:ViewModel/> 
</Window.DataContext> 
<Grid> 
    <ItemsControl> 
     <ItemsControl.Resources> 
      <CollectionViewSource x:Key="Ellipses" Source="{Binding Ellipses}"/> 
      <CollectionViewSource x:Key="Lines" Source="{Binding Lines}"/> 
      <DataTemplate DataType="{x:Type local:BlackEllipse}"> 
       <Ellipse Width="26" Height="26" Fill="Black"/> 
      </DataTemplate> 
      <DataTemplate DataType="{x:Type local:RedLine}"> 
       <Line X1="{Binding X1}" X2="{Binding X2}" Y1="{Binding Y1}" Y2="{Binding Y2}" Stroke="Red" StrokeThickness="4"/> 
      </DataTemplate> 
     </ItemsControl.Resources> 
     <ItemsControl.ItemsSource> 
      <CompositeCollection> 
       <CollectionContainer Collection="{Binding Source={StaticResource Ellipses}}"/> 
       <CollectionContainer Collection="{Binding Source={StaticResource Lines}}"/> 
      </CompositeCollection> 
     </ItemsControl.ItemsSource> 
     <ItemsControl.ItemsPanel> 
      <ItemsPanelTemplate> 
       <Canvas/> 
      </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 
     <ItemsControl.ItemContainerStyle> 
      <Style TargetType="ContentPresenter"> 
       <Setter Property="Canvas.Left" Value="{Binding CanvasLeft}"/> 
       <Setter Property="Canvas.Bottom" Value="{Binding CanvasBottom}"/> 
      </Style> 
     </ItemsControl.ItemContainerStyle> 
    </ItemsControl> 
</Grid> 

のViewModel

public class ViewModel 
{ 
    public ObservableCollection<BlackEllipse> Ellipses { get; set; } 
    public ObservableCollection<RedLine> Lines { get; set; } 

    public ViewModel() 
    { 
     Ellipses = new ObservableCollection<BlackEllipse>() 
     { 
      new BlackEllipse() { CanvasLeft = 1000, CanvasBottom = 650 }, 
      new BlackEllipse() { CanvasLeft = 900, CanvasBottom = 650 } 
     }; 

     Lines = new ObservableCollection<RedLine>() 
     { 
      new RedLine { X1 = 1013, X2 = 913, Y1 = 768 - 75 - 650, Y2 = 768 - 75 - 650 } 
     }; 
    } 
} 

public class BlackEllipse : INotifyPropertyChanged 
{ 
    private double canvasLeft; 
    private double canvasBottom; 

    public double CanvasLeft 
    { 
     get { return canvasLeft; } 
     set 
     { 
      canvasLeft = value; 
      OnPropertyChanged("CanvasLeft"); 
     } 
    } 

    public double CanvasBottom 
    { 
     get { return canvasBottom; } 
     set 
     { 
      canvasBottom = value; 
      OnPropertyChanged("CanvasBottom"); 
     } 
    } 

    public event PropertyChangedEventHandler PropertyChanged; 
    public void OnPropertyChanged([System.Runtime.CompilerServices.CallerMemberName]string prop = "") 
    { 
     PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(prop)); 
    } 
} 

public class RedLine 
{ 
    public int X1 { get; set; } 
    public int Y1 { get; set; } 

    public int X2 { get; set; } 
    public int Y2 { get; set; } 
} 

Answer 1

あなたが楕円のためCanvas.Left、Canvas.Bottom添付プロパティを定義しました。ラインを楕円で動かす場合は、ラインのためにそれらを定義する必要があります。

public class RedLine 
{ 
    public double CanvasLeft { get; set; } 
    public double CanvasBottom { get; set; } 
    public int X1 { get; set; } 
    public int Y1 { get; set; } 

    public int X2 { get; set; } 
    public int Y2 { get; set; } 
} 

初期化...

Lines = new ObservableCollection<RedLine>() 
    { 
     new RedLine { CanvasLeft = 0, CanvasBottom = 650, X1 = 1013, X2 = 913, Y1 = 768 - 75 - 650, Y2 = 768 - 75 - 650 } 
    };