WPF - Dessine une ligne courbe à partir de l'écran central jusqu'à une marge qui s'adapte dynamiquement au fur et à mesure que l'écran change

Question

Je souhaite tracer une ligne courbe du centre de l'écran vers la marge supérieure gauche. Comme la fenêtre redimensionne la ligne devrait changer ses coordonnées. Est-il possible de faire cela en respectant MVVM? Exemple:

Answer 1

Notez qu'un Viewbox échelles la sortie rendue de son contenu (y compris par exemple le StrokeThickness d'un Path), mais pas la géométrie d'un dessin.

L'approche suivante fonctionne sans mise à l'échelle du StrokeThickness, parce que les échelles de contrôle Ellipse sa géométrie pour adapter ses limites:

<Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition/> 
     <ColumnDefinition/> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
     <RowDefinition/> 
     <RowDefinition/> 
    </Grid.RowDefinitions> 
    <Border ClipToBounds="True"> 
     <Ellipse Stroke="Black" StrokeThickness="1" RenderTransformOrigin="0,1"> 
      <Ellipse.RenderTransform> 
       <ScaleTransform ScaleX="2" ScaleY="2"/> 
      </Ellipse.RenderTransform> 
     </Ellipse> 
    </Border> 
</Grid> 

Answer 2

Créer une grille dans la fenêtre avec 2 colonnes à la fois avec une largeur de 1 *

Pour votre grille dans la première colonne ajouter un négatoscope avec StretchDirection = deux et extensible = Remplir

Dans la vue, ajoutez votre courbe. Lorsque la fenêtre est redimensionnée, les colonnes deviennent plus petites et la vue rétrécit le contenu.

<Window x:Class="MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:local="clr-namespace:WpfApplication1" 
    mc:Ignorable="d" 
    Title="MainWindow" Height="350" Width="525"> 
<Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="1*"/> 
     <ColumnDefinition Width="1*"/> 
    </Grid.ColumnDefinitions> 
    <Viewbox StretchDirection="Both" Stretch="Fill"> 
     <Canvas Width="100" Height="200"> 
      <Path Stroke="Black" StrokeThickness="3"> 
       <Path.Data> 
        <PathGeometry> 
         <PathGeometry.Figures> 
          <PathFigure StartPoint="0,0" IsClosed="False"> 
           <ArcSegment Point="100,100" Size="100 100"/> 
          </PathFigure> 
         </PathGeometry.Figures> 
        </PathGeometry> 
       </Path.Data> 
      </Path> 
     </Canvas> 
    </Viewbox> 
</Grid>