wpf中动态选项卡控件的自定义样式

问题描述：

我的页面包含一个动态的选项卡控件。我想动态地填充TabItem，TabContent和TabItem中的图像。我的图像资源已经在ResourceDictionary Icons.xaml中。wpf中动态选项卡控件的自定义样式

这是我的代码。

<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种不同的样式：FirstTabStyle，TabStyle和LastTabStyle。如何绑定控件中的样式和图像资源？

我无法加载项目的样式和图像。背后我的代码：

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>

谢谢..

步骤是什么？如果只是一个列表，那么在加载替换步骤后，您必须设置您的datacontext。 –

步骤是TabControl的ItemSource，我可以绑定它。问题是，我无法为动态标签项应用样式。 –

我相信你必须展示你的PlacementSteps类。什么是TabImage？我可以看到它是字符串，但是您的资源是画布。您应该至少发布一个可重复的代码。 –

答

你的第一个问题是，你尝试绑定字符串到您的图像源。这不会奏效。

然后你有一个无法翻译或绑定到图像的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更适合图像。

然后你有你的PlacementStep类更改为：

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

和你LoadReplacementSteps到：

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

wpf中动态选项卡控件的自定义样式

相关推荐