Implement an auto-resizing mechanism of editors - reactjs

I would like to implement a resizing mechanism for Editor 2:
The main purpose is to let the height of Editor 2 auto-resize so as to occupy the rest of the page after adding/removing Editor 1 and each resizing of the window.
In the beginning, there is only Editor 2 in the window. Click to toggle "Editor 1" allows to add or remove Editor 1.
The height of Editor 1 is implemented by calculateNextHeightFirst. It has minimum 3 rows, then is determined by the height of the content, but has maximum 10 rows.
After adding Editor 1, the resizing of Editor 2 needs to be triggered to occupy the rest of the page.
Resizing Editor 1 by adding or removing contents does not need to systematically trigger the resizing of Editor 2. It's especially the resizing of the window that triggers the resizing of Editor 2.
Here is my current code: https://stackblitz.com/edit/react-ts-5nkshr?file=EditorBasic.tsx,App.tsx,EditorPlus.tsx,index.html
The behaviour of the code satisfies my requirement described above. However, at least one thing I find not normal is, I need to manually set height: 72 as initial state of EditorPlus, which is same as the initial height of Editor 1 determined by calculateNextHeightFirst. Otherwise, after clicking Click to toggle "Editor 1", this.aRef.current.clientHeight would not be correctly set, thus the height of Editor 2 would not be well set.
Maybe I would need rare lifecycle methods such as getDerivedStateFromProps, does anyone confirm?
As this case involves event handlers, react Refs, React lifecycle, and editors, could anyone tell me if my code is properly implemented?
(* link in codereview: https://codereview.stackexchange.com/questions/282577 *)

Related

Automatically resize form and move controls when new ones are added or a text in a label grows

Beginner in Visual Studio here.
I'm trying to create an C# Windows Form application that simply displays a form to show some information about the local system.
I have created this form with the help of the VS designer:
As you can see, it consists of a simple panel with a PictureBox at the top, a label below it (both centered), three table layouts next to each other, and a button at the bottom. Never mind the label texts.
The rows of all the table layouts are set to absolute, this is because I want to programatically add rows to the end middle and right table layout if there are more than one local IP address in the computer and setting the rows to auto size or percentage would make alignment difficult if more rows are added.
Now, my problem is that I can't figure out how to make the form resize and move the controls (specifically move the 'OK' button down) when more rows are added.
I have tried anchoring the button to the bottom edge of the form as well as the bottom of the middle table, both produce the same result: the button stays where it is and the new rows overlap it, like this
I would also like to know how to have the form resize to fit the contents of the labels. For example, if the text in one of the labels inside the layout is bigger than the column width, I'd like to have the form grow to accommodate it. Likewise, I'd like the form to shrink to fit the largest text.
I realize that this may not be the most efficient or easiest way to create this particular form, but it is what I've come up with, I of course welcome any suggestions in that regard. It is important to maintain alignment between the rows of all table layouts.
Thanks in advance.
Use a data grid and add controls to it if an add button is pressed. You can scroll through the rows so you won't need to adjust the height of the form

Is there a pagination option for WPF/Silverlight RichEditControls?

I have a RichEditControl with a given width and height. It's usually a one page document, but sometimes documents can get longer than that. When that happens, the RichEditControl adds a page to it underneath the current one, and a vertical scroll bar to navigate both.
Is there a way to make the document show only one page at a time, so I see Page 1 by default until I write enough to get a page jump, and then I only see page 2 in screen?
This would probably require some sort of pagination, which I imagine is not built-in, so my derived question is:
Since there is no ability to re-size control based on content size (source), would it be better to just count the number of pages, and make the RichEditControl height a multiple of that number? Since this is all inside a bigger ScrollViewer, I'm trying to avoid more inner scroll bars.

How to Move content to next page in WPF Form

I am new in WPF if there is something wrong please co-operate.Here i require some idea from experts.
I am working on one application in which i have to show some content on WPF form after filling the fields present on the form.On the same form i also have a print option.
Check this image.This is my form here part in the red block is generated at runtime.When i click on the print button it only show the visible part on the paper and skip the remaining part.
Problem :
How i can move the remaining part of the form which is under scroll to next page when i click on print.
For example in the given image we can see only 2 bulls eye completely and next 2 partially.How i can shift this remaining part to next page only when i click on print.
The answer is quite easy : don't rely on your window to do the printing, but build the visual you want then print it.
For instance, you must have a function that creates dynamically the circles and so on, then adds them to a Panel. What you might do is to print the Panel.
Or if you prefer, you might build Dynamically a new window, where you put all the Data you want printed as you want, then print the window. The advantage of this method is that it is more flexible for the content (if you want a header/footer) and also you can watch the content easily for debug. Note that even if the Window content is dynamic, you can have a base window for printing that avoids you to do too much xaml with code (expl : you might have TextBox bound to a PrintTitle property that you setup in the constructor of the Print Window...).
Notice that visual that were not rendered on screen will not print. Be sure, to avoid the common issues, to have a look at this article from this great site, switch on the code, here :
http://www.switchonthecode.com/tutorials/printing-in-wpf
Edit (reply to the question in comment):
1) If you have fixed number of bulls eyes, just make one Window for that number and Print it, this is waaaay easier.
2) To put Visuals in pages instead of rows, you'll have to rely on page Width/Height. What matters is the size of your control vs size of page. In the example, they build (in OnRender) Controls having LineHeight, LineWidth as size. Do the same : Try to put as many line of control as you can such as
(Control Height + margin )*NumberOfControlPerPage < Page Height.
Then you have to change OnRender to render controls instead of Rows made with rectangle+text. Pack your controls two by two in Horizontal StackPanels Then pack those StackPanel into a vertical StackPanel, then render. You have to keep track for each page which control was rendered last, then resume rendering at the following control.
Please follow this link.This is the basic which i got after searching in web world.Using this basic detail you can do any thing with print in WPF

