Come associare correttamente un Popup a un ToggleButton?

Question

Sto provando a fare qualcosa che sembra relativamente semplice e logica da un livello di interfaccia utente, ma ho un bug che è molto fastidioso. Ho un ToggleButton e sto cercando di mostrare un Popup quando il pulsante è attivato e nasconde il Popup quando il pulsante è disattivato. Lo Popup si nasconde anche quando l'utente fa clic su di esso.

Tutto sta funzionando come previsto con il seguente XAML, tranne quando si fa clic sul pulsante di commutazione dopo il Popup viene mostrato, il Popup sparisce per una frazione di secondo poi riappare.

Ho il sospetto che quello che sta succedendo qui è che facendo clic su di esso il Popup sta causando di disattivare il pulsante e quindi immediatamente dopo che il pulsante è stato attivato quando il mouse lo fa clic. Non so come procedere per risolverlo.

Qualsiasi aiuto è apprezzato. Grazie.

<ToggleButton x:Name="TogglePopupButton" Content="My Popup Toggle Button" Width="100" /> 

    <Popup StaysOpen="False" IsOpen="{Binding IsChecked, ElementName=TogglePopupButton, Mode=TwoWay}"> 
     <Border Width="100" Height="200" Background="White" BorderThickness="1" BorderBrush="Black"> 
      <TextBlock>This is a test</TextBlock> 
     </Border>     
    </Popup> 

Answer 1

Le risposte di Stephan hanno lo svantaggio che scompare anche il comportamento desiderato di chiusura del popup ogni volta che perde la messa a fuoco.

Ho risolto disattivando il pulsante di attivazione quando il popup è aperto. Un'alternativa sarebbe quella di utilizzare la proprietà IsHitTestVisible invece è abilitato:

<ToggleButton x:Name="TogglePopupButton" Content="My Popup Toggle Button" Width="100" IsEnabled="{Binding ElementName=ToggledPopup, Path=IsOpen, Converter={StaticResource BoolToInvertedBoolConverter}}"/> 
    <Popup x:Name="ToggledPopup" StaysOpen="False" IsOpen="{Binding IsChecked, ElementName=TogglePopupButton, Mode=TwoWay}"> 
     <Border Width="100" Height="200" Background="White" BorderThickness="1" BorderBrush="Black"> 
      <TextBlock>This is a test</TextBlock> 
     </Border>     
    </Popup> 

Il convertitore è simile al seguente:

public class BoolToInvertedBoolConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
     if (value is bool) 
     { 
      bool boolValue = (bool)value; 
      return !boolValue; 
     } 
     else 
      return false; 
    } 

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
     throw new NotImplementedException("ConvertBack() of BoolToInvertedBoolConverter is not implemented"); 
    } 
} 

Answer 2

Set StaysOpen="True" per il vostro Popup

Da MSDN:

Ottiene o imposta un valore che indica se il controllo Popup chiude quando il controllo non è più a fuoco.

[...]

true se il controllo Popup chiude quando IsOpen proprietà è impostata false;

false se il controllo Popup si chiude quando si verifica un evento del mouse o della tastiera all'esterno del controllo Popup.

Answer 3

soluzione senza IValueConverter:

<Grid> 
    <ToggleButton x:Name="TogglePopupButton" Content="My Popup Toggle Button" Width="100" > 
     <ToggleButton.Style> 
      <Style TargetType="{x:Type ToggleButton}"> 
       <Setter Property="IsHitTestVisible" Value="True"/> 
       <Style.Triggers> 
        <DataTrigger Binding="{Binding ElementName=Popup, Path=IsOpen}" Value="True"> 
         <Setter Property="IsHitTestVisible" Value="False"/> 
        </DataTrigger> 
       </Style.Triggers> 
      </Style> 
     </ToggleButton.Style> 
    </ToggleButton> 

    <Popup StaysOpen="false" IsOpen="{Binding IsChecked, ElementName=TogglePopupButton, Mode=TwoWay}" 
       PlacementTarget="{Binding ElementName=TogglePopupButton}" PopupAnimation="Slide" 
      x:Name="Popup"> 
     <Border Width="100" Height="200" Background="White" BorderThickness="1" BorderBrush="Black"> 
      <TextBlock>This is a test</TextBlock> 
     </Border> 
    </Popup> 
</Grid> 

Answer 4

Sulla ToggleButton impostare il Proprietà ClickMode="Press"apixeltoofar