Hello,
I have in ribbon a RadRibbonDropDownButton which contains a usercontrol with tabcontrol and RadColorSelector. (to program predefined and personnalized color control).
Some where else i use a RadDropdownButton which contains the same color control.
I see some difference between the both :
- in RadRibbonDropDownButton, when i choose a color on the colorselector, it close the dropdowncontent, not for RadDropdownButton.
- in RadRibbonDropDownButton, when i click on tabitem, it will close the dropdowncontent until i add this code . For RadDropdownButton, even with the same code it always close the dropdowncontent.
the function "test" is called elsewhere i click on the control (if i click on a color in ColorSelector also ?!?)
Well, could you explain me
Thanks
Aurore
I use 2011.1.419.35 dll
I have in ribbon a RadRibbonDropDownButton which contains a usercontrol with tabcontrol and RadColorSelector. (to program predefined and personnalized color control).
Some where else i use a RadDropdownButton which contains the same color control.
I see some difference between the both :
- in RadRibbonDropDownButton, when i choose a color on the colorselector, it close the dropdowncontent, not for RadDropdownButton.
- in RadRibbonDropDownButton, when i click on tabitem, it will close the dropdowncontent until i add this code . For RadDropdownButton, even with the same code it always close the dropdowncontent.
<
TabControl
x:Name
=
"tabcontrol"
MouseDown
=
"MousedownHandled"
SelectionChanged
=
"test"
>
private
void
MousedownHandled(
object
sender, System.Windows.Input.MouseButtonEventArgs e)
{
if
(tabcontrol.SelectedIndex == 1) e.Handled =
true
;
}
private
void
test(
object
sender, SelectionChangedEventArgs e)
{
if
(e.OriginalSource == tabcontrol) e.Handled =
true
;
}
the function "test" is called elsewhere i click on the control (if i click on a color in ColorSelector also ?!?)
Well, could you explain me
- the difference of the both components
- and also when should close the dropdowncontent, and how prevent from closing ?
Thanks
Aurore
I use 2011.1.419.35 dll
4 Answers, 1 is accepted
0
Hi Aurore,
By design the RadRibbonDropDownButton hides its DropDownContent when an element (usually Button or a MenuElement) is clicked in this content. You can examine the behavior of the DropDownButtons in Word, Excell, etc. I managed to reproduce the scenario with the TabControl inside the RibbonDropDownButton. The good news is that when using the Telerik`s RadTabControl, the RibbonDrownContent is not closed when a RadTabItem`s Header is clicked.
On the other hand, our standard DropDown doen't close even when using the MS`s TabControl.
So could you please examine my test project and modify it if needed? I guess preventing the closing of the DropDownContent could be achieved by using the PreviewMouseLeftButtonDown event. Please let us know if you need further assistance on this.
Best wishes,
Petar Mladenov
the Telerik team
By design the RadRibbonDropDownButton hides its DropDownContent when an element (usually Button or a MenuElement) is clicked in this content. You can examine the behavior of the DropDownButtons in Word, Excell, etc. I managed to reproduce the scenario with the TabControl inside the RibbonDropDownButton. The good news is that when using the Telerik`s RadTabControl, the RibbonDrownContent is not closed when a RadTabItem`s Header is clicked.
<
telerik:RadRibbonDropDownButton
Content
=
"RibbonDropDown"
>
<
telerik:RadRibbonDropDownButton.DropDownContent
>
<
telerik:RadTabControl
>
<
telerik:RadTabItem
Header
=
"Item A"
>
<
Rectangle
Fill
=
"DeepSkyBlue"
Width
=
"200"
Height
=
"50"
/>
</
telerik:RadTabItem
>
<
telerik:RadTabItem
Header
=
"Item B"
/>
<
telerik:RadTabItem
Header
=
"Item C"
/>
</
telerik:RadTabControl
>
</
telerik:RadRibbonDropDownButton.DropDownContent
>
</
telerik:RadRibbonDropDownButton
>
<
telerik:RadDropDownButton
Content
=
"DropDown"
>
<
telerik:RadDropDownButton.DropDownContent
>
<
TabControl
>
<
TabItem
Header
=
"Item A"
>
<
Rectangle
Fill
=
"DeepSkyBlue"
Width
=
"200"
Height
=
"50"
/>
</
TabItem
>
<
TabItem
Header
=
"Item B"
/>
<
TabItem
Header
=
"Item C"
/>
</
TabControl
>
</
telerik:RadDropDownButton.DropDownContent
>
</
telerik:RadDropDownButton
>
Best wishes,
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

