wpf mvvm add bezier curve to canvas

Question

Я создаю редактор BezierSpline для создания пользовательских функций облегчения анимации. Пользователь будет иметь возможность добавлять элементы безье, чтобы создать собственную функцию ослабления.

У меня есть MainWindow с 2 usercontrols DesignerControl и InfoControl, совместно использующий DesignerVM как DataContext.

DesignerControl - это основной вид для просмотра и редактирования сплайнов с использованием перетаскиваемых прямоугольников, а InfoControl - это представление для создания, выбора, удаления деталей сплайнов с помощью кнопок и списка, а также редактирования контрольных точек с использованием текстовых блоков.

В DesignerVM содержится ObservableCollection SplineVM.

У меня есть список в каждом usercontrol, привязанный к ObservableCollection.

Я использовал ItemsPanelTemplate, чтобы изменить список на холст в конструктореControl, и на данный момент я использую DataTemplate как ListBox.ItemTemplate для изменения своих элементов в пользовательском контроллере с именем SplineControl.

В этом SplineControl у меня есть Canvas с фиксированным размером, содержащим Path, определяющий кривую, и 4 Rectangles для определения контрольных точек.

<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: Я использую MathConverter Рэйчел Лимы для моих привязок в прямоугольниках, и они работают очень хорошо.

Когда я запускаю приложение, мой пользовательский контроль находится в верхнем углу моего холста Mainwindow и должен находиться в нижнем углу. Я установил мой UserControl вертикаль выравнивание и горизонтальное выравнивание по нижней и левой ...

Я также попытался установить Canvas.Bottom и Canvas.Left на моем UserControl, но ничего не изменилось

Могу ли я что-то отсутствует ?

Answer 1

Мне удалось обойти эту проблему, используя сетку, чтобы содержать мой UserControl в представлении Desiger, поэтому UserControl хорошо позиционируется с использованием Margin и растягивается в Grid.

Я также изменил мою ListBox в ItemsControl, чтобы определить свои собственные правила отбора, но это не имеет ничего общего с этой должности (и он работает сейчас ^^)

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

Иногда холст не так полезный ....

Thx для беспокойства в любом случае.