Question

I need to be able to collapse expander on clicking anywhere outside the expander area. I am wondering what technique can be used. Any advice is highly appreciated.

Expander XAML – set binding to isExpanded:

 <toolkit:Expander Header="Tasks" IsExpanded="{Binding IsExpanded}">

Code behind:

    public bool IsExpanded
    {
        get { return _isExpanded; }
        set
        {
            if (value == _isExpanded)
                return;
            _isExpanded = value;
            OnPropertyChanged("IsExpanded");
        }
    }

Answer 1

I assume you are using code behind.

Can you please try this in the Expander’s MouseLeave & MouseEnter handlers

    private void expander1_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e)
    {   
        Application.Current.RootVisual.MouseLeftButtonDown += RootVisual_MouseLeftButtonDown;
    }

    void RootVisual_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        this.expander1.IsExpanded = false;
    }

    private void expander1_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
    {
        Application.Current.RootVisual.MouseLeftButtonDown -= RootVisual_MouseLeftButtonDown;
    }