如何从 ControlTemplate 中的 MultiTrigger 启动 ColorAnimation？

发布于 2024-08-25 12:15:14 字数 2960 浏览 3 评论 0原文

我有以下 WPF TabItem 的 ControlTemplate：

<ControlTemplate x:Key="DefaultTabItemTemplate" TargetType="{x:Type TabItem}">
    <ControlTemplate.Resources>
        <SolidColorBrush x:Key="UnselectedForegroundBrush" Color="#414141" />
        <!-- Unique color for this template -->
        <SolidColorBrush x:Key="SelectedForegroundBrush" Color="#457581" />
        <!-- Unique color for this template -->
        <SolidColorBrush x:Key="MouseOverTextBrush" x:Name="local_MouseOverTextBrush" Color="#FFF2F2F2"/>
    </ControlTemplate.Resources>
    <Grid>
        <Border Name="Border" MinHeight="30" Margin="0,0,0,-1" Background="{DynamicResource TabControlBackgroundBrush}" BorderBrush="{DynamicResource ndt_DisabledForegroundBrush}"  BorderThickness="1,1,1,1" CornerRadius="0,0,0,0" >
            <ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" TextElement.FontStretch="UltraExpanded" TextElement.FontWeight="UltraBlack" ContentSource="Header" Margin="12,2,12,2" RecognizesAccessKey="True" />
        </Border>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsSelected" Value="True">
            <Setter Property="Panel.ZIndex" Value="2" />
            <Setter TargetName="Border" Property="Background" Value="{DynamicResource ndt_TabControlBackgroundBrush}" />
            <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
            <Setter TargetName="ContentSite" Property="TextElement.Foreground" Value="{StaticResource SelectedForegroundBrush}" />
        </Trigger>
        <Trigger Property="IsEnabled" Value="False">
            <Setter TargetName="Border" Property="Background" Value="{DynamicResource ndt_DisabledBackgroundBrush}" />
            <Setter TargetName="ContentSite" Property="TextElement.Foreground" Value="{DynamicResource ndt_DarkGray}" />
            <Setter Property="Foreground" Value="{DynamicResource ndt_DisabledForegroundBrush}" />
        </Trigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsMouseOver" Value="True" />
                <Condition Property="IsSelected" Value="False" />
            </MultiTrigger.Conditions>
            <Setter TargetName="Border" Property="Background" Value="{DynamicResource ndt_NavigationAreaBrush}" />
            <Setter TargetName="ContentSite" Property="TextElement.Foreground" Value="{DynamicResource MouseOverTextBrush}" />
        </MultiTrigger> 
    </ControlTemplate.Triggers>
</ControlTemplate>

到目前为止一切正常。模板末尾的 MultiTrigger 为未选定的 TabItem 定义鼠标悬停效果。现在我认为鼠标悬停效果的颜色变化看起来有点鲁莽，所以让我们用 ColorAnimation 为其设置动画。但不要在鸡孵化之前数它们——我尝试过的所有方法都不起作用。也许我会监督显而易见的事情——但如何实现这一壮举呢？

预先感谢

万岁

原文

I have the following ControlTemplate for a WPF TabItem:

