在项控件项模板上设置视觉对象状态



我有一个 ItemsControl,其中包含绑定到数据项的 ItemTemplate。ItemTemplate非常复杂,我为它添加了一些视觉状态,以便我可以更改它的外观。

我希望能够在 ItemsControl 外部发生的事件上将所有项 VisualState 切换到我选择的另一种状态。

我该怎么做呢?我尝试使用VisualStateManager.SetState,但这依赖于控件,而不是模板,这似乎是我可以通过WaveItems.ItemContainerGenerator.ContainerFromIndex(i)获得的全部内容。

问候

特里斯坦

编辑:

这是我各个项目的数据模板。如果您注意到我设置的触发器,它会处理模板本身的 MouseEnter/MouseLeave。我想将它们连接到ItemsControl MouseEnter/MouseLeave,而无需编写任何代码。有没有办法做到这一点?

    <DataTemplate x:Key="LineTemplate">
    <Grid x:Name="LineGrid" HorizontalAlignment="Left" Height="500" VerticalAlignment="Center" Width="3">
        <VisualStateManager.CustomVisualStateManager>
            <ei:ExtendedVisualStateManager/>
        </VisualStateManager.CustomVisualStateManager>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="VisualStateGroup">
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0"/>
                </VisualStateGroup.Transitions>
                <VisualState x:Name="Expanded">
                    <Storyboard>
                        <DoubleAnimation Duration="0:0:1" By="-100" Storyboard.TargetProperty="(Line.Y2)" Storyboard.TargetName="lineTop"/>
                        <DoubleAnimation Duration="0:0:1" By="100" Storyboard.TargetProperty="(Line.Y2)" Storyboard.TargetName="lineBottom"/>
                        <DoubleAnimation Duration="0:0:1" To="0.5" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="lineTop" d:IsOptimized="True"/>
                        <DoubleAnimation Duration="0:0:1" To="0.25" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="lineBottom" d:IsOptimized="True"/>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Normal">
                    <Storyboard>
                        <DoubleAnimation Duration="0:0:1" To="0" Storyboard.TargetProperty="(Line.Y2)" Storyboard.TargetName="lineTop" d:IsOptimized="True"/>
                        <DoubleAnimation Duration="0:0:1" To="{Binding BottomValue}" Storyboard.TargetProperty="(Line.Y2)" Storyboard.TargetName="lineBottom" d:IsOptimized="True"/>
                        <DoubleAnimation Duration="0:0:1" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="lineTop" d:IsOptimized="True"/>
                        <DoubleAnimation Duration="0:0:1" To="0.495" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="lineBottom" d:IsOptimized="True"/>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="ExpandedHighlight"/>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="MouseEnter" >
                <ei:GoToStateAction x:Name="Expand" StateName="Expanded"/>
            </i:EventTrigger>
            <i:EventTrigger EventName="MouseLeave">
                <ei:GoToStateAction x:Name="Collapse" StateName="Normal"/>
            </i:EventTrigger>
        </i:Interaction.Triggers>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Line Grid.Row="0" x:Name="lineTop" VerticalAlignment="Bottom" StrokeThickness="3" Stroke="{Binding Brush}" Y1="{Binding TopValue}" Y2="0" RenderTransformOrigin="0.5,0.5">
            <Line.RenderTransform>
                <CompositeTransform ScaleY="1"/>
            </Line.RenderTransform>
        </Line>
        <Line Grid.Row="1" x:Name="lineBottom" VerticalAlignment="Top" StrokeThickness="3" Stroke="{Binding Brush}" Y1="0" Y2="{Binding BottomValue}" RenderTransformOrigin="0.5,0.5" Opacity="0.5">
            <Line.RenderTransform>
                <CompositeTransform ScaleY="1"/>
            </Line.RenderTransform>
        </Line>
    </Grid>
</DataTemplate>

我还尝试使用以下绑定:SourceObject="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ItemsControl}}}"

但这会显示一条消息:"Silverlight 项目中不支持类型"。

在Thomas Danemar的博客中,有一个类保持和切换VisualState的例子。它是通过将VisualState绑定到 ViewModel 中的附加属性来实现的,他们只需将其设置为所需的值。您甚至可以将其绑定TwoWay模式。

已修复:

            <i:Interaction.Triggers>
            <i:EventTrigger
                SourceObject="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ItemsControl}}"
                EventName="MouseEnter">
                <ei:GoToStateAction x:Name="Expand" StateName="Expanded"/>
            </i:EventTrigger>
            <i:EventTrigger 
                SourceObject="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ItemsControl}}"
                EventName="MouseLeave">
                <ei:GoToStateAction x:Name="Collapse" StateName="Normal"/>
            </i:EventTrigger>
        </i:Interaction.Triggers>

最新更新