RadRibbonDropDownButton vs RadDropDownButton dropdowncontent

[Aurore]

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

[Petar Mladenov]

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

[Aurore]

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

[Aurore]

Hi,

Did you have time to see the problem ?

thanks
Aurore

[Petar Mladenov]

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