Question

我的页面包含一个动态的标签控件。我想动态填充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>

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

我的资源：

<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

您的第一个问题是您尝试将字符串绑定到您的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>

DrawingImage更适合Image。

然后您必须将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中动态制表符控件的自定义样式

1 个答案: