在WPF中画线条和圆圈

Question

我需要绘制一个像巴士站架构的图形：o-School----o-Church-------o-Police。
所以，简单的线条和圆圈。另外我需要放大它。

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

这是可能的，复杂的，你对WPF初学者有什么建议。

谢谢。

编辑： 我可以设置DashStyle为行（点划线，dotDot ...）吗？

Answer 1

这里的东西，可以帮助您开始使用。它有一个包含几个形状的Canvas和一个Slider控件，可以控制缩放。您可以根据需要在画布内添加其他元素。

<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

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

这不应该是复杂的，我会保持简单通过把一个帆布视框之内。增加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> 

Answer 4

你必须使用Canvas和显示放大的几个例子，但是如果你只需要要素的单行，你可以使用一个StackPanel并设置VerticalAlignment =“中心”，那么你不需要计算只是线的大小的位置。

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

如果你需要做的，你可以为每个类型的节点e.g圈，道路，标签的不同DataTemplate中，并使用一个ItemsControl设置做同样的事情ItemsPanelTemplate多个图表。