wpf mvvm ajouter des courbes bezier à canvas

Question

Je crée un éditeur BezierSpline pour créer des fonctions d'accélération d'animation personnalisées. L'utilisateur aura la possibilité d'ajouter des pièces beziercurve pour créer sa propre fonction d'accélération.

J'ai une MainWindow avec 2 contrôles usuels DesignerControl et InfoControl partageant un DesignerVM comme DataContext. DesignerControl est la vue principale pour visualiser et modifier les splines à l'aide de Rectangles déplaçables, et InfoControl est la vue pour créer, sélectionner, supprimer des parties de splines avec des boutons et une liste et également éditer des points de contrôle en utilisant des blocs de texte.

Le DesignerVM contient une ObservableCollection de SplineVM.

J'ai une liste dans chaque commande usercontrol liée à ObservableCollection.

J'ai utilisé ItemsPanelTemplate pour changer la zone de liste dans un Canvas dans le designerControl, et pour l'instant, j'utilise un DataTemplate en tant que ListBox.ItemTemplate pour changer mes éléments dans un usercontrol nommé SplineControl.

Dans ce SplineControl, j'ai un Canevas avec une taille fixe contenant un Chemin définissant la courbe et 4 Rectangles pour définir les points de contrôle.

<UserControl x:Class="Easing_Spline_Tool.SplineControl" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:local="clr-namespace:Easing_Spline_Tool" 
     mc:Ignorable="d" 
     d:DesignHeight="300" d:DesignWidth="300" 
     DataContext="SplineVM"> 
    <UserControl.Resources> 
     <local:MathConverter x:Key="mathconverter"/> 
    </UserControl.Resources> 
    <Canvas Width="300" Height="300" x:Name="mycanvas" Background="Black"> 
     <Path x:Name="curve" Stroke="#F02828" StrokeThickness="3"> 
      <Path.Data> 
       <PathGeometry> 
        <PathGeometry.Figures> 
         <PathFigureCollection> 
          <PathFigure> 
           <PathFigure.Segments> 
            <PathSegmentCollection x:Name="pathsegment"/> 
           </PathFigure.Segments> 
          </PathFigure> 
         </PathFigureCollection> 
        </PathGeometry.Figures> 
       </PathGeometry> 
      </Path.Data> 
     </Path> 
     <Rectangle Fill="White" x:Name="curvePoint1" Width="8" Height="8" Canvas.Bottom="0" Canvas.Left="0"/> 
     <Rectangle Fill="White" x:Name="curvePoint2" Width="8" Height="8" RadiusX="4" RadiusY="4" Canvas.Bottom="0" Canvas.Left="{Binding ElementName=mycanvas, Path=ActualWidth, Converter={StaticResource mathconverter}, ConverterParameter=(@VALUE/4)}"/> 
     <Rectangle Fill="White" x:Name="curvePoint3" Width="8" Height="8" RadiusX="4" RadiusY="4" Canvas.Bottom="0" Canvas.Left="{Binding ElementName=mycanvas, Path=ActualWidth, Converter={StaticResource mathconverter}, ConverterParameter=(@VALUE/2)}"/> 
     <Rectangle Fill="White" x:Name="curvepoint4" Width="4" Height="4" Canvas.Bottom="0" Canvas.Left="{Binding ElementName=mycanvas, Path=ActualWidth, Converter={StaticResource mathconverter}, ConverterParameter=(@VALUE)}"/> 
    </Canvas> 
</UserControl> 

Edit: J'utilise MathConverter de Rachel Lim pour mes liaisons dans le Rectangles et ils fonctionnent très bien. Lorsque je lance l'application, mon contrôle utilisateur se trouve dans le coin supérieur gauche de mon canevas MainWindow et doit être dans le coin inférieur droit. J'ai mis mon alignement vertical de UserControl et l'alignement horizontal en bas et à gauche ...

J'ai aussi essayé de mettre Canvas.Bottom et Canvas.Left sur mon UserControl, mais rien n'a changé

Est-ce que je manque quelque chose ?

Answer 1

J'ai réussi à contourner ce problème en utilisant une grille pour contenir mon UserControl dans la vue Desiger afin que le userControl soit bien positionné en utilisant Margin et étiré dans la grille.

J'ai aussi changé mon listbox dans un ItemsControl pour définir mes propres règles de sélection, mais cela n'a rien à voir avec ce poste (et il fonctionne maintenant ^^)

<ItemsControl x:Name="curveList" 
       ItemsSource="{Binding SplineVMList}" 
       Background="{x:Null}" 
       > 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <Grid x:Name="canvas" Margin="46,60,83,46"/> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 
    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
      <local:SplineControl x:Name="usercontrol" IsSelected="{Binding IsSelected, Mode=TwoWay}" Index="{Binding Index, Mode=TwoWay}"> 
       <local:SplineControl.Style> 
        <Style> 
         <Style.Triggers> 
          <DataTrigger Binding="{Binding IsSelected}" Value="True"> 
           <Setter Property="Panel.ZIndex" Value="99"/> 
          </DataTrigger> 
          <DataTrigger Binding="{Binding IsSelected}" Value="False"> 
           <Setter Property="Panel.ZIndex" Value="-99"/> 
          </DataTrigger> 
         </Style.Triggers> 
        </Style> 
       </local:SplineControl.Style> 
      </local:SplineControl> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 
</ItemsControl> 
<Grid> 
    <TextBlock FontSize="20" Foreground="Black" Text="Time" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="0,0,11,35"/> 
    <TextBlock FontSize="20" Foreground="Black" Text="Acceleration" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5,9"/> 
    <Rectangle Fill="White" Stroke="Black" Height="2" VerticalAlignment="Bottom" Margin="45,0,65,45"/> 
    <Rectangle Fill="White" Stroke="Black" Width="2" HorizontalAlignment="Left" Margin="45,45,0,45"/> 
</Grid> 

Parfois, une toile est pas Utile ....

Thx de toute façon.