
Inger Marie
Top achievements
Rank 1
Inger Marie
asked on 01 Jul 2011, 08:06 AM
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!
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!
5 Answers, 1 is accepted
0
Accepted
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
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!
0

Hubert
Top achievements
Rank 1
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.
The second example is verbose and works with an ItemContainerStyle.
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.
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
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
0
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:
Code behind:
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
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
>
private
void
Grid_MouseLeftButtonDown(
object
sender, MouseButtonEventArgs e)
{
e.Handled =
true
;
}
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 >>
0

Hubert
Top achievements
Rank 1
answered on 11 Apr 2012, 11:26 AM
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
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
0

Simon
Top achievements
Rank 1
answered on 21 Jan 2013, 01:14 AM
If you use an ItemsControl instead of a listbox you will not get any selection highlighting