<ControlTemplate x:Key="DefaultTabItemTemplate" TargetType="{x:Type TabItem}">
    <ControlTemplate.Resources>
        <SolidColorBrush x:Key="UnselectedForegroundBrush" Color="#414141" />
        <!-- Unique color for this template -->
        <SolidColorBrush x:Key="SelectedForegroundBrush" Color="#457581" />
        <!-- Unique color for this template -->
        <SolidColorBrush x:Key="MouseOverTextBrush" x:Name="local_MouseOverTextBrush" Color="#FFF2F2F2"/>
    </ControlTemplate.Resources>
    <Grid>
        <Border Name="Border" MinHeight="30" Margin="0,0,0,-1" Background="{DynamicResource TabControlBackgroundBrush}" BorderBrush="{DynamicResource ndt_DisabledForegroundBrush}"  BorderThickness="1,1,1,1" CornerRadius="0,0,0,0" >
            <ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" TextElement.FontStretch="UltraExpanded" TextElement.FontWeight="UltraBlack" ContentSource="Header" Margin="12,2,12,2" RecognizesAccessKey="True" />
        </Border>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsSelected" Value="True">
            <Setter Property="Panel.ZIndex" Value="2" />
            <Setter TargetName="Border" Property="Background" Value="{DynamicResource ndt_TabControlBackgroundBrush}" />
            <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
            <Setter TargetName="ContentSite" Property="TextElement.Foreground" Value="{StaticResource SelectedForegroundBrush}" />
        </Trigger>
        <Trigger Property="IsEnabled" Value="False">
            <Setter TargetName="Border" Property="Background" Value="{DynamicResource ndt_DisabledBackgroundBrush}" />
            <Setter TargetName="ContentSite" Property="TextElement.Foreground" Value="{DynamicResource ndt_DarkGray}" />
            <Setter Property="Foreground" Value="{DynamicResource ndt_DisabledForegroundBrush}" />
        </Trigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsMouseOver" Value="True" />
                <Condition Property="IsSelected" Value="False" />
            </MultiTrigger.Conditions>
            <Setter TargetName="Border" Property="Background" Value="{DynamicResource ndt_NavigationAreaBrush}" />
            <Setter TargetName="ContentSite" Property="TextElement.Foreground" Value="{DynamicResource MouseOverTextBrush}" />
        </MultiTrigger> 
    </ControlTemplate.Triggers>
</ControlTemplate>

Everything works fine so far. The MultiTrigger at the end of the template defines a mouse over effect for not selected TabItems.
Now I thought the change in color for this mouse over effect looks a bit brash so let´s animate it with a ColorAnimation. But don´t count the chickens before they hatch - everything I tried didn´t work.
Maybe I oversee the obvious - but how to achieve this feat ?

Thanks in advance

banzai

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

随心而道 2024-09-01 12:15:14

您尝试过 MultiTrigger.EnterActions 吗？

在您的 MultiTrigger 中，您将具有类似以下内容：

<MultiTrigger.EnterActions>
    <BeginStoryboard>
        <Storyboard>
            <ColorAnimation Storyboard.TargetName="YourObject'sName" Storyboard.TargetProperty="YourObject'sColorProperty" To="YourFavoriteColor" Duration"YourFavoriteNumber" />
        </Storyboard>
    </BeginStoryboard>
</MultiTrigger.EnterActions>

然后，如果您愿意，您可以随时添加以反转动画（或在触发器不再为真时执行任何操作）

希望这会有所帮助！

编辑：
回答您的回答中提出的问题。
我没有尝试过，但我不确定你可以像那样直接为你的资源设置动画。不要将背景设置为资源，而是直接将其设置为 SolidColorBrush：

<Border Name="Border" MinHeight="30" Margin="0,0,0,-1" BorderBrush="{DynamicResource ndt_DisabledForegroundBrush}"  BorderThickness="1,1,1,1" CornerRadius="0,0,0,0" > 
    <Border.Background>
        <SolidColorBrush x:Name="local_TabControlBackgroundBrush" Color="#CBCBCB" />
    </Border.Background>
    <ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" TextElement.FontStretch="UltraExpanded" TextElement.FontWeight="UltraBlack" ContentSource="Header" Margin="12,2,12,2" RecognizesAccessKey="True" /> 
</Border>

然后您的动画可能能够识别您的 local_TabControlBackgroundBrush！

另外，我认为您可能需要将 MultiTrigger 移至其他触发器上方。我认为只要您的 MultiTrigger 为 true，您基于 IsSelected 的触发器也为 true，并且将获得优先级，因为它首先列出。我可能是错的，但我会仔细检查是否您没有收到错误但您的多重触发器仍然不起作用。

希望有帮助！

Have you tried MultiTrigger.EnterActions?

Inside your MultiTrigger you would have something like the following:

<MultiTrigger.EnterActions>
    <BeginStoryboard>
        <Storyboard>
            <ColorAnimation Storyboard.TargetName="YourObject'sName" Storyboard.TargetProperty="YourObject'sColorProperty" To="YourFavoriteColor" Duration"YourFavoriteNumber" />
        </Storyboard>
    </BeginStoryboard>