Aurore
Top achievements
Rank 1
answered on 05 Jul 2011, 02:36 PM
Hello,
Thanks for your reply,
I integrate my control code in your sample here's my problems :
- in radribbonbutton : click on apply don't close the dropdown content
- in radbutton : click on apply don't close the dropdown content AND click on color selector don't close the dropdowncontent
My aim is, for radribbonbutton and radbutton :
- click on colorselector, close dropdowncontent
- click on tabitem : don't close dropdowncontent
- use sliders : don't close dropdowncontent
- click on apply : close dropdowncontent
here's the control code :
And the modifications made in your page
Thanks for your help.
Aurore
Thanks for your reply,
I integrate my control code in your sample here's my problems :
- in radribbonbutton : click on apply don't close the dropdown content
- in radbutton : click on apply don't close the dropdown content AND click on color selector don't close the dropdowncontent
My aim is, for radribbonbutton and radbutton :
- click on colorselector, close dropdowncontent
- click on tabitem : don't close dropdowncontent
- use sliders : don't close dropdowncontent
- click on apply : close dropdowncontent
here's the control code :
<
UserControl
x:Class
=
"RibbonTest.ColorSelector"
mc:Ignorable
=
"d"
MinHeight
=
"220"
MinWidth
=
"200"
d:DesignHeight
=
"300"
d:DesignWidth
=
"300"
>
<
UserControl.Resources
>
<
LinearGradientBrush
x:Key
=
"DarkBrush"
StartPoint
=
"0,0"
EndPoint
=
"0,1"
po:Freeze
=
"True"
>
<
GradientBrush.GradientStops
>
<
GradientStopCollection
>
<
GradientStop
Color
=
"#FFF"
Offset
=
"0.0"
/>
<
GradientStop
Color
=
"#AAA"
Offset
=
"1.0"
/>
</
GradientStopCollection
>
</
GradientBrush.GradientStops
>
</
LinearGradientBrush
>
<
LinearGradientBrush
x:Key
=
"PressedBrush"
StartPoint
=
"0,0"
EndPoint
=
"0,1"
po:Freeze
=
"True"
>
<
GradientBrush.GradientStops
>
<
GradientStopCollection
>
<
GradientStop
Color
=
"#BBB"
Offset
=
"0.0"
/>
<
GradientStop
Color
=
"#EEE"
Offset
=
"0.1"
/>
<
GradientStop
Color
=
"#EEE"
Offset
=
"0.9"
/>
<
GradientStop
Color
=
"#FFF"
Offset
=
"1.0"
/>
</
GradientStopCollection
>
</
GradientBrush.GradientStops
>
</
LinearGradientBrush
>
<
LinearGradientBrush
x:Key
=
"NormalBrush"
StartPoint
=
"0,0"
EndPoint
=
"0,1"
po:Freeze
=
"True"
>
<
GradientBrush.GradientStops
>
<
GradientStopCollection
>
<
GradientStop
Color
=
"#FFF"
Offset
=
"0.0"
/>
<
GradientStop
Color
=
"#CCC"
Offset
=
"1.0"
/>
</
GradientStopCollection
>
</
GradientBrush.GradientStops
>
</
LinearGradientBrush
>
</
UserControl.Resources
>
<
Grid
Background
=
"WhiteSmoke"
>
<
Grid.RowDefinitions
>
<
RowDefinition
Height
=
"*"
/>
</
Grid.RowDefinitions
>
<
TabControl
x:Name
=
"tabcontrol"
Background
=
"Transparent"
Grid.Row
=
"1"
MouseDown
=
"MousedownHandled"
SelectionChanged
=
"test"
>
<
TabItem
Header
=
"predefined"
IsSelected
=
"True"
>
<
ContentControl
>
<
tlk:RadColorSelector
Grid.Row
=
"1"
SelectedColor="{Binding
Path
=
SelectedColor
,
RelativeSource={RelativeSource
Mode
=
FindAncestor
, AncestorType={x:Type UserControl}},
Mode
=
TwoWay
}"
NoColorVisibility
=
"Collapsed"
/>
</
ContentControl
>
</
TabItem
>
<
TabItem
Header
=
"perso"
MouseDown
=
"MousedownHandled"
>
<
Grid
>
<
Grid.RowDefinitions
>
<
RowDefinition
Height
=
"*"
/>
<
RowDefinition
Height
=
"*"
/>
<
RowDefinition
Height
=
"*"
/>
<
RowDefinition
Height
=
"*"
/>
</
Grid.RowDefinitions
>
<
Grid.ColumnDefinitions
>
<
ColumnDefinition
Width
=
"Auto"
/>
<
ColumnDefinition
Width
=
"*"
/>
<
ColumnDefinition
Width
=
"Auto"
/>
</
Grid.ColumnDefinitions
>
<!-- ==== R === -->
<
TextBlock
Grid.Column
=
"0"
Grid.Row
=
"1"
Text
=
"R"
Padding
=
"5,2"
VerticalAlignment
=
"Center"
/>
<
Slider
Name
=
"sliderRed"
Minimum
=
"0"
Maximum
=
"255"
Grid.Column
=
"1"
Grid.Row
=
"1"
VerticalAlignment
=
"Center"
Value
=
"{Binding Path=Red, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}}"
>
<
Slider.Background
>
<
LinearGradientBrush
>
<
LinearGradientBrush.GradientStops
>
<
GradientStop
Color
=
"Transparent"
Offset
=
"0"
/>
<
GradientStop
Color
=
"Red"
Offset
=
"0.8"
/>
</
LinearGradientBrush.GradientStops
>
</
LinearGradientBrush
>
</
Slider.Background
>
</
Slider
>
<
tlk:RadNumericUpDown
Minimum
=
"0"
Maximum
=
"255"
Value
=
"{Binding Path=Red, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}}"
IsInteger
=
"True"
Grid.Column
=
"2"
Grid.Row
=
"1"
Width
=
"50"
VerticalAlignment
=
"Center"
/>
<!-- ==== G === -->
<
TextBlock
Grid.Column
=
"0"
Grid.Row
=
"2"
Text
=
"G"
Padding
=
"5,2"
VerticalAlignment
=
"Center"
/>
<
Slider
Name
=
"sliderGreen"
Minimum
=
"0"
Maximum
=
"255"
Grid.Column
=
"1"
Grid.Row
=
"2"
VerticalAlignment
=
"Center"
Value
=
"{Binding Path=Green, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}}"
>
<
Slider.Background
>
<
LinearGradientBrush
>
<
LinearGradientBrush.GradientStops
>
<
GradientStop
Color
=
"Transparent"
Offset
=
"0"
/>
<
GradientStop
Color
=
"Green"
Offset
=
"0.8"
/>
</
LinearGradientBrush.GradientStops
>
</
LinearGradientBrush
>
</
Slider.Background
>
</
Slider
>
<
tlk:RadNumericUpDown
Minimum
=
"0"
Maximum
=
"255"
Value
=
"{Binding Path=Green, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}}"
IsInteger
=
"True"
Grid.Column
=
"2"
Grid.Row
=
"2"
Width
=
"50"
VerticalAlignment
=
"Center"
/>
<!-- ==== B === -->
<
TextBlock
Grid.Column
=
"0"
Grid.Row
=
"3"
Text
=
"B"
Padding
=
"5,2"
VerticalAlignment
=
"Center"
/>
<
Slider
Name
=
"sliderBlue"
Minimum
=
"0"
Maximum
=
"255"
Grid.Column
=
"1"
Grid.Row
=
"3"
VerticalAlignment
=
"Center"
Value
=
"{Binding Path=Blue, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}}"
>
<
Slider.Background
>
<
LinearGradientBrush
>
<
LinearGradientBrush.GradientStops
>
<
GradientStop
Color
=
"Transparent"
Offset
=
"0"
/>
<
GradientStop
Color
=
"Blue"
Offset
=
"0.8"
/>
</
LinearGradientBrush.GradientStops
>
</
LinearGradientBrush
>
</
Slider.Background
>
</
Slider
>
<
tlk:RadNumericUpDown
Minimum
=
"0"
Maximum
=
"255"
Value
=
"{Binding Path=Blue, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}}"
IsInteger
=
"True"
Grid.Column
=
"2"
Grid.Row
=
"3"
Width
=
"50"
VerticalAlignment
=
"Center"
/>
<!-- ==== 1ere ligne === -->
<
StackPanel
Grid.Column
=
"0"
Grid.Row
=
"0"
Grid.ColumnSpan
=
"2"
Orientation
=
"Horizontal"
>
<
Rectangle
Width
=
"50"
Height
=
"30"
Stroke
=
"Black"
StrokeThickness
=
"1"
VerticalAlignment
=
"Center"
Margin
=
"0,0,5,0"
>
<
Rectangle.Fill
>
<
SolidColorBrush
Color="{Binding
Path
=
RGBSelectedColor
,
RelativeSource={RelativeSource
Mode
=
FindAncestor
, AncestorType={x:Type UserControl}}}"/>
</
Rectangle.Fill
>
</
Rectangle
>
<
TextBox
Width
=
"70"
Text="{Binding
Path
=
RGBSelectedColor
,
RelativeSource={RelativeSource
Mode
=
FindAncestor
, AncestorType={x:Type UserControl}}}"
VerticalAlignment
=
"Center"
/>
</
StackPanel
>
<
Button
Grid.Column
=
"3"
Grid.Row
=
"0"
Content
=
"Appliquer"
Click
=
"Apply_Click"
VerticalAlignment
=
"Center"
/>
</
Grid
>
</
TabItem
>
</
TabControl
>
</
Grid
>
</
UserControl
>
using
System.Windows;
using
System.Windows.Controls;
using
System.Windows.Controls.Primitives;
using
System.Windows.Media;
using
System;
namespace
RibbonTest
{
/// <summary>
/// Logique d'interaction pour Ctrl_ColorSelector.xaml
/// </summary>
public
partial
class
ColorSelector : UserControl
{
#region events
public
static
readonly
RoutedEvent ColorChangedEvent;
#endregion
public
ColorSelector()
{
InitializeComponent();
}
static
ColorSelector()
{
//===== Dependency properties
SelectedColorProperty = DependencyProperty.Register(
"SelectedColor"
,
typeof
(Color),
typeof
(ColorSelector),
new
FrameworkPropertyMetadata(Colors.Transparent,
new
PropertyChangedCallback(SelectedColorChanged)));
RedProperty = DependencyProperty.Register(
"Red"
,
typeof
(
byte
),
typeof
(ColorSelector),
new
FrameworkPropertyMetadata(
new
PropertyChangedCallback(OnColorRGBChanged)));
GreenProperty = DependencyProperty.Register(
"Green"
,
typeof
(
byte
),
typeof
(ColorSelector),
new
FrameworkPropertyMetadata(
new
PropertyChangedCallback(OnColorRGBChanged)));
BlueProperty = DependencyProperty.Register(
"Blue"
,
typeof
(
byte
),
typeof
(ColorSelector),
new
FrameworkPropertyMetadata(
new
PropertyChangedCallback(OnColorRGBChanged)));
RGBSelectedColorProperty = DependencyProperty.Register(
"RGBSelectedColor"
,
typeof
(Color),
typeof
(ColorSelector));
//===== events
ColorChangedEvent = EventManager.RegisterRoutedEvent(
"ColorChanged"
, RoutingStrategy.Bubble,
typeof
(RoutedPropertyChangedEventHandler<Color>),
typeof
(ColorSelector));
}
#region events
public
event
RoutedPropertyChangedEventHandler<Color> ColorChanged
{
add { AddHandler(ColorChangedEvent, value); }
remove { RemoveHandler(ColorChangedEvent, value); }
}
private
void
OnColorChanged(Color oldValue, Color newValue)
{
RoutedPropertyChangedEventArgs<Color> args =
new
RoutedPropertyChangedEventArgs<Color>(oldValue, newValue);
args.RoutedEvent = ColorSelector.ColorChangedEvent;
RaiseEvent(args);
}
#endregion
#region SelectedColor
public
Color SelectedColor
{
get
{
return
(Color)GetValue(SelectedColorProperty); }
set
{ SetValue(SelectedColorProperty, value); }
}
private
static
void
SelectedColorChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
ColorSelector ob = d
as
ColorSelector;
Color value = (Color)e.NewValue;
Color oldColor = (Color)e.OldValue;
if
(ob !=
null
)
{
ob.OnColorChanged(oldColor, value);
ob.Red = value.R;
ob.Green = value.G;
ob.Blue = value.B;
ob.RGBSelectedColor = value;
//try
//{
// object oParent = ob.Parent;
// // Tentative de récupération d'un Popup parent du Ctrl_ColorSelector
// while (oParent != null && !(oParent is Popup) && oParent is FrameworkElement)
// oParent = ((FrameworkElement)oParent).Parent;
// if (oParent != null && oParent is Popup)
// // Fermeture du Popup parent du Ctrl_ColorSelector
// ((Popup)oParent).IsOpen = false;
//}
//catch { }
}
}
#endregion
#region RGB Colors
public
Color RGBSelectedColor
{
get
{
return
(Color)GetValue(RGBSelectedColorProperty); }
set
{ SetValue(RGBSelectedColorProperty, value); }
}
public
byte
Red
{
get
{
return
(
byte
)GetValue(RedProperty); }
set
{ SetValue(RedProperty, value); }
}
public
byte
Green
{
get
{
return
(
byte
)GetValue(GreenProperty); }
set
{ SetValue(GreenProperty, value); }
}
public
byte
Blue
{
get
{
return
(
byte
)GetValue(BlueProperty); }
set
{ SetValue(BlueProperty, value); }
}
private
static
void
OnColorRGBChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
{
ColorSelector ob = sender
as
ColorSelector;
Color color = ob.RGBSelectedColor;
if
(color.A == 0) color.A = Convert.ToByte(
"FF"
, 16);
if
(e.Property == RedProperty) color.R = (
byte
)e.NewValue;
else
if
(e.Property == GreenProperty) color.G = (
byte
)e.NewValue;
else
if
(e.Property == BlueProperty) color.B = (
byte
)e.NewValue;
ob.RGBSelectedColor = color;
}
//private bool _bApplyclicked;
private
void
Apply_Click(
object
sender, RoutedEventArgs e)
{
this
.SelectedColor =
this
.RGBSelectedColor;
//int timestamp = new System.TimeSpan(System.DateTime.Now.Ticks).Milliseconds;
//System.Windows.Input.MouseButton mouseButton = System.Windows.Input.MouseButton.Left;
//System.Windows.Input.MouseButtonEventArgs ClickEvent = new System.Windows.Input.MouseButtonEventArgs(System.Windows.Input.Mouse.PrimaryDevice, timestamp, mouseButton);
//ClickEvent.RoutedEvent = Control.MouseDownEvent;
//ClickEvent.Source = tabcontrol;
//_bApplyclicked = true;
//tabcontrol.RaiseEvent(ClickEvent);
//timestamp = new System.TimeSpan(System.DateTime.Now.Ticks).Milliseconds;
//ClickEvent = new System.Windows.Input.MouseButtonEventArgs(System.Windows.Input.Mouse.PrimaryDevice, timestamp, mouseButton);
//ClickEvent.RoutedEvent = Control.MouseUpEvent;
//ClickEvent.Source = tabcontrol;
//tabcontrol.RaiseEvent(ClickEvent);
}
private
void
MousedownHandled(
object
sender, System.Windows.Input.MouseButtonEventArgs e)
{
if
(tabcontrol.SelectedIndex == 1) e.Handled =
true
;
//_bApplyclicked = false;
}
private
void
test(
object
sender, SelectionChangedEventArgs e)
{
if
(e.OriginalSource == tabcontrol)
e.Handled =
true
;
}
#endregion
#region StaticFields
public
static
readonly
DependencyProperty SelectedColorProperty;
public
static
readonly
DependencyProperty RedProperty;
public
static
readonly
DependencyProperty GreenProperty;
public
static
readonly
DependencyProperty BlueProperty;
public
static
readonly
DependencyProperty RGBSelectedColorProperty;
#endregion
}
}
And the modifications made in your page
<
telerik:RadRibbonDropDownButton
Content
=
"RibbonDropDown"
>
<
telerik:RadRibbonDropDownButton.DropDownContent
>
<!--<
telerik:RadTabControl
>
<
telerik:RadTabItem
Header
=
"Item A"
>
<
Rectangle
Fill
=
"DeepSkyBlue"
Width
=
"200"
Height
=
"50"
/>
</
telerik:RadTabItem
>
<
telerik:RadTabItem
Header
=
"Item B"
/>
<
telerik:RadTabItem
Header
=
"Item C"
/>
</
telerik:RadTabControl
>-->
<
local:ColorSelector
/>
</
telerik:RadRibbonDropDownButton.DropDownContent
>
</
telerik:RadRibbonDropDownButton
>
<
telerik:RadDropDownButton
Content
=
"DropDown"
>
<
telerik:RadDropDownButton.DropDownContent
>
<
local:ColorSelector
/>
</
telerik:RadDropDownButton.DropDownContent
>
</
telerik:RadDropDownButton
>
Thanks for your help.
Aurore
0

