close radcombobox popup when focus other window/app or move the window

[mh]

Hi

we tried to change template for radcombobox. but encountered a problem.

when popup is shown and try to move window or focus other window/app, it remains open. note that we set OpenDropdownOnFocus and IsEditable to true

we use c#, wpf, .net core

thanks

<Style TargetType="telerik:RadComboBox">
        <Setter Property="TextSearchMode" Value="Contains"/>
        <Setter Property="IsFilteringEnabled" Value="true"/>
        <Setter Property="OpenDropDownOnFocus" Value="True"/>
        <Setter Property="EditableTemplate">
            <Setter.Value>
                <ControlTemplate  TargetType="telerik:RadComboBox">
                    <Grid>
                        <telerik:RadToggleButton Name="ToggleButton" Background="{TemplateBinding Background}" Foreground="{StaticResource _comboboxForeground}" Template="{StaticResource MyRadToggleButton}" Focusable="false" 
                                                 IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press">
                        </telerik:RadToggleButton>
                        <ContentPresenter Name="ContentSite" IsHitTestVisible="False" 
                                          Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" 
                                          ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Margin="3,3,23,3"  VerticalAlignment="Center" HorizontalAlignment="Left" />


                        <TextBox x:Name="PART_EditableTextBox"  Margin="5,1,25,1"
                                 Style="{StaticResource _Panel_TextBoxStyle}"
                                 Background="Transparent"
                                 BorderThickness="0"
                                 VerticalAlignment="Center"/>
                       
                        <Popup Name="Popup"  Grid.ColumnSpan="2" Placement="Bottom"  IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True" Focusable="False" PopupAnimation="Slide">
                            <Grid Name="DropDown" SnapsToDevicePixels="True"  MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}">
                                <Border Grid.ColumnSpan="2" Grid.RowSpan="2" x:Name="DropDownBorder" SnapsToDevicePixels="True" MaxWidth="{TemplateBinding ActualWidth}" BorderThickness="0" BorderBrush="White"/>
                                <ScrollViewer Grid.ColumnSpan="2" ScrollViewer.CanContentScroll="False" Grid.Row="1" SnapsToDevicePixels="True">
                                    <StackPanel IsItemsHost="True" Background="{StaticResource _comboboxPopupBackground}" >
                                    </StackPanel>
                                </ScrollViewer>
                            </Grid>
                        </Popup>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsFocused" Value="False">
                            <Setter Property="IsDropDownOpen" Value="False"/>
                        </Trigger>

                        <DataTrigger Binding="{Binding ElementName=PART_EditableTextBox, Path=IsFocused}" Value="false">
                            <Setter Property="IsDropDownOpen" Value="False"/>
                        </DataTrigger>

                        <DataTrigger Binding="{Binding ElementName=ToggleButton, Path=IsChecked}" Value="True">
                            <Setter Property="FocusManager.FocusedElement" TargetName="PART_EditableTextBox" Value="{Binding ElementName=PART_EditableTextBox}"/>
                        </DataTrigger>

                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="ToggleButton" Property="Background" Value="{StaticResource _comboboxHover}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
</Style>

[Dilyan Traykov]

Hi,

Thank you for the provided code snippet.

By default, a Popup's StaysOpen property is True which is why it is not closed in this case. You can explicitly set the property to False to have it closed when it loses focus.

<Popup Name="Popup" StaysOpen="False" ...

Alternatively, you can change back the Name of the popup to PART_Popup to keep the additional functionality which is achieved in code behind through the GetTemplateChild method.

<Popup Name="PART_Popup" ...

Please note that this is why we do not recommend removing or renaming any of the elements in the control templates which contain the "PART_" prefix. This has been documented here: Editing Control Templates.

I do hope any of these approaches works for you.

Regards,
Dilyan Traykov
Progress Telerik

[mh]

Hi

thank you for providing a great answer.

Note that if you choosed first way you need to also add

focusable="false"

for "dropdown" grid.

I could n't access the default template using VS and could not find it in files. I like to recommend that telerik provides default template in web, if possible.

thanks and wish you the bests

[Dilyan Traykov]

Hi,

I'm glad to hear that you found my answer helpful.

As for providing the default templates online, this will not be feasible as the templates differ from theme to theme. We do provide a separate archive in the Downloads section of your Telerik account, namely - Telerik_UI_for_WPF_{version}_Themes.zip - which provides all of these styles and templates.