How to Change DropDownList colors and style

13 posts, 0 answers
  1. miki
    miki avatar
    37 posts
    Member since:
    Dec 2014

    Posted 01 Jan 2015 Link to this post

    Hi,

    please take a look at the attach file, how can i achieve the same color and style ?
  2.
  3. Stefan
    Admin
    Stefan avatar
    2911 posts

    Posted 02 Jan 2015 Link to this post

    Hello Miki,

    Mouse move messages are not accurate enough, they don't guarantee that every traversed pixel is reported. When you have a child close to the edge of its parent (as in the case with RadDropDownList, which internally hosts TextBox control), it is quite easy to not get the MouseLeave for the parent when you move the mouse fast enough. 

    The only decent approach I can recommend for this particular problem is to use a Timer. 200 msec is usually good enough, start it when the mouse enters. In the Tick event handler, use Mouse.Position and Control.PointToClient to check if the mouse is still located inside the control rectangle:
    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);
     
        InitializeComponent();
     
        AddDropDownList();
     
        radDropDownList1.MouseEnter += radDropDownList1_MouseEnter;
         
        timer1 = new System.Windows.Forms.Timer();
        timer1.Interval = 200;
        timer1.Tick += new EventHandler(timer1_Tick);
        timer1.Enabled = true;
    }
     
    System.Windows.Forms.Timer timer1;
     
    void radDropDownList1_MouseEnter(object sender, EventArgs e)
    {
        ((FillPrimitive)radDropDownList1.DropDownListElement.Children[1]).BackColor = Color.FromArgb(27, 161, 226);
    }
     
    void timer1_Tick(object sender, EventArgs e)
    {
        Point pos = radDropDownList1.PointToClient(Cursor.Position);
        if (!radDropDownList1.ClientRectangle.Contains(pos) && !radDropDownList1.DropDownListElement.TextBox.TextBoxItem.HostedControl.ClientRectangle.Contains(pos))
        {
            ((FillPrimitive)radDropDownList1.DropDownListElement.Children[1]).ResetValue(FillPrimitive.BackColorProperty, ValueResetFlags.Local);
        }
    }

    I hope that you find this information useful. Should you have any other questions, do not hesitate to contact us.

    Regards,
    Stefan
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. miki
    miki avatar
    37 posts
    Member since:
    Dec 2014

    Posted 02 Jan 2015 in reply to Stefan Link to this post

    Cursor.Position not exist: Member 'System.Windows.Forms.Cursor.Position.get' cannot be accessed with an instance reference; qualify it with a type name instead


  7. Stefan
    Admin
    Stefan avatar
    2911 posts

    Posted 05 Jan 2015 Link to this post

    Hi Miki,

    Such error did not appear on my end during my tests, however, a quick search returned this thread, which suggests to replace Cursor.Position to MousePosition.

    I hope this helps.

    Regards,
    Stefan
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8.
  9. miki
    miki avatar
    37 posts
    Member since:
    Dec 2014

    Posted 05 Jan 2015 in reply to Stefan Link to this post

    Please see my attach file, currently this is my regular state, how can i remove this rectangle in the right side of the controller (the button) in order to get something similar to my first attach in this thread ?
  11. Stefan
    Admin
    Stefan avatar
    2911 posts

    Posted 05 Jan 2015 Link to this post

    Hello Miki,

    Can you please clarify which is the theme that you use and what is the DropDownStyle set for your RadDropDownList control?

    I am looking forward to your reply.

    Regards,
    Stefan
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  13. miki
    miki avatar
    37 posts
    Member since:
    Dec 2014

    Posted 05 Jan 2015 in reply to Stefan Link to this post

    Hi Stefan and thank ou for your help,

    I am using VisualStudio2012Light and TelerikMetroBlue, DropDownStyle is the default one (i didn't change it)

    Thanks

  14.
  15. miki
    miki avatar
    37 posts
    Member since:
    Dec 2014

    Posted 05 Jan 2015 Link to this post

    Let me explain again and show you what i have at this moment.
    Please see my attach file.
    You all see 3 state:

    1. Regular state
    2. mouse enter: when i have the cursor above the DropDownList
    3. Mouse click: when the user click on the DropDownList or on the button at the right side of the controller.
    this is with TelerikMetroBlue theme.

    What i want is:

    1. the regular state with border in Blue color, include the button at the right side of the controller B u t without the left side of this button, i only want to see rectangle border (exactly like in my first screenshot here)

    2. The mouse button state i want to change all the controller (with the right side of the controller) in Blue color (all the rectangle)
    3. Mouse click - same as 2






  17. Stefan
    Admin
    Stefan avatar
    2911 posts

    Posted 05 Jan 2015 Link to this post

    Hi Miki,

    Here is how to achieve this in code:
    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);
     
        InitializeComponent();
     
        AddDropDownList();
        new TelerikMetroBlueTheme();
        radDropDownList1.ThemeName = "TelerikMetroBlue";
     
         new VisualStudio2012LightTheme();
       // radDropDownList1.ThemeName = "VisualStudio2012Light";
     
        BorderPrimitive ddlBorder = (BorderPrimitive)radDropDownList1.DropDownListElement.Children[0];
        ddlBorder.ForeColor = Color.FromArgb(27, 161, 226);
        ddlBorder.BoxStyle = BorderBoxStyle.SingleBorder;
     
        radDropDownList1.DropDownListElement.ArrowButton.Border.Visibility = ElementVisibility.Collapsed;
        radDropDownList1.DropDownListElement.ArrowButton.Fill.Visibility = ElementVisibility.Collapsed;
         
        radDropDownList1.DropDownListElement.EditableElement.DrawBorder = false;
     
         
     
        radDropDownList1.MouseEnter += radDropDownList1_MouseEnter;
     
        timer1 = new System.Windows.Forms.Timer();
        timer1.Interval = 200;
        timer1.Tick += new EventHandler(timer1_Tick);
        timer1.Enabled = true;
    }
     
    System.Windows.Forms.Timer timer1;
     
    void radDropDownList1_MouseEnter(object sender, EventArgs e)
    {
        ((FillPrimitive)radDropDownList1.DropDownListElement.Children[1]).BackColor = Color.FromArgb(27, 161, 226);
        radDropDownList1.DropDownListElement.EditableElement.BackColor = Color.FromArgb(27, 161, 226);
        radDropDownList1.DropDownListElement.EditableElement.TextBox.BackColor = Color.FromArgb(27, 161, 226);
        radDropDownList1.DropDownListElement.EditableElement.TextBox.Fill.BackColor = Color.FromArgb(27, 161, 226);
    }
     
    void timer1_Tick(object sender, EventArgs e)
    {
        Point pos = radDropDownList1.PointToClient(Cursor.Position);
        if (!radDropDownList1.ClientRectangle.Contains(pos) && !radDropDownList1.DropDownListElement.TextBox.TextBoxItem.HostedControl.ClientRectangle.Contains(pos))
        {
            ((FillPrimitive)radDropDownList1.DropDownListElement.Children[1]).ResetValue(FillPrimitive.BackColorProperty, ValueResetFlags.Local);
            radDropDownList1.DropDownListElement.EditableElement.ResetValue(LightVisualElement.BackColorProperty, ValueResetFlags.Local);
            radDropDownList1.DropDownListElement.EditableElement.TextBox.ResetValue(RadDropDownTextBoxElement.BackColorProperty, ValueResetFlags.Local);
            radDropDownList1.DropDownListElement.EditableElement.TextBox.Fill.ResetValue(FillPrimitive.BackColorProperty, ValueResetFlags.Local);
        }
    }

    Let me know how this works for you.

    Regards,
    Stefan
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  19. miki
    miki avatar
    37 posts
    Member since:
    Dec 2014

    Posted 05 Jan 2015 in reply to Stefan Link to this post

    That's great ! 
    Thanks a lot, this is exactly what i want to achieve.
    Just a little thing: i try to change the Border Thickness:

    radDropDownList1.DropDownListElement.EditableElement.BorderThickness = new Padding(5, 5, 5, 5);

    But nothing happening, is this the way to do that ?
  20.
  21. miki
    miki avatar
    37 posts
    Member since:
    Dec 2014

    Posted 05 Jan 2015 in reply to miki Link to this post

    When the controller is in regular state my text color is black and when the mouse is enter i changed the text color to white and i want to change the text color again to black when the mouse is leave but i have notice a strange behavior: when the mouse is enter the  the event DropDownList1_MouseEnter is fired up and immediately fired up DropDownList1_MouseLeave event although the mouse is still over the controller so in this case i am not able to change the text color to white because this event (mouse leave) is trigger all the time.
    This is a bug ?
  23. Stefan
    Admin
    Stefan avatar
    2911 posts

    Posted 06 Jan 2015 Link to this post

    Hello Miki,

    You can set the BorderPrimitive Width property to specify the border width, when BorStyle is SingleBorder.

    In regards to the MouseEnter event, as I explained in my post from Jan 2, RadDropDownList internally hosts TextBox control (when in DropDown mode), hence the observed behavior with the enter and leave events. This is what required usage of timer and you should introduce your enter color in the MouseEnter event handler, and your reset color in the timer_Tick event handler:
    protected override void OnLoad(EventArgs e)
          {
              base.OnLoad(e);
     
              InitializeComponent();
               
     
              AddDropDownList();
              new TelerikMetroBlueTheme();
              radDropDownList1.ThemeName = "TelerikMetroBlue";
     
               new VisualStudio2012LightTheme();
             // radDropDownList1.ThemeName = "VisualStudio2012Light";
     
              BorderPrimitive ddlBorder = (BorderPrimitive)radDropDownList1.DropDownListElement.Children[0];
              ddlBorder.ForeColor = Color.FromArgb(27, 161, 226);
              ddlBorder.BoxStyle = BorderBoxStyle.SingleBorder;
              ddlBorder.Width = 5;
     
              radDropDownList1.DropDownListElement.ArrowButton.Border.Visibility = ElementVisibility.Collapsed;
              radDropDownList1.DropDownListElement.ArrowButton.Fill.Visibility = ElementVisibility.Collapsed;
               
              radDropDownList1.DropDownListElement.EditableElement.DrawBorder = false;
     
              radDropDownList1.MouseEnter += radDropDownList1_MouseEnter;
     
              timer1 = new System.Windows.Forms.Timer();
              timer1.Interval = 200;
              timer1.Tick += new EventHandler(timer1_Tick);
              timer1.Enabled = true;
          }
     
          System.Windows.Forms.Timer timer1;
     
          void radDropDownList1_MouseEnter(object sender, EventArgs e)
          {
              ((FillPrimitive)radDropDownList1.DropDownListElement.Children[1]).BackColor = Color.FromArgb(27, 161, 226);
              radDropDownList1.DropDownListElement.EditableElement.BackColor = Color.FromArgb(27, 161, 226);
              radDropDownList1.DropDownListElement.EditableElement.TextBox.BackColor = Color.FromArgb(27, 161, 226);
              radDropDownList1.DropDownListElement.EditableElement.TextBox.Fill.BackColor = Color.FromArgb(27, 161, 226);
              radDropDownList1.DropDownListElement.EditableElement.ForeColor = Color.White;
          }
     
          void timer1_Tick(object sender, EventArgs e)
          {
              Point pos = radDropDownList1.PointToClient(Cursor.Position);
              if (!radDropDownList1.ClientRectangle.Contains(pos) && !radDropDownList1.DropDownListElement.TextBox.TextBoxItem.HostedControl.ClientRectangle.Contains(pos))
              {
                  ((FillPrimitive)radDropDownList1.DropDownListElement.Children[1]).ResetValue(FillPrimitive.BackColorProperty, ValueResetFlags.Local);
                  radDropDownList1.DropDownListElement.EditableElement.ResetValue(LightVisualElement.BackColorProperty, ValueResetFlags.Local);
                  radDropDownList1.DropDownListElement.EditableElement.TextBox.ResetValue(RadDropDownTextBoxElement.BackColorProperty, ValueResetFlags.Local);
                  radDropDownList1.DropDownListElement.EditableElement.TextBox.Fill.ResetValue(FillPrimitive.BackColorProperty, ValueResetFlags.Local);
                  radDropDownList1.DropDownListElement.EditableElement.ForeColor = Color.Black;
              }
          }

    I hope that you find this information useful.

    Regards,
    Stefan
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  25. miki
    miki avatar
    37 posts
    Member since:
    Dec 2014

    Posted 06 Jan 2015 in reply to Stefan Link to this post

    Thanks a lot.
  26.
Back to Top