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>

謝謝..

來源

2016-08-29 Liptakant Mishra

步驟是什麼？如果只是一個列表，那麼在加載替換步驟後，您必須設置您的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"/>

來源

2016-09-01 12:00:08

wpf中動態選項卡控件的自定義樣式

回答

相關問題