WPF MVVM :이처럼 보이는 SVG 파일에서 변환 된 XAML 파일이

Question

XAML 파일에서 도형의 동적 그림은 (는 음표를 나타냅니다) :

<?xml version="1.0" encoding="UTF-8"?> 
<Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Stretch="Uniform"> 
    <Canvas Name="Layer_1" Width="50" Height="50" Canvas.Left="0" Canvas.Top="0"> 
     <Canvas.RenderTransform><TranslateTransform X="0" Y="0"/> 
     </Canvas.RenderTransform><Canvas.Resources/> 
     <!--Unknown tag: metadata--><!--Unknown tag: sodipodi:namedview--> 
      <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path2995" Fill="#FFAA0000"> 
       <Path.Data> 
        <PathGeometry Figures="M39.967 23.133c-0.211 0.189-0.523 0.199-0.748 0.028l-7.443-5.664l-3.526 21.095c-0.013 0.08-0.042 0.153-0.083 0.219 c-0.707 3.024-4.566 5.278-9.104 5.278c-5.087 0-9.226-2.817-9.226-6.28s4.138-6.281 9.226-6.281c2.089 0 4.075 0.466 5.689 1.324 l4.664-26.453c0.042-0.242 0.231-0.434 0.475-0.479c0.237-0.041 0.485 0.068 0.611 0.28l9.581 16.192 C40.227 22.637 40.178 22.945 39.967 23.133z" FillRule="NonZero"/> 
       </Path.Data> 
      </Path> 
     </Canvas> 
</Viewbox> 

차라리 새로 온 사람이지만 WPF 및 데이터 바인딩, 나는 MVVM 디자인 패턴을 고수하려고합니다. 여기에서 달성하고 싶은 것은 Button에 바인딩 된 Command를 사용하여 Canvas에이 도형을 동적으로 그려주는 것입니다 (예를 들어). Path.Data/PathGeometry/Figures를 바인딩하는 방법이 있나요? "M39.967 ..."을 문자열로 저장한다고 가정합니다 (파일 판독기에 대해 걱정할 필요가 없습니다)? 할 수있는, 내가 모르는 어떤 How do you animate a line on a canvas in C#?

How to create and connect custom user buttons/controls with lines using windows forms

동적 위의 같은 사용자 정의 모양을 그리는 방법입니다 :

나는이 예제와 함께 놀았 던 역동적 인 그림을 배우려면 사용자가 파일에서 가져온 파일. 도와주세요!

Answer 1

유효한 Path Geometry 문자열은 실제로 바인딩 중에 자동으로 Geometry으로 변환됩니다.

그래서 당신은 (모든 관련 속성에 대한 INotifyPropertyChanged을 구현하는 과정의) 아래 그림과 같이 뷰 모델을 만들 수 있습니다 :

public class ViewModel 
{ 
    public string Geometry { get; set; } 
} 

이 파일에서 Geometry 속성을 읽고 어떻게 든 그것을 초기화하고, 이런 식으로 결합 이 같은 샘플의 구조와

<Path Fill="Black" Data="{Binding Geometry}"/> 

---

테스트를 :

DataContext = new ViewModel 
{ 
    Geometry = "M39.967 23.133c-0.211 0.189-0.523 0.199-0.748 0.028l-7.443-5.664l-3.526 21.095c-0.013 0.08-0.042 0.153-0.083 0.219 c-0.707 3.024-4.566 5.278-9.104 5.278c-5.087 0-9.226-2.817-9.226-6.28s4.138-6.281 9.226-6.281c2.089 0 4.075 0.466 5.689 1.324 l4.664-26.453c0.042-0.242 0.231-0.434 0.475-0.479c0.237-0.041 0.485 0.068 0.611 0.28l9.581 16.192 C40.227 22.637 40.178 22.945 39.967 23.133z" 
}; 

Answer 2

당신이 파일

예에서 XAML을로드 XamlReader를 사용할 수있다는

위의 예

 using (FileStream fs = new FileStream(myFile, FileAccess.Read)) 
     { 
      Viewbox viewBox = (Viewbox)XamlReader.Load(fs); 
      this.Content = viewBox; //this is a window here 
     } 

는 주어진 파일에서 Viewbox을로드하고 윈도우의 내용으로 설정하는 차례 창에 파일 내용을 표시합니다.

필요에 따라 코드를 조정할 수 있습니다. 당신은 문자열에서로드해야 할 경우가 뷰 박스 질문에 주어진 당신의 XAML에 따라 사용되는 위의 예에서

 Viewbox viewBox = (Viewbox)XamlReader.Parse(xamlString); 
     this.Content = viewBox; 

처럼 사용할 수 있습니다, 그것은 당신의 요구에 따라뿐만 아니라 변경 될 수 있습니다.