Drawing on multi screen with WPF - c#

I've created an application that display a topmost window on each monitor, to cover all available place.
Then, I would like to allow to draw a rectangle on the windows. So, I create a rectangle that I add to the window when mouse move and mouse click ...
This is working except when I'm drawing a rectangle that starts on a window and finish on another one. Of course, because it's not the same window ...
How can I do to allow drawing on both window at the same time ?
Thanks for your help,

You can create a window that stretchs across both screens.
Use the Screens collection in System.Windows.Forms (or wherever it is in WPF) and the WorkingArea property to calculate the correct extents of the window.
Be careful with multi monitor setups where primary screens are the other side from secondary screens or if the screens are stacked on top of each other.
We do this successfully in our application.

Another (and probably better) approach to this would be to have the data about the rectangles stored in a model class (using a MVVM approach). Then each view looks at a separate part of a virtual canvas. This way they both listen to updates of the data from the model and draw their section of the display accordingly.

Related

How to fit c# application to monitor with different resolution?

I usually work with two monitors and two differents resolutions. 1366x768 and 1920x1080.
My prob is that my WPF application doesn't fit the monitor with biggest resolution when it runs on monitor 1366x768.
I found differents solutions but none of them work for me.
My last attempt is :
Screen actualScreen = Screen.FromHandle(new WindowInteropHelper(App.Current.MainWindow).Handle);
App.Current.MainWindow.Height = actualScreen.Bounds.Height;
App.Current.MainWindow.Width = actualScreen.Bounds.Width;
Any idea?
Rather than trying to layout your screen using a fixed resolution size, use other properties of the GUI controls to:
Dock along side another control (beside, above, or below).
Add minimum padding between the control and the control it docks next to.
Set a minimum size for the control. That can force scroll bars on the Application window if the user resizes it too small or the monitor's resolution is not large enough to fit your applications layout.
Those are some of the "responsive design" properties of a control in WPF.
My advice when laying out a Panel: start with placing the primary control and then fit the other controls on that Panel in relation to that primary Control (using the Alignment/Margin properties).

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.

Display Menubar On Mouse Release

I have displayed an image in a Windows form. The user can draw a rectangle on top of this. When the user releases the mouse after drawing the image, I need to display a few buttons, similarly to showing a tooltip.
So far, I have:
Created a new WinForm named Toolbar
Removed titlebar
Added tooltip control on the WinForm
Added 4 buttons
Being an ASP.NET web developer I perceive the following items as missing:
Handle MouseUp event
Get co-ordinates of the mouse release location (say x1, y1)
Render my Toolbar Winform with top position as (x1, y1)
Let the respective buttons handle their responsibilities in their event handlers
Can you please help me validate my approach and show some pointers for the code?
You can use ContextMenuStrip (info from MSDN)
With 4 Items and just show it on MouseUp event with:
contextMenuStrip1.Show(Cursor.Position);
Two approaches:
This. You create a Popup form, which will be automatically hidden similar to popup menu and can host controls (buttons).
Display (draw) buttons inside your control, on top of its content (on top of graphics which you drawn), process mouse clicks, perform operations accordingly. Most difficult will be to draw nice looking buttons, to example, by using VisualStyleRenderer (xp-style).
Do not aks big question (containing many small one), rather try something, if it doesn't work or you are not satisfied with results, then come here and ask question (while also telling what you are trying to do). This way you will get help very quickly.

Most efficient way to draw on the top of the Screen (Overlay layer). in .Net?

I want to draw elements and move them on the top of the screen whatever the user is doing.
If I go in C# with Windows Forms I have 2 solutions :
Create a transparent-background Form and Draw on it,
override the OnPaint event
invalidate every X ms
Create a transparent-background Form for each element created (Rectangle, Circle, etc.).
just move the forms and do not force redraw
Do form gestion is a way more costful or the Paint refresh is ?
Do I have to go with WPF, Silverlight, C or Windows Form is fine ?
I can suggest how it could be implemented in WPF - there you can make use Transform property available in many UI-related classes and TranslateTransform class to move these objects in efficient way.
But it really depends on how many moving objects you are planning to have in window simultaneously. In certain cases it could be more efficient to switch to some specific game-oriented solutions like XNA and similar.

WinForms (.NET) Button Anchoring when Maximized

Ok, I have googled, but maybe I put my search in weirdly. :/
I have a VB.NET WinForms application. I have the anchor properties set for all the controls so that it will resize all the controls to look decent when the form is maximized. (Haven't gotten around to manual resizing yet however).
Anyway, the problem:
I go to set the same properties for a button (testing with a single button for now) on the main GUI form/picture. When I go to run the program via F5, it looks decent. But when I maximize the form, the entire button covers up more than it should.
I've taken screenshots of the form so you can see a visual of what I'm talking about. :/
Before: http://zack.scudstorm.com/before.png
After: http://zack.scudstorm.com/after.png
What other propert(y|ies) do I need to set for the buttons to show up correctly? :/ (The buttons go over the boxes that say, for example, "1-1", "2-3", etc.
Thanks,
-Zack
Seems like you have anchored top-left and bottom-right when what you want is just top-left.
Edit: If it's just an image that does not change when the winform changes, then don't anchor your buttons at all. Just put them where they go. If you are scaling the image, then I would either detect the clicks on the image and do the scaling math or do the scaling math and set my buttons in code in the Form.OnResize event.
As it appears that your goal is just to be able to handle clicks on the "computers"...
One option that can be useful for this sort of task is to create an "overlay" bitmap (not displayed, but which is the exact same size as your source bitmap) which uses different colors to represent all the clickable regions. (e.g. (R=0,G=0,B=0) for computer 0, (0,0,1) for computer 1, etc)
You could even generate this bitmap somewhat automatically without too much trouble (If you have a mode where you can click the top left and then bottom right corners of the image to define a new region)
When the mouse is clicked, you can check the pixel at the scaled coordinates of the mouse position in the overlay and determine what their click corresponds to. This can be a lot easier than creating loads of controls, and makes it a lot easier to have clickable regions that aren't rectangular.

Categories

Resources