"Collapsed" element still reacts to user input

06-17-2008 2:54 PM |

I have a grid inside of a border. This grid contains a button. I have created a transition to set the containing border to Visibility=Collapsed. This works. My problem is that when I click where the button was, the event is still fired.

Perhaps I'm doing something wrong, but isn't anything thats collapsed supposed to no longer visually update or react to user input?

Thanks!
-Sean

Re: "Collapsed" element still reacts to user input

06-18-2008 12:17 AM |

I personally add a line to check the Visibility

 private void Button_Click(object sender, RoutedEventArgs e)
        {
            if (((Button)sender).Visibility == Visibility.Visible)
            {.....things to do}
        }

I dont know if it is a good way or there should be another work around or simply setting some properties may make it works. Seeking for a real solution =]

Re: Re: "Collapsed" element still reacts to user input

06-18-2008 1:03 PM |

Seems like a good solution for a limited number of controls, but with the new "handled" mouse clicks and my complex layout, that solution just isn't working for me.  This is turning into a real problem.

Maybe I can switch the two elements around in the collection of Grid children... hmmmm....

Can MS chime in and provide some guidance or reassurance? Please?

Thanks!
-Sean

Re: "Collapsed" element still reacts to user input

06-19-2008 5:56 AM |

Hi:

  Could you post a demo project that can reproduce this problem?

Thanks

Re: Re: "Collapsed" element still reacts to user input

06-19-2008 3:47 PM |

 Well this is interesting. I found what appeared to be a strange bug (possibly by design) behavior of the Visual State Manager that seems to be tied to the issue.  I will try and put together a demo project.  Bottom line is that this seems to be the workaround that fixed it for me:

public static void PushToTop(this FrameworkElement element)
        {
            if (element == null) throw new ArgumentNullException("element");
            var parentPanel = element.Parent as Panel;
            if (parentPanel != null)
            {
                // relocate the framework element to be the last in the list (which makes it "above" everything else)
                parentPanel.Children.Remove(element);
                parentPanel.Children.Add(element);
                parentPanel.UpdateLayout();
            }
        }

Originally, this wasn't working right, but now it is.. not sure why.

I'll put together a demo app.
Thanks!

Re: Re: Re: "Collapsed" element still reacts to user input

06-19-2008 5:51 PM |

 More of the mystery unfolds. I created a sample app... and it wrorks perfectly.

So.. I removed the opacity transition that I had as well as the time interval for the transition.. What I found was that my container (a Grid) that I was trying to hide was not hiding!! The opacity change made me think it was. :)

So.. everything else seems to work. A rough outline of my layout is as follows:

Root
   Border B
     Grid A
       [Misc Content]
   Border B
     Grid B
       [Misc Content]

 So.. it seems that opacity works perfectly. When I try and transition the Visibility for Border B or Grid B, it doesn't work!

Here is some of the markup:

<Border Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" BorderThickness="1,1,1,1" BorderBrush="#FF999999" Margin="8,8,8,8" x:Name="MainContainer">
       
                <Grid Height="Auto" x:Name="MainContent" Width="Auto">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="62"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="51"/>
                    </Grid.RowDefinitions>
...

I'm not sure what else I can do to try and pinpoint why the Visibility change in the state manager isn't working.. Here's the snip from the state manager code:

<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="MainContent" Storyboard.TargetProperty="(UIElement.Visibility)">
                            <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                <DiscreteObjectKeyFrame.Value>
                                    <vsm:Visibility>Collapsed</vsm:Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>

 Hopefully there is some clue here...

Thanks for any help with this issue!!  

Re: Re: Re: &amp;quot;Collapsed&amp;quot; element still reacts to user input

06-20-2008 1:41 AM |

Hi:

CleverCoder:

I'm not sure what else I can do to try and pinpoint why the Visibility change in the state manager isn't working.. Here's the snip from the state manager code:

  It may be a known issue posted here:

http://silverlight.net/forums/t/18263.aspx

  If your scenario is different please post a demo project.

