How to make Line stay on one place on the Canvas?

Question

I have two Ellipses on the Canvas and Line drawn between them. When Window height is changed line starts to move in Y coordinate. How do I make line stay on one place or move Ellipses with Line?

<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; }
}

Take a look at [this more general approach](http://stackoverflow.com/a/40190793/1136211). You may use it with a LineGeometry. — Clemens, May 07 '17 at 08:30

score 1 · Accepted Answer · answered May 07 '17 at 16:17

You've defined Canvas.Left, Canvas.Bottom attached properties for ellipses. you must also define them for the line if you want the line to move with the ellipses.

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; }
}

Initialization...

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

Thank you I already done that) I think there is also a way to move it by x y coordinates change. — Mrg Gek, May 07 '17 at 21:23

How to make Line stay on one place on the Canvas?

1 Answers1