2012-06-08 2 views
2

의 특성에 따라 서로 다른 경로 모양을 렌더링하는 방법. 각 활동에는 ActivityType이라는 속성이 있습니다. 내보기에내가 형 활동의 ObservableCollection에를 노출하는 뷰 모델이 어떻게 뷰 모델

나는 ItemsControl에 어떤의 ItemsPanelTemplate은 캔버스입니다 있습니다. ItemsControl의 itemsource 속성을 뷰의 observablecollection에 바인딩합니다. observablecollection의 각 Activity는 observablecollection의 각 Activity의 ActivityType 속성에 따라 달라 보이는 wpf 경로 객체로 뷰에서 렌더링되어야합니다. 나는 각 활동의 ActivityType 속성을 기반으로 캔버스에 다른 경로 개체를 만들려면 어떻게해야합니까

내가 표시 할 각 경로에 대한 내보기의 리소스 섹션에서 스타일 세트를 정의하면?

내가 DataTemplate을에 DataTraiggers을 사용합니까? 뷰에 대한

XAML은 다음과 같습니다 DarkBlue

<LinearGradientBrush x:Key="ItemBrush" StartPoint="0,0" EndPoint="0,1"> 
     <LinearGradientBrush.GradientStops> 
      <GradientStop Color="#FAFBE9" Offset="0" /> 
      <GradientStop Color="Blue" Offset="1" /> 
     </LinearGradientBrush.GradientStops> 
    </LinearGradientBrush> 

    <Style x:Key="FlowChartItemStyle" TargetType="Path"> 
     <Setter Property="Fill" Value="{StaticResource ItemBrush}"/> 
     <Setter Property="Stroke" Value="{StaticResource ItemStroke}"/> 
     <Setter Property="StrokeThickness" Value="1"/> 
     <Setter Property="StrokeLineJoin" Value="Round"/> 
     <Setter Property="Stretch" Value="Fill"/> 
     <Setter Property="IsHitTestVisible" Value="False"/> 
     <Setter Property="SnapsToDevicePixels" Value="True"/> 
     <Setter Property="Height" Value="50"/> 
     <Setter Property="Width" Value="50"/> 
    </Style> 

    <!-- Process --> 
    <Style x:Key="Process" TargetType="Path" BasedOn="{StaticResource FlowChartItemStyle}"> 
     <Setter Property="Data" Value="M 0,0 H 60 V40 H 0 Z"/> 
    </Style> 

    <Style x:Key="Process_DragThumb" TargetType="Path" BasedOn="{StaticResource Process}"> 
     <Setter Property="Height" Value="30"/> 
     <Setter Property="Width" Value="30"/> 
     <Setter Property="Margin" Value="5,5,5,5"/> 
    </Style> 

    <!-- Decision --> 
    <Style x:Key="Decision" TargetType="Path" BasedOn="{StaticResource FlowChartItemStyle}"> 
     <Setter Property="Data" Value="M 0,20 L 30 0 L 60,20 L 30,40 Z"/> 
    </Style> 

    <Style x:Key="Decision_DragThumb" TargetType="Path" BasedOn="{StaticResource Decision}"> 
     <Setter Property="Height" Value="30"/> 
     <Setter Property="Width" Value="30"/> 
     <Setter Property="Margin" Value="5,5,5,5"/> 
     <Setter Property="ToolTip" Value="Decision"/> 
    </Style> 

    <!-- Start --> 
    <Style x:Key="Start" TargetType="Path" BasedOn="{StaticResource FlowChartItemStyle}"> 
     <Setter Property="Data" Value="M 10,20 A 20,20 0 1 1 50,20 A 20,20 0 1 1 10,20"/> 
    </Style> 

    <Style x:Key="Start_DragThumb" TargetType="Path" BasedOn="{StaticResource Start}"> 
     <Setter Property="Height" Value="30"/> 
     <Setter Property="Width" Value="30"/> 
     <Setter Property="Margin" Value="5,5,5,5"/> 
    </Style> 

    <!-- Terminator --> 
    <Style x:Key="Terminator" TargetType="Path" BasedOn="{StaticResource FlowChartItemStyle}"> 
     <Setter Property="Data" Value="M 20,40 A 20,20 0 0 1 20,0 H 40 A 20,20 0 0 1 40,40 Z"/> 
    </Style> 

    <Style x:Key="Terminator_DragThumb" TargetType="Path" BasedOn="{StaticResource Terminator}"> 
     <Setter Property="Height" Value="30"/> 
     <Setter Property="Width" Value="30"/> 
     <Setter Property="Margin" Value="5,5,5,5"/> 
    </Style>   
</Window.Resources> 
<Grid> 
    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"> 
     <ItemsControl ItemsSource="{Binding CanvasActivities}"> 
      <ItemsControl.ItemsPanel> 
       <ItemsPanelTemplate> 
        <Canvas/> 
       </ItemsPanelTemplate> 
      </ItemsControl.ItemsPanel> 
      <ItemsControl.ItemContainerStyle> 
       <Style> 
        <Setter Property="Canvas.Top" Value="{Binding Path=Top}"/> 
        <Setter Property="Canvas.Left" Value="{Binding Path=Left}"/> 
       </Style> 
      </ItemsControl.ItemContainerStyle> 
      <ItemsControl.ItemTemplate> 
       <DataTemplate> 
        <DataTemplate.Triggers> 
         <DataTrigger Value="0" Binding="{Binding Path=ActivityType}"> 

         </DataTrigger> 
         <DataTrigger Value="1" Binding="{Binding Path=ActivityType}"> 

         </DataTrigger> 
         <DataTrigger Value="2" Binding="{Binding Path=ActivityType}"> 

         </DataTrigger> 
         <DataTrigger Value="3" Binding="{Binding Path=ActivityType}"> 

         </DataTrigger> 
        </DataTemplate.Triggers> 
       </DataTemplate> 
      </ItemsControl.ItemTemplate> 
     </ItemsControl> 
    </ScrollViewer> 
</Grid> 
+0

DataTemplateSelector를 사용해야합니다. – Phil

답변

1

또 다른 대안은 자신의 DataTemplateSelector 클래스 ItemsControl.ItemTemplateSelector을 사용하는 것입니다 - 자세한 내용은 http://msdn.microsoft.com/en-us/library/system.windows.controls.itemscontrol.itemtemplateselector.aspxhttp://msdn.microsoft.com/en-us/library/system.windows.controls.datatemplateselector.aspx를 참조하십시오.

그럼 당신은 당신이 보여주는 각 다른 경로에 대한 DataTemplate 별도이있을 것이다.

+0

감사합니다.하지만 저에게 올바르게 제공 한 링크의 샘플을 살펴보면 datatemplateselector 클래스는 뷰의 요소와 뷰 모델의 요소를 인식하고 있어야합니다. MVVM 패턴을 손상시키지 않을까요? – user823486

+0

꼭 그렇지는 않습니다 -보기는 속성을 속성에 바인딩하기 위해 항상보기 모델을 항상 인식하고 있어야합니다. 뷰 모델에는 여전히 뷰, 템플릿 또는 다른 것에 대한 지식이 없습니다. IValueConverter와 비슷한 DataTemplateSelector를 생각해보십시오. 일반적으로 뷰 모델을 이해하고 뷰의 데이터 형식을 지정해야합니다. 내가 .. 구성 요소 내부에 레이블을 추가해야하는 경우 무엇을 위의 코드에서는 –

+0

는 프로세스의 구성 요소 안에, 내가 그에서 프로세스를 표시하는 라벨을 필요로 말한다. – Anil