WPF Container That Applies Transformations Recursively - c#

I have a UserControl that is composed of many controls such as Buttons and other custom controls.
The UserControl takes care of various animations that interact with the controls as well.
Now, I'd like to use my control upside down, or sideways. Is there a way to put everything into a container, and simply rotate the container, so that everything that the control did works as before, but rotated (i.e. the rotate transformation is applied recursively)?
Currently it is in a Grid.
EDIT: Also, is it possible to have all the controls align together as well? Currently they all align to middle bottom. What would you set the alignment of all controls to so that you could change the alignment of the container and they would all align similarly.

Setting the RenderTransform or LayoutTransform of the container will do this for you. Which one depends on your needs -- a short and sweet explanation of the difference can be found here:
http://www.scottlogic.co.uk/blog/colin/2008/12/layouttransform-vs-rendertransform-whats-the-difference/
I'm not sure the xaml for this, but in C# it's as simple as:
grid.RenderTransform = new RotateTransform(90);

Related

WPF - Create solid layout without designer

I'm blind and would like to use WPF as it is more accessible in many ways. However, the designer used to position elements onscreen isn't accessible.
In Winforms, I used the size and location attributes of each control to arange them in a way they didn't overlap onscreen. This had to do with logic, not sight, so it went fairly well.
In WPF, things are a bit different, though. I know there are several layout containers like Dockpanel, Stackpanel etc. However I am uncertain whether they would keep the controls from overlapping.
So my question is: If you couldn't see, how would you arrange controls to make sure they don't overlap? Which layout controls would you use?
The easiest way to place controls in WPF without overlapping them is to use <Grid.RowDefinitions>and <Grid.ColumnDefinitions>.
You can either define your width and heights with fixed or relative values (using '*').
For good and simple explanation I can suggest these two sites:
https://www.wpftutorial.net/GridLayout.html
https://www.wpf-tutorial.com/panels/grid-rows-and-columns/
Within the grid you can place again other controls, panels or even other grids with their own row and column definition, allowing for creative designs.
Yes, they would keep the controls from overlapping. This is actually an advantage of WPF: its containers place the controls relative to each other and other controls so they do not overlap and resize or move on window resizing. If the control size will exceed the size of the container, the part of the control will be hidden, not overlapping over it's neighbours. That relates to any container, except for canvas, where the elements are placed by absolute coordinates.

Toolbar on right side of the screen in wpf

