DropDownButton that stays open

[Inger Marie]

I've created a DropDownButton which has a sequence of checkboxes and a ok/cancel button pair in the dropdowncontent. The dropdowncontent is not supposed to close unless I click one of the buttons, hit escape, return or click outside the dropdowncontent.

However, the dropdowncontent closes whenever I click the background on the dropdowncontent - which I do occationally because checkboxes are small and hard to hit when in a hurry.

How do I prevent the DropDownContent from disappearing when I click it's background (that is, the grid which holds the entire thing)?

Thanks!

[Petar Mladenov]

Hello Inger Marie,

This cannot be achieved out of the box by setting only the KeepOpen property set to true - this way the DropDownContent will stay opened when you click outside it (clicking inside it will close the content in many scenarios). So I suggest you to  use the PreviewMouseLeftButtonDown event of the RadDropDownButton and check the OriginalSource. You have to se e.handled = true in the cases when you don't want to close the DropDownContent.
Please let us know if this helped you or not.

Kind regards,
Petar Mladenov
the Telerik team

[Hubert]

Hi,

this post is a couples of months old, but i hit the same problem.

As mentioned KeepOpen will not solve the problem, but if you look carefully at the
WPF Controls Example, in my case it's WPF Q3 2011 SP1, for the DropDown Button,
you can see that the first DropDown Button 'XAML Content' does not close if you hit
empy space, because in the background is a ListBox.

I figured three examples out to circumvent the problem. There's only one problem.
How do you supress that the ListBoxItem is highlighted while selected?

I think the first example is very easy and a good choice.

<telerik:RadDropDownButton>
     <telerik:RadDropDownButton.DropDownContent>
          <ListBox>
       <ListBoxItem>
        <ListBoxItem.Style>
           <Style TargetType="ListBoxItem">
              <Setter Property="IsTabStop"
                   Value="False" />
              <Setter Property="Focusable"
                         Value="False" />
            </Style>
         </ListBoxItem.Style>
        <my component as ListBoxItem />
          </ListBoxItem>
         </ListBox>
     </telerik:RadDropDownButton.DropDownContent>
</telerik:RadDropDownButton>

The second example is verbose and works with an ItemContainerStyle.

<Style x:Key="ListBoxtemStyleNoHighlighting"
               TargetType="ListBoxItem">
            <Setter Property="Padding"
                    Value="3" />
            <Setter Property="HorizontalContentAlignment"
                    Value="Left" />
            <Setter Property="VerticalContentAlignment"
                    Value="Top" />
            <Setter Property="Background"
                    Value="Transparent" />
            <Setter Property="BorderThickness"
                    Value="1" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Grid Background="{TemplateBinding Background}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="MouseOver" />
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Unselected" />
                                    <VisualState x:Name="Selected" />
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused" />
                                    <VisualState x:Name="Unfocused" />
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Rectangle x:Name="fillColor"
                                       Fill="#FFBADDE9"
                                       IsHitTestVisible="False"
                                       Opacity="0"
                                       RadiusY="1"
                                       RadiusX="1" />
                            <Rectangle x:Name="fillColor2"
                                       Fill="#FFBADDE9"
                                       IsHitTestVisible="False"
                                       Opacity="0"
                                       RadiusY="1"
                                       RadiusX="1" />
                            <ContentPresenter x:Name="contentPresenter"
                                              ContentTemplate="{TemplateBinding ContentTemplate}"
                                              Content="{TemplateBinding Content}"
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              Margin="{TemplateBinding Padding}" />
                            <Rectangle x:Name="FocusVisualElement"
                                       RadiusY="1"
                                       RadiusX="1"
                                       Stroke="#FF6DBDD1"
                                       StrokeThickness="1"
                                       Visibility="Collapsed" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

<ListBox ItemContainerStyle="{StaticResource ListBoxtemStyleNoHighlighting}">
                        <ListBoxItem>
                            <my component as ListBoxItem />
                        </ListBoxItem>
                    </ListBox>

The third example overrides brushes, but if you have a ListBox in the ListBoxItem you have to
declare new colors for the overriden ones. I don't like to override SystemColors.

<ListBox>
     <ListBox.Resources>
                 <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
                                   Color="Transparent" />
                 <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}"
                                   Color="Black" />
                 <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}"
                                   Color="Transparent" />
     </ListBox.Resources>
                        <ListBoxItem>
                            <my component as ListBoxItem />
                        </ListBoxItem>
 </ListBox>

Maybe telerik introduces a new Property that will make this much easier. :-)
If you have a less verbose solution do not hesitate to answer.

regards,
Hubert

[Zarko]

Hi,
Thank you for the provided workarounds and code snippets I hope they will help other customers.
As for another solution - I played around a little bit and found this:

<telerik:RadDropDownButton Width="180"
                                 Height="30"
                                 Content="Text button">
    <telerik:RadDropDownButton.DropDownContent>
        <!--  The Background should not be {x:Null}  -->
        <Grid Width="200"
                    Background="Transparent"
                    MouseLeftButtonDown="Grid_MouseLeftButtonDown">
            <StackPanel>
                <CheckBox Width="20"
                                Height="20"
                                HorizontalAlignment="Center" />
                <CheckBox Width="20"
                                Height="20"
                                HorizontalAlignment="Center" />
                <CheckBox Width="20"
                                Height="20"
                                HorizontalAlignment="Center" />
                <CheckBox Width="20"
                                Height="20"
                                HorizontalAlignment="Center" />
            </StackPanel>
        </Grid>
    </telerik:RadDropDownButton.DropDownContent>
</telerik:RadDropDownButton>

Code behind:

private void Grid_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    e.Handled = true;
}

Basically you just handle the MouseLeftButtonDown event of the main panel in the DropDownContent and the it won't close anymore.
I've attached a sample project with this code so that anyone interested could test it. 

Kind regards,
Zarko
the Telerik team

[Hubert]

Hi,
Thank you for another solution.
I try to keep code behind to a minimum, but a few lines are better than tons of XAML or ViewModel code, just
to circumvent a tiny problem.

Kind regards,
Hubert

[Simon]

If you use an ItemsControl instead of a listbox you will not get any selection highlighting