Question

我的xaml中有一个Line和Textblock，如下所示：

 <Line X1="{Binding StartPoint.X}" Y1="{Binding StartPoint.Y}" X2="{Binding EndPoint.X}"
          Y2="{Binding EndPoint.Y}" Stroke="{Binding Color}" StrokeThickness="{Binding Thickness}" />
 <TextBlock Text="{Binding Title}" />

TextBlock显示行的标题（例如“Line 1”）。

上面的XAML在画布上绘制线条并且正常工作，但它不会在行旁边显示TextBlock并与之并行显示。

如何更改此XAML代码，使文本位于行的中心并与之平行。

Answer 1

我会使用TextBlock并在其中嵌套您要使用的Line和TextBlock。例如：

        <TextBlock Canvas.Left="147" Canvas.Top="132" Height="45">
                <Line X1="10" Y1="20" X2="100" Y2="0" Stroke="Black" StrokeThickness="4"/>
                <TextBlock Text="Line1" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </TextBlock>

以上结果将是：

enter image description here

Answer 2

我尝试用不同的方法解决您的问题

下面的示例将呈现给定坐标的行，并在其旁边放置一个标签

我首先为LineData编写一个类

class LineData : DependencyObject
{
    public Point P1
    {
        get { return (Point)GetValue(P1Property); }
        set { SetValue(P1Property, value); }
    }

    // Using a DependencyProperty as the backing store for P1.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty P1Property =
        DependencyProperty.Register("P1", typeof(Point), typeof(LineData), new PropertyMetadata(new Point(), (d, e) => (d as LineData).Update()));

    public Point P2
    {
        get { return (Point)GetValue(P2Property); }
        set { SetValue(P2Property, value); }
    }

    // Using a DependencyProperty as the backing store for P1.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty P2Property =
        DependencyProperty.Register("P2", typeof(Point), typeof(LineData), new PropertyMetadata(new Point(), (d, e) => (d as LineData).Update()));

    public string Label
    {
        get { return (string)GetValue(LabelProperty); }
        set { SetValue(LabelProperty, value); }
    }

    // Using a DependencyProperty as the backing store for Label.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty LabelProperty =
        DependencyProperty.Register("Label", typeof(string), typeof(LineData), new PropertyMetadata(string.Empty));

    public double Length
    {
        get { return (double)GetValue(LengthProperty); }
        set { SetValue(LengthProperty, value); }
    }

    // Using a DependencyProperty as the backing store for Length.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty LengthProperty =
        DependencyProperty.Register("Length", typeof(double), typeof(LineData), new PropertyMetadata(0.0));

    public double TransformAngle
    {
        get { return (double)GetValue(TransformAngleProperty); }
        set { SetValue(TransformAngleProperty, value); }
    }

    // Using a DependencyProperty as the backing store for TransformAngle.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty TransformAngleProperty =
        DependencyProperty.Register("TransformAngle", typeof(double), typeof(LineData), new PropertyMetadata(0.0));

    public void Update()
    {
        //calculate angle
        double dy = P2.Y - P1.Y;
        double dx = P2.X - P1.X;
        double theta = Math.Atan2(dy, dx);
        theta *= 180 / Math.PI;
        TransformAngle = theta - 90;

        //calculate length
        double aSq = Math.Pow(P1.X - P2.X, 2); 
        double bSq = Math.Pow(P1.Y - P2.Y, 2);
        Length = Math.Sqrt(aSq + bSq);
    }
}

在这个类中，我编写逻辑将给定点转换为角度和长度，将在数据模板中使用相应的渲染，当任何点被更改时调用Update方法

这里是xaml，这里l：是行数据类的命名空间

    <ItemsControl>
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemContainerStyle>
            <Style TargetType="ContentPresenter">
                <Setter Property="Canvas.Left" Value="{Binding Path=P1.X}" />
                <Setter Property="Canvas.Top" Value="{Binding Path=P1.Y}" />
            </Style>
        </ItemsControl.ItemContainerStyle>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.RenderTransform>
                        <RotateTransform Angle="{Binding TransformAngle}"/>
                    </Grid.RenderTransform>
                    <TextBlock Text="{Binding Label}" VerticalAlignment="Center" Margin="5,0,0,0"/>
                    <Line Y2="{Binding Length}" StrokeThickness="1" Stroke="Black"/>
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
        <l:LineData Label="Line 1" P1="100,100" P2="135,150"/>
        <l:LineData Label="Line 2" P1="150,150" P2="235,50"/>
    </ItemsControl>

我使用画布作为项目控件的面板
通过绑定canvas.left和canvas.top将项目放在正确的位置，以指向ContentPresenter样式中的一个行数据
使用网格，标签和行
将行的y2设置为行数据的长度，将所有其他点设置为0
在文本框中设置标签
根据角度

已完成，样本的结果

result

因为我不确定平行于你的实际含义是什么我假设一个标签，当线是垂直的时候是水平的（所以垂直于线）

如果你想要水平平行，那么也应该对你的文本块应用渲染变换

        <TextBlock Text="{Binding Label}" VerticalAlignment="Center" Margin="16,0,0,10">
            <TextBlock.RenderTransform>
                <RotateTransform Angle="90"/>
            </TextBlock.RenderTransform>
        </TextBlock>

horizontally parallel

你也可以将items控件绑定到一个可观察的行数据集合，然后绑定将完成剩下的工作。

替代水平并行方法

    public void Update()
    {
        double dy = P2.Y - P1.Y;
        double dx = P2.X - P1.X;
        double theta = Math.Atan2(dy, dx);
        theta *= 180 / Math.PI;
        TransformAngle = theta; //remove the 90 degree vertial adjustment

        double aSq = Math.Pow(P1.X - P2.X, 2);
        double bSq = Math.Pow(P1.Y - P2.Y, 2);
        Length = Math.Sqrt(aSq + bSq);
    }

<DataTemplate>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <Grid.RenderTransform>
            <RotateTransform Angle="{Binding TransformAngle}"/>
        </Grid.RenderTransform>
        <TextBlock Text="{Binding Label}" HorizontalAlignment="Center" ></TextBlock>
        <Line X2="{Binding Length}" Grid.Row="1" StrokeThickness="1" Stroke="Black"/>
    </Grid>
</DataTemplate>

删除了计算中的垂直调整
使用行的X2
从文本块中删除了保证金调整

结果是没有调整的位清洁方法

如何在xaml中的一行旁边打印文本

2 个答案: