调整窗口大小时,将TextBlocks保持在缩放的线端点处

调整窗口大小时,我正在使用网格在窗口内将缩放的线居中。我想附加两个Textblock;在该线的每个端点处一个。调整窗口大小时,我希望Textblock的大小(和fontsize)保持不变。我想像转换线条几何形状那样转换画布,以便在调整窗口大小时TextBlocks跟踪线条的端点。我该怎么办?

Chart.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>

Chart.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);
    }
}
}

我研究了一个似乎合适的解决方案。 TextBlocks放置在画布上,每个标签位于其自己的网格中,第0行和第2行和列定义按比例分配。要设置比率,只需使用公式:(1 / 0.1)-1 = 9并将其设置为星形倍增器。

修订后的Chart.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}" />
    </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}">
            <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>

mmyxlong 回答:调整窗口大小时,将TextBlocks保持在缩放的线端点处

此纯XAML解决方案将为您提供帮助。您只需要将列宽和行高绑定到路径的起​​点/终点即可。在这段代码中,我仅使用一个矩形来演示该想法。但是,如果使用的是路径,则必须创建一个多值转换器以转换扩展单元格的高度和宽度,以创建新的路径点。无需其他代码即可创建此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>
本文链接:https://www.f2er.com/3126749.html

大家都在问