首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >IsMouseOver的TabItem触发器

IsMouseOver的TabItem触发器
EN

Stack Overflow用户
提问于 2013-10-28 20:10:50
回答 1查看 3.4K关注 0票数 4

我的TabItem风格有一些问题。以下是其风格:

代码语言:javascript
复制
<Style TargetType="{x:Type TabItem}">
    <Setter Property="Width" Value="160"/>
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Height" Value="70"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TabItem">
                <Border Name="Border" Background="Transparent">

                    <ContentPresenter x:Name="ContentSite"
                                    VerticalAlignment="Center"
                                    HorizontalAlignment="Left"
                                    ContentSource="Header"
                                    Margin="10,2"/>

                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter TargetName="Border" Property="Background" Value="Red" />
                    </Trigger>
                    <Trigger Property="IsSelected" Value="False">
                        <Setter TargetName="Border" Property="Background" Value="Green" />
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="Border" Property="Background" Value="Blue" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

问题是,IsMouseOver事件也是通过移动其任何子项来触发的。我将SourceName="ContentSite"添加到触发器中:

代码语言:javascript
复制
<Trigger SourceName="ContentSite" Property="IsMouseOver" Value="True">

使用此代码,不再通过移动子元素触发IsMouseOver,但它引入了另一个问题。只有当光标位于表项的标头上时,IsMouseOver事件才会被触发。另一个用户对同一问题进行了here描述。建议的答案是向边界添加Background=“透明”值,但它对我没有用。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-10-28 20:45:24

如果我正确理解了您的问题,您所要做的就是将SourceName on Trigger更改为ContentSite

请尝试以下样式:

代码语言:javascript
复制
<Style TargetType="{x:Type TabItem}">
    <Setter Property="Width" Value="160"/>
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Height" Value="70"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TabItem">
                <Border Name="Border" Background="Transparent">

                    <ContentPresenter x:Name="ContentSite"
                                    VerticalAlignment="Center"
                                    HorizontalAlignment="Left"
                                    ContentSource="Header"
                                    Margin="10,2"/>

                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter TargetName="Border" Property="Background" Value="Red" />
                    </Trigger>
                    <Trigger Property="IsSelected" Value="False">
                        <Setter TargetName="Border" Property="Background" Value="Green" />
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True" SourceName="Border">
                        <Setter TargetName="Border" Property="Background" Value="Blue" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

而且,如果希望只对非选定选项卡执行此操作,则可以尝试下面的MultiTrigger

代码语言:javascript
复制
<MultiTrigger>
    <MultiTrigger.Conditions>
        <Condition Property="IsMouseOver" SourceName="Border" Value="True" />
        <Condition Property="IsSelected" Value="False" />
    </MultiTrigger.Conditions>
    <Setter TargetName="Border" Property="BorderBrush" Value="Blue" />
</MultiTrigger>
票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/19644183

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档