在 WPF 中相对于其容器绘制对角线 Text/TextBlock/Label/Control
Draw diagonal Text/TextBlock/Label/Control in WPF relative to its container
我有一个 Grid
具有动态大小。在里面我想画一条对角线 TextBlock
。我已经有一个对角线Path
,你可以在其中设置LineGeometry
进行动态调整。但是我在TextBlock
中找不到吊坠。我错过了什么吗?
<Grid>
<TextBlock Text="Draft" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="180" FontWeight="Bold" Foreground="#FFA43A3A" RenderTransformOrigin="0.5,0.5"/>
<Path Grid.Row="2" Grid.Column="0" Stroke="Red" StrokeThickness="2" Stretch="Fill">
<Path.Data>
<LineGeometry StartPoint="1,0" EndPoint="0,1" />
</Path.Data>
</Path>
</Grid>
预览
目标
这是我想要在不设置绝对 RotateTransform
的情况下拥有的内容。
两种解决方案的比较
red
前景是FrankM解决方案,green
一个来自Henrik Hansen
每当 Grid 的大小发生变化时,您必须计算 TextBlock 的角度,例如使用转换器。
这是一个例子:
<Window x:Class="WpfApplication13.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication13"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<local:AngleConverter x:Key="AngleConverter"/>
</Window.Resources>
<Grid x:Name="grid">
<TextBlock Text="Draft" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="120" FontWeight="Bold" Foreground="#FFA43A3A"
RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<MultiBinding Converter="{StaticResource AngleConverter}">
<MultiBinding.Bindings>
<Binding ElementName="grid" Path="ActualWidth"/>
<Binding ElementName="grid" Path="ActualHeight"/>
</MultiBinding.Bindings>
</MultiBinding>
</TextBlock.RenderTransform>
</TextBlock>
<Path Stroke="Red" StrokeThickness="2" Stretch="Fill">
<Path.Data>
<LineGeometry StartPoint="1,0" EndPoint="0,1" />
</Path.Data>
</Path>
</Grid>
</Window>
转换器代码:
using System;
using System.Globalization;
using System.Windows.Data;
using System.Windows.Media;
namespace WpfApplication13
{
public class AngleConverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
{
double width = values[0] as double? ?? 0;
double height = values[1] as double? ?? 0;
double angleRadians = Math.Atan2(height, width);
return new RotateTransform {Angle = - angleRadians * 180.0 / Math.PI};
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
}
结果:
您还可以将 TextBlock 包装在 ViewBox 中。它也会缩放文本,但这可能是不可取的?:
<Viewbox Stretch="Fill" StretchDirection="Both">
<TextBlock Text="Draft" FontWeight="Bold" Foreground="#FFA43A3A" Margin="5" RenderTransformOrigin="0.5,0.5" >
<TextBlock.RenderTransform>
<RotateTransform Angle="-35.0" />
</TextBlock.RenderTransform>
</TextBlock>
</Viewbox>
我有一个 Grid
具有动态大小。在里面我想画一条对角线 TextBlock
。我已经有一个对角线Path
,你可以在其中设置LineGeometry
进行动态调整。但是我在TextBlock
中找不到吊坠。我错过了什么吗?
<Grid>
<TextBlock Text="Draft" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="180" FontWeight="Bold" Foreground="#FFA43A3A" RenderTransformOrigin="0.5,0.5"/>
<Path Grid.Row="2" Grid.Column="0" Stroke="Red" StrokeThickness="2" Stretch="Fill">
<Path.Data>
<LineGeometry StartPoint="1,0" EndPoint="0,1" />
</Path.Data>
</Path>
</Grid>
预览
目标
这是我想要在不设置绝对 RotateTransform
的情况下拥有的内容。
两种解决方案的比较
red
前景是FrankM解决方案,green
一个来自Henrik Hansen
每当 Grid 的大小发生变化时,您必须计算 TextBlock 的角度,例如使用转换器。
这是一个例子:
<Window x:Class="WpfApplication13.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication13"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<local:AngleConverter x:Key="AngleConverter"/>
</Window.Resources>
<Grid x:Name="grid">
<TextBlock Text="Draft" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="120" FontWeight="Bold" Foreground="#FFA43A3A"
RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<MultiBinding Converter="{StaticResource AngleConverter}">
<MultiBinding.Bindings>
<Binding ElementName="grid" Path="ActualWidth"/>
<Binding ElementName="grid" Path="ActualHeight"/>
</MultiBinding.Bindings>
</MultiBinding>
</TextBlock.RenderTransform>
</TextBlock>
<Path Stroke="Red" StrokeThickness="2" Stretch="Fill">
<Path.Data>
<LineGeometry StartPoint="1,0" EndPoint="0,1" />
</Path.Data>
</Path>
</Grid>
</Window>
转换器代码:
using System;
using System.Globalization;
using System.Windows.Data;
using System.Windows.Media;
namespace WpfApplication13
{
public class AngleConverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
{
double width = values[0] as double? ?? 0;
double height = values[1] as double? ?? 0;
double angleRadians = Math.Atan2(height, width);
return new RotateTransform {Angle = - angleRadians * 180.0 / Math.PI};
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
}
结果:
您还可以将 TextBlock 包装在 ViewBox 中。它也会缩放文本,但这可能是不可取的?:
<Viewbox Stretch="Fill" StretchDirection="Both">
<TextBlock Text="Draft" FontWeight="Bold" Foreground="#FFA43A3A" Margin="5" RenderTransformOrigin="0.5,0.5" >
<TextBlock.RenderTransform>
<RotateTransform Angle="-35.0" />
</TextBlock.RenderTransform>
</TextBlock>
</Viewbox>