Dessiner des lignes et des cercles dans WPF

Question

J'ai besoin de dessiner un graphique comme schéma de station de bus: o-School----o-Church-------o-Police.
Donc, ligne simple et cercles. Aussi j'ai besoin de le zoomer. Comme j'ai VS 2010, je pensais que WPF (tel que je l'ai compris utilise des graphiques vectorisés) devrait être la bonne toile pour commencer à dessiner.

Est-ce possible, compliqué et que recommandez-vous à un débutant WPF?

Merci. Puis-je définir un DashStyle pour la ligne (dash-dot, dotDot ...)?

Answer 1

Voici quelque chose qui pourrait vous aider à démarrer. Il a un canevas contenant quelques formes, et un contrôle Slider qui vous permet de contrôler le zoom. Vous pouvez simplement ajouter d'autres éléments à l'intérieur du canevas si nécessaire.

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

Pour changer le style de tableau de bord pour la ligne, il suffit de définir la propriété StrokeDashArray. Cela vous permet de spécifier le motif de votre ligne. Il fait suite à une « longueur de segment, longueur de l'intervalle, la longueur du segment, longueur de l'espace ... » le format, la mise si cette ligne:

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

vous donne ce (une ligne composée d'une série de segments d'une longueur de 2 suivi par des intervalles d'une longueur de 2):

Réglage de la StrokeDashArray à

StrokeDashArray="5,1,1,1" 

vous donne le motif de points au tableau de bord.

Answer 2

Il est facile de dessiner des formes simples dans WPF. Vous pouvez les trouver dans l'espace de noms Shapes avec quelques exemples.

Un exemple pour vous:

<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

Cela ne devrait pas être compliqué, je garderais simple en mettant une toile dans un Viewbox. Augmenter la largeur de toile et la hauteur pour effectuer un zoom arrière et les diminuer pour zoomer.

<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

Vous avez quelques exemples à l'aide de toile et montrant Zoom mais si vous avez seulement besoin d'une seule ligne d'éléments que vous pouvez utiliser un StackPanel et définissez VerticalAlignment = "Centre" alors vous n'avez pas besoin de calculer les positions juste les tailles des lignes.

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

Si vous devez faire plusieurs diagrammes, vous pouvez créer un autre DataTemplate pour chaque type de noeud par exemple cercle, route, étiquette et utiliser un ItemsControl avec un ItemsPanelTemplate mis à faire la même chose.