I've just been fooling around with a ListBox control that I want to style a certain way. For now it looks just like I want it to with rounded corners and no padding. However, the rounded corners seems to cause a problem with the items in the ListBox.
A screenshot so you can see what I mean:
alt text http://www.bo-mortensen.dk/listbox.JPG
The thing is, that the first and the last item in the listbox needs to have it's corners rounded aswell. So the first item in the listbox needs to have it's upper left and right corners rounded while the bottom corners needs to be rectangular.
Is it possible in some way, to make three different styles and have the first, middle and last items use their own style? So i.e:
First item uses style: ListBoxFirstItem
Middle items uses style: ListBoxMiddleItems
Last item uses style: ListBoxLastItem
Also, as a side question, how am I able to style the selected item and mouse over? If i'd like to get rid of the blue rectangle that's standard.
Hope you understand my question(s), if not - just let me know and I'll see if I can elaborate :)
Thanks in advance!
what you need is an DataTemplateSelector.
this allows you to have different templates for different items in the listbox based on whatever criteria you specify.
check Dr. WPF for a pretty decent example (about 1/2 way down the page)
another tutorial is at Switch On The Code
and everybody's favorite, Bea Stollnitz
Related
In HTML, for a table (at least), one can style the element so that margins are merged. I.e. two adjacent rows both have top and bottom margins of 10, so the gap between these two rows will be 20. When their margins are merged, the gap is only 10.
Is there any way to achieve this in WPF?
There is no easy way to do this, and when you look at how WPF handles layout you'll see why, but also see that there is a hard way if you're up to it.
As you can see from the WPF source code for FrameworkElement, the MeasureCore sealed override method (which prevents us from overriding it further) adds the element's margins before returning with its desired size. Annoyingly, they seem to have a BypassLayoutPolicies option which would prevent this, but for reasons possibly ranging from short-sighted to sadistic, they made this internal so it's not an option. Thus the fully margined size of the element is what always winds up being assigned to DesiredSize, which is basically what all layout panels (StackPanel) etc. naively use to arrange the items during ArrangeOverride.
But therein is the solution, if you're willing to subclass all the panels and override their MeasureOverride and ArrangeOverride. Knowing the margin values of two adjacent children you could collapse their respective right/left or bottom/top margins together during the measure and arrange passes, by just subtracting the duplicative portion of the margin from their `DesiredSize's.
But if you're gonna subclass anyway, another option, which I would consider cleaner and a better practice overall, is to add a Spacing property to your subclassed Panels, which exists in the WinUI version of StackPanel. This would require you to either ensure that your child items all have zero margins, or to subtract their actual margin values out from their DesiredSize's. You would then add this spacing instead between the items during the arrange pass.
StackPanel is easy enough to extend this way as both passes are very simple. Grid, unfortunately, is a lot more complicated. VirtualizingStackPanel is probably out of the question... So this is by no means a silver bullet, but given how common StackPanel is, even just extending that control would cover a whole lot of ground and lead to much cleaner layouts IMO.
If I had more reputation I'd mark this as a duplicate of Is it possible to emulate border-collapse (ala CSS) in a WPF ItemsControl? . It looks as if this is kludgeable (for a ListBox at least) using a DataTrigger to check the value of preceding entries and set borders accordingly for null values.
We noticed some weird behaviour in our WPF application.
We have a customised, expander like UserControl, which has a Border around it - we'll call it expander. There can be several of these expanders in a view, which means scrolling is needed. When an expander is scrolled out of view, and back again, the border sometimes changes colour. Not every time, and not consistantly. For example, the lower border can be slighly lighter in colour, while the right border can be darker, even though they use the same brush. The next time it's scrolled out of view, and back again, the colours can be back to normal.
It almost looks like a scaling/antialiasing effect. Has anyone else seen this behaviour, and is there anything we can do about it?
To complicate things a bit - but only a bit - the expanders are children of a ListView. This is because we want to emulate HTML anchoring, so we externally can jump directly to a given expander. Could this be part of the problem?
This seems to be a anti-aliasing issue, as explained here and here.
I'd like to use an ItemsControl which behaves somewhat carousel-like:
I want the items which are all text to circle so that the selected item is always centered and the biggest. I should not be 3D since I like the fact that the unselected items don't overlap and are still readable. Most carousel implementations I saw made the impression to be too heavyweight for this scenario or to look good only with pictures.
I have the feeling this should be doable with some storyboards alone but it seems I'm not far enough into the WPF to get it done properly.
I hope you can point me in the right direction.
Thanks for your help.
This blog post has a good description of how you can implement this
I'm changing the look of some Controls that I use in my Microsoft Surface Application at the moment. And today I'm working on a SurfaceListBox.
I have the template for it and already changed background and borders and other stuff.
But I really cannot find where I can change the color of the rectangle that appears on the ListBoxItem when you touch the ListBox. At the moment it's just white and I want to change that.
It's not something like the effect that you can see when the item is selected. I already found that and changed that so my selected item now appears in a different color. But the effect in the second when you touch the item stays white.
So where can I change this effect?
If you mean the bright, white highlight that happens when you press your finger against an item you should look into the SurfaceShadowChrome. It's used by (almost) all surface controls to give feedback when the user is pressing on a control.
It does have a Color property that you can modify to suit your needs. Apart from the color, and the tweaking of corner radius and shadow offset, it's not a very flexible decorator. But hopefully, you'll be able to make it do what you need.
well what i want is this lets say i have a "panel" with the width 100 and height 100
now i want to place X objects witht the size 20 so when i add more 5 items it should have all items on one line
|Item1|Item2|Item3|Item4|Item5|
now if i would add one more then i want it to split it to 2 lines with 3 items on each row
|Item1|Item2|Item3|
|Item4|Item5|Item6|
and well i guess you get the point, iv tryed stack panel but i cant get it to work the way i want it to..
Edit:
well it doesnt matter that mutch if each row has an equal amount of items.. so a wrapPanel should do the job next problem -> Here
There's no standard WPF panel that will do this for you. The WrapPanel comes close, but it will not make sure that your rows are even. Your best bet is to implement your own panel. Here's a good example on codeproject
The WrapPanel should suit your needs:
Controls are positioned in either a
stack or row based on the Orientation
property. In addition to stacking, the
WrapPanel provides wrapping support
for contained controls. Thus if more
controls are added to a WrapPanel than
can be displayed by the width of the
WrapPanel, they are wrapped around to
form an additional stack or row.
To be honest, I haven't tried that specific requirement myself.
I guess you could use WrapPanel... but then you would get 2 lines, (5 items and 1 item)..
What would happen if you had, say.. 7 items?
I don't think you will be able to get a container control that does that automatically. You could have a Grid with two rows and a StackPanel in each row. As you add the items you would need to programmatically select which StackPanel to put each item into.