How to change the visibility when the click is outside of the control

I have a User control in WPF that is built开发者_开发问答 on MVVM format. The usercontrol is a collection of viewmodels arranged in a panel. The number of pannels (or related views/ view models) will be decided at run time.

Each panel is a user control and refers a view model (case as workspaces). Each pannel consists of a button and a listbox. Initially when loaded only the buttons of all the pannels will be shown. On click of button the corresponding List box would be shown. Till this it is working fine.

What i need is if the user clicks on any other area the curent open listbox should collapse. If user selects another button, that listbox should be shown and this current open list box should be collapsed.

Currently it shows on button click but never closes

For showing the list box i am using the below code in the button trigger :

<Button.Triggers>
            <EventTrigger RoutedEvent="Button.Click">
                <BeginStoryboard>
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.Target="{x:Reference ListBoxDrop}" 
                                               Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Visible}">
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Button.Triggers>

Any suggestion ?

• Girija

just add another trigger!

    <Button Content="Button" Height="23" Name="button" Width="75" >
        <Button.Triggers>
            <EventTrigger RoutedEvent="Button.Click">
                <BeginStoryboard>
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.Target="{x:Reference ListBoxDrop}"  
                                                        Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Visible}"></DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <EventTrigger RoutedEvent="Button.LostFocus">
                <BeginStoryboard>
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.Target="{x:Reference ListBoxDrop}"  
                                                        Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Collapsed}"></DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Button.Triggers>
    </Button>

Fred's answer might just be it.

However the expected behavior for the user is for the listbox to get focus on button click.

So the the button will lose focus even when the corresponding listbox (or its item) is selected by the user. Thus hiding the listbox again.

I would suggest to modify it like this:

<ListBox.Triggers>
    <EventTrigger RoutedEvent="GotFocus"> 
     <EventTrigger.Actions>
       <BeginStoryboard>
         <Storyboard>
           <DoubleAnimation Storyboard.TargetName="myListBox" Storyboard.TargetProperty="Opacity" Duration="0:0:0.1" To="1"/>
         </Storyboard>
       </BeginStoryboard>
     </EventTrigger.Actions> 
    </EventTrigger>
    <EventTrigger RoutedEvent="LostFocus"> 
     <EventTrigger.Actions>
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation Storyboard.TargetName="myListBox" Storyboard.TargetProperty="Opacity" Duration="0:0:0.1" To="0"/>
        </Storyboard>
      </BeginStoryboard>
     </EventTrigger.Actions>
    </EventTrigger>
</ListBox.Triggers>

And for the corresponding button, set an event handler in codebehind...

private void Btn_Click(object sender, RoutedEventArgs e)
        {
            myListBox.Focus();
        }