c# - WPF: フェードイン/フェードアウトの内部要素をアニメーション化する

Question

私はWPFを約1週間使用しています。実装する必要があったコントロールの 1 つは、オリジナルに非常に近い Treeview のようなエアロ スタイルの Windows エクスプローラーでした。元の WPF ツリービューにはそれを実現するためのテーマが必要であることがわかったので、使用できる基本的なリソース ディクショナリ/テーマをインターネットで検索しました。私はそれを見つけて以来、それを調整してきました。私はある程度の進歩を遂げましたが、1週間前にWPFを使い始めたばかりであることを考えると、解決方法がわからない問題にぶつかりました。

ご覧のとおり、7 スタイル エクスプローラーの動作の 1 つは、ツリービューにフォーカスがあるか、マウスがその上にあるかに応じて、展開/折りたたみのトグル ボタンがフェード インおよびフェード アウトすることです。

スタイルとトリガー (IsFocused) を介して実際の TreeView に適用し、そこからアニメーションを実行して動作を実装しようとしましたが、トグル ボタンを実際に「アドレス指定」する方法がわかりません。それらは別のスタイルでも定義されています。私はXAMLでそれをやろうとしてきましたが、それが可能かどうかはわかりませんが、簡単にするためにXAMLでそれを好むでしょう。

これがリソース辞書です（ツリービュー要素と失敗した試みに関する重要な部分です）：

    <!-- Selected Hover Brushes -->
<LinearGradientBrush x:Key="HoverSelectedBackgroundBrushKey"
                     StartPoint="0,0"
                     EndPoint="0,1">
    <GradientStop Color="#DCEBFC"
                  Offset="0" />
    <GradientStop Color="#C1DBFC"
                  Offset="1" />
</LinearGradientBrush>
<SolidColorBrush x:Key="HoverSelectedOuterBorderBrushKey"
                 Color="#7DA2CE" />
<SolidColorBrush x:Key="HoverSelectedInnerBorderBrushKey"
                 Color="#EBF4FD" />

<!-- Hover Brushes -->
<LinearGradientBrush x:Key="HoverBackgroundBrushKey"
                     StartPoint="0,0"
                     EndPoint="0,1">
    <GradientStop Color="#FCFCFC"
                  Offset="0" />
    <GradientStop Color="#EBF3FD"
                  Offset="1" />
</LinearGradientBrush>
<SolidColorBrush x:Key="HoverOuterBorderBrushKey"
                 Color="#B8D6FB" />
<SolidColorBrush x:Key="HoverInnerBorderBrushKey"
                 Color="#F2F7FE" />

<!-- Selected (Active) Brushes -->
<LinearGradientBrush x:Key="SelectedActiveBackgroundBrushKey"
                     StartPoint="0,0"
                     EndPoint="0,1">
    <GradientStop Color="#EAF3FE"
                  Offset="0" />
    <GradientStop Color="#CFE4FE"
                  Offset="1" />
</LinearGradientBrush>
<SolidColorBrush x:Key="SelectedActiveOuterBorderBrushKey"
                 Color="#84ACDD" />
<SolidColorBrush x:Key="SelectedActiveInnerBorderBrushKey"
                 Color="#F1F7FE" />

<!-- Selected (Inactive) Brushes -->
<LinearGradientBrush x:Key="SelectedInactiveBackgroundBrushKey"
                     StartPoint="0,0"
                     EndPoint="0,1">
    <GradientStop Color="#F8F8F8"
                  Offset="0" />
    <GradientStop Color="#E5E5E5"
                  Offset="1" />
</LinearGradientBrush>
<SolidColorBrush x:Key="SelectedInactiveOuterBorderBrushKey"
                 Color="#D9D9D9" />
<SolidColorBrush x:Key="SelectedInactiveInnerBorderBrushKey"
                 Color="#F0F0F0" />

<!-- Supporting TreeViewItem Resources -->
<PathGeometry x:Key="TreeArrow">
    <PathGeometry.Figures>
        <PathFigureCollection>
            <PathFigure IsFilled="True"
                        StartPoint="0 0"
                        IsClosed="True">
                <PathFigure.Segments>
                    <PathSegmentCollection>
                        <LineSegment Point="0 6" />
                        <LineSegment Point="6 0" />
                    </PathSegmentCollection>
                </PathFigure.Segments>
            </PathFigure>
        </PathFigureCollection>
    </PathGeometry.Figures>
</PathGeometry>

