WPF TabItem - 图像绑定答案

【问题标题】：WPF TabItem - Image BindingWPF TabItem - 图像绑定
【发布时间】：2016-02-19 12:21:24
【问题描述】：

问题

我正在尝试将我的TabItem 中的图像绑定到我的TabControlResource 部分，但我似乎无法做到这一点。 Header 文本很好，因为 TabItem 具有 Header 属性，但我无法将图像添加到任何内容。

代码

这是我的全部 TabControl 代码：

<TabControl Margin="10" BorderBrush="#c83620" BorderThickness="4" Background="#e37e6e" FontFamily="Segoe UI" FontSize="14" >
        <TabControl.Resources>
            <Style TargetType="TabItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="TabItem">
                            <Border Name="Border" BorderThickness="4,4,4,0" BorderBrush="#c83620" CornerRadius="4,4,0,0" Padding="6,4,6,4" Margin="6,0">
                                <StackPanel Orientation="Horizontal" Margin="6,4,6,4">
                                    <Image Name="img" Height="15" Width="15" Margin="0,0,4,0" Source="../Images/delete.png" />
                                    <Label Grid.Row="0" Name="Text" Foreground="Black" Content="{TemplateBinding Header}"/>
                                </StackPanel>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected" Value="True">
                                    <Setter TargetName="Border" Property="Background" Value="#e37e6e" />
                                    <Setter TargetName="Text" Property="TextBlock.Foreground" Value="White"/>
                                    <Setter TargetName="Text" Property="TextBlock.FontWeight" Value="Bold"/>
                                    <Setter TargetName="Border" Property="Margin" Value="1,1,1,-4"/>
                                    <Setter TargetName="Border" Property="Padding" Value="2"/>
                                </Trigger>
                                <Trigger Property="IsSelected" Value="False">
                                    <Setter TargetName="Text" Property="TextBlock.Foreground" Value="#c83620"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </TabControl.Resources>
        <TabItem Margin="-3,0,0,0" Header="Login">
        </TabItem>
        <TabItem Header="General" >
                <Label Content="Content goes here..." />
        </TabItem>
        <TabItem Header="Security" />
        <TabItem Header="Details" />
    </TabControl>

从下面的部分可以看出，我将标签的内容绑定到 TabItem 的标题，它工作正常：

<Border Name="Border" BorderThickness="4,4,4,0" BorderBrush="#c83620" CornerRadius="4,4,0,0" Padding="6,4,6,4" Margin="6,0">
    <StackPanel Orientation="Horizontal" Margin="6,4,6,4">
        <Image Name="img" Height="15" Width="15" Margin="0,0,4,0" Source="../Images/delete.png" />
        <Label Grid.Row="0" Name="Text" Foreground="Black" Content="{TemplateBinding Header}"/>
     </StackPanel>
</Border>

但我想要为每个TabItems 提供不同的图像。我在哪里可以将图像绑定到TabItem 上以获得正确的图像？

【问题讨论】：

这篇文章 (stackoverflow.com/questions/9232502/…) 在类似的情况下帮助了我。这个想法是通过 AttachedProperty 将参数（图像 uri）传递给模板。或者也许只是使用Tag 属性（属性）。我需要超过 1 个参数并为它们使用 AttachedProperties

标签： c# wpf xaml tabcontrol xaml-binding

【解决方案1】：

您可以通过使用模板的其他属性来做到这一点，例如Tag 属性。所以图片绑定应该是这样的。

<Image Name="img" Height="15" Width="15" Margin="0,0,4,0" 
  Source="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Tag.Source}" />

你应该在资源中定义所有这样的图像。

<Image x:Key="testImage" Source="/WPFTest;component/Images/Reload.png" />

并将其绑定到TabItem 的Tag 属性。

<TabItem Header="General" Tag="{StaticResource testImage}" >

【讨论】：