Use same VisualStateGroup in all different ListViewItem style

Anderson Rodrigues Cavalcante 291 Reputation points
2024-06-07T09:38:18.44+00:00

Hello everyone.

I'd like to make my VisualStateGroup unique for all ListViewItem, so that any ListViewItem style, even different, can use the same VisualStateGroup, without repeating in the ListViewItem style.

Declare the VisualStateGroup once and all different item styles can use it.

Something like:

Externalized VisualStateGroup:

                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="MyGrid"
                                                             Storyboard.TargetProperty="Opacity"
                                                             To="1"
                                                             Duration="0" />
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MyGrid" Storyboard.TargetProperty="BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="yellow" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MyGrid" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="yellow" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="MyGrid"
                                                             Storyboard.TargetProperty="Opacity"
                                                             To="1"
                                                             Duration="0" />
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MyGrid" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="red" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MyGrid" Storyboard.TargetProperty="BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="red" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="MyGrid"
                                                             Storyboard.TargetProperty="Opacity"
                                                             To="1"
                                                             Duration="0" />
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MyGrid" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MyGrid" Storyboard.TargetProperty="BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="white" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>

ListViewItemStyle1:

	<Style x:Key="ListViewItemStyle1" TargetType="ListViewItem">
            <Setter Property="CornerRadius" Value="0" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListViewItem">
                        <Grid x:Name="MyGrid"
                              Height="43" Width="500">
                            <ContentPresenter x:Name="ContentPresenter" />
                            <VisualStateManager.VisualStateGroups>

                                //External VisualStateGroup

                            </VisualStateManager.VisualStateGroups>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

ListViewItemStyle2:

	<Style x:Key="ListViewItemStyle2" TargetType="ListViewItem">
            <Setter Property="CornerRadius" Value="0" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListViewItem">
                        <Grid x:Name="MyGrid"
                              Height="90" Width="700">
                            <ContentPresenter x:Name="ContentPresenter" />
                            <VisualStateManager.VisualStateGroups>

                                //External VisualStateGroup

                            </VisualStateManager.VisualStateGroups>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>



Note that "MyGrid" exists in all ListViewItem styles.

Thank you all.

Universal Windows Platform (UWP)
C#
C#
An object-oriented and type-safe programming language that has its roots in the C family of languages and includes support for component-oriented programming.
10,535 questions
XAML
XAML
A language based on Extensible Markup Language (XML) that enables developers to specify a hierarchy of objects with a set of properties and logic.
779 questions
{count} votes