</MultiTrigger.EnterActions>

Then you can always add to reverse your animation if you like (or do anything when your trigger is no longer true)

Hopefully that helps!

EDIT:
To answer the question posed in your answer.
I haven't tried, but I'm not sure you can animate your resource directly like that. Instead of setting your background to a resource, set it directly as a SolidColorBrush:

<Border Name="Border" MinHeight="30" Margin="0,0,0,-1" BorderBrush="{DynamicResource ndt_DisabledForegroundBrush}"  BorderThickness="1,1,1,1" CornerRadius="0,0,0,0" > 
    <Border.Background>
        <SolidColorBrush x:Name="local_TabControlBackgroundBrush" Color="#CBCBCB" />
    </Border.Background>
    <ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" TextElement.FontStretch="UltraExpanded" TextElement.FontWeight="UltraBlack" ContentSource="Header" Margin="12,2,12,2" RecognizesAccessKey="True" /> 
</Border>

Then your animation might be able to recognize your local_TabControlBackgroundBrush!

Also, I think you may have to move your MultiTrigger to the top above your other Triggers. I think whenever you have your MultiTrigger true, your Trigger based on IsSelected is also true and will get priorty since it's listed first. I could be wrong, but I would double check that if you aren't getting errors but your multi-trigger continues to not work.

Hope it helps!

回复收藏 0 原文

在梵高的星空下 2024-09-01 12:15:14

是的，我之前尝试过，但在应用程序启动时出现运行时错误。不知道为什么，但现在我毫无问题地找出了原因。您不允许像我第一次尝试那样在 ColorAnimation 中使用动态资源。因此，以下模板在启动时不会产生运行时错误：

<ControlTemplate x:Key="DefaultTabItemTemplate" TargetType="{x:Type TabItem}">
    <ControlTemplate.Resources>
        <SolidColorBrush x:Key="UnselectedForegroundBrush" Color="#414141" />
        <!-- Unique color for this template -->
        <SolidColorBrush x:Key="SelectedForegroundBrush" Color="#457581" />
        <!-- Unique color for this template -->
        <SolidColorBrush x:Key="MouseOverTextBrush" x:Name="local_MouseOverTextBrush" Color="#FFF2F2F2"/>
        <!-- Unique color for this template -->
        <SolidColorBrush x:Key="TabControlBackgroundBrush" x:Name="local_TabControlBackgroundBrush" Color="#CBCBCB" />
    </ControlTemplate.Resources>
    <Grid>
        <Border Name="Border" MinHeight="30" Margin="0,0,0,-1" Background="{DynamicResource TabControlBackgroundBrush}" BorderBrush="{DynamicResource ndt_DisabledForegroundBrush}"  BorderThickness="1,1,1,1" CornerRadius="0,0,0,0" >
            <ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" TextElement.FontStretch="UltraExpanded" TextElement.FontWeight="UltraBlack" ContentSource="Header" Margin="12,2,12,2" RecognizesAccessKey="True" />
        </Border>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsSelected" Value="True">
            <Setter Property="Panel.ZIndex" Value="2" />
            <Setter TargetName="Border" Property="Background" Value="{DynamicResource ndt_TabControlBackgroundBrush}" />
            <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
            <Setter TargetName="ContentSite" Property="TextElement.Foreground" Value="{StaticResource SelectedForegroundBrush}" />
        </Trigger>
        <Trigger Property="IsEnabled" Value="False">
            <Setter TargetName="Border" Property="Background" Value="{DynamicResource ndt_DisabledBackgroundBrush}" />
            <Setter TargetName="ContentSite" Property="TextElement.Foreground" Value="{DynamicResource ndt_DarkGray}" />
            <Setter Property="Foreground" Value="{DynamicResource ndt_DisabledForegroundBrush}" />
        </Trigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsMouseOver" Value="True" />
                <Condition Property="IsSelected" Value="False" />
            </MultiTrigger.Conditions>
            <MultiTrigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation Storyboard.TargetName="local_TabControlBackgroundBrush" Storyboard.TargetProperty="Color" To="{StaticResource ndt_NavigationAreaColor}" Duration="0:0:0.15" />
                    </Storyboard>
                </BeginStoryboard>
            </MultiTrigger.EnterActions>
        </MultiTrigger> 
    </ControlTemplate.Triggers>
