Нарисуйте линии и круги в WPF

Question

Мне нужно нарисовать график, подобный схеме автовокзала: o-School----o-Church-------o-Police.
Итак, простая линия и круги. Также мне нужно увеличить его.

Так как у меня VS 2010, я думал, что WPF (насколько я понял, он использует векторизованную графику) должен быть хорошим холстом для начала рисования.

Возможно, сложно и что вы порекомендуете для начинающего WPF.

Спасибо.

EDIT: Могу ли я установить DashStyle для линии (тире, точка ...)?

Answer 1

У вас есть несколько примеров, использующих 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 для каждого типа узла, например, круга, дороги, метки и использовать ItemsControl сItemsPanelTemplate настроен на то же самое.

Answer 2

Вот кое-что, что может помочь вам начать.Он имеет холст, содержащий несколько фигур, и элемент управления 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>

EDIT :

Чтобы изменить стиль штрихов для линии, просто установите свойство 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 3

Это не должно быть сложным, я бы упростил это, поместив Canvas в Viewbox.Увеличьте ширину и высоту холста, чтобы уменьшить масштаб, и уменьшите их, чтобы увеличить.

  <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

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