c# - emergente - rg.plugins.popup xamarin forms example

¿Cómo puedo enlazar correctamente una ventana emergente a un ToggleButton?

Question

Estoy intentando hacer algo que parece relativamente simple y lógico desde un nivel de interfaz de usuario, pero tengo un error que es muy molesto. Tengo un ToggleButton y estoy tratando de mostrar una ToggleButton Popup cuando el botón está activado y oculta la Popup cuando el botón está apagado. La Popup también se oculta cuando el usuario hace clic fuera de ella.

Todo funciona como se esperaba con la siguiente XAML, excepto cuando hago clic en el botón de alternar después de que se muestra la Popup , la Popup desaparece por una fracción de segundo y luego vuelve a aparecer.

Sospecho que lo que está sucediendo aquí es que hacer clic fuera del Popup hace que se desactive el botón y, inmediatamente después, se vuelve a encender cuando el mouse hace clic. Simplemente no sé cómo arreglarlo.

Cualquier ayuda es apreciada. Gracias.

    <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

En el botón ToggleButton, establezca la propiedad ClickMode="Press" apixeltoofar

Answer 2

Establezca StaysOpen="True" para su StaysOpen="True" Popup

Desde MSDN :

Obtiene o establece un valor que indica si el control emergente se cierra cuando el control ya no está enfocado.

[...]

true si el control Popup cierra cuando la propiedad IsOpen se establece en false ;

false si el control Popup cierra cuando ocurre un evento de mouse o teclado fuera del control Popup .

Answer 3

La respuesta de Stephans tiene la desventaja de que el comportamiento deseado de cerrar la ventana emergente cada vez que pierde el enfoque también desaparece.

Lo resolví desactivando el botón de alternar cuando la ventana emergente está abierta. Una alternativa sería usar la propiedad IsHitTestVisible en lugar de habilitada:

    <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>

El convertidor se ve así:

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 4

Solución sin 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>