Question

我在画布和线之间画了两个椭圆。当窗口高度改变时，线条开始在Y坐标中移动。如何在一个地方停留线路或使用直线移动椭圆？

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

视图模型

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

如何让Line停留在画布上的一个地方？

1 个答案: