Dot lines around header

[Celeste]

Hi:

I want to take off dot lines around header expander. I edited ToogleButton' s template but I didn't find what property I have to change.
Can you help me?

Thanks
Celeste.

[Ivan]

Hello Celeste,

Unfortunately there is no a property related to the focus border (the dot line around the button). In order to take it off you should edit the expander's template. Actually it is the Toggle-button's template - there is a rectangle named FocusVisual:

<Rectangle x:Name="FocusVisual" ...

You can remove it. Of course you should remove all the references to it in VisualState and Trigger elements.

Please give it a try and do not hesitate to contact us if there are more questions.

Best wishes,
Ivan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Celeste]

Thanks! It worked!

[Tom]

Is there any good reason for having this dotted line in the first place? I cant think why I would want to have it there - maybe if it surrounded the whole contents when expanded, and was easily configurable, it might be useful.

Of course its easy enough to add a Border control to surround the expander and its contents, but as Celeste pointed out you still need to turn off the expander's dotted rectangle.

Tom

[Dimitrina]

Hi Tom,

In order to remove dotted line (FocusVisual) you have to make custom style of RadExpander in the "Blend". For more information you can follow the link below:
http://www.telerik.com/help/silverlight/radcontrols-for-silverlight-expression-blend-support.html

If you have further  questions please do not hesitate to ask us.

Kind regards,
Dimitrina
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[Tom]

Thanks Dimitrina,

I understood from the earlier posts how to do it, I guess it was more of a comment or enhancement request as I can't see any good reason for the dotted line being there in the first place, which means that everyone who uses it is likely to have to go down the path of individually styling it.

Seems like a collective waste of time and effort to me.

Tom

[Ivan]

Hi Tom,
 
Thank you for sharing your opinion.
 
Actually in WPF paradigm there is a property related to the focus border: FocusVisualStyle (it is a property of the FrameworkElement class). In order to remove the focus border you should assign it with an empty style. However in Silverlight such a property is omitted. Because of this we still not exposed such a property in our styles.
 
As you are so insistent I would like to ask you about the preferred approach to accomplish the task:

1. To expose a boolean property related to the focus-border visibility. This one will be extremely easy to use, for example: IsFocusVisualVisible = true/false.
2. To follow the WPF-way. Personally I choose this one - it is a powerful one, and it give us the ability not only to show/hide the focus border, but to emphasis it for some special case.

 
Looking forward to hear from you.


Greetings,
Ivan
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Tom]

Hi Ivan,

Thanks for your response.

If I get to vote, I would like simply a boolean property.

As I said in an earlier post, one of the problems with the focus border is where it is located. If I have an expander that contains some other controls, then the border only surrounds the expander, not its contents. If I were going to highlight the expander I would include the expander + contents in a border control, and highlight that instead.

The way it is now, when the expander is expanded, its contents tend to look a little orphaned, instead of being obviously part of the expander.

So I would prefer just to turn the border off, and handle everthing else with additional Border controls.

Others may disagree...

Regards,
Tom

[Kiril Stanoev]

Hello Tom,

Thank you for your valuable feedback. We will definitely take it into consideration for the future versions of our controls. Let us know if you have additional questions or comments on the topic.

Greetings,
Kiril Stanoev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Srujana]

Hello,

Was this addressed in any of the future releases, this seems like a old post, I am a new customer, just started using telerik controls, I am still seeing same behavior on expander, the dotted lines around the header is still there, would love to hear any new updates on this. As per my application I need to have a border on both head and content when it is in expand mode.Please let me know an easy approch to achieve that.

Thanks in advance,
Srujana.

[Tina Stancheva]

Hi Srujana,

If you need to display a Border around both the Header and the Content, you can define the RadExpander BorderBrush and BorderThickness proprieties.

If however, you need to apply a solid border around the Header element and another one around the Content and you only need to apply them when the RadExpander is expanded, then you need to edit the ControlTemplate of the RadExpander following the approach described here.

You can define an Expanded VisualState to set BorderBrush/BorderThickness to the HeaderButton element. Also, since you need to set a Border around the Content, you need to wrap the Content element in a Border and control its BorderBrush/BorderThickness properties from the Expanded VisualState.
 
Also, in order to change the Dotted line around the Header, you need to edit the ControlTemplate of the RadExpanderHeader element and modify the FocusDecorator rectangle.

I attached a sample project to help you get started.

Kind regards,
Tina Stancheva
the Telerik team

[Srujana]

Hi Tina,

Thanks for the response, I will give them a try.

Sincerely,
Srujana.