0

カスタム アニメーション イージング関数を作成する BezierSpline エディターを作成しています。ユーザーは、独自のイージング関数を作成するためにベジエ曲線パーツを追加する可能性があります。

DesignerVM を DataContext として共有する 2 つのユーザー コントロール DesignerControl と InfoControl を持つ MainWindow があります。

DesignerControl は、ドラッグ可能な Rectangles を使用してスプラインを表示および編集するためのメイン ビューであり、InfoControl は、ボタンとリストボックスを使用してスプライン パーツを作成、選択、削除し、テキストブロックを使用してコントロール ポイントを編集するためのビューです。

DesignerVM には、SplineVM の ObservableCollection が含まれています。

ObservableCollectionにバインドされた各ユーザーコントロールにリストボックスがあります。

ItemsPanelTemplate を使用してリスト ボックスを designerControl の Canvas に変更しました。今のところ、DataTemplate を ListBox.ItemTemplate として使用して、SplineControl という名前のユーザー コントロールの項目を変更しています。

この SplineControl には、曲線を定義するパスを含む固定サイズのキャンバスと、controlPoint を定義する 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>

編集: Rectangles のバインドに Rachel Lim の MathConverter を使用していますが、非常にうまく機能します。

アプリケーションを起動すると、ユーザーコントロールがメインウィンドウのキャンバスの左上隅にあり、代わりに左下隅にあるはずです。userControl の垂直方向の配置と水平方向の配置を下と左に設定しました...

また、userControl に Canvas.Bottom と Canvas.Left を設定しようとしましたが、何も変わりませんでした

何か不足していますか？

4

1 に答える 1

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 があまり役に立たない場合もあります....

とにかく心配Thx。

于 2012-06-29T07:27:31.363 に答える