I am trying to make a WPF application in which there is a drag able toolbar on the screen through which user can select different type of tools and use it on canvas. Also can someone tell me how to make a transparent canvas. A good example would be from this picture in which there is drag able toolbar on right side of the picture. And the user can also work on any window he wants. I am new to WPF and I am trying to find a solution to my problem for quite a while now. Can someone guide me in the right direction...
Background DP default value is null. When a Background is set to null the displayed Color is White and mouse interactions don't work. You need to set Canvas's, ListBox's and ListBoxItem's Background to Transparent to see the Background of the Parent Control
<Canvas Background="Transparent"/>
Rather than a toolbar, think of that as a window.
I would take a look at avalondock.
A transparent canvas:
<Canvas Background="Transparent"
As an aside, this is a couple of steps on from wpf beginner level.
If you take a look at this:
https://imgur.com/4n7vH8k
The user is designing a game scenario. They drag units out the panel on the left ( it's a treeview ) onto the canvas on the right. Only this is not just a plain canvas, it's an itemscontrol with a canvas as the itemspresenter. That allows me to template out the units from a collection of unit view models. It's using the mvvm pattern.
If you've not come across this technique it's a bit strange. Here's a couple of samples to take a look at which templates out different viewmodels into different UI objects. https://1drv.ms/u/s!AmPvL3r385QhgooJ94uO6PopIDs4lQ
https://1drv.ms/u/s!AmPvL3r385QhgooLcGrZOSwFswa-Dg
The datatype is used to decide what you get in the view for what viewmodel.
You have a bit of a complication in that you decided you want a dockable panel usable in multiple windows. Maybe that's not a must have.
Drag drop in my app isn't actually drag drop and relies on an odd aspect of a canvas. They don't clip, so you can add something to a canvas but have it positioned off the canvas.
As you start dragging a unit, it's viewmodel is added to the collection bound to my units itemscontrol. That templates it into the canvas as a piece. I work out the location compared to the canvas, so it'll have a negative X aspect which I bind to Canvas.Left.
Each unit is inside a thumb. A thumb is the rectangle you drag up and down on or side to side on a slider. They are designed for dragging. This way dragging is smooth and I can easily have a unit under the cursor that's being dragged.

How to make controls stay in a distance of each other when adding them programmatically?

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.

How to make custom shaped panel in WPF?

I am facing a problem that have kind of already been asked here before, as far as I have seen.
I read most of these but didn't find the right answer.
This is what I need:
Complex shaped zone (i.e: countries, states..)
Having possibility to get events on it (especially mouse's)
Possibility to place some conrols in it (i.e: images, buttons)
I saw that some uses usercontrols, controltemplates.. But how should I do for that kind of shape ? Most of questions was for some basic mix of standard shapes.
(I saw with Blend that we can make path object with a pen, is there a way to use this to define the shape of a zone ?)
Thanks.
Create your own control and have its main container be a Canvas. Have the canvas background be transparent and then you can place all the controls you want on it. You can use a Polygon as your main shape inside the Canvas and place all the controls you want on the Canvas (but I guess for your purpose, you would want to make sure to not place them outside of the area covered by the polygon.
Let each object you use handle the mousedown event then you can individually drag them. When mousedown occurs, use the CaptureMouse() method on the object you clicked so that all dragging (on or off of the main window) will still be captured by the object you clicked. Make sure to call ReleaseMouse() in the mouseup event.
You can create as many instances of your control as you need. All with different shapes defined by the polygon each one contains. You can slap all of these objects on a single grid or canvas, and you're good to go.
You can use the PathPanel class that is provided in the Expression Blend SDK.
More information here

User Interface Layout in c#

Kinda new in Microsoft visual C#. I have made a simple program. Everything is working perfectly fine, unfortunately the tricky part for me is i do not know how to layout my objects properly. I would like to copy the layout of the Microsoft visual C# interface, wherein the panels adjust to their predefined ratio and proportion whenever the main form is re-sized and the user may adjust the width and height of each panel. Any readings or code would be a lot of Help. THANKS A LOT!
You could do a number of things:
Allow automatic layout using something like a FlowLayoutPanel
Allow resizing of controls using a Splitter
Look at custom implementations to provide more advanced functionality Collapsible Splitter
Well follow these tutorial links to know about resizing in windows
using Dock and Anchor property. Along this the layout control will
help you to manage the layout - FlowLayoutPanel and
TableLayoutPanel, Panel, GroupBox etc.
Designing Resizable Windows Forms in Visual Studio .NET
Manage WinForm controls using the Anchor and Dock properties
This one is much better to understand.
For a simple start the anchor property is what you want. so for instance if you set all four anchors for that left hand control, and the parent window changes size it will will resize proportionally.
After that it starts getting complicated. Adding panels and then putting your controls inside them. Setting Dock to left, or top or fill. Grow and shink on scrollable controls. Splitter bars.
And last ditch handling resize events and calculating positions and sizes.
Sit down and have a think about what you want to happen, play around with minimum and maximum height and widths, ie no point in working out waht your form is going to look like when it's postage stamp sized...
PS Don't forget VS allows floating panels, and persists (well some times sort of) user choices in the layout, that's a bigger job.
Place a TableLayoutPanel as the base control, anchor it to all sides, define as many columns and rows as you like with "percentage" sizes.
Then place different sections of your form in different table cells. Properly dock your controls in each cell.
Can also use a split container above table if needed.
The ideal order should be like below
SplitContainer
TableLayoutPanel
Panel
Controls

Categories

Resources