1

tabitemテンプレートをオーバーライドして、独自のカスタムスタイルを作成しました。ただし、マウスオーバーイベントのイベントトリガーを作成する方法がわかりません。

返信が遅れて申し訳ありませんが、コメントの通知が届きません（変更する必要があるかもしれません）。わかりました、これについてさらに説明しようと思います。サンプルコードを投稿する必要があるため、コメントを追加していません。あなたがコントロールを持っているとしましょう、どんなコントロールでも。いくつかのブラシもリソースとして定義したとしましょう。それで：

<LinearGradientBrush x:Key="NormalGradientBrush">
    <GradientStop Color="Black" Offset="0" />
    <GradientStop Color="Red" Offset="1" />
</LinearGradientBrush>

<LinearGradientBrush x:Key="NormalForeground">
    <GradientStop Color="Black" Offset="0" />
    <GradientStop Color="Gray" Offset="1" />
</LinearGradientBrush>

<LinearGradientBrush x:Key="MouseOverGradientBrush">
    <GradientStop Color="Red" Offset="0" />
    <GradientStop Color="Green" Offset="0.2" />
    <GradientStop Color="Black" Offset="1" />
</LinearGradientBrush>

<RadialGradientBrush x:Key="MouseOverForeground" GradientOrigin="0.3,0.5">
    <GradientStop Color="Gray" Offset="0" />
    <GradientStop Color="Black" Offset="1" />
</RadialGradientBrush >

ここで、タブアイテムコントロールがあるとします。

<LinearGradientBrush x:Key="MouseOverGradientBrush">
    <GradientStop Color="Black" Offset="0" />
    <GradientStop Color="Red" Offset="1" />
</LinearGradientBrush>

<Style x:Key="StyleTabItem"
       TargetType="{x:Type TabItem}">
    <Setter Property="Foreground"
            Value="{StaticResource NormalForeground}" />
    <Setter Property="BorderBrush"
            Value="Black" />
    <Setter Property="Background"
            Value="{StaticResource NormalGradientBrush}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">
                <Grid SnapsToDevicePixels="true">
                    <Border x:Name="Bd"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="1,1,1,0"
                            Padding="{TemplateBinding Padding}">
                        <ContentPresenter x:Name="Content"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        SnapsToDevicePixels="True"
                        ContentSource="Header"
                        RecognizesAccessKey="True" />
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver"
                             Value="true">
                        // what here?
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

したがって、問題は、MouseOverイベントで現在のブラシからMouseOverGradientBrushに、現在のフォアグラウンドからMouseOverForegroundに3秒のアニメーションを実行するようにwpfに指示するにはどうすればよいですか？例では、グラデーションのオフセットを1つずつ変更することでこれを行うことがわかりました。私は今それが欲しいです。コードのサイズが大きくなり、非常に面倒になる可能性があります。さらに、ブラシのオフセット数が異なる場合や、1つが線形で、もう1つが放射状である場合があります。これがより明確になることを願っています。

4

5 に答える 5

2

これはうまくいくはずです。物事を単純化するために必要なトリガーをたくさん引き出しました。これが機能し、さらに機能を追加する必要がある場合は、私に知らせてください。そこから構築できます。

また、リソース参照を静的な色に置き換えました。それらをリソースに戻して動作を停止した場合は、リソースの場所に問題があります。

<LinearGradientBrush x:Key="MouseOverGradientBrush">
        <GradientStop Color="Black" Offset="0" />
        <GradientStop Color="Red" Offset="1" />
    </LinearGradientBrush>

 <Style x:Key="StyleTabItem"
           TargetType="{x:Type TabItem}">
        <Setter Property="Foreground"
                Value="{DynamicResource ForegroundGradient}" />
        <Setter Property="BorderBrush"
                Value="Black" />
        <Setter Property="Background"
                Value="Yellow" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid SnapsToDevicePixels="true">
                        <Border x:Name="Bd"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="1,1,1,0"
                                Padding="{TemplateBinding Padding}"
                                CornerRadius="2,2,2,2">
                            <ContentPresenter x:Name="Content"
                                              HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
                                              VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
                                              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                              ContentSource="Header"
                                              RecognizesAccessKey="True" />
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver"
                                 Value="true">
                            <Setter Property="Background"
                                    TargetName="Bd"
                                    Value="{StaticResource MouseOverGradientBrush}" />
                        </Trigger>
                        <Trigger Property="IsSelected"
                                 Value="true">
                            <Setter Property="Panel.ZIndex"
                                    Value="1" />
                            <Setter Property="Background"
                                    TargetName="Bd"
                                    Value="Cyan" />
                            <Setter Property="BorderBrush"
                                    TargetName="Bd"
                                    Value="Pink" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
