HandyControl icon indicating copy to clipboard operation
HandyControl copied to clipboard

Poptip don't let interact with controls inside the Poptip

Open jhm-ciberman opened this issue 2 years ago • 1 comments

Describe the bug Poptip don't let interact with controls inside the Poptip.

The idea is that I have a selector with multiple predefined date ranges (30 days, 60 days, this year, etc) and one option for "Custom..." at the end:

image

When the user clicks the "Custom..." option I want to show a Poptip with some controls that let the user select a custom date range:

image

The problem is that the poptip seems to be blocking me from interact with the controls. The other four controls don't seems to receive clicks.

This is the code I use:

<UserControl 
    x:Class="Regis.Windows.Views.DateRangeSelector"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:local="clr-namespace:Regis.Windows.Views" xmlns:hc="https://handyorg.github.io/handycontrol"
    mc:Ignorable="d">
    <Grid>
        <ComboBox 
            MinWidth="120"
            ItemsSource="{Binding DateRangesList}" 
            hc:Poptip.IsOpen="{Binding CustomDateRangePopTipIsOpen}"
            hc:Poptip.Placement="BottomRight"
            hc:Poptip.HitMode="None"
            SelectedItem="{Binding SelectedDateRangeOption}">
            <hc:Poptip.Content>
                <DockPanel HorizontalAlignment="Right" ClipToBounds="False">
                    <DockPanel Margin="0,0,0,20">
                        <Image DockPanel.Dock="Left" Source="/Resources/DateRange96.png" Width="48" Height="48" Margin="10,0,20,0" VerticalAlignment="Center"/>

                        <Grid DockPanel.Dock="Top">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <TextBlock Grid.Column="0" Grid.Row="0" VerticalAlignment="Center" Margin="0,0,20,10" Text="Desde"/>
                            <hc:DatePicker Grid.Column="1" Grid.Row="0" Margin="0,0,10,10" IsError="False" SelectedDate="{Binding SelectedStartDate, UpdateSourceTrigger=PropertyChanged}"/>
                            <hc:TimePicker Grid.Column="2" Grid.Row="0" Margin="0,0,0,10" ErrorStr="" SelectedTime="{Binding SelectedStartTime, UpdateSourceTrigger=PropertyChanged}"/>
                            <TextBlock Grid.Column="0" Grid.Row="1" VerticalAlignment="Center" Margin="0,0,20,0" Text="Hasta"/>
                            <hc:DatePicker Grid.Column="1" Grid.Row="1" Margin="0,0,10,0" IsError="False" ErrorStr="" SelectedDate="{Binding SelectedEndDate, UpdateSourceTrigger=PropertyChanged}"/>
                            <hc:TimePicker Grid.Column="2" Grid.Row="1" ErrorStr="" SelectedTime="{Binding SelectedEndTime, UpdateSourceTrigger=PropertyChanged}"/>
                        </Grid>
                        <TextBlock Margin="0,5,0,0" Visibility="{Binding DateRangeErrorText, Converter={StaticResource String2VisibilityConverter}}" Text="{Binding DateRangeErrorText}" d:Text="La fecha desde debe ser anterior a la fecha hasta" Foreground="{StaticResource DangerBrush}"/>
                    </DockPanel>
                </DockPanel>
            </hc:Poptip.Content>
        </ComboBox>
    </Grid>
</UserControl>


Also, the documentation mentions hc:Poptip.Instance but it seems it does not exists currently in HandyControls

Expected behavior The poptip should let the user interact with controls inside

Environment (please complete the following information):

  • .net: 5
  • IDE VS2019
  • Version HandyControls 3.3.9

jhm-ciberman avatar Dec 15 '21 21:12 jhm-ciberman

Well. I ended up using a <Popup> element, with some customization:

image

So, for someone trying to make something like this, you can use the <Popup> control.

The bug still exists. Maybe it's not a bug and it's a limitation of the Poptip control. In either case it should be documented.

jhm-ciberman avatar Dec 15 '21 22:12 jhm-ciberman