wpf의 동적 탭 컨트롤을위한 사용자 정의 스타일

Question

내 페이지에는 동적 인 탭 컨트롤이 있습니다. TabItem의 이미지와 함께 TabItem, TabContent를 동적으로 채우고 싶습니다. My Image 리소스는 이미 ResourceDictionary, Icons.xaml에 있습니다.

여기 내 코드입니다. FirstTabStyle, TabStyle 및 LastTabStyle :

<TabControl x:Name="CheckoutTabControl" 
        ItemsSource="{Binding Steps}" 
        BorderThickness="0" 
        Margin="10" 
        Style="{StaticResource WizardTabControlStyle}" SelectedIndex="0"> 
      <TabControl.ItemTemplate> 
       <DataTemplate> 
        <StackPanel Orientation="Vertical"> 
         <Image Source="{Binding TabImage}"/> 
         <TextBlock Text="{Binding TabHeader}"/> 
        </StackPanel> 
       </DataTemplate> 
      </TabControl.ItemTemplate> 
      <TabControl.ContentTemplate> 
       <DataTemplate> 
        <Frame NavigationUIVisibility="Hidden" Source="{Binding TabContent}"/> 
       </DataTemplate> 
      </TabControl.ContentTemplate> 
     </TabControl> 

을 TabControl 스타일은 3 가지 스타일이 포함되어 있습니다. 컨트롤에서 스타일과 이미지 리소스를 어떻게 바인딩합니까?

항목의 스타일과 이미지를로드 할 수 없습니다. 뒤에 내 코드 :

public MainWindow() 
     { 
      InitializeComponent(); 
      this.DataContext = this; 
      LoadReplacementSteps(); 
     } 

     private void LoadReplacementSteps() 
     { 
      List<PlacementSteps> rSteps = new List<PlacementSteps>(); 

      rSteps.Add(new PlacementSteps() { TabImage = "pairing", TabHeader = "Pairing", TabContent = "View/PairData.xaml" }); 
      rSteps.Add(new PlacementSteps() { TabImage = "write-data", TabHeader = "Write Data", TabContent = "View/WriteData.xaml" }); 
      rSteps.Add(new PlacementSteps() { TabImage = "steering", TabHeader = "Read Data", TabContent = "View/ReadData.xaml" }); 

      Steps = rSteps; 


     } 

PlacementSteps 등급 :

public class PlacementSteps 
    { 
     public string TabImage { get; set; } 
     public string TabHeader { get; set; } 
     public string TabContent { get; set; } 
    } 

내 Resouces : 사전에

<Canvas x:Key="steering" Width="24" Height="24"> 
     <Path Data="M12,2A10,10 0 0,0 2,..." /> 
    </Canvas> 

    <Canvas x:Key="write-data" Width="24" Height="24"> 
     <Path Data="M17,9H7V7H17M17,13H7V11H17M14,..." /> 
    </Canvas> 

    <Canvas x:Key="pairing" Width="24" Height="24"> 
     <Path Data="M37.24749,26.223C36.273693,...."/> 

    </Canvas> 

감사합니다 ..

Answer 1

첫 번째 문제는 당신이 결합하는 시도이다 문자열을 이미지 소스에 추가하십시오. 그게 효과가 없을거야.

그러면 이미지로 변환하거나 바운드 할 수없는 convas가 있습니다.

나는 당신이 당신의 자원을 변경 제안 :

<DrawingImage x:Key="steering"> 
    <DrawingImage.Drawing> 
     <GeometryDrawing Geometry="M12,2A10,10 0 0,0 2,..." /> 
    </DrawingImage.Drawing> 
</DrawingImage> 

<DrawingImage x:Key="write-data"> 
    <DrawingImage.Drawing> 
     <GeometryDrawing Geometry="M17,9H7V7H17M17,13H7V11H17M14,..." /> 
    </DrawingImage.Drawing> 
</DrawingImage> 

<DrawingImage x:Key="pairing"> 
    <DrawingImage.Drawing> 
     <GeometryDrawing Geometry="M37.24749,26.223C36.273693,...." /> 
    </DrawingImage.Drawing> 
</DrawingImage>  

DrawingImage는 이미지에 더 적합하다. 에

public class PlacementSteps 
{ 
    public DrawingImage TabImage { get; set; } 
    public string TabHeader { get; set; } 
    public string TabContent { get; set; } 
} 

그리고 당신의 LoadReplacementSteps :

는 그런 다음에 PlacementStep 클래스를 변경해야

private void LoadReplacementSteps() 
    { 
     List<PlacementSteps> rSteps = new List<PlacementSteps>(); 

     rSteps.Add(new PlacementSteps() { TabImage = (DrawingImage)FindResource("pairing"), TabHeader = "Pairing", TabContent = "View/PairData.xaml" }); 
     rSteps.Add(new PlacementSteps() { TabImage = (DrawingImage)FindResource("write-data"), TabHeader = "Write Data", TabContent = "View/WriteData.xaml" }); 
     rSteps.Add(new PlacementSteps() { TabImage = (DrawingImage)FindResource("steering"), TabHeader = "Read Data", TabContent = "View/ReadData.xaml" }); 

     Steps = rSteps; 
    } 

그리고 당신은 당신의 템플릿에서 이미지의 크기를 제어 할 수 있습니다 :

<Image Source="{Binding TabImage}" Width="24" Height="24"/>