Question

我正在使用以下数据模板：

<DataTemplate>
    <Grid Width="40" Height="40">
        <Ellipse Width="30" Height="30" x:Name="ellipse" />
        <TextBlock Text="{Binding Robot.Id}" HorizontalAlignment="Center" VerticalAlignment="Center" />
        <Line X1="20" X2="40" X2="20" X2="30" x:Name="line" />
    </Grid>
</DataTemplate>

我希望在DataContext的属性发生更改时将以下代码应用于该行：

void UpdateHeading(double angle)
{
    var center = grid.Width/2;
    var radius = ellipse.Width/2;
    line.X1 = center + (radius+5)*Math.Sin(angle);
    line.Y1 = center + (radius+5)*Math.Cos(angle);
    line.X2 = center + (radius-5)*Math.Sin(angle);
    line.Y2 = center + (radius-5)*Math.Cos(angle);
}

请注意，代码需要访问其他两个元素的大小

添加代码的最佳方法是什么？使用值转换器似乎不对，因为我需要将一个属性转换为四个

Answer 1

还有IMultiValueConverter

修改你应该有一个带有angle属性的ViewModel，然后可以绑定如下（我只针对x1进行了演示：

Answer 2

在您提供DataContext并为所有需要更新的值公开属性的类中实现INotifyPropertyChanged。然后绑定到这些属性。这些属性可以计算出他们需要的任何值，并且UI将会更新。

例如：

public class Heading : INotifyPropertyChanged
{
    private string name = "";
    public string Name { get { return name; } set { name = value; SendPropertyChanged("Name"); } }
    public int Radius { get { return GridWidth/2; } }
    public double X1 { get { return Center + (Radius + 5) * Math.Sin(Angle); } }
    public double X2 { get { return Center + (Radius + 5) * Math.Cos(Angle); } }
    public double Y1 { get { return Center + (Radius - 5) * Math.Sin(Angle); } }
    public double Y2 { get { return Center + (Radius - 5) * Math.Cos(Angle); } }
    public int Center { get { return GridWidth/2; } }

    private int gridWidth = 50;
    public int GridWidth { get { return gridWidth; } set { gridWidth = value; } } 

    private double angle;
    public double Angle { get { return angle; } set { angle = value; SendPropertyChanged(""); } } //Empty string to notify of all properties

    public event PropertyChangedEventHandler PropertyChanged;
    void SendPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

然后只需在模板中设置绑定：

<DataTemplate>
    <Grid >
        <Ellipse Width="{Binding GridWidth}" Height="40" x:Name="ellipse" Fill="Green" />
        <TextBlock Text="{Binding Name}" HorizontalAlignment="Center" VerticalAlignment="Center" />
        <Line X1="{Binding X1}" X2="{Binding X2}" Y1="{Binding Y1}" Y2="{Binding Y2}" x:Name="line" Stroke="Black" />
    </Grid>
</DataTemplate>

希望这有帮助。

Answer 3

我决定创造自己的形状。

XAML用法：

<Grid Width="40" Height="40">
    <Ellipse x:Name="ellipse" Width="30" Height="30" />
    <TextBlock Text="{Binding Robot.Id}" HorizontalAlignment="Center" VerticalAlignment="Center" />
    <Controls:HeadingLine BoundingSize="40" ShapeSize="30" Length="10" Angle="{Binding Heading}" Stroke="Black" StrokeThickness="1" />
</Grid>

代码：

public sealed class HeadingLine : Shape
{
    // Properties definitions
    ....
    // Code based on http://www.codeproject.com/KB/WPF/wpfarrow.aspx 

    protected override Geometry DefiningGeometry
    {
        get
        {
            var geometry = new StreamGeometry();
            using (var context = geometry.Open())
            {
                InternalDrawArrowGeometry(context);
            }

            geometry.Freeze();
            return geometry;
        }
    }

    private void InternalDrawArrowGeometry(StreamGeometryContext context)
    {
        var center = BoundingSize / 2;
        var radius = ShapeSize / 2;
        var offset = Length / 2;
        var angle = Math.PI - Angle;

        var x1 = center + (radius + offset) * Math.Sin(angle);
        var y1 = center + (radius + offset) * Math.Cos(angle);
        var x2 = center + (radius - offset) * Math.Sin(angle);
        var y2 = center + (radius - offset) * Math.Cos(angle);

        context.BeginFigure(new Point(x1, y1), false, false);
        context.LineTo(new Point(x2, y2), true, true);
    }
}

将一个值转换为多个属性

3 个答案: