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

我的页面包含一个动态选项卡控件。我想动态填充TabItem、TabContent以及TabItem中的图像。我的图像资源已经在ResourceDictionary Icons.xaml中

这是我的密码

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

我的资源：

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

---

提前感谢。

您的第一个问题是您试图将字符串绑定到imagesource。那是行不通的

然后您就有了一个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>    

以及您的LoadReplacement步骤：

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

private void LoadReplacementSteps（）
{
List rSteps=新列表（）；
Add（new PlacementSteps（）{TabImage=（DrawingImage）FindResource（“配对”），TabHeader=“配对”，TabContent=“View/PairData.xaml”}）；
Add（new PlacementSteps（）{TabImage=（DrawingImage）FindResource（“write data”），TabHeader=“write data”，TabContent=“View/WriteData.xaml”}）；
添加（new PlacementSteps（）{TabImage=（DrawingImage）FindResource（“转向”），TabHeader=“读取数据”，TabContent=“查看/读取数据.xaml”}）；
步骤=步骤；
}

您可以通过模板控制图像的大小：

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

---

您的第一个问题是尝试将字符串绑定到imagesource。那是行不通的

然后您就有了一个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>    

以及您的LoadReplacement步骤：

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

private void LoadReplacementSteps（）
{
List rSteps=新列表（）；
Add（new PlacementSteps（）{TabImage=（DrawingImage）FindResource（“配对”），TabHeader=“配对”，TabContent=“View/PairData.xaml”}）；
Add（new PlacementSteps（）{TabImage=（DrawingImage）FindResource（“write data”），TabHeader=“write data”，TabContent=“View/WriteData.xaml”}）；
添加（new PlacementSteps（）{TabImage=（DrawingImage）FindResource（“转向”），TabHeader=“读取数据”，TabContent=“查看/读取数据.xaml”}）；
步骤=步骤；
}

您可以通过模板控制图像的大小：

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

什么是步骤？如果只是一个列表，那么在加载替换步骤后必须设置datacontext。步骤是TabControl的ItemSource，我可以绑定它。问题是，我无法应用动态选项卡项的样式。我相信您必须显示PlacementSteps类。什么是TabImage？正如我所看到的，它是字符串，但您的资源是画布。你应该至少发布一个可复制的代码。Placement类只有我在绑定中使用的3个属性。我知道，这里我的代码错了，但这就是我的问题所在。！如何在TabImage中绑定资源，就像绑定TabHeader一样。@Nawed Nabi Zada请检查更新的postWhat is Steps？如果只是一个列表，那么在加载替换步骤后必须设置datacontext。步骤是TabControl的ItemSource，我可以绑定它。问题是，我无法应用动态选项卡项的样式。我相信您必须显示PlacementSteps类。什么是TabImage？正如我所看到的，它是字符串，但您的资源是画布。你应该至少发布一个可复制的代码。Placement类只有我在绑定中使用的3个属性。我知道，这里我的代码错了，但这就是我的问题所在。！如何像绑定TabHeader一样绑定TabImage中的资源。@Nawed Nabi Zada请查看更新的帖子