</ControlTemplate>

但是，唉，当 MultiTrigger 触发时，我收到一条错误消息，内容类似于“在命名空间 'System.Windows.Control.ControlTemplate' 中找不到名称 'local_TabControlBackgroundBrush'”。（我不是来自英语国家，因此直接引用错误消息没有实际用处。）
该名称是在模板资源中定义的 - 为什么他没有找到它？

Yes I tried before but I got a runtime error at application startup. Don´t know why, but now I figured out the reason without problems. Your not allowed to use dynamic resources in a ColorAnimation as I did on my 1st try. So the following template produces no runtime error at startup:

<ControlTemplate x:Key="DefaultTabItemTemplate" TargetType="{x:Type TabItem}">
    <ControlTemplate.Resources>
        <SolidColorBrush x:Key="UnselectedForegroundBrush" Color="#414141" />
        <!-- Unique color for this template -->
        <SolidColorBrush x:Key="SelectedForegroundBrush" Color="#457581" />
        <!-- Unique color for this template -->
        <SolidColorBrush x:Key="MouseOverTextBrush" x:Name="local_MouseOverTextBrush" Color="#FFF2F2F2"/>
        <!-- Unique color for this template -->
        <SolidColorBrush x:Key="TabControlBackgroundBrush" x:Name="local_TabControlBackgroundBrush" Color="#CBCBCB" />
    </ControlTemplate.Resources>
    <Grid>
        <Border Name="Border" MinHeight="30" Margin="0,0,0,-1" Background="{DynamicResource TabControlBackgroundBrush}" BorderBrush="{DynamicResource ndt_DisabledForegroundBrush}"  BorderThickness="1,1,1,1" CornerRadius="0,0,0,0" >
            <ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" TextElement.FontStretch="UltraExpanded" TextElement.FontWeight="UltraBlack" ContentSource="Header" Margin="12,2,12,2" RecognizesAccessKey="True" />
        </Border>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsSelected" Value="True">
            <Setter Property="Panel.ZIndex" Value="2" />
            <Setter TargetName="Border" Property="Background" Value="{DynamicResource ndt_TabControlBackgroundBrush}" />
            <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
            <Setter TargetName="ContentSite" Property="TextElement.Foreground" Value="{StaticResource SelectedForegroundBrush}" />
        </Trigger>
        <Trigger Property="IsEnabled" Value="False">
            <Setter TargetName="Border" Property="Background" Value="{DynamicResource ndt_DisabledBackgroundBrush}" />
            <Setter TargetName="ContentSite" Property="TextElement.Foreground" Value="{DynamicResource ndt_DarkGray}" />
            <Setter Property="Foreground" Value="{DynamicResource ndt_DisabledForegroundBrush}" />
        </Trigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsMouseOver" Value="True" />
                <Condition Property="IsSelected" Value="False" />
            </MultiTrigger.Conditions>
            <MultiTrigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation Storyboard.TargetName="local_TabControlBackgroundBrush" Storyboard.TargetProperty="Color" To="{StaticResource ndt_NavigationAreaColor}" Duration="0:0:0.15" />
                    </Storyboard>
                </BeginStoryboard>
            </MultiTrigger.EnterActions>
        </MultiTrigger> 
    </ControlTemplate.Triggers>
</ControlTemplate>

But - alas - when the MultiTrigger fires I get an error saying something like "The name 'local_TabControlBackgroundBrush' cannot be found in namespace 'System.Windows.Control.ControlTemplate'." (I´m not from an English speaking country so directly citing the error message would be of no real use.)
The name is defined in the template´s resources - why didn´t he find it ?

回复收藏 0 原文

~没有更多了~