wpf mvvm 캔버스에 베 지어 곡선을 추가하십시오.

Question

저는 BezierSpline Editor를 생성하여 커스텀 애니메이션 완화 기능을 만들고 있습니다. 사용자는 beziercurve 파트를 추가하여 자신의 여유 함수를 만들 수 있습니다.

나는 UserControls가 2 개인 DesignerControl과 InfoControl이 DataContext로서 DesignerVM을 공유하는 MainWindow를 가지고 있습니다.

DesignerControl은 드래그 가능한 직사각형을 사용하여 스플라인을보고 편집하는 기본보기이며 InfoControl은 단추 및 목록 상자가있는 스플라인 파트를 만들고 선택하고 제거하고 텍스트 블록을 사용하여 제어점을 편집하는 데 사용되는보기입니다.

DesignerVM에는 ObservableCollection of SplineVM이 있습니다.

ObservableCollection에 바인드 된 각 usercontrol에 목록 상자가 있습니다.

나는 itemsPanelTemplate을 사용하여 designerControl에서 목록 상자를 Canvas로 변경했으며 현재는 ListBox.ItemTemplate으로 DataTemplate을 사용하여 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> 

편집 : 나는 사각형 내 바인딩에 대한 레이첼 림의 MathConverter을 사용하고 있는데 그들은 매우 잘 작동합니다.

응용 프로그램을 시작하면 내 usercontrol이 주 윈도우 Canvas의 위쪽 모서리에 있고 대신 아래쪽 모퉁이에 있어야합니다. 내 UserControl을의 수직 정렬과 수평 정렬 아래로 설정하고 왼쪽 ...

가 나는 또한 내 UserControl을에 Canvas.Bottom 및 위해 Canvas.LEFT을 설정하려고했지만 아무것도 내가 뭔가를 놓치고 있습니까

을 변경되지했습니다 ?

Answer 1

저는이 문제를 해결하기 위해 Desiger보기에서 UserControl을 포함하기 위해 Grid를 사용하여 userControl의 여백을 설정하고 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> 

을이이 게시물과 아무 상관이없는, 캔버스는 그렇지 않다 유용한 .........

어쨌든 Thx.