Я создаю редактор BezierSpline для создания пользовательских функций облегчения анимации. Пользователь будет иметь возможность добавлять элементы безье, чтобы создать собственную функцию ослабления.wpf mvvm add bezier curve to canvas
У меня есть 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, но ничего не изменилось
Могу ли я что-то отсутствует ?
Может показывать код, содержащий этот элемент UserControl и его сегмент? – Rachel