wpf mvvm将贝塞尔曲线添加到画布-Java 学习之路

我正在创建一个BezierSpline编辑器来制作自定义动画缓动功能 . 用户可以添加beziercurve部件来创建自己的缓动功能 .

我有一个带有2个用户控件的MainWindow，DesignerControl和InfoControl共享一个DesignerVM作为DataContext .

DesignerControl是使用可拖动矩形查看和编辑样条线的主视图，InfoControl是使用按钮和列表框创建，选择，删除样条线部分以及使用文本块编辑控制点的视图 .

DesignerVM包含SplineVM的ObservableCollection .

我在每个绑定到ObservableCollection的usercontrol中都有一个列表框 .

我使用ItemsPanelTemplate将listbox更改为DesignerControl中的Canvas，现在，我使用DataTemplate作为ListBox.ItemTemplate来更改名为SplineControl的用户控件中的项目 .

在这个SplineControl中，我有一个固定大小的Canvas，其中包含一个定义曲线的Path，以及4个Rectangle来定义controlPoints .

<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: 我是'm using Rachel Lim'用于矩形中绑定的MathConverter，它们运行良好 .

当我启动应用程序时，我的用户控件位于我的主窗口Canvas的左上角，而应该位于向下角落 . 我将userControl的垂直对齐和水平对齐设置为左下角...

我也尝试在我的userControl上设置Canvas.Bottom和Canvas.Left，但没有改变

我错过了什么吗？

1 回答

我已经成功解决了这个问题，使用Grid在Desiger视图中包含我的UserControl，这样userControl就可以使用Margin并在Grid中进行拉伸 .

我还将我的列表框更改为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>

有时，Canvas不是那么有用....

无论如何，请关注 .

回复于 2024-05-03T18:32:25+08:00

wpf mvvm将贝塞尔曲线添加到画布

1 回答

相关问题