于 2009-11-12T15:46:55.760 に答える
1

すべてのresponesをありがとう。トリガーは正常に機能します。私はそれらをアニメートすることはできません。VisualStateManagerを使用してSilverlightでこれを行うためのより簡単な方法がありましたが、これがWPFでどのように行われるかはわかりません。

Expression Blendがタブアイテムのテンプレートのコピーを生成したので、サンプルを提供しています。

    <Style x:Key="StyleTabItem" TargetType="{x:Type TabItem}">
    <Setter Property="FocusVisualStyle" Value="{StaticResource TabItemFocusStyle}"/>
    <Setter Property="Foreground" Value="{DynamicResource ForegroundGradient}"/>
    <Setter Property="BorderBrush" Value="{StaticResource TabItemGradientBrushUnselected}"/>
    <Setter Property="Background" Value="{StaticResource TabItemBorderBrushUnselected}"/>
    <Setter Property="Padding" Value="6,1,6,1"/>  
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">
                <ControlTemplate.Resources>
                    <Storyboard x:Key="Storyboard1">
                        <DoubleAnimation
                                Storyboard.TargetName="Bd" 
                                Storyboard.TargetProperty="BorderBrush.GradientStops[0].Offset"
                                Duration="00:00:00.3"/>
                    </Storyboard>
                </ControlTemplate.Resources>
                <Grid SnapsToDevicePixels="true">
                    <Border x:Name="Bd" 
                    Background="{TemplateBinding Background}" 
                    BorderBrush="{TemplateBinding BorderBrush}" 
                    BorderThickness="1,1,1,0" 
                    Padding="{TemplateBinding Padding}"
                    CornerRadius="2,2,2,2">
                        <ContentPresenter x:Name="Content" 
                        HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" 
                        VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" 
                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                        ContentSource="Header" 
                        RecognizesAccessKey="True"/>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Trigger.EnterActions>
                            <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
                        </Trigger.EnterActions>
                        <Setter Property="Background" TargetName="Bd" Value="{StaticResource MouseOverGradientBrush}"/>
                    </Trigger>
                    <Trigger Property="Selector.IsSelected" Value="False"/>
                    <Trigger Property="IsSelected" Value="true">
                        <Setter Property="Panel.ZIndex" Value="1"/>
                        <Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemGradientBrushSelected}"/>
                        <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource TabItemBorderBrushSelected}"/>
                    </Trigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsSelected" Value="false"/>
                            <Condition Property="IsMouseOver" Value="true"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource TabItemMouseOverGradientBorder}"/>
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsSelected" Value="true"/>
                            <Condition Property="TabStripPlacement" Value="Top"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="Margin" Value="-2,0,-2,0"/>
                        <Setter Property="Margin" TargetName="Content" Value="0,0,0,1"/>
                    </MultiTrigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Background" TargetName="Bd" Value="{DynamicResource DisabledGradientBrush}"/>
                        <Setter Property="BorderBrush" TargetName="Bd" Value="{DynamicResource DisabledGradientBorder}"/>
                        <Setter Property="Foreground" Value="{DynamicResource DisabledForeground}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

私が（最初に）やりたいのは、マウスオーバーでbdの背景を現在の値（それが何であれ）からmouseover = trueトリガー（MouseOverGradientBrush）にある値に変更することです。上記のコードの何が問題になっていて、アニメーションが機能しませんか？私は可能な限りExpressionBlendを使用しました...

于 2009-11-09T07:10:35.113 に答える
1

イベント トリガーを使用するための最適なソリューションは、Expression Blendを使用することです。トリガーを作成する直感的な方法が付属しています。

于 2009-11-08T00:39:27.463 に答える
0

これを確認してください：http：//en.csharp-online.net/WPF_Styles_and_Control_Templates%E2%80%94Event_Triggers これは役立つ場合があります

于 2009-11-08T07:58:10.823 に答える
0

本当に EventTrigger を使用したい場合は、このようにすることができます

<Style x:TargetType="TabItem">
    <Style.Triggers>
        <EventTrigger RoutedEvent="MouseOver">
          <BeginStoryboard>
            ....
          </BeinStoryboard>
        </EventTrigger>
    </Style.Triggers>
</Style>

ほとんどの場合、単純で離散的な値の変更を行う場合、アニメーションを必要とする EventTrigger とは対照的に、IsMouseOver プロパティが変更されたときに起動する Property トリガーで行います。

<Trigger Property="IsMouseOver" Value="True">
    <Setter Property="Foo" Value="Bar" />
</Trigger>
于 2009-11-09T05:54:26.943 に答える