Why don't my scrollbars work properly when programmatically hiding rows in silverlight Datagrid?

I have a Silverlight datagrid with custom code that allows for +/- buttons on the lefthand side and can display a table with a tree structure. The +/- buttons are bound to a IsExpanded property on my ViewModelRows, as I call them. The visibility of rows is bound to an IsVisible property on the ViewModelRows which is determined based on whether or not all of the parent rows are expanded. Straightforward enough.
This code works fine in that if I scroll up and down the grid with PageUp/PageDown or the arrow keys, all the right rows are hidden and everything has the right structure and I can play with the +/- buttons to my hearts content. However, the vertical scroll bar on the right hand side, although it starts off the correct size and it scrolls through the rows smoothly, when I collapse rows and then re-expand them, doesn't go back to its correct size. The scrollbar can still usually be moved around to scroll through the whole collection, but because it is too big, once the bar moves to the bottom, there are still more rows to go through and it sort of jerkily shoots all the way down to the bottom or sometimes fails to scroll at all. This is pretty hard to describe so I included a screenshot with the black lines drawn on to show the difference in scrollbar length even though the two grids have the same number of rows expanded.
I think this might be a bug related to the way the Datagrid does virtualization of rows. It seems to me like it isn't properly keeping track of how tall each row is supposed to be when expansion states change. Is there a way to programmatically "poke" (read hack) it to recalculate its scrollbar size on LoadingRow or something ugly like that? I'd include a code sample but there's 2 c# files and 1 xaml file so I wanted to see if anyone else has heard of this sort of issue before I try to make it reproducible in a self-contained way. Once again, scrolling with the arrow keys works fine so I'm pretty sure the underlying logic and binding is working, there's just some issue with the row height not being calculated properly.
Since I'm a new user, it won't let me use image tags so here's the link to a picture of the problem:
http://img210.imageshack.us/img210/8760/messedupscrollbars.png
This is a known issue according to what I read today (and is apparently still an issue in the as-yet-unreleased Silverlight 4):
http://forums.silverlight.net/forums/p/153997/343790.aspx

Get airport display type transition when data changes

A client has asked for a display to flick over like an airport display screen, ie each row flicks over when information changes.
I am not sure which is the best control to use, or the method of getting each row to transform one after the other.
any suggestions woul b gratfully accepted
John
Here's what I would do in general concept..
Make a regular panel of, say 50px high. (This is arbitrary but this panel just holds the size in place so the control doesn't shrink with its contents.)
Create a panel inside that one that will be the 'animated' panel.
When it's time for information to animate, create a storyboard that uses a transformation to "stretch" the height down to 0, change the content to the updated information, then tranform stretch the height back to 50px. This will create the illusion that the panel is flipping over.
If you make this a user control, then you could simply add however many "rows" you needed of this control to a StackPanel to make your screen.
The best way of representing this effect easily is to randomize the text during the change.
Patrick Long implemented this effect as a custom animation here

Resources