How to change visual state from scroll viewer in wpf xaml

Question

I'm pulling my hair out trying to get this to work. Im trying to learn to do transitions and struggling a bit. Basically im making a combo box, made up of a grid containing 2 rows. top row is a button, when clicked the bottom row opens up showing a scrollviewer of dynamically added buttons. When clicked, the bottom grid row will collapse.

The problem is that the Click event does not seem to fire from within the scroll viewer, or it can't find the visual state in the scope or something. So it the SelectionMode works fine when Button11 is clicked, but nothing happens when I click on an item button. The buttons is the scrollviewer work perfectly with their own color animations and firing events etc

Id be open to a solution in code-behind since I can make routed click event fire no problem, but I had had no luck with

VisualStateManager.GoToState(gridContent, "HiddenMode", true);

Ideally I'd like this to be a custom user control I can add like local:CustomComboBox but It complicated for me at this stage having controls inside controls in a custom control.

MyButton1 is just a simple button but with color transitions etc

No exceptions / errors just nothing happens when I click the button

<Window.Resources>

    <Storyboard x:Key="sb1">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="gridContent" Storyboard.TargetProperty="Height">
            <EasingDoubleKeyFrame KeyTime="0" Value="30" />
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="160" />
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="scrItems" Storyboard.TargetProperty="Height">
            <EasingDoubleKeyFrame KeyTime="0" Value="0" />
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="130" />
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="sb2">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="gridContent" Storyboard.TargetProperty="Height">
            <EasingDoubleKeyFrame KeyTime="0" Value="160" />
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="30" />
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="scrItems" Storyboard.TargetProperty="Height">
            <EasingDoubleKeyFrame KeyTime="0" Value="130" />
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0" />
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Window.Resources>


<Grid Name="Grid1" Margin="0,22,0,0" RenderTransformOrigin="0.5,0.5">
        <Grid Name="gridContent" HorizontalAlignment="Left" Margin="187,74,0,0" VerticalAlignment="Top" Width="140" Height="30" RenderTransformOrigin="0.5,0.5">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="VisualStateGroup">
                <VisualState x:Name="SelectionMode" Storyboard="{StaticResource sb1}" />
                <VisualState x:Name="HiddenMode" Storyboard="{StaticResource sb2}" />
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Grid.RowDefinitions>
                <RowDefinition Height="30"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>


        <local1:Button1 Name="Button11" Content="Click" Height="30" Grid.Row="0" Margin="0,0,0,30">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="Click">
                        <ei:GoToStateAction TargetName="gridContent" StateName="SelectionMode" />
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </local1:Button1>
        <ScrollViewer Name="scrItems"  VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Hidden" Margin="0" Width="140" Height="0" Grid.Row="1">

            <ItemsControl x:Name="stkItems">

                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Vertical"/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>

                        <local1:Button1 Content="Click" Height="30">
                            <i:Interaction.Triggers>
                                <i:EventTrigger EventName="Click">

                                    <ei:GoToStateAction TargetName="gridContent" StateName="HiddenMode" />
                                </i:EventTrigger>
                            </i:Interaction.Triggers>
                        </local1:Button1>
                    </DataTemplate>

                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </ScrollViewer>
        </Grid>
</Grid>




private void Window_Loaded(object sender, RoutedEventArgs e)
    {
        lstItems = new ObservableCollection<MyButton.Button1>();
        for (int i = 0; i <= 999; i++)
        {
            MyButton.Button1 item1 = new Button1();
            item1.Content = "Item " + i;
            item1.Width = stkItems.Width;
            item1.Height = 30;
            //item1.Click += new RoutedEventHandler(Button_Item_Click);
            lstItems.Add(item1);
        }
        stkItems.DataContext = this.stkItems;
        stkItems.ItemsSource = lstItems;
    }

score 0 · Answer 1 · answered Apr 09 '16 at 03:38

SOLVED!!!

I moved the visualStateManager to the root element - Grid1, but dont know if that affects it

private void Button_Item_Click(object sender, RoutedEventArgs e)
    {
        bool g = ExtendedVisualStateManager.GoToElementState(this.Grid1 as FrameworkElement, "HiddenMode", true);
    }

How to change visual state from scroll viewer in wpf xaml

1 Answers1