Benutzerdefinierter Stil für ein dynamisches Registersteuerelement in WPF

Question

Meine Seite enthält ein Registersteuerelement, das dynamisch ist. Ich möchte das TabItem TabContent zusammen mit einem Bild in dem TabItem dynamisch auffüllen. Meine Bildressourcen befinden sich bereits in einem ResourceDictionary, Icons.xaml.

Hier ist mein Code.

<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> 

Die TabControl Styles enthält 3 verschiedene Stile: FirstTabStyle, TabStyle und LastTabStyle. Wie binde ich die Stile und die Bildressource in das Steuerelement ein?

Ich kann die Stile und Bilder für die Elemente nicht laden. My-Code hinter:

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 Klasse:

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

Mein 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> 

Vielen Dank im Voraus ..

Answer 1

Ihr erstes Problem ist, dass Sie versuchen, zu binden string zu deiner Bildquelle. Das wird nicht funktionieren.

Dann haben Sie eine Convas, die nicht übersetzt oder gebunden werden kann.

Ich würde vorschlagen, dass Sie Ihre Ressourcen ändern:

<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 ist besser geeignet für Bild.

Dann müssen Sie Ihre PlacementStep Klasse ändern:

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

Und Ihre LoadReplacementSteps zu:

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; 
    } 

Und Sie können aus Ihrer Vorlage Größe des Bildes steuern:

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