在TabItem ContenTemplate上触发IsMouseOver [英] Trigger for IsMouseOver on TabItem ContenTemplate
本文介绍了在TabItem ContenTemplate上触发IsMouseOver的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在使用TabItem样式时遇到问题，也许有人可以帮助我。
遵循样式问题：
< Style x：Key = ChildrenTabItemStyle TargetType = TabItem>
< Style.Resources>
< SolidColorBrush x：Key = ButtonNormalBackground Color =＃FFEAE8E8 />
< LinearGradientBrush x：Key = ButtonOverBackground EndPoint = 0,1 StartPoint = 0,0>
< GradientStop Color =＃FFFAFAFA Offset = 0 />
< GradientStop Color =＃FFE0E0E3 Offset = 1 />
< / LinearGradientBrush>
< LinearGradientBrush x：Key = ButtonPressedBackground EndPoint = 0,1 StartPoint = 0,0>
< GradientStop Color =＃FFE0E0E2 Offset = 0 />
< GradientStop Color =＃FFF8F8F8 Offset = 1 />
< / LinearGradientBrush>
< SolidColorBrush x：Key = ButtonNormalBorder Color =＃FF969696 />
< Style x：Key = CloseableTabItemButtonStyle TargetType = {x：Type Button}>
< Setter Property = FocusVisualStyle Value = {x：Null} />
< Setter Property = Background Value = {DynamicResource ButtonNormalBackground} />
< Setter Property = BorderBrush Value = Transparent />
< Setter Property = BorderThickness Value = 2,2,2,0 />
< Setter Property = Foreground Value = {DynamicResource {x：Static SystemColors.ControlTextBrushKey}} />
< Setter Property = HorizontalContentAlignment Value = Center />
< Setter Property = VerticalContentAlignment Value = Center />
< Setter Property = Padding Value = 4 />
< Setter Property = Template>
< Setter.Value>
< ControlTemplate TargetType = {x：Type Button}>
< Grid>
< Border SnapsToDevicePixels = true x：Name = Chrome Background = {TemplateBinding Background} BorderBrush = {TemplateBinding BorderBrush} BorderThickness = {TemplateBinding BorderThickness} CornerRadius = 2 Opacity = 0 />
< ContentPresenter SnapsToDevicePixels = {TemplateBinding SnapsToDevicePixels} HorizontalAlignment = {TemplateBinding HorizontalContentAlignment} Margin = {TemplateBinding Padding} VerticalAlignment = {TemplateBinding VerticalContentAlignment} RecognizesAccessKey = True />
< / Grid>
< ControlTemplate.Triggers>
< Trigger Property = IsMouseOver Value = True>
< Setter Property = Opacity TargetName = Chrome Value = 1 />
< Setter Property = Background TargetName = Chrome Value = {DynamicResource ButtonOverBackground} />
< / Trigger>
< Trigger Property = IsPressed Value = True>
< Setter Property = Opacity TargetName = Chrome Value = 1 />
< Setter Property = Background TargetName = Chrome Value = {DynamicResource ButtonPressedBackground} />
< / Trigger>
< Trigger Property = IsEnabled Value = false>
< Setter Property = Foreground Value =＃ADADAD />
< / Trigger>
< /ControlTemplate.Triggers>
< / ControlTemplate>
< /Setter.Value>
< / Setter>
< / Style>
< /Style.Resources>
< Setter Property = Height Value = 40 />
< Setter Property = MinWidth Value = 90 />
< Setter Property = FontWeight Value = Bold />
< Setter Property = Template>
< Setter.Value>
< ControlTemplate TargetType = {x：Type TabItem}>
< Border Name = Border Margin = 1，-1，-1，-1>
< Grid>
< Grid.ColumnDefinitions>
< ColumnDefinition Width = * />
< ColumnDefinition Width = Auto />
< /Grid.ColumnDefinitions>
< ContentPresenter名称= BorderContent
Content = {Binding Path = Header}
VerticalAlignment = Center
HorizontalAlignment = Center /> ;
<按钮x：Name = PART_Close
HorizontalAlignment = Right
Margin = 3,0,3,0
VerticalAlignment = Top
宽度= 16
高度= 16
DockPanel.Dock =右
Style = {DynamicResource CloseableTabItemButtonStyle}
ToolTip =关闭Tab
Cursor = Hand
Command = {Binding Path = CloseCommand}
Visibility = Hidden>
< Path x：Name = Path
Stretch = Fill
StrokeThickness = 0.5
Stroke =＃FF333333
Fill =＃ FF969696
Data = F1 M 2.28484e-007,1.33331L 1.33333,0L 4.00001,2.66669L 6.66667,6.10352e-005L 8,1.33331L 5.33334,4L 8,6.66669L 6.66667,8L 4,5.33331L 1.33333 ，8L 1.086e-007,6.66669L 2.66667,4L 2.28484e-007,1.33331 Z
HorizontalAlignment = Stretch
VerticalAlignment = Stretch />
< / Button>
< / Grid>
< / Border>
< ControlTemplate.Triggers>
< Trigger Property = IsMouseOver Value = True>
< Setter TargetName = Border Property = BorderBrush Value = {StaticResource ButtonBorderBrush} />
< Setter TargetName = Border Property = BorderThickness Value = 2,2,2,0 />
< Setter TargetName = PART_Close Property = Visibility Value = Visible />
< / Trigger>
< Trigger Property = IsSelected Value = True>
< Setter TargetName = Border Property = Background Value = {StaticResource EnvLayout} />
< Setter Property = Foreground Value =＃FFFFFF />
< Setter TargetName = PART_Close Property = Visibility Value = Visible />
< / Trigger>
< /ControlTemplate.Triggers>
< / ControlTemplate>
< /Setter.Value>
< / Setter>
< / Style>
我的问题集中在IsMouseOver触发器上；实际上，当未选择选项卡时，仅当光标位于TabItem的Header（在ContentTemplate中定义）上方且不在Border的任何位置时才触发此事件。
为了更好地解释我的问题，请提供以下屏幕截图：
当IsMouseOver = true时，我的TabItem必须具有灰色边框，并且必须显示关闭按钮;如下图所示，只有当我的光标完全位于标题上方时，此行为才会出现：
很明显，当光标不在标题上方时，您甚至无法选择制表符。 / p>
我该如何解决这个问题？
在此先感谢您的帮助，
Deborah
解决方案
我最近也遇到过类似的问题，
尝试更改
< ControlTemplate TargetType = {x：Type TabItem}> ;
< Border Name = Border Margin = 1，-1，-1，-1>
到
< ControlTemplate TargetType = {x：Type TabItem}>
< Border Name = Border Margin = 1，-1，-1，-1 Background = Transparent>
似乎没有设置背景默认值，仅渲染区域响应状态触发器
I have a problem with a TabItem Style and maybe someone of you can help me.
Following the Style at issue:
<Style x:Key="ChildrenTabItemStyle" TargetType="TabItem">
<Style.Resources>
<SolidColorBrush x:Key="ButtonNormalBackground" Color="#FFEAE8E8"/>
<LinearGradientBrush x:Key="ButtonOverBackground" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFFAFAFA" Offset="0"/>
<GradientStop Color="#FFE0E0E3" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ButtonPressedBackground" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFE0E0E2" Offset="0"/>
<GradientStop Color="#FFF8F8F8" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF969696"/>
<Style x:Key="CloseableTabItemButtonStyle" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Background" Value="{DynamicResource ButtonNormalBackground}"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="2,2,2,0"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="4"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Border SnapsToDevicePixels="true" x:Name="Chrome" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2" Opacity="0" />
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Opacity" TargetName="Chrome" Value="1"/>
<Setter Property="Background" TargetName="Chrome" Value="{DynamicResource ButtonOverBackground}" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Opacity" TargetName="Chrome" Value="1"/>
<Setter Property="Background" TargetName="Chrome" Value="{DynamicResource ButtonPressedBackground}" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Style.Resources>
<Setter Property="Height" Value="40"/>
<Setter Property="MinWidth" Value="90"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Border Name="Border" Margin="1,-1,-1,-1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ContentPresenter Name="BorderContent"
Content="{Binding Path=Header}"
VerticalAlignment="Center"
HorizontalAlignment="Center"/>
<Button x:Name="PART_Close"
HorizontalAlignment="Right"
Margin="3,0,3,0"
VerticalAlignment="Top"
Width="16"
Height="16"
DockPanel.Dock="Right"
Style="{DynamicResource CloseableTabItemButtonStyle}"
ToolTip="Close Tab"
Cursor="Hand"
Command="{Binding Path=CloseCommand}"
Visibility="Hidden">
<Path x:Name="Path"
Stretch="Fill"
StrokeThickness="0.5"
Stroke="#FF333333"
Fill="#FF969696"
Data="F1 M 2.28484e-007,1.33331L 1.33333,0L 4.00001,2.66669L 6.66667,6.10352e-005L 8,1.33331L 5.33334,4L 8,6.66669L 6.66667,8L 4,5.33331L 1.33333,8L 1.086e-007,6.66669L 2.66667,4L 2.28484e-007,1.33331 Z "
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
</Button>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource ButtonBorderBrush}"/>
<Setter TargetName="Border" Property="BorderThickness" Value="2,2,2,0"/>
<Setter TargetName="PART_Close" Property="Visibility" Value="Visible"/>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Border" Property="Background" Value="{StaticResource EnvLayout}"/>
<Setter Property="Foreground" Value="#FFFFFF"/>
<Setter TargetName="PART_Close" Property="Visibility" Value="Visible"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
My problem is focused on IsMouseOver trigger; when a tab is not selected, in fact, this event is fired only when the cursor is over the Header of the TabItem ( defined within the ContentTemplate) and not at any point of the Border.
In order to better explain my problem, following some screenshots:
When IsMouseOver = true my TabItem must have a gray border and the close button has to appear; as you can see in the following images, this behaviour appens only when my cursor is exactly over the Header:
Obviously, when the cursor isn't over the Header,you cannot even select the Tab.
How can I solve this problem??
Thanks in advance for your help,
Deborah
解决方案
I've had a similar issue recently,
Try changing your
<ControlTemplate TargetType="{x:Type TabItem}">
<Border Name="Border" Margin="1,-1,-1,-1">
to
<ControlTemplate TargetType="{x:Type TabItem}">
<Border Name="Border" Margin="1,-1,-1,-1" Background="Transparent">
It's seemed like if a default value for the background is not set, only rendered area respond to state triggers
这篇关于在TabItem ContenTemplate上触发IsMouseOver的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
