代码之家  ›  专栏  ›  技术社区  ›  banzai

如何从ControlTemplate中的多触发器启动彩色动画?

  •  0
  • banzai  · 技术社区  · 16 年前

    <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>
    

    目前一切正常。模板末尾的multi-trigger为未选中的TabItems定义鼠标悬停效果。 现在我认为这个鼠标悬停效果的颜色变化看起来有点冒失,所以让我们用一个ColorAnimation来设置它的动画。但是不要在小鸡孵出之前数它们——我做的每件事都不管用。 也许我会监督显而易见的事情,但如何实现这一壮举呢?

    提前谢谢

    班扎伊

    2 回复  |  直到 16 年前
        1
  •  1
  •   Scott    16 年前

    你试过MultiTrigger.entreactions吗?

    在您的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> 
    

    然后你的动画就可以识别你的本地背景画笔了!

    另外,我认为你可能需要把你的多触发到顶部高于你的其他触发器。我认为,每当你的多触发器为真时,基于IsSelected的触发器也是真的,并且会优先于它,因为它列在第一位。我可能错了,但我会再次检查,如果你没有得到错误,但你的多触发继续不工作。

        2
  •  0
  •   banzai    16 年前

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

    <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>
    

    这个名字是在模板资源中定义的-为什么他没有找到它?

    推荐文章