WPF

Question

我想画一条从屏幕中心到左上角的曲线。随着 window 调整线的大小，它的坐标也应该改变。是否有可能在 MVVM 方面做到这一点？例子：

Answer 1

在您的 window 中创建一个网格，其中包含 2 列，宽度均为 1*

在第一列的网格中添加一个视图框，其中 StretchDirection = Both 和 Stretch = Fill

在视图框中添加您的曲线。

随着 window 调整列的大小，列将变小，视图框将缩小内容。

<Window x:Class="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:WpfApplication1"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="1*"/>   
    </Grid.ColumnDefinitions>
    <Viewbox StretchDirection="Both" Stretch="Fill">
        <Canvas Width="100" Height="200">
            <Path Stroke="Black" StrokeThickness="3">
                <Path.Data>
                    <PathGeometry>
                        <PathGeometry.Figures>
                            <PathFigure StartPoint="0,0" IsClosed="False">
                                <ArcSegment Point="100,100" Size="100 100"/>
                            </PathFigure>
                        </PathGeometry.Figures>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
    </Viewbox>
</Grid>

Answer 2

请注意，Viewbox 会缩放其内容的渲染输出（包括 Path 的 StrokeThickness），但不会缩放图形的几何形状。

以下方法无需缩放 StrokeThickness 即可工作，因为 Ellipse 控件会缩放其几何形状以适应其边界：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Border ClipToBounds="True">
        <Ellipse Stroke="Black" StrokeThickness="1" RenderTransformOrigin="0,1">
            <Ellipse.RenderTransform>
                <ScaleTransform ScaleX="2" ScaleY="2"/>
            </Ellipse.RenderTransform>
        </Ellipse>
    </Border>
</Grid>

WPF - 从中心屏幕到边缘绘制曲线，随着屏幕的变化动态适应

WPF - Draw curved line from center screen to margin that dynamically adapts as the screen changes

mvvm

draw

WPF - 从中​​心屏幕到边缘绘制曲线，随着屏幕的变化动态适应

WPF - Draw curved line from center screen to margin that dynamically adapts as the screen changes

wpf

mvvm

draw

WPF - 从中心屏幕到边缘绘制曲线，随着屏幕的变化动态适应