[英]Draw lines and circles in WPF
I need to draw a graph like bus station schema: o-School----o-Church-------o-Police
. 我需要绘制类似于公交车站模式的图形:
o-School----o-Church-------o-Police
。
So, simple line and circles. 因此,简单的直线和圆。 Also I need to zoom it.
我还需要缩放它。
As I have VS 2010, I thought WPF(as I understood it uses vectorized graphics) should be the good canvas to start drawing. 当我使用VS 2010时,我认为WPF(据我所知它使用矢量化图形)应该是开始绘制的好画布。
Is it possible, complicated, and what do you recommend for a WPF beginner. 是否有可能,很复杂,以及您对WPF初学者有何建议?
Thanks. 谢谢。
EDIT: Can I set a DashStyle for the line (dash-dot, dotDot...)? 编辑:我可以为行(点划线,dotDot ...)设置DashStyle吗?
Here's something that could help you get started. 这可以帮助您入门。 It has a Canvas containing a few shapes, and a Slider control that allows you to control zooming.
它具有包含一些形状的“画布”,以及允许您控制缩放的“滑块”控件。 You can just add other elements inside the Canvas as required.
您可以根据需要在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>
EDIT : 编辑 :
To change the dash style for the line, simply set the StrokeDashArray property. 要更改线条的破折号样式,只需设置StrokeDashArray属性。 It allows you to specify the pattern for how your line looks like.
它允许您指定线条的样式。 It follows a "segment length, gap length, segment length, gap length..." format, so setting this line:
它遵循“段长度,间隙长度,段长度,间隙长度...”的格式,因此请设置以下行:
<Line Canvas.Left="100" Canvas.Top="100" Stroke="Black"
X1="0" X2="100" Y1="0" Y2="0"
StrokeThickness="3" StrokeDashArray="2,2"/>
gives you this (ie a line made up of a series of segments with a length of 2 followed by gaps with a length of 2): 给你这个(即由一系列长度为2的线段和长度为2的间隙组成的线):
Setting the StrokeDashArray to 将StrokeDashArray设置为
StrokeDashArray="5,1,1,1"
gives you the dash-dot pattern. 给你点划线的模式。
You have a few examples using Canvas and showing Zoom but if you only need a single line of elements you can use a StackPanel and set VerticalAlignment="Center" then you don't need to calculate the positions just the sizes of the lines. 您有一些使用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>
If you need to do multiple diagrams you can create a different DataTemplate for each type of node eg circle, road, label and use an ItemsControl with a ItemsPanelTemplate set to do the same thing. 如果您需要绘制多个图表,则可以为每种类型的节点(例如,圆,道路,标签)创建不同的DataTemplate,并使用具有ItemsPanelTemplate设置的ItemsControl来执行相同的操作。
It is easy to draw simple shapes in WPF. 在WPF中很容易绘制简单的形状。 You can find them in the Shapes namespace with some examples.
您可以通过一些示例在Shapes命名空间中找到它们。
An example for you: 一个适合您的示例:
<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>
This should not be complicated, I would keep it simple by putting a Canvas within a Viewbox. 这不应该太复杂,我可以通过将Canvas放在Viewbox中来使其简单。 Increase the Canvas' Width and Height to zoom out, and Decrease them to zoom in.
增加“画布”的“宽度”和“高度”以缩小,减小“画布”的高度以放大。
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.