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

RadRibbonDropDownButton vs RadDropDownButton dropdowncontent

4 Answers 352 Views

Buttons

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

Aurore asked on 30 Jun 2011, 09:57 AM

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.

<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

answered on 05 Jul 2011, 01:39 PM

RibbonTest.zip

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.

<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>

On the other hand, our standard DropDown doen't close even when using the MS`s TabControl.

<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>

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

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 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 :

<UserControl x:Class="RibbonTest.ColorSelector"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:tlk="http://schemas.telerik.com/2008/xaml/presentation"

xmlns:po="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"

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="*"/>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="*"/>

<ColumnDefinition Width="Auto"/>

</Grid.ColumnDefinitions>

<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" />

<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" />

<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" />

<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

answered on 08 Jul 2011, 11:34 AM

RibbonTest.zip

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

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!