WPF TabItem - 图像绑定
WPF TabItem - Image Binding
问题
我正在尝试将我的 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
的 header 并且它工作正常:
<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
以获得正确的图像?
您可以使用模板的其他属性来做到这一点,例如 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}" >
问题
我正在尝试将我的 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
的 header 并且它工作正常:
<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
以获得正确的图像?
您可以使用模板的其他属性来做到这一点,例如 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}" >