缩放项目使用Slider值控制项目(行)

本文关键字：项目 控制项 控制 Slider 缩放 | 更新日期: 2023-09-27 18:26:40

在我的WPF应用程序（使用C#和Visual Studio创建）中，我有一个ItemsControl；这些项是自定义类Line的实例。Line类包含直线的x和y坐标：

public class Line{
    private double _x1, _y1, _x2, _y2;
    public double X1{
        get{ return _x1; }
        set{ _x1 = value; }
    }
    public double Y1{
        get{ return _y1; }
        set{ _y1 = value; }
    }
    public double X2{
        get{ return _x2; }
        set{ _x2 = value; }
    }
    public double Y2{
        get{ return _y2; }
        set{ _y2 = value; }
    }
}

表示line实例的线（使用数据绑定）绑定到这些起点和终点
在窗口的另一部分，有一个Slider，它应该表示应用程序的比例值。现在，我想要的行为是，当我拖动缩放滑块时，线应该根据滑块的值进行缩放。我怎样才能做到这一点？

我试着改变getter方法，比如

public double X1{
    get{ return _x1*scale; }
    set{ _x1 = value; }
}

但我有两个问题：1） 我从哪里获得"比例"值？Line类不知道MainWindow或Slider。2） 我使用糟糕的编程风格（使用静态的公共"currentSlider"属性）从Slider中获得了"scale"值，如下所示：

public class MainWindow{
    public static Slider currentSlider;
    public MainWindow(){
        InitializeComponents();
        currentSlider = slider1;
    }
}

然后，Line类可以访问比例值，并使用正确的比例因子创建新线。但是，当我移动滑块时，线不会得到更新和缩放。

那么，如何使线条根据Slider的值进行缩放呢？

缩放项目使用Slider值控制项目(行)

这个问题表明您想要缩放线条的起点和终点，而不是渲染的笔划厚度。因此，不能简单地将转换应用于DataTemplate中Line的LayoutTransform或RenderTransform属性。

另一种选择是使用带有LineGeometry的Path。由于LineGeometry具有StartPoint和EndPoint属性，而不是Line类的X1、Y1、X2和Y2，因此您可以使用绑定转换器，也可以将项目类更改为类似的属性：

public class Line
{
    public Point P1 { get; set; }
    public Point P2 { get; set; }
}

在ItemsControl中，您现在可以绑定LineGeometry的StartPoint和EndPoint属性，并将ScaleTransform放入LineGeometry的Transform中。ScaleTransform具有ScaleX和ScaleY属性，它们将绑定到Slider的Value。

<ItemsControl ItemsSource="{Binding Lines}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Path Stroke="Black" StrokeThickness="1">
                <Path.Data>
                    <LineGeometry StartPoint="{Binding P1}" EndPoint="{Binding P2}">
                        <LineGeometry.Transform>
                            <ScaleTransform
                                ScaleX="{Binding Value, ElementName=slider}"
                                ScaleY="{Binding Value, ElementName=slider}"/>
                        </LineGeometry.Transform>                                
                    </LineGeometry>
                </Path.Data>
            </Path>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>
...
<Slider x:Name="slider" Width="200" Minimum="1" Maximum="10"/>

看看MSDN上的ScaleTransform class页面。使用ScaleTransform对象，您可以选择如何缩放线条，例如从线条中心、从左侧或右侧等。

相关文章：