在 WPF 中画线和圆

Question

我需要绘制一个类似公交车站架构的图表：o-School----o-Church-------o-Police。
所以，简单的线条和圆圈。我还需要放大它。

因为我有 VS 2010，我认为 WPF（据我了解它使用矢量图形）应该是开始绘图的好画布。

这是否可行、复杂，以及您对 WPF 初学者有什么建议。

谢谢。

编辑： 我可以为线条设置一个DashStyle吗（dash-dot, dotDot...）？

Answer 1

以下内容可以帮助您入门。它有一个包含一些形状的 Canvas 和一个允许您控制缩放的 Slider 控件。您可以根据需要在 Canvas 中添加其他元素。

<DockPanel>
    <Slider x:Name="slider" Minimum=".1" Maximum="10" Value="1" DockPanel.Dock="Top"/>
    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
        <Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Canvas Width="300" Height="300">
                <Canvas.LayoutTransform>
                    <ScaleTransform ScaleX="{Binding ElementName=slider, Path=Value}"
                                ScaleY="{Binding ElementName=slider, Path=Value}"/>
                </Canvas.LayoutTransform>

                <Ellipse Canvas.Left="10" Canvas.Top="10" Width="20" Height="20"
                        Stroke="Black" StrokeThickness="1" Fill="Red"/>
                <Line Canvas.Left="20" Canvas.Top="30" X1="0" X2="0" Y1="0" Y2="50" 
                    Stroke="Black" StrokeThickness="1"/>
                <Ellipse Canvas.Left="10" Canvas.Top="80" Width="20" Height="20"
                        Stroke="Black" StrokeThickness="1" Fill="Yellow"/>
            </Canvas>
        </Border>
    </ScrollViewer>
</DockPanel>

编辑：

要更改线条的虚线样式，只需设置 StrokeDashArray 属性。它允许您为线条的外观指定模式。它遵循“线段长度、间隙长度、线段长度、间隙长度……”的格式，所以设置这一行：

<Line Canvas.Left="100" Canvas.Top="100" Stroke="Black"
                          X1="0" X2="100" Y1="0" Y2="0"
                          StrokeThickness="3" StrokeDashArray="2,2"/>

给你这个（即由一系列长度为 2 的线段和长度为 2 的间隙组成的线）：

将 StrokeDashArray 设置为

StrokeDashArray="5,1,1,1"

为您提供点划线模式。

Answer 2

您有一些使用 Canvas 并显示缩放的示例，但如果您只需要一行元素，您可以使用 StackPanel 并设置 VerticalAlignment="Center" 那么您不需要计算位置，只需计算行。

    <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
    <StackPanel.Resources>
        <Style TargetType="Ellipse">
            <Setter Property="Width" Value="20" />
            <Setter Property="Height" Value="20" />
            <Setter Property="Stroke" Value="Orange" />
            <Setter Property="StrokeThickness" Value="3" />
        </Style>
        <Style TargetType="Line">
            <Setter Property="Stroke" Value="DodgerBlue" />
            <Setter Property="StrokeDashArray" Value="5,1,1,1,1,1" />
            <Setter Property="StrokeThickness" Value="2" />
        </Style>
        <Style TargetType="TextBlock">
            <Setter Property="Foreground" Value="White" />
            <Setter Property="FontWeight" Value="Bold" />
            <Setter Property="Padding" Value="4" />
        </Style>
        <Style TargetType="Border" x:Key="Label">
            <Setter Property="Background" Value="LimeGreen" />
            <Setter Property="CornerRadius" Value="10" />
        </Style>
    </StackPanel.Resources>
    <Ellipse />
    <Border VerticalAlignment="Center">
        <Line X2="50" />
    </Border>
    <Border Style="{StaticResource Label}">
        <TextBlock Text="Home" />
    </Border>
    <Border VerticalAlignment="Center">
        <Line X2="50" />
    </Border>            
    <Ellipse />
    <Border VerticalAlignment="Center">
        <Line X2="50" />
    </Border>
    <Border Style="{StaticResource Label}">
        <TextBlock Text="Church" />
    </Border>
    <Border VerticalAlignment="Center">
        <Line X2="50" />
    </Border>            
    <Ellipse />
    <Border VerticalAlignment="Center">
        <Line X2="20" />
    </Border>
    <Border Style="{StaticResource Label}">
        <TextBlock Text="Police" />
    </Border>
</StackPanel>

如果您需要制作多个图表，您可以为每种类型的节点创建不同的 DataTemplate，例如圆形、道路、标签，并使用带有 ItemsPanelTemplate 集的 ItemsControl 来做同样的事情。

Answer 3

在 WPF 中绘制简单的形状很容易。您可以通过一些示例在 Shapes 命名空间中找到它们。

给你一个例子：

<Canvas>
    <Ellipse Canvas.Top="0" Canvas.Left="0" Width="256" Height="256" />
    <Line Canvas.Top="0" Canvas.Left="256" X1="0" Y1="0" X2="128" Y2=128" >
</Canvas>

Answer 4

这不应该很复杂，我会通过在 Viewbox 中放置一个 Canvas 来保持简单。增加画布的宽度和高度以缩小，减少它们以放大。

  <DockPanel>
    <Viewbox DockPanel.Dock="Top" Width="100" Height="100" >
      <Canvas Width="{Binding Path=Value, ElementName=TheZoomSlider}" Height="{Binding Path=Value, ElementName=TheZoomSlider}">
        <Ellipse Stroke="Black" Canvas.Top="40" Canvas.Left="20" Width="20" Height="20" />
        <Ellipse Stroke="Black" Canvas.Top="40" Canvas.Left="50" Width="20" Height="20" />
        <Ellipse Stroke="Black" Canvas.Top="40" Canvas.Left="80" Width="20" Height="20" />
      </Canvas>
    </Viewbox>
    <Slider Margin="0,400,0,0" HorizontalAlignment="Center" Orientation="Vertical" DockPanel.Dock="Bottom" Name="TheZoomSlider" Minimum="20" Maximum="800" Value="40" />
    </DockPanel>