I'm trying to figure out, how to write Responsive UI in XAML.
I would like to have 2 controls on my window. MinWidth of each control id 400.
If Width of windows is >800, Width of each control should be 50%, if we change widht of window to <800, each control should have 100% of window.
It's pretty simple to set up something like that with HTML/CSS, and right now I'm trying do it in WPF without progress.
Can you help me with that?
I tried to handle that with WrapPanel, but it does not work. It wraps properly, but does not change width of control.
I have two ideas for doing this:
Using a binding converter, and bind the width/height of each item to the container width/height.
Creating a custom panel, with de desired layout.
Only a few ideas, hope helps.
Define resources based on screen revolution.
In design mode, using dynamic key to avoid errors.
In runtime, dynamically add resources into App.
Related
Currently I am struggling to correctly size wpf controls. Therefore I'd like to know how dimensions like width are handed down the hierarchy in an xaml file. What happens for example if a width value is overwritten by a set MinWidth value? How and when are the other elements resized and what events are involved? Thanks for your support.
There is many topics in this question, it's looks like you're looking all information or manual about sizing controls.
For the first question basically a width property for a control is only for that control, not for the child controls. The layout (for example a Grid) of the controls plays an important role because sometimes they stretch, center or moves the controls, but a fixed number width works most of the time on the control you want to resize.
About MinWidth is not overwritten by Width property, yo can set less width of MinWidth, the value is stored but the control will be drawed with the MinWidth value because is higher in that case.
About Events, there is an Event called "SizeChanged" that triggers when the Height or Width is changed, but it's in execution time, there is no event that are triggering in design mode.
Try to practice with Grids, research about layouts like Grids, Canvas, StackPanels, etc. Maybe there is your answer. Canvas let you draw free, but I don't recomend get used to use canvas.
I've convertet the Project from https://silverlightcontrib.codeplex.com/ to WPF (github https://github.com/jogibear9988/silverlightcontrib) to get EMF/WMF metafile support in WPF.
Now my Probjem is, the EMF Class uses a ContentControl for displaying it's Content. The Content is also set, but nothing is displayed. If I check it in WPF-Inspector, I see that the EMF Control has it's Content listed in the "Logical-Tree" but not in the Visual! Can anyone help me out with this?
The current state of the Fork is Online (if anyone will look at the Code!)
If I look in snoop everything seems alright:
You see, the Content Presenter has a Content set and Filled, but it does not get into the Visual Tree...
Here is the Logical Tree from WPF Inspector:
And here the Visual:
I am not very familiar with Silverlight, but in WPF when you override MeasureOverride(...) and ArrangeOverride(...) you have to measure and arrange the contol's children so they can measure and arrange their children and so on.
In your case, you have to include calls to base.MeasureOverride(...) and base.ArrangeOverride(...) in the Emf class that inherits from ContentControl.
The two most likely issues are that your ContentControl is using a ControlTemplate that has no ContentPresenter (on one that is specifically using something other than the default Content property) or that it is using an empty DataTemplate as its ContentTemplate. You should be able to check either of these by inspecting at runtime.
I haven't quite figured this out, but it's something to do with the sizing. In Snoop it is showing a RenderSize of 0,0 and in inspector the actual height/width is also showing as 0 - you can see the red highlight inspector draws around the element is a small dot rather than a rectangle. I am guessing there's some Silverlight specific behaviour in the EMF control that doesn't port directly to WPF.
I have a panel, which I add controls programmatically to it. I want each control stay in a far from other controls and not stay on top of them.
for this purpose I can calculate a position for each control based on Panel's size, but it seems a bit odd.
Is there a way to make controls be added in a line and when it ended they be added in another line?
You can use a FlowLayoutPanel to achieve what you're describing. It's under Containers in the ToolBox. Set the direction to horizontal and it will flow from left to right, and wrap when it needs to.
I believe the WrapPanel class does what you're describing in WPF. Or the FlowLayoutPanel in WinForms.
You have a few options. You can use one of the containers such as FlowLayoutPanel or TableLayoutPanel. You can also nest them in each other. And you have to set the Margin property for each control you add to the containers.
Sadly the Windows Forms technology lacks on this part a little, while WPF has a very rich layout system. Even somethings like Margin doesn't always work as expected.
I have a Window that has dynamic width and height and a user control as content.
Based on several conditions in my view model several controls of my user control are visible or not visible.
Using SizeToContent.WidthAndHeight nicely WPF make my window appears perfectly with the correct dimensions to fit everything that has to be visible according to my Bindings that take effect during Loaded event of my user control.
My problem is that I have a TextBox with no defined width where if the user types in too many characters it forces my Window to grow in width, and I don't want that!
Is there a way to avoid that without writing to much code and without loosing the functionality that if user resizes the window, everything in there change automatically to fit the new size?
What I want is that every control (or the window itself) will keep its current size and not to grow outside of current window's bounds.
I hope I made clear my problem and thank you in advance!
I think you are searching for the MaxWidth property of the TextBox, try to bind it to the Textbox-es parent controls Width and then if you type a longer text then it shouldn't grow larger.
EDIT > SOLVED: It turns out that I had set all of the UI elements' font properties to be 14pt Arial, but not the usercontrol itself, so when it was drawing it on the form, it was resizing it all. Changing the usercontrol's font size to 14pt Arial, and then repositioning/resizing everything fixed it.
I started working on the UI for an app I'm making. The app has a devexpress tab control, and initially I was just placing all of my controls in there to see what it'd look like and to work out any layout issues. Well, I decide to pull out all of the ui elements for each tabpage and toss them into a UserControl and to have that UserControl fill the tab page.
The problem is that it looks perfectly normal (ie. the same as before) when in the usercontrol but when I bring that over to the tab page, all of the ui elements are HUGE (about double in size, but not exactly double).
Here's some images to show you what I mean.
Edit> Note: This is a winforms app.
UserControl:
edit > images removed
Form:
edit > images removed
It turns out that the objects are being resized. I checked the .Size property of the ui elements after the usercontrol.load event and they are much larger than they are supposed to be. This happens if there is the anchoring as I'd like it, all top-left anchored and no anchoring at all.
The AutoScaleMode of the UserControl should be at "None"...
Hard to say without seeing code...
[edit]
Well if you have no code then I only have one idea. The controls inside your user control have anchors that are being adjusted to the size of the parent control. The parent control could be larger than expected making all the anchors adjust with the parent. This would then make them all appear too big. This is my only idea...
[/edit]