<Style x:Key="ExpandCollapseToggleStyle"
       TargetType="{x:Type ToggleButton}">
    <Setter Property="Focusable"
            Value="False"/>
    <Setter Property="Width"
            Value="16"/>
    <Setter Property="Height"
            Value="16"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Border 
                        x:Name="ExpandBorder"
                        Width="16"
                        Height="16"
                        Background="Transparent"
                        Padding="5,5,5,5">
                        <Path x:Name="ExpandPath"
                              Fill="Transparent"
                              Stroke="#FF989898"
                              Data="{StaticResource TreeArrow}">
                            <Path.RenderTransform>
                                <RotateTransform Angle="135"
                                                 CenterX="3"
                                                 CenterY="3"/>
                            </Path.RenderTransform>
                        </Path>
                </Border>
                <ControlTemplate.Triggers>

                    <!-- MouseOver, Collapsed -->
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsMouseOver" Value="True" />
                            <Condition Property="IsChecked" Value="False" />
                        </MultiTrigger.Conditions>

                        <Setter TargetName="ExpandPath"
                                Property="Stroke"
                                Value="#FF1BBBFA"/>
                        <Setter TargetName="ExpandPath"
                                Property="Fill"
                                Value="Transparent"/>
                        <Setter TargetName="ExpandBorder"
                                Property="Background">
                            <Setter.Value>
                                <VisualBrush>
                                    <VisualBrush.Visual>
                                        <Ellipse Height="1" Width="1" Fill="#FF1BBBFA">
                                            <Ellipse.Effect>
                                                <BlurEffect Radius="2" />
                                            </Ellipse.Effect>
                                        </Ellipse>
                                    </VisualBrush.Visual>
                                </VisualBrush>
                            </Setter.Value>
                        </Setter>

                    </MultiTrigger>

                    <!-- MouseOver, Expanded -->
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsMouseOver" Value="True" />
                            <Condition Property="IsChecked" Value="True" />
                        </MultiTrigger.Conditions>

                        <Setter TargetName="ExpandPath"
                                Property="Stroke"
                                Value="#FF1BBBFA"/>
                        <Setter TargetName="ExpandPath"
                                Property="Fill"
                                Value="#82DFFB"/>
                        <Setter TargetName="ExpandBorder"
                                Property="Background">
                            <Setter.Value>
                                <VisualBrush>
                                    <VisualBrush.Visual>
                                        <Ellipse Height="1" Width="1" Fill="#FF1BBBFA">
                                            <Ellipse.Effect>
                                                <BlurEffect Radius="2" />
                                            </Ellipse.Effect>
                                        </Ellipse>
                                    </VisualBrush.Visual>
                                </VisualBrush>
                            </Setter.Value>
                        </Setter>

                        <Setter TargetName="ExpandPath"
                                Property="RenderTransform">
                            <Setter.Value>
                                <RotateTransform Angle="180"
                                                 CenterX="3"
                                                 CenterY="3"/>
                            </Setter.Value>
                        </Setter>

                    </MultiTrigger>

                    <!-- No Mouseover, Expanded -->
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsChecked" Value="True" />
                            <Condition Property="IsMouseOver" Value="False" />
                        </MultiTrigger.Conditions>
                        <Setter TargetName="ExpandPath"
                                Property="RenderTransform">
                            <Setter.Value>
                                <RotateTransform Angle="180"
                                                 CenterX="3"
                                                 CenterY="3"/>
                            </Setter.Value>
                        </Setter>
                        <Setter TargetName="ExpandPath"
                                Property="Fill"
                                Value="#FF595959"/>
                        <Setter TargetName="ExpandPath"
                                Property="Stroke"
                                Value="#FF262626"/>
                    </MultiTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<!-- TreeView Style (Fade toggle buttons in and out) -->
<Style x:Key="{x:Type TreeView}"
       TargetType="{x:Type TreeView}">
    <Style.Triggers>
        <Trigger Property="IsFocused" Value="True" >
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation
                                Storyboard.TargetProperty="Opacity"
                                From="0.0" To="1.0" Duration="0:0:5"
                                />
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
        </Trigger>
    </Style.Triggers>
</Style>


