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
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'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 have seen this post: WPF ComboBox: background color when disabled
and some others...
But This solution causes me some problems. All I want is to make the textBox gray, and the ComboBoxItems gray and not selectable. I don't want to recreate all the style as the control won't work properly on both XP and seven. I don't want to choose one style for both, but I want XP style for XP and seven style for seven.
Is there a way to set the style so I can change the Background of the ComboBoxItems when the comboBox is Readonly?
Thanks in advance!
Update: It seems that the Drop down popup should be restyled instead. I got to find how.
I finally found my answer at many places on the web, pieces by pieces. The ComboBox style is composed of other controls. The PopUp is the one that interests me. It is not public, so I can't modify it as I want. It would have been interesting to define a style for my popup and to replace the original popup by it, but it is not accessible, so... I attempted to make a template that inherits from the template of the original ComboBox, but that is not possible neither. It won't accept inheritance for some good reasons How to Inherit a Control Template. So the template must be remade totally or not. The other option would be to make my own control that inherits from combobox and that changes the items to gray and not selectable when the combobox is readonly (into the code), but this is not a good idea in my situation. No solution for me. I will have to stick with the whole template redifinition. I hope this post will help someone in some way!
I'm once again turning to you since I can't find an answer anywhere else. I have a TabControl, but I want to get rid of the ugly orange bar on top of the selected tabs. I would also like to make the tab text BOLD when selected and NORMAL when not.
Is there any easy way to achieve that goal ? I don't want to use the Appearance Buttons or Flat Buttons.
Thanks for your help !
This appearance is controlled by the Visual Styles theme selected in your operating system. In general, users do not appreciate any program that ignores their theme settings, especially when they paid money for a custom one. But you can get what you want, you'll have to set the DrawMode property to OwnerDrawFixed and implement a handler for the DrawItem event. There's a good example to get you started in the MSDN Library article for this event. Just change the font assignment in that sample code.
So I'm just starting out with WPF, and I'm really annoyed by the fact that if I lay two Grids on top of one another, the top Grid isn't opaque. It makes designing extremely annoying. Can this be turned off somehow?
I'm just building your standard Winforms STYLE application, but in WPF. I'm just trying to start bridging the gap here. In Winforms(and VB) you'd always have group boxes or something on your form, and then depending on some user context, one of those group boxes would be on top. Its how I've designed forms since time immemorial. One of two things must be true here:
A) This is not the recommended way to design Windows going forward with WPF, but I don't understand what you're supposed to do
B) There is some property to make the Grids opaque so I can build the Window in the style that I'm used to.
I'm fine with answers that solve either A or B. If I'm not doing things the right way because they've changed, then please enlighten me.
Update: So it turns out, I can make the grid opque by setting the background color, but now it seems like I'm locked into a White background as opposed to sticking with the system colors.
You could use SystemColors to make the control background colour match (rather than being white).
I don't understand why you want to put one grid on top of another though. In WPF you generally use a single grid to stack multiple visual elements within one region. Can you explain why you want to hide things in the background with foreground elements?
It sounds a little like you're implementing a tab control -- switching between pages of controls depending on focus. Have you experimented with the new TabControl?
I'm moving from WinForms to WPF development wherever possible and have found that in doing so it's taken some readjustment. WPF has a completely different way of laying things out and now that I'm more comfortable with it, I think it's superior. I'm guessing you just need to ride the learning curve a little longer.
Hope that helps.
EDIT: In response to your comment, I imagine you can have a tab control without tabs, though I haven't tried it myself (might be worthy of another question on SO). Tab controls are headered controls, meaning that they have a header item and a content item. In this case, the header is the tab button, the content is the page item. You can specify a ControlTemplate that details how these items should be displayed relative to one another.
Interestingly, many other types of common GUI element are also headered controls:
Menu items - The menu item text/icon is the header, and the optional submenu is the content
Tree view - Each node is the header, and optional children are within the content
Group box - The header is, well, the header and the content is, well, the content :)
Note that in the case of menu items and tree views, the type may recursively nest within itself. This is quite elegant and can give some wildly different presentation options over the same logical model with only changes to the control template.
For more information read about HeaderedContentControl and HeaderedItemsControl
You could use the following:
<Grid Background="{DynamicResource {x:Static SystemColors.WindowBrush}}">
<!-- content -->
</Grid>
This will respond to changes in the system colors on the fly (the DynamicResource does this).