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.
Related
Lets say that, regardless of what color settings the user has, I want my app to have a white background with blue foreground elements, like the Skype app does.
How do I go about that? I've found how I can make elements use the system brushes, but I can't figure out how to change those default brushes. I also can't find where the background color is specified at all.
You can use a library created by Jeff called PhoneThemeManager. You can find the article about the same here: PhoneThemeManager. Just download it from NuGet and modify your app.xaml.cs file to get Light (white background) theme activated. The code is simple:
ThemeManager.ToLightTheme();
Once you apply the theme, all your pages will have white background. For blue foreground elements, you'll need to create your own styles and apply them to elements. I'll prefer Blend to create design template over here as you'll get WYSIWYG interface. Using system brushes will not help as those will change according to Accent color. Creating your own styles will give you more freedom and control.
I hope this helps.
Check out how to apply theme resources to wp8 app, it describes exactly what you're looking for.
The most convenient way to accomplish this Task is to use Expression Blend.
Expression Blend is most suitable for this purpose as it will provide and intuitive interface.
The Interface is shown below for a WP app (7.1, it applies to WP8 as well)
The interface is easy to use.
Select an Item on Objects and Timeline
An object is selected and UI updates in middle.
Now Check the right side for properties. See the Background is selected. Select the required color of choice and other properties.
Pros: This applies to various elements including Menu Items, Buttons and all.
Cons: Items such as MessageBox can't be customized this way.
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'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.
I'm working on an app where I want the color of a few borders to change depending on the users choice of theme. The borders are partly placed in the xaml, but also dynamically generated throughout the app depending on choices the user make. I am also using a few LoopingSelector controls (from the Silverlight toolkit), that in turn also generate borders.
So, I was wondering how I should approach this problem. Initially I tried applying a style to the borders, and then changing the style depending on the choice of theme, but apparently styles are read-only during run time. I also figured I could iterate through and change the color of the borders, but it seems the LoopingSelector doesn't expose that property of its borders, or really, expose the controls at all.
So I assume I should use binding in some way, but as I'm still quite new to Silverlight I'm not really sure how to go about that.
Thanks in advance.
If you have a named resource, say CustomBorderBrush, that you are using in your XAML for the parts that are in the XAML, then you can access this brush from the Application's resources:
Border newBorder = new Border();
newBorder.BorderBrush = (Brush)Application.Current.Resources["CustomBorderBrush"];
If you additionally have a problem with the LoopingSelector, then that's a separate issue :) It sounds like you need to apply your own style to the LoopingSelector so that you can specify the brush value that you need.
I'd like to know what the differences between an Style (for a control) and a control template are.
Best regards,
Gonzalo
A style controls the individual properties of a control. For instance, a button style can say, "For every button, use this background." A style is changing a single property on a control.
A control template is actually handling how the control displays its bound data. Instead of saying, "I want to override a control's properties," you are assembling together other smaller controls into a single control that can present different views of the bound data.
Previously in WinForms, if you wanted to write a custom list box (say that had an icon next to each item), you had to inherit from the ListView control and override the painting methods. This involved a ton of experimentation - huge pain. With WPF templates, you can use XAML to construct smaller controls together and bind them to different properties of the parent control. You are actually defining the Visual Tree for the control.
See this article for an in-depth explanation by Charles Petzold.
Imagine your control is a house.
A Style is conceptually similar to putting down a new carpet and painting the walls. The house itself is still the same but its outward appearance is different.
A ControlTemplate is the equivalent of knocking down a wall or adding a conservatory. The actual structure of the house has changed.
Use a Style when you want to change the outward appearance of the control E.G. it's background colour or the thickness of it's border.
Use a ControlTemplate when you need to change the underlying structure of the control. This is useful when you want to change the layout of certain aspects of a control. A good example is in this article which re-templates a TabControl to look like the navigator from Microsoft Outlook.