Thanks

Re: Re: Re: &amp;quot;Collapsed&amp;quot; element still reacts to user input

06-20-2008 11:33 AM |

 Okay.. You asked for it. Took me the last two hours to whittle down my working app.  I'll just paste the code here, rather than uploading a zip file. It should be easy to recreate:

Page.xaml:

<UserControl
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    x:Class="InvisibleControlIssue.Page"
    x:Name="MainRoot"
    d:DesignWidth="448" d:DesignHeight="272" OpacityMask="#FF000000"
    xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">

    <Grid x:Name="LayoutRoot" Background="#FFFFFFFF" Opacity="1" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <vsm:VisualStateManager.VisualStateGroups>
            <vsm:VisualStateGroup x:Name="MainAppState">
                <vsm:VisualStateGroup.Transitions>
                    <vsm:VisualTransition Duration="00:00:00.5000000"/>
                </vsm:VisualStateGroup.Transitions>
                <vsm:VisualState x:Name="SubmitComplete">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="SecondContainer" Storyboard.TargetProperty="(UIElement.Visibility)">
                            <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                <DiscreteObjectKeyFrame.Value>
                                    <vsm:Visibility>Visible</vsm:Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="MainContainer" Storyboard.TargetProperty="(UIElement.Visibility)">
                            <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                <DiscreteObjectKeyFrame.Value>
                                    <vsm:Visibility>Collapsed</vsm:Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </vsm:VisualState>
            </vsm:VisualStateGroup>
        </vsm:VisualStateManager.VisualStateGroups>
       
        <Grid Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="1" x:Name="ContentGrid">
       
            <Border Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" BorderThickness="1,1,1,1" BorderBrush="#FF999999" Margin="8,96,8,8" x:Name="SecondContainer" Visibility="Collapsed" IsHitTestVisible="True" RenderTransformOrigin="0.5,0.5">
                <Grid Height="Auto" Width="Auto">
                    <Button Content="Button" Width="96" Height="23" VerticalAlignment="Bottom" d:LayoutOverrides="Width, Height" HorizontalAlignment="Right" Margin="0,0,15,8" RenderTransformOrigin="0.5,0.5" x:Name="button" />
                </Grid>
            </Border>
            <Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" BorderThickness="1,1,1,1" BorderBrush="#FF999999" Margin="8,88,8,8" x:Name="MainContainer">
       
                <Grid Height="Auto" x:Name="MainContent" Width="Auto" Margin="0,18,0,0" RenderTransformOrigin="0.5,0.5">
                    <Button Width="126" Content="Transition to Next Page" x:Name="SendButton"  Click="SendButton_Click" Height="21.903" Grid.Row="3" d:LayoutOverrides="Width, Height" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="0,0,8,8"/>
                </Grid>
            </Border>
            <TextBox Height="72" Margin="8,8,8,0" VerticalAlignment="Top" Text="This page has two containers. The MainContainer (visible in the base state), and the secondContainer (initially collapsed). Click the button to transition to the SubmitComplete state. This should collapse the MainContainer and make the second container visible. Notice that the visiblity does NOT transition." TextWrapping="Wrap"/>
        </Grid>
    </Grid>
</UserControl>

Page.xaml.cs: 

using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Controls;

namespace InvisibleControlIssue
{
    public partial class Page : UserControl
    {
        public Page()
        {
            // Required to initialize variables
            InitializeComponent();
        }

        private void SendButton_Click(object sender, RoutedEventArgs e)
        {
            VisualStateManager.GoToState(this, "SubmitComplete", true);
        }
    }
}

So.. there you have it. Nothing too fancy, but WHY isn't the visibility being honored in the "SubmitComplete" state?

Thanks!
-Sean

Re: Re: Re: Re: &amp;amp;quot;Collapsed&amp;amp;quot; element still reacts to user input

06-22-2008 7:00 PM |

I have been experiencing this problem myself and my workaround is to change the opacity instead.     That has solved my issues for now.