Setting VisualState on ItemsControl item Templates

0
votes

I have an ItemsControl with an ItemTemplate that is bound to a data item. The ItemTemplate is quite complicated and I have added some visual state to it so that I can change it's appearance.

I want to be able to switch all the items VisualState to another state of my choice, on an event that occurs outside the ItemsControl.

How can I go about doing this? I've tried using the VisualStateManager.SetState, but this relies on a control, rather than a template, which seems to be all I can get via WaveItems.ItemContainerGenerator.ContainerFromIndex(i).

Regards

Tristan

Edit:

Here is my data template for the individual items. If you note the triggers I have set up, it handles the MouseEnter / MouseLeave of the template itself. I'd like to wire these up to the ItemsControl MouseEnter / MouseLeave, without writing any code. Is there a way to do this?

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

I have also tried using the following binding: SourceObject="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ItemsControl}}}"

But this displays a message: "Type is not supported in a silverlight project".

2
c#wpfitemscontrol
You would better provide some code. – HichemSeeSharp

2 Answers

0
votes

In Thomas Danemar's Blog there's an example of class to hold and switch VisualState. It's implemented by binding VisualState to attached property inside your ViewModel and them just set it to desire value. You can even bind it TwoWay mode.

0
votes

Fixed:

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