WPF grid and togglebutton mutual binding

Question

I have a grid in my application and I need that grid to work like a pop up while checking a togglebutton it should appear and while unchecking it should disappear and for that I wrote a code like this.

       <Grid x:Name="popup" Visibility="{Binding IsChecked,ElementName=button,Converter={StaticResource BooleanToVisibility}}" >
<Grid.Resources><Storyboard x:Key="ResetButton1">
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(ToggleButton.IsChecked)"
                                Storyboard.TargetName="button">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <System:Boolean>False</System:Boolean>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard></Grid.Resources>
<i:Interaction.Triggers>
                    <i:EventTrigger EventName="TouchDown">
                        <ei:ControlStoryboardAction Storyboard="{StaticResource ResetButton1}" />
                    </i:EventTrigger>
                </i:Interaction.Triggers>
<TextBlock >this is a popup</TextBlock> </Grid>

        <ToggleButton x:Name="button"></ToggleButton>

My problem occurs when I uncheck the togglebutton after I checked it. The pop up stays there with an animation.It works fine when i click out of the togglebutton.How I can Handle it?

Answer 1

Ok, so the way you have it currently doesn't make much sense amigo. Subscribing to the TouchDown event to fire off a storyboard that just unchecks the ToggleButton is a cyclic loop of negating itself.

Instead, just throw a couple .Triggers in there to toggle the visibility of the Grid and get rid of that Storyboard and TouchDown EventTrigger.

So just throw something like this in as triggers.

<DataTrigger Binding="{Binding IsChecked, ElementName=button}" Value="True">
   <Setter Property="Visibility" Value="Visible"/>
</DataTrigger>

<DataTrigger Binding="{Binding IsChecked, ElementName=button}" Value="False">
   <Setter Property="Visibility" Value="Collapsed"/>
</DataTrigger>

Or you could also use ChangePropertyAction from the Blend SDK for wpf.

Hope this helps.