调整窗口大小时，保持文本块位于缩放线端点处

Question

调整窗口大小时，我使用网格在窗口内居中缩放线。我想附上两个文本块；线的每个端点都有一个。调整窗口大小时，我希望文本块的大小(和字体大小(保持不变。我想像变换线几何体一样变换画布，以便在调整窗口大小时TextBlocks跟踪线的端点。我该怎么做？

图表.xaml

<Window x:Class="WpfApp1.Chart"
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:WpfApp1"
mc:Ignorable="d"
Name="chartWindow">
<Grid x:Name="chartGrid" SizeChanged="ChartGrid_SizeChanged" Background="Black" ShowGridLines="True">
<Grid.Resources>
<ScaleTransform x:Key="transform"
CenterX="0"
CenterY="0"
ScaleX="{Binding ElementName=chartWindow, Path=ScaleValue}"
ScaleY="{Binding ElementName=chartWindow, Path=ScaleValue}" />
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Path Stroke="White" StrokeThickness="1" Visibility="Visible"
Grid.Row="1" Grid.Column="1">
<Path.Data>
<GeometryGroup Transform="{StaticResource transform}">
<LineGeometry StartPoint="0.1,0.1" EndPoint="0.5,0.5"/>
</GeometryGroup>
</Path.Data>
</Path>
<Canvas Grid.Row="1" Grid.Column="1" Visibility="Visible">
<TextBlock Canvas.Left="10" Canvas.Top="10" 
Foreground="White" FontSize="12"
Text="P1" >
</TextBlock>
<TextBlock Canvas.Left="90" Canvas.Top="90"
Foreground="White" FontSize="12"
Text="P2" >
</TextBlock>
</Canvas>
</Grid>

图表.xaml.cs

namespace WpfApp1
{
public partial class Chart : Window
{
public Chart()
{
InitializeComponent();
ScaleValue = 100;
}
#region ScaleValue Depdency Property
public static readonly DependencyProperty ScaleValueProperty = DependencyProperty.Register("ScaleValue", typeof(double), typeof(Chart), new UIPropertyMetadata(1.0, new PropertyChangedCallback(OnScaleValueChanged), new CoerceValueCallback(OnCoerceScaleValue)));
private static object OnCoerceScaleValue(DependencyObject o, object value)
{
Chart mainWindow = o as Chart;
if (mainWindow != null)
return mainWindow.OnCoerceScaleValue((double)value);
else
return value;
}
private static void OnScaleValueChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
{
Chart mainWindow = o as Chart;
if (mainWindow != null)
mainWindow.OnScaleValueChanged((double)e.OldValue, (double)e.NewValue);
}
protected virtual double OnCoerceScaleValue(double value)
{
if (double.IsNaN(value))
return 1.0d;
value = Math.Max(0.1, value);
return value;
}
protected virtual void OnScaleValueChanged(double oldValue, double newValue)
{
}
public double ScaleValue
{
get
{
return (double)GetValue(ScaleValueProperty);
}
set
{
SetValue(ScaleValueProperty, value);
}
}
#endregion
private void ChartGrid_SizeChanged(object sender, EventArgs e)
{
CalculateScale();
}
private void CalculateScale()
{
double yScale = ActualHeight;
double xScale = ActualWidth;
double value = Math.Min(xScale, yScale);
ScaleValue = (double)OnCoerceScaleValue(chartGrid, value);
}
}
}

我制定了一个似乎合适的解决方案。TextBlock被放置在画布上，每个标签都位于自己的网格中，第0行和第2行以及列的定义是按比例划分的。要设置比率，只需使用公式：(1/0.1(-1=9，并将其设置为星形乘数。

修订图表.xaml

<Window x:Class="WpfApp1.Chart"
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:WpfApp1"
mc:Ignorable="d"
Name="chartWindow">
<Grid x:Name="chartGrid" SizeChanged="ChartGrid_SizeChanged" Background="Black" ShowGridLines="True">
<Grid.Resources>
<ScaleTransform x:Key="transform"
CenterX="0"
CenterY="0"
ScaleX="{Binding ElementName=chartWindow, Path=ScaleValue}"
ScaleY="{Binding ElementName=chartWindow, Path=ScaleValue}" />
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Path Stroke="White" StrokeThickness="1" Visibility="Visible"
Grid.Row="1" Grid.Column="1">
<Path.Data>
<GeometryGroup Transform="{StaticResource transform}">
<LineGeometry StartPoint="0.1,0.1" EndPoint="0.3,0.2"/>
</GeometryGroup>
</Path.Data>
</Path>
<Canvas Grid.Column="1" Grid.Row="1" Visibility="Visible">
<Grid Width="{Binding ElementName=chartWindow, Path=ScaleValue}" Height="{Binding ElementName=chartWindow, Path=ScaleValue}">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="9*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="9*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="1" Grid.Row="1" Foreground="White" FontSize="12" Text="P1"/>
</Grid>
<Grid Width="{Binding ElementName=chartWindow, Path=ScaleValue}" Height="{Binding ElementName=chartWindow, Path=ScaleValue}">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="4*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="2.333*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="1" Grid.Row="1" Foreground="White" FontSize="12" Text="P2"/>
</Grid>
</Canvas>
</Grid>

Answer 1

此纯XAML解决方案将为您提供帮助。您只需要将列宽和行高绑定到路径的起点/终点。在这段代码中，我只使用了一个矩形来演示这个想法。但是，如果使用"路径"，则必须创建一个多值转换器来转换展开单元的"高度"one_answers"宽度"，以创建新的路径点。创建这个GUI将不需要其他代码绑定。

<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition x:Name="ExpandingColumn" Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="30"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Rectangle Grid.Row="1" Grid.Column="2" Width= "{Binding ExpandingColumn.Width}" Height="2" Stroke="Black" StrokeThickness="1" />
<TextBlock Grid.Row="1" Grid.Column="1"
Foreground="Black" FontSize="12"
Text="P1" >
</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="3"
Foreground="Black" FontSize="12"
Text="P2" >
</TextBlock>
</Grid>