This is a migrated thread and some comments may be shown as answers.

DropDownButton that stays open

5 Answers 866 Views

Buttons

This is a migrated thread and some comments may be shown as answers.

5 Answers, 1 is accepted

Accepted

answered on 06 Jul 2011, 02:24 PM

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

Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

answered on 04 Apr 2012, 10:32 AM

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

answered on 06 Apr 2012, 01:29 PM

TestWPF.zip

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>

<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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>