We have quite a complex WPF application (that I cannot show here) that somehow has the tiled background misaligned of one of its user controls. I was unable to reproduce this problem in a "clean" WPF project but will try to illustrate the problem in this picture:
(source: kintespace.com)
The gray area represents the user control and the black and red checks represents the tiled background inside the user control. The white background represents the window hosting the control. The VisualBrush is used here but the same problem comes with the DrawingBrush. I would prefer not to use the ImageBrush.
Can you open a "clean" WPF project and build something that will cause a tiled background to be misaligned like this?
You can do this if the layout root of the user control has a -10 left margin and a -10 top margin. the tiled backgoround in on the layout root of the usercontrol so, it looks like a alignment problem not a brush problem.
This problem is related to the tiled background cramming itself into the calculated height of the UserControl instance in the hosting Window. I am still unable to replicate this problem in a new project but it is "solved" (by stacking panels in the user control horizontally instead of vertically).
Here are two diagnostic techniques that can be useful in situations like yours:
Take your complex project, make a copy, and start tearing out large sections of code and XAML until the problem disappears. Then put the last section back and tear things out more gently. Repeat until you find the change that makes the difference.
Run the application, break where a local variable references your UserControl, then explore the visual tree just above and below your UserControl in the Locals or Watch window. Look at each Visual's internal properties VisualOffset, VisualTransform, and VisualContentBounds. These properties will usually clue you in to what property is being set incorrectly, and from there you can figure out why.
Related
When I try to create a window using WPF (usually when the window is not re-sizable) this problem which has been shown in the below images happens. Although I can easily fix it by shrinking the inner frame a bit, I'm curious why it happens and in case it is a kind of Visual Studio form designer problem, why It's been happening for quite a long time.
Fixing the inner frame according to the designer view anchor points results in:
Don't position your controls absolutely. Remove the Height, Width, HorizontalAlignment and VerticalAlignment from your Border so that it takes the entire window. Then set your margin to an uniform one (Margin="10"). It will look perfect for all window sizes.
If you don't want to edit the XAML file manually, you can clear the properties in the designer by clicking on the small square named "Default" near every property.
Alright, try as I might, I cannot for the life of me get rid of this tiny little border around my buttons.
Edit: I should mention, in case I didn't make it clear, these are buttons with an image on them, set to flat with the button sized to the image.
Images below:
Number one, I can't for the life of me get these borders to GO AWAY. I've checked everything I can think of. They're:
flat
border 0
no margins
no padding
manually sized to the size of the image (75px)
in a table layout where the columns are all:
manually sized to the width of the image (75px)
borderless
Nothing seems to really "work" to get rid of these. If I size the columns down to be 74px instead of 75px, most of them go away, but a few remain. I've triple and quadruple checked the images, and they don't have anything that I can pick up on that should be causing this... no transparency around the borders, definitely no border that looks like that.
Which leads me to the second problem:
Settings button when dialog is small...
Settings button when dialog is stretched out.
Settings button is also in the same table layout panel.
I've checked all the settings on the table layout panel as well.. I can't find any padding or margin or anything settings that suggest this should be happening.
Does anyone have any experience with this? What am I missing..?
Simple solution: using directly a PictureBox as if it was a button. You can change your image on mouse over or mouse click.
Have you tried a Toolbar/strip/whatever it's called these days? Probably not going to help as I believe it pads on your behalf, but worth a shot.
In the end you can toss the buttons in the trash and write your own control. A single control that manages N buttons will work well here.
I don't understand your second problem. What's the problem? It'll be fixed if you roll your own control anyhow.
While not a fix for the spacing issue, as a workaround you can make that gray gradient currently "behind" the "tabs" and control panel image into a BackgroundImage for the TableLayoutPanel using BackgroundImageLayout of Stretch. While not fixing the spacing issue, it would make it unnoticeable.
Writing a winforms control has its challenges (experience speaking here). I would agree that that is whats needed however. Depending on your project you may consider using XAML and WPF. It provides that fine detail you seem to be looking for in you application.
There are ways to host XAML controls in a winform app, but if you went this route it would be best to create a native WPF application. The reverse is also true (winform controls in a WPF app).
Did you check if the image has transparent pixels around the graphic pixels you want?
May be a simple crop solution.
I am trying to remove the border of my WPF window in the design view/tab in Visual Studio. Please don't mistake this as a request to create a border less WPF window. I did that and it is working fine. What bothers me is that even if you have set WindowStyle = None, ResizeMode = NoResize, the design view/tab still shows a border around your window in the preview.
Is there a way to remove said border and have a 1:1 preview of the border less window as in Windows Forms?
Every question I have found in regards to this only asks how to remove the border of the actual application. I would like to remove it in the preview.
Any help would be very much appreciated :)
here is a screenshot of my problem:
This cannot be done as this is just how Visual Studio renders a window in design view (I think the frame is probably there so that you can distinguish when you are editing a Window rather than a UserControl).
Rather than try and find a solution to this I would ask myself if this is something I need to be spending time figuring out - after all you say that your program works correctly when being run. I think your time will be better spent writing code for your program rather than trying to play with the design time environment.
Update: In response to you comment, consider that the window frame will be different on every users machine depending on their operating system version (XP vs. Win7) or the theme the user has installed.
My computer has XP installed so the side borders are a lot thinner than those shown in design time so any content will be smaller (but only my a few pixels - 4 in my case; does your user interface design really depend on 4 pixels?).
When using a technology such as WPF you should not be designing your UI to fit to exact pixel sizes; you should be designing with min / max values or using layout containers that adjust to the size of the window as set by the user. Any regions in your UI (E.G. sidebar and main content) should be expressed as a ratio or percentage of one another; instead of saying "The side bar is 150 pixels wide and the main content area is 350 pixels wide" you should be saying "The side bar takes up a third of the window width and the main content takes two thirds".
Although the question is very old and have already been answered (kind of), I just realized: if you set WindowStyle="None", your undesired border is gone.
TextBox seems to work differently from others...
Say you want a different font, rounded corners, different colors, a tiled image for the background, reduced padding above/below the text (when I change the font on an individual TextBox they get a little too tall but there's a lot of wasted space), etc. How do you do this in Blend 4?
I'd like it to be in App.xaml so that it's used by default for all TextBox controls in the app.
I think everything you mentioned can be done using controltemplates.What is not working ?
Check this link
http://msdn.microsoft.com/en-us/library/ms752068%28v=vs.85%29.aspx
It will get you started for sure
I have a custom canvas that I can drop controls on, move, and resize. I need to be able to at least start with a pre-determined size but then allow re-sizing.
My problem is that I have a user control that doesn't appear to resize. I set Height and Width on the user control (works on drop). But then as the control is resized on the canvas the visual size stays the same (the sizing handles are changing). I can see the Height property changing (usercontrol.height) as the control is resized. But again, the appearance of the control stays the same size.
I had a thought that the inner container on the user control should be bound to the usercontrol.height but that didn't seem to help. (or maybe I didn't have the binding right).
On the same canvas, if the dropped control is for example, an Image control, I can set an explicit height on the drop and everything resizes as it should. So it seems to be UserControl thing.
So is there something special I need to do with UserControls to get the visuals to resize? Should I be using explicit height and width to get it all started?
Thanks for any help.
The WPF layout system can be confusing, as you've discovered. There is no substitute for a solid understanding of the layout and measurement system. If you plan on doing much WPF development, it's worth taking 20 minutes to read this article on the layout system and then experimenting for a while in an iterative environment such as Kaxaml until you feel comfortable.
The system is very logical. It won't take long for the penny to drop. Sorry for the indirect answer, but I don't believe there's enough information in your question to really explain what's going on.
You might also look at the HorizontalAlignment and VerticalAlignment properties.
Not a WPF expert but I believe you need to enable auto-sizing in order to achieve the scenario you are looking for. This is done by setting the Height/Width of a control to Double.NaN which essentially says, "I have no specific size". Once you do that, the control should resize to occupy available space based on the need of the control.