RadRibbonDropDownButton vs RadDropDownButton dropdowncontent

5 posts, 0 answers
  1. Aurore
    Aurore avatar
    58 posts
    Member since:
    Nov 2007

    Posted 30 Jun 2011 Link to this post

    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
  2. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 05 Jul 2011 Link to this post

    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!
  3. UI for WPF is Visual Studio 2017 Ready
  4. Aurore
    Aurore avatar
    58 posts
    Member since:
    Nov 2007

    Posted 05 Jul 2011 Link to this post

    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:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"             
                 xmlns:tlk="http://schemas.telerik.com/2008/xaml/presentation"
                 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
  5. Aurore
    Aurore avatar
    58 posts
    Member since:
    Nov 2007

    Posted 07 Jul 2011 Link to this post

    Hi,

    Did you have time to see the problem ?

    thanks
    Aurore
  6. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 08 Jul 2011 Link to this post

    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!

Back to Top
UI for WPF is Visual Studio 2017 Ready