0

我正在创建一个 BezierSpline 编辑器来制作自定义动画缓动功能。用户可以添加贝塞尔曲线部分来创建自己的缓动函数。

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

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

DesignerVM 包含 SplineVM 的 ObservableCollection。

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

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

在这个 SplineControl 中，我有一个固定大小的画布，其中包含一个定义曲线的路径，以及 4 个用于定义控制点的矩形。 

<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 但没有任何改变

我错过了什么吗？

4

1 回答 1

1

我已经设法解决了这个问题，使用 Grid 将我的 UserControl 包含在 Desiger 视图中，因此 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>

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

无论如何，谢谢。

于 2012-06-29T07:27:31.363 回答