在WPF中绘制线条和圆圈

Question

我需要绘制一个像公交车站架构的图表:o-School----o-Church-------o-Police.
所以,简单的线条和圆圈.我还需要放大它.

因为我有VS 2010,我认为WPF(据我所知它使用矢量化图形)应该是开始绘图的好画布.

是否可能,复杂,你对WPF初学者推荐什么？

谢谢.

编辑:我可以为该行设置DashStyle(dash-dot,dotDot ...)？

Answer 1

这可以帮助您入门.它包含几个形状画布和滑块控制,使您可以控制变焦.您可以根据需要在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并显示Zoom的示例,但如果您只需要一行元素就可以使用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,例如circle,road,label,并使用ItemsControl并将ItemsPanelTemplate设置为执行相同的操作.