Aurore
Top achievements
Rank 1
answered on 07 Jul 2011, 03:23 PM
Hi,
Did you have time to see the problem ?
thanks
Aurore
Did you have time to see the problem ?
thanks
Aurore
0
Hello Aurore,
I modified the project with your updates and with my customizations so that it meets your requirements for the RadDropDownButton`s behavior. You should easily finish it for the RibbonDropDownButton. The real problem is that the DropDownButtonContent is Popup and it is located in different visual tree from the DropDownButton`s one. So you cannot access the DropDownButton if you use Mouse or Click events defined int he ColorSelector.cs's code. You have to use this events in the MainPage`s code behind (MainPage.cs). The described approach is realized in the attached solution. Please let us know if it satisfies you or not.
Kind regards,
Petar Mladenov
the Telerik team
I modified the project with your updates and with my customizations so that it meets your requirements for the RadDropDownButton`s behavior. You should easily finish it for the RibbonDropDownButton. The real problem is that the DropDownButtonContent is Popup and it is located in different visual tree from the DropDownButton`s one. So you cannot access the DropDownButton if you use Mouse or Click events defined int he ColorSelector.cs's code. You have to use this events in the MainPage`s code behind (MainPage.cs). The described approach is realized in the attached solution. Please let us know if it satisfies 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!