toolbar items style in prism

[Rayne]

I'm not sure if I'm going about this the right way, but here's my situation.

I've got a MVVM Prism WPF app. In my shell, I created a RadToolBar and made it a region since it's an ItemsControl.

In my module, I created a userControl, then instead of deriving from UserControl, I derive it from Button. In my module initialization, I'm adding that derived button to the RadToolBar's region. I'm also creating a new RadToolBarSeparator and adding it to the region as well (just before adding my derived button) and it of course shows up with the right styling.

It adds it correctly and it works as expected, but it isn't taking on the style of the toolbar buttons that would be added the regular way. It just looks like a standard button. Do I need to implement the style explicitly?

[Rayne]

I've made a slight modification and have gotten a slight improvement.

I changed my view to derive from RadButton so now it picks up the theme from the application, but it's not picking up the styles from the toolbar. Meaning my button has a border around it rather than a seamless appearance in the toolbar. It looks like a button rather than a toolbar button, if that makes any sense.

[Tina Stancheva]

Hi Rayne,

Currently the RadToolBar has predefined styles for the most commonly used controls as its content. However, it takes the name of the type of the contained control to decide which style to apply and since in your case the type of the control is the userControl, the RadToolBar StyleSelector won't find a style to apply. Therefore you will have to manually define the style for the userControl.

You can also check out this blog post describing how to databind the RadToolBar. It might help you in implementing your scenario.

Let us know how it goes or if you need more info.

Kind regards,
Tina Stancheva
the Telerik team

[Rayne]

So even if it derives from Button or RadDropDownButton, it's still of type UserControl?

If so, then how does it work that I can derive from RadPane and Prism works properly adding my RadPane-derived views to the RadDocking control in the Shell?

[Tina Stancheva]

Hi Rayne,

Let me try to explain the style selector mechanism implemented in the RadToolBar. The control doesn't look for control of certain type like Button, or RadButton, but it takes the control - in your case the custom control, let's call it customControl, and takes its type like so: customControl.GetType().Name. In your case this will return the name of your custom control - customControl, not Button/RadButton. And since the StyleSelector doesn't contain a style for the customControl type, it won't apply any style on it. Therefore you will need to create a style for your control or just copy the RadToolBar style for the Button/RadButton control and apply it to your control before setting it inside the RadToolBar.

If the blog post and the related project doesn't help, please let us know and we will prepare a sample project for your scenario.

Greetings,
Tina Stancheva
the Telerik team

[Rayne]

Oh, I understand now. But if I get it completely, even with databinding I will have to create my own style and control templates copying the styles that are already in place in the toolbar. I can get to the styles, but I'm still a WPF newbie so I'm not worked too much with control templates, etc.

What's the easiest way to get those styles onto my controls? Just copy/paste from the telerik styles definitions?

[Tina Stancheva]

Hello Rayne,

In your case you can create your own custom controls and apply the appropriate styles to them. Then you will be able to use them in the PRISM modules or simply insert them in the RadToolBar. I attached a sample project illustrating how to define your own custom control deriving from the Button control and added into the RadToolBar. Also, I added the RadToolBar and all ToolBar elements' predefined styles in the MainWindow Resources so you can just copy them when needed. And I applied the Button ToolBar Style to the custom control.

Also, you can take a look at this article explaining how to edit the ControlTemplates of the RadControls in Blend.

However, thanks to your feedback we reproduces an issue with inheriting RadButtons. If you create a custom control like in the attached example, but derive it from RadButton, you won't be able to apply a style on it. I logged this issue in our PITS under the name Buttons: CustomControls deriving from RadButtons cannot be styled and you will be able to track it from tomorrow the latest. I also updated your Telerik points accordingly.

All the best,
Tina Stancheva
the Telerik team

[Rayne]

Thank you so much! It worked. I created a common custom button control and copied your style info. Then on my user control, I added that custom button to a stackpanel and it shows up in my toolbar with the right toolbarbutton style. Hurray!

Now, if I can only reproduce for the TextBox and RadDropDownButton, I'll be in good shape.

One more question. One of my modules has a user control with several toolbar items in a stackpanel. The buttons show up, but the RadToolBarSeparator doesn't show up. Would I need to do the same (implement a custom control of type RadToolBarSeparator) to get a RadToolBarSeparator to show up if I put it in a StackPanel before I add it to the toolbar?

Thank you so much for all your help.

[Rayne]

I was able to reproduce for the TextBox, but not for RadToolBarSeparator and RadDropDownButton.

DropDownButton didn't take the style changes, maybe it's the same problem as the RadButton. the ToolBarSeparator just doesn't show up.

[Petar Mladenov]

Hello Rayne,

First of all, please excuse our late response.
Using a StackPanel in ToolBar is very uncommon scenario, since the ToolBar itself reacts just like a StackPanel. Could you please elaborate more on your case if you actually need this StackPanel ?
When you place a RadTooBar separator in the StackPanel, the RadToolBar doesn`t find the default style for the separator and that`s why it is not visible. You should explicitly set it or you could define a custom separator class that inherits the native WPF`s Separator and uses the RadToolBarSeparator` style. These 2 approaches are used in the attached solution.
As for the DropDownButton , you can again set its style property explicitly but you cannot use inherit the Native Button class and apply the RadDropButton style on it since the Button doesn`t provide many of the RadDropDownButton `s properties.
Please examine the attached solution and let us know if it works for you.

All the best,
Petar Mladenov
the Telerik team

[Rayne]

Yeah! Thank you so much. It worked. I was able to derive a custom control from Control and style it using the RadToolBarSeparator style and that worked. But I didn't think to set the style directly on the RadDropDownButton.

The reason for this need is that my Prism app has a module containing a UserControl derived from StackPanel that contains toolbar items. Prism then places that control in the toolbar (which is defined as a region in my shell) when it loads the module. But I still want it to look like an actual toolbar with toolbar items.

[Michael]

Has this issue been fixed yet?  In PITS it's listed as Open with a Release of "Q2 2011 SP+".  (I'm still back at Q1 2011 for a variety of other reasons.)

[Petar Mladenov]

Hello Michael,

 Actually this issue(Buttons: CustomControls deriving from RadButtons cannot be styled) should not be scheduled, please accept  our apologies for misleading you. The new status of this issue will be updated soon. Voting for it currently is the only way to increase its development priority due to more pressing tasks we are currently working on. Thank you for your understanding.

Greetings,
Petar Mladenov
the Telerik team