2

From other post suggestions I have customized an expander so when pushed it opens a Popup with a TreeView in

Everything is working as expected, except one thing. If i click outside the popup it doesn't close even though I have set StaysOpen=False (I have tried to replace the TreeView with a textblock, but it still doesn't work)

So what I have is a ControlTemplate for the ExpanderButton a Style for the Expander and the usage of this.

The Style

<Style  x:Key="W8Expander" TargetType="{x:Type Expander}" >
    <Setter Property="MinWidth" Value="120" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Expander}">
                <Grid >
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition x:Name="ContentRow" Height="0" />
                    </Grid.RowDefinitions>

                    <Border x:Name="Border" Grid.Row="0" BorderThickness="1" CornerRadius="2,2,0,0">
                        <Grid Background="{TemplateBinding Background}">
                            <ToggleButton x:Name="ExpanderButton" Template="{StaticResource W8ExpanderToggleButton}" Content="{TemplateBinding Header}"
                                    IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press" OverridesDefaultStyle="True" >
                            </ToggleButton>
                        </Grid>
                    </Border>
                    <Border x:Name="Content" Grid.Row="1">
                        <ContentPresenter Margin="0" />
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsExpanded" Value="False">
                        <Setter TargetName="ContentRow" Property="Height" Value="0" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The usage of the expander in the xaml

<Expander Name="TreeViewExpander" Style="{StaticResource W8Expander}" Grid.Row="0" Grid.Column="0" Margin="10,0,10,0" >
  <Expander.Header>
    <StackPanel>                           
      <TextBlock Text="{Binding Path=ActiveReportTypeCategory.Name}"/>
      <TextBlock Text="{Binding Path=ActiveReportType.Name}" Style="{DynamicResource OptionValueTextStyle}" Margin="0,-1,0,0"/>
    </StackPanel>
  </Expander.Header>
  <Popup Name="ReportSelectionPopoUp" IsOpen="{Binding IsExpanded, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Expander}}}" StaysOpen="False" Opened="ReportSelectionPopoUp_OnOpened" PopupAnimation="Fade" Width="{Binding ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Expander}}}" >
    <TextBlock>asdf</TextBlock>
  </Popup>
</Expander>

When clicking outside the popup I would expect it to close as StaysOpen=false, however this doesn't happen. Is this due to the Openedbinding ? Any suggestions how to get this to work ?

dennis_ler
  • 659
  • 1
  • 9
  • 36

1 Answers1

2

You have data bound an IsExpanded property to the Popup.IsOpen property. Typically, when we want to close a Popup control in WPF, we set the data bound property to false. However, as you have data bound that property to the Expander.IsExpanded property, you could close the Popup by closing the Expander.

If that is not the behaviour that you want, then perhaps you should data bind the Popup.IsOpen property to another bool property instead. Then, when you want to close the Popup, simply set the property to false.

Sheridan
  • 68,826
  • 24
  • 143
  • 183
  • I figured it was something like that. I want the Popup to open when IsExpanded is true, but also want the popup to close when the expand button is clicked again OR when clicked outside the popup () which I thought the StaysOpen="False" would handle. But I guess this is overriden byt the binding ? – dennis_ler Mar 04 '15 at 15:38
  • Yes, that's right. You could data bind the `Popup.IsOpen` property to another `bool` property which you can set to `false` when you register a mouse click outside the control *and* when the `Expander` is closed. (Of course, you'd need to data bind a different `bool` property to the `Expander.IsExpanded` property to know when that was closed also. – Sheridan Mar 05 '15 at 09:03
  • Well been struggling with capturing the mouse outside the window. If I use `CaptureMouse` on the element, all mouse events are ignored, like for exaple `mouseOver`. Do you have any other suggestion to how I can register the mouse clicked outside ? – dennis_ler Mar 05 '15 at 13:13
  • 1
    Yup... just handle the mouse clicks in the main window and pass a message to the appropriate place. – Sheridan Mar 05 '15 at 13:40
  • That works :) Except when I press the title bare of the window, but I'm closer now. Thx – dennis_ler Mar 05 '15 at 15:46
  • You can do that using the [`HwndHost.WndProc` Method](https://msdn.microsoft.com/en-us/library/system.windows.interop.hwndhost.wndproc(v=vs.110).aspx). See the [How to handle WndProc messages in WPF?](http://stackoverflow.com/questions/624367/how-to-handle-wndproc-messages-in-wpf) question for help, or search online... or ask a new question after having a go. – Sheridan Mar 05 '15 at 15:59
  • Thanks for the advice regarding the title bar. I handled it in another way, so now it works as expected. – dennis_ler Mar 06 '15 at 10:32