Question

我有一个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项目不支持类型”。

Answer 1

在Thomas Danemar's Blog中，有一个要保留和切换VisualState的类的示例。它是通过将VisualState绑定到ViewModel中的附加属性来实现的，它们只是将其设置为所需值。 您甚至可以将其TwoWay模式绑定。

Answer 2

修正：

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

在ItemsControl项模板上设置VisualState

2 个答案: