Question

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

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

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

DesignerVM包含一个SplineVM的ObservableCollection。

我在每个绑定到ObservableCollection的用户控件中都有一个列表框。

我使用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>

修改我正在使用Rachel Lim的MathConverter来处理矩形中的绑定，它们运行得非常好。

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

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

我错过了什么吗？

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

有时，画布并不是那么有用....

无论如何，这是值得关注的。

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

1 个答案: