在WPF中，当EventTrigger Source在页面资源之外但Storyboard.TargetName在树视图数据模板中时，该怎么办？

Question

I have a TreeView whose <ItemTemplate> is defined in HierarchicalDataTemplate

 <HierarchicalDataTemplate ItemsSource="{Binding}"
                              x:Key="TreeTemplate">
    <StackPanel Orientation="Horizontal">
        <TextBlock Name="TextBlockProperty" Text="{Binding Name}" Width="110" Foreground="#FF3C3C3C" >
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding ModifyType}" Value="AutoDetect">
                            <Setter Property="Background">
                                <Setter.Value>
                                    <SolidColorBrush Color="LightGreen"></SolidColorBrush>
                                </Setter.Value>
                            </Setter>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding ModifyType}" Value="Prerequisite">
                            <Setter Property="Background">
                                <Setter.Value>
                                    <SolidColorBrush Color="LightSkyBlue"></SolidColorBrush>
                                </Setter.Value>
                            </Setter>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding ModifyType}" Value="AutoCheckFailed">
                            <Setter Property="Background">
                                <Setter.Value>
                                    <SolidColorBrush Color="Red"></SolidColorBrush>
                                </Setter.Value>
                            </Setter>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>
        <ContentControl Name="ContentCtrl" Content="{Binding}">
        </ContentControl>
    </StackPanel>
    <HierarchicalDataTemplate.Triggers>
        <DataTrigger Binding="{Binding ControlType}" Value="Text">
            <Setter TargetName="ContentCtrl" Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <TextBox Width="130" Text="{Binding Value}" BorderThickness="0" Background="#FFF8F8F8"></TextBox>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </DataTrigger>
        <DataTrigger Binding="{Binding ControlType}" Value="Choice">
            <Setter TargetName="ContentCtrl" Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <ComboBox Width="130" IsEditable="True" ItemsSource="{Binding ChoiceItems}" Text="{Binding Value}" BorderThickness="0" >
                        </ComboBox>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </DataTrigger>
        <DataTrigger Binding="{Binding ControlType}" Value="Group">
            <Setter TargetName="ContentCtrl" Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <TextBlock></TextBlock>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </DataTrigger>
    </HierarchicalDataTemplate.Triggers>
</HierarchicalDataTemplate>

I have also defined 2 <Buttons> ShowDefault and HideDefault outside the <Page.Resources> to shorten/widen the width of the TextBlockProperty <TextBlock> in the <HierarchicalDataTemplate> by using Storyboard . But I don't know how to do it.

Because it is a TreeView , the Items are actually several columns and rows, more like a form, binded in the <HierarchicalDataTemplate> . But the 2 Buttons are defined in a Grid outside the <Page.Resources> ...In order to do the Width shortening/widening , I use Storyboard in <Page.Resources> .

<Storyboard x:Key="ShowDefault">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="GroupList">
            <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="PropertyTree">
            <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="270"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="DefaultTree">
            <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="182"/>
        </DoubleAnimationUsingKeyFrames>

    </Storyboard>
    <Storyboard x:Key="HideDefault">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="GroupList">
            <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="152"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="PropertyTree">
            <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="299"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="DefaultTree">
            <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>

And call the Storyboard like this:

<Page.Triggers>
    <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ShowDefaultValue">
        <BeginStoryboard Storyboard="{StaticResource ShowDefault}"/>
    </EventTrigger>
    <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="HideDefaultValue">
        <BeginStoryboard Storyboard="{StaticResource HideDefault}"/>
    </EventTrigger>
</Page.Triggers>

A little complicated, but hope you get it right.

Any help or suggestions will be appreciated. :)

Answer 1

I'm not sure what are you trying to achieve, so I must guess what you meant :).

To get the reference to the TextBlock you can attached to its Loaded event like this:

<TextBlock Loaded="TextBoxLoaded"></TextBlock>
 private TextBlock _textBlock;
        private void TextBoxLoaded(object sender, RoutedEventArgs e)
        {
            _textBlock = sender as TextBlock;
        }

and then when the button is clicked, changed the properties of the TextBlock.

Normally, the button should be in the template as well for each item of your child template.

Answer 2

OK, I eventually solve the problem by adding a <ScrollView> outside the <StackPanel> of two <TreeView> s. No need to change the DataBinding or anything else.