<!-- TreeViewItem Style -->
<Style x:Key="{x:Type TreeViewItem}"
       TargetType="{x:Type TreeViewItem}">
    <Setter Property="BorderThickness"
            Value="1" />
    <Setter Property="Padding"
            Value="2,0" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TreeViewItem}">

                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition MinWidth="19"
                                          Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>

                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition />
                    </Grid.RowDefinitions>

                    <ToggleButton x:Name="expander"
                                  Style="{StaticResource ExpandCollapseToggleStyle}"
                                  IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"
                                  ClickMode="Press" />
                    <Border x:Name="outerBorder"
                            Grid.Column="1"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="2"
                            SnapsToDevicePixels="true">
                        <Border x:Name="innerBorder"
                                Background="{TemplateBinding Background}"
                                BorderThickness="1"
                                CornerRadius="1"
                                Padding="{TemplateBinding Padding}"
                                SnapsToDevicePixels="true">
                            <ContentPresenter x:Name="PART_Header"
                                              ContentSource="Header"
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                        </Border>
                    </Border>
                    <ItemsPresenter x:Name="itemsHost"
                                    Grid.Row="1"
                                    Grid.Column="1"
                                    Grid.ColumnSpan="2" />
                </Grid>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsExpanded"
                             Value="false">
                        <Setter TargetName="itemsHost"
                                Property="Visibility"
                                Value="Collapsed" />
                    </Trigger>
                    <Trigger Property="HasItems"
                             Value="false">
                        <Setter TargetName="expander"
                                Property="Visibility"
                                Value="Hidden" />
                    </Trigger>
                    <Trigger SourceName="outerBorder"
                             Property="IsMouseOver"
                             Value="true">
                        <Setter TargetName="outerBorder"
                                Property="BorderBrush"
                                Value="{StaticResource HoverOuterBorderBrushKey}" />
                        <Setter TargetName="innerBorder"
                                Property="Background"
                                Value="{StaticResource HoverBackgroundBrushKey}" />
                        <Setter TargetName="innerBorder"
                                Property="BorderBrush"
                                Value="{StaticResource HoverInnerBorderBrushKey}" />
                    </Trigger>
                    <Trigger Property="IsSelected"
                             Value="true">
                        <Setter TargetName="outerBorder"
                                Property="BorderBrush"
                                Value="{StaticResource SelectedActiveOuterBorderBrushKey}" />
                        <Setter TargetName="innerBorder"
                                Property="Background"
                                Value="{StaticResource SelectedActiveBackgroundBrushKey}" />
                        <Setter TargetName="innerBorder"
                                Property="BorderBrush"
                                Value="{StaticResource SelectedActiveInnerBorderBrushKey}" />
                    </Trigger>

                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsSelected"
                                       Value="true" />
                            <Condition Property="IsMouseOver"
                                       Value="true" />
                        </MultiTrigger.Conditions>
                        <Setter TargetName="outerBorder"
                                Property="BorderBrush"
                                Value="{StaticResource HoverSelectedOuterBorderBrushKey}" />
                        <Setter TargetName="innerBorder"
                                Property="Background"
                                Value="{StaticResource HoverSelectedBackgroundBrushKey}" />
                        <Setter TargetName="innerBorder"
                                Property="BorderBrush"
                                Value="{StaticResource HoverSelectedInnerBorderBrushKey}" />
                    </MultiTrigger>

                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsSelected"
                                       Value="true" />
                            <Condition Property="Selector.IsSelectionActive"
                                       Value="false" />
                            <Condition Property="IsMouseOver"
                                       Value="false" />
                        </MultiTrigger.Conditions>
                        <Setter TargetName="outerBorder"
                                Property="BorderBrush"
                                Value="{StaticResource SelectedInactiveOuterBorderBrushKey}" />
                        <Setter TargetName="innerBorder"
                                Property="Background"
                                Value="{StaticResource SelectedInactiveBackgroundBrushKey}" />
                        <Setter TargetName="innerBorder"
                                Property="BorderBrush"
                                Value="{StaticResource SelectedInactiveInnerBorderBrushKey}" />
                    </MultiTrigger>

                    <Trigger Property="IsEnabled"
                             Value="false">
                        <Setter Property="Foreground"
                                Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

重要な部分は、TreeView スタイル、ExpandCollapseToggleStyle、および TreeViewItem スタイルです。

ツリービューは次のとおりです。

        <TreeView Grid.Column="4" Grid.Row="2">
        <TreeViewItem Header="Item 1">
            <TreeViewItem Header="Subitem 1" />
            <TreeViewItem Header="Subitem 1" />
        </TreeViewItem>
        <TreeViewItem Header="Item 2">
            <TreeViewItem Header="Subitem 1" />
            <TreeViewItem Header="Subitem 1" />
        </TreeViewItem>
        <TreeViewItem Header="Item 3">
            <TreeViewItem Header="Subitem 1" />
            <TreeViewItem Header="Subitem 1" />
        </TreeViewItem>
        <TreeViewItem Header="Item 4">
            <TreeViewItem Header="Subitem 1" />
            <TreeViewItem Header="Subitem 1" />
        </TreeViewItem>
        <TreeViewItem Header="Item 5">
            <TreeViewItem Header="Subitem 1" />
            <TreeViewItem Header="Subitem 1" />
        </TreeViewItem>
        <TreeViewItem Header="Item 6">
            <TreeViewItem Header="Subitem 1" />
            <TreeViewItem Header="Subitem 1" />
        </TreeViewItem>
        <TreeViewItem Header="Item 7">
            <TreeViewItem Header="Subitem 1" />
            <TreeViewItem Header="Subitem 1" />
        </TreeViewItem>
        <TreeViewItem Header="Item 8">
            <TreeViewItem Header="Subitem 1" />
            <TreeViewItem Header="Subitem 1" />
        </TreeViewItem>
        <TreeViewItem Header="Item 9">
            <TreeViewItem Header="Subitem 1" />
            <TreeViewItem Header="Subitem 1" />
        </TreeViewItem>
    </TreeView>