I cannot believe i have to ask this, but i tried everything.
How can i achieve the simple effect the toolbar at the top has here?
My App has the same structure. I tried with a dockpanel and a gridpanel. I think it has something to do with the border. An actual Border acts as expected, but the shadows behaviour is a complete mystery.
Edit: Of course, after not getting anywhere for hours i figure it out 2 minutes after my post. It has something to do with the background of the elements over which the shadow is supposed to be cast. I worked around it by adding an extra 2-3px row into my grid so the shadow has somewhere to be displayed fully.
Thanks for the designkit, that looks great.
Related
I have a ScrollViewer which has a TopHeader, TopLeftHeader and LeftHeader specified.
This setup works like a charm and I have no issues here.
Problem:
I need a footer for the ScrollViewer which behaves exactly like the TopHeader but placement is at the bottom.
The only thing I could think of was to add more stuff to the header and then move it to the bottom of the page.
How much ever I raise the zindex of the grid which I want to place at the bottom, it still seems to be bound to the TopHeader and movement seems to be happening only in the TopHeader area.
Question:
Is it possible to move the content out of the TopHeader area and move it to the bottom of the ScrollViewer?
If so, how do I achieve this?
Also, what is the maximum value of the zindex I can pass, since I got an OutOfBounds exception.
Thanks
EDIT:
Apparently 1000000 is the upper limit to zindex.
How can it be done? If there are, for example, four groups of buttons in menu-like panel. How would you dock them to their initial location if the window is resized?
I am trying this using DockPanel and HorizontalAlign, but it seems to only be work for the last button on the right when the window is resized. But how do you dock(anchor) a group of buttons? Maybe put them in border object and use HorizontalAlign for it? Is there more elegant way to do this?
To summarize the comments: I don't know your background but it seems you are used to another way of UI design where you do not explicitely have to specify grouping etc in code. While that might seem more elegant, it is not: the designer generated code is awful and the whole system is not as flexible nor srtaightforward as what WPF gives you..
With WPF you get a clear one-to-one relationship between your intent (treating buttons as a group within a layout) and the actual code (put the buttons in a stackpanel/grid/...). Or draw a border around buttons and organize them vertically within the border vs in xaml use a border with a stackpanel inside. It won't get any more elegant than that.
Read up on WPF layouts and once you'll get a grip of it you will quickly see that it is rather powerful and beatiful at the same time. I found this tutorial pretty helpful when just starting with layouts. And google provides lots and lots and lots more information, as usual.
Like stijn said, put the buttons in a Grid or a Stackpanel and you'll be fine.
You may not think it's beautifull, but it's the best solution for your problem.
Just ran into a bunch of random but probably very simple questions while learning to work with WPF. If anyone can answer any of these it would be most appreciated.
I have a Rectangle that I styled to my liking, and then a StackPanel that I am actually placing the content (bunch of labels) in. It looks like Rectangle doesn't have a closing statement so how can I make it the parent of the StackPanel (I want the panel to move with it)?
I need to display text (labels) in a table form. It will only be two columns, and 8 rows (row count may change). I initially looked into just using a Grid, but as this is a intended for Layouts, it didn't work as expected. I also checked out DataGrid, but this seems confusing and overly complicated for my needs. Is there any simple Table style element I can use?
I have some Animated Expanders and I want to give the other UI content elements in my application a similar looking title bar. I haven't seen any sort of element for this, so I am wondering if I just need to use a Label or something and style it as close as possible to match, or if something already exists that I should use instead. If I need to use a label, what is the proper way to group/attach it with the element that it is the title bar for?
Do any controls exist for WPF that would allow for a Mac style menu bar? Something similar to where the icons move and expand as they are mouse over.
I have a grid that has two expanders (one above the other) with Height="Auto", and two rows set to Height="Auto" so that when the top is minimized, the bottom one moves up to close the gap. I am using a MinHeight right now to make sure they are at least somewhat expanded, but I would like to make them take up the full 100% of the Grid height. What should I do for this?
A rectangle cannot have child content, a better approach might be to use a Border, you can use this as that parent of your stackpanel, applying a Background and BorderBrush to make it look like a rectangle.
For a simple table layout Grid is the way to go. Is your problem that you need it to be dynamic? If so, you can create multiple grids with SharedSizeGroup on the columns to make them look like a single grid. See: How to align separate Grids created via templates along their columns / rows?
Learn about creating your own templates!
Not that I know of, but it would be relatively simple to do, create a storyboard that scales the item on mouse over.
No idea ... running out of steam!
As Andrzej Nosal mentioned, these really should be separate questions!
I'm designing a UI in Visual Studio 2010, and I've come across a slight problem. I'm fairly new to XAML and this method of design, so this might be a rookie mistake. I've looked around but can't seem to find reference to a similar problem.
Basically, I have a grid with 2 rows, one of which contains a stackpanel and 5 columns. The stackpanel sits behind the columns and is used to paint the background of the entire row. When I add a background colour to the other row, I get an annoying line at the top of the stackpanel which just looks out of place. I've tried several things (showGridLines = false, transparent borders etc) but cannot seem to get rid of it. The best way to show it is through an image:
See http://img227.imageshack.us/img227/2220/tempym.jpg
One oddity I've noticed is that when I resize the window, at certain points the line disappears. Obviously this is not a solution (not least because it's going to be run full screen), but adds to the mystery of the line...
This is a trivial problem, but it is annoying me and will continue to do so until I can get rid of it, so any help would be appreciated. I've omitted the xaml for simplicity, but will post if required.
Based on the oddity you noticed, try setting SnapsToDevicePixels to true on the grid or window. Sounds like the borders are falling in between pixel boundaries and is being anti-aliased.
Or rather, if you're using .NET 4.0, use UseLayoutRounding instead.
My application has several controls. Like in one screen has TreeView on left side, GridView with paging in the middle and 4 buttons at right side. The controls properly appear when the form is in a maximized state, but if I minimize it the controls do not properly fit on the screen.
I tried with different different tricks like table layout.. in dat I added a panel, etc...
But I could not solve the problem.
How can I create such type of screens which fits independently of size of my window?
Thanks
I had the same problem a while ago. In my case i had a Button and a ListView within a GroupBox that was inside a SplitContainer, which was within a UserControl on a TabControl. I wanted the button on the top right located and anchored and the ListView took the space leftover, so i couldn't dock it. Instead it was anchored in all four places.
In my case my button and the listview are worked and behaved correctly in the designer, but in my running app the button was positioned to far on the right and the ListView size had also a too much width.
For a first bugfix i did some iterations about positioning the button in the designer a little more to the left, check it running mode, re-align the button in designer from the impression i had in the last run.
So i got it to work and started over with some other thing i had to do in my app. After a while i got a new feature request and needed another button within this messy thing. This time i did a complete rebuild of the gui elements on a new usercontrol, just to see if the problem reappears. To my amazement this gui mock just behaved as expected.
Within my code i didn't anything about changing the location, size, anchors, docks, etc. So the problem had to be within the InitializeComponents() code created by the designer.
I started with a diff of both versions and couldn't see any big differences (there were a lot of them, but only minors like size, location or name). So i started to put code from my crazy usercontrol into the mock and running the mock in my app. After several copies the problem also appears in my mock, so i got the root cause of the problem.
What do you think, which property leaded to the crazy behaviour?
It was the MinimumSize of my SplitContainer!
So to get really the root cause of your problem you should start over with an empty UserControl (or Form) and just place all the elements on it with the desired behaviour (size, location, anchor, dock).
Nothing more!
Then test if this mock behaves the way you want and if not, post this code here and tell us what you expected to see.