I'm looking for an easy way to change the styling of the expander button in the Silverlight Toolkit Expander control. For example:
Smaller or larger icon.
Replace the icon with another one.
Change the colours of the icon being used.
TIA
Craig
What you're describing is essentially the bread & butter of what Expression Blend is good for. In Blend you would just right-click your control and choose to edit a copy of the template. Then you would find the Toggle Button, and then edit THAT template.
Otherwise, you'll need to find the Control Template for the expander in your ToolkitStyles.xaml though it's much easier with Expression Blend though. You'll find Templates for all four directions an expander and go.
A quick solution search for;
<Style TargetType="toolkit:Expander" x:Key="DefaultExpanderStyle">
Should produce your default template you can either edit directly or make a copy of (just make sure to rename the Key name if you copy it) and that way you have all your States & Transitions etc already also. Remember your culprit will be the embedded ToggleButton inside the template for whichever direction expander you're wanting to edit.
Hope this helps.
Related
I am really bad when it comes to styling in XAML and I have a really big problem. I want to customize my scrollviewer in the ListBox that I have. I want to look something as simple as this
I hope that someone can help me do this.
Thanks in advance.
If you're using Expression Blend this is pretty simple actually. First you need to get to your Control Template for your ScrollBar. You can do this by dropping a ScrollBar control on your Design Surface then right-click and choose "Edit Template -> Edit A Copy" which will present a box to enter the name of your new Style Template and whether you want to save it to a Resource Dictionary or to the file you're working in.
Once you have saved it you should see multiple Parts in your Objects & Timeline panel for the Vertical & Horizontal templates of your ScrollBar. You will be editing the properties of the Rectangles & Borders that create the visual of your Scrollbar within each Control Template for Horizontal & Vertical depending on which you choose to use.
To re-create your example should be relatively easy with finding the "VerticalThumbTemplate" or "HorizontalThumbTemplate" and editing the Border / Rectangles within them to get your oval as you display. You might also want to tinker with your VisualStateManager States while you're in there for MouseOver effects etc.
An example of a custom scrollbar can be found in a partial theme I created awhile back you can view here.
Once you have created your custom ScrollBars you can either make your new style template the default by changing the BasedOn Value for that TargetType, or applying it directly to the ScrollViewer built in to your ListView Template.
Hopefully this should be enough to get you started in the right direction. Cheers! :)
Scrollbar is one of the harder template to customize. If your are really bad at that, you maybe have to search at a custom controls librarie.
But if you really want to edit the scrollbar template, there is plenty of sites that will help you with a simple google search
I've got Expression Blend 4 installed on my machine. I just need to know what I'm doing.
My application will be running on a laptop equipped with a touch screen, in police cars where the user will probably be driving the car. Needless to say, the interface has to be easy to use. In this case, that means things like the drop down buttons on ComboBox controls and scroll bars need to be wider than normal so they're easy for the driver to use.
Can someone tell me what part I have to change for each of these controls in order to get the effect I want? I tried editing a copy of the template for one of the combobox controls in one of my user controls and playing with the ToggleButton control but that didn't do what I wanted it to do. There's so much mark-up in the template it's hard to tell what's doing what.
Thanks for any help you can give.
Tony
Edit:
I figured it out from the first answer to this previous StackOverflow post. I had to make a copy of the ComboBox's style, then make a copy of the ToggleButton's style.
Thanks anyway.
Tony
The solution was to edit the application in Expression blend. I clicked on one of the ComboBoxes and right clicked. From the context menu, I selected Edit Template | Edit a copy. In the dialog box that appears, I specified that the new template should be applied to all ComboBoxes in the application.
Within the ComboBox's style, there's a ToggleButton. I repeated the above steps with the Togglebutton. Finally, I changed the width to make it what I wanted. There's also a path in there for the arrow that you can play with if you like.
Tony
I have an Expander in Silverlight 4 that I am trying to style. Specifically, I want to override the default look of the ToggleButton used in the Expander. How do I go about doing this? I've written some style for the Expander so far, but I can seem to find the place to override the default ToggleButton style.
This MSDN page gives a pretty complete description of what is needed to override the Expander.
If you have Expression Blend, another option is to start a new project in Blend, insert an expander on your window/usercontrol, then right-click on it and choose 'Edit Template'. Then you can change just the pieces you want. For my needs, this functionality in Blend is worth the cost of this software by itself.
You will need to replace the whole expander template since the expander stores the togglebutton templates (it has one for each direction) in its template and offers no way for you to provide your own.
I'm having some difficulty with styling the RibbonMenuButton in Microsoft Ribbon for WPF (October 2010).
Is there any way in which I can access the property for the width between the image and the label? I can't find any relevant member on the MSDN Property List, and as expected, adjusting the padding just changes the spacing between the entire button and it's container.
<ribbon:RibbonMenuButton SmallImageSource="/MyProject;component/Images/Foo.png" Label=Bar">
...
</ribbon:RibbonMenuButton>
Thanks in advance!
That will likely have to be done through the template. For template manipulation, I typically use Expression Blend as it allows easier access to the template and provides design time display of an example of the item being templated. If you don't have it, pick up a trial.
If you do get it, load your solution into Blend, right-click on an item you want to change the template for, selected Edit Template > Edit a Copy...
The template will be copied, referenced by the item, and you can then edit it to suit the look and feel you want for the control.
In the standard wpf slider control you specify TicksPlacement and TicksFrequency and you get the tickbar along with the angled / pointed thumb which is pointing in the direction of the tick bar.
I have my own slider style (Control Template that is) and I'd like to make the thumb pointed like that. What's the easiest way to do that?
I took a look at the control template in Blend for the wpf slider and it was NOT obvious how that was done.
Anybody know of an easy way to toss that in to a control template?
Thanks!
I'm assuming you already have the default Styles and ControlTemplates, if not you can download those from here. Click the link for the associated theme, then click Download sample.
With the Aero theme, the pointed thumbs are defined using the Styles with the keys "VerticalSliderLeftThumbStyle" and "HorizontalSliderDownThumbStyle", so you can search for those terms.
The ControlTemplate in these styles uses several Path objects, whose data is defined earlier in the file. So you'd need to copy all referenced resources.