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

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

wpf xaml

Wpf 调整窗口大小时，保持文本块位于缩放的线端点,wpf,xaml,Wpf,Xaml,调整窗口大小时，我正在使用栅格将缩放的线置于窗口的中心。我想附上两个文本块；线的每个端点各有一个。调整窗口大小时，我希望Textblock的大小（和fontsize）保持不变。我希望变换画布的方式与变换线条几何体的方式类似，以便在调整窗口大小时，文本块跟踪线条的端点。我该怎么做 Chart.xaml <Window x:Class="WpfApp1.Chart" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presenta

调整窗口大小时，我正在使用栅格将缩放的线置于窗口的中心。我想附上两个文本块；线的每个端点各有一个。调整窗口大小时，我希望Textblock的大小（和fontsize）保持不变。我希望变换画布的方式与变换线条几何体的方式类似，以便在调整窗口大小时，文本块跟踪线条的端点。我该怎么做

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>

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

我制定了一个似乎合适的解决方案。文本块放置在画布上，每个标签位于其自己的网格中，其中第0行、第2行和第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}"
                    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>

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

这个纯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>

不完全是我想要的。我不想将数字（即“30”）硬编码到XAML中。该解决方案确实可以处理垂直和水平放置，尽管.30只是间距值，为简单起见，它是硬编码的。如果您不想将其硬编码为xaml，可以将其绑定到视图模型中的某个变量