windows form make a form starts at a specific position - css

I made a simple program with two forms. the first form is small, the second one is large.
I already handled the screen resolution thing so the scroll is working and I tested the application on many screen sizes and resolutions.
my problem is this:
when I go from the first form to the second form, the second form doesn't start from the top left of the screen so the result is this:
I have to drag it to the top to see the two buttons at the bottom like this:
my question is: is there a way to make this form starts as in the second image, not the first one?

There is a proprety called StartPosition with it you can define the startup position of a form
PS : if you want a costum position for exemple if you wan it to be in the coordinate : X=15 and Y =20
in the FormLoad Event (double click the form ;) ) put this :
Form1.Location = new Point(15, 20);
OR THIS :
Form1.Top=20;
Form1.Left=15;

Forms.StartPosition is the property to work with.
Usually setting it to CenterParent or CenterScreen should work well for your requirement.
Instead if you want to fine tune the position of the form then you should set the property to Manual and then work with the Location property (a Point structure) calculating the correct location desidered.
Also, keep in mind that if you want to manually work with Location and Size of the form you should do it overriding the OnLoad event, as explained in this question

Related

Adobe Scene7 BasicZoomViewer: How to reset zoom

Question
I'm working with Adobe Scene7 BasicZoomViewer and I'm looking for a way to tell the ZoomViewer to reset the zoom so that the user is no longer zoomed in on an image but instead will show the default "zoom" level.
What I've found
The closest thing I found to what I need is this reset property ZoomView.reset which "Resets the viewport when the frame (image) changes. If set to 0 it preserves the current viewport with the best possible fit while preserving the aspect ratio of the newly set image".
This looks close to something I need but it states that it will reset or preserve the aspect ratio when a new image has been inserted but I am not inserting new images.
Demo from Adobe
There is a button on the image that the API inserts into the page that resets the zoom level. Adobe provides a demo page that shows what I'm working with. If you look at the bottom left, the right-most button is the reset button. When clicked, it has to make some kind of API call and I need to figure out which one it is.
Edit
I've been able to find a minified version of the BasicZoomViewer and I am currently attempting to make sense of the code.
There is an event listener placed on the "Zoom Reset Button" that just simply calls a reset() method on line 274 in the uglified version of the file. Currently, I am trying to make sense of the file and figure out how to access this method.
c.zoomResetButton.addEventListener("click", function () {
c.zoomView.zoomReset()
});
I will be answering my own question. If someone finds a better way please feel free to answer as well.
tldr;
Create a variable to hold the instance of your s7viewers.BasicZoomViewer() and inside of that you can access the event handlers and much more.
Example of calling the reset zoom handler
// instantiate the s7viewers class and save it in a variable
var s7BasicZoomViewer = new s7viewers.BasicZoomViewer({
containerId: 's7viewer',
params: {
asset: assetUrl,
serverurl: serverUrl
})
// example of how to call the "zoomReset()" method
s7BasicZoomViewer.zoomResetButton.component.events.click[0].handler()
Explanation
After digging through the minified code that was uglified I found an event listener on the s7zoomresetbutton DOM class name, or perhaps it's watching for the ID of that DOM element which is the same ID as the container div for your S7 BasicZoom Viewer plus some added text to make this ID unique. For example, if the container div is s7viewer then the reset zoom button will have an ID of s7viewer_zoomresetbutton.
Now, going through the code I found this event listener which let me know there must be some way to call the zoomReset() method.
c.zoomResetButton.addEventListener("click", function () {
c.zoomView.zoomReset()
});
In the code above, the value of c is this or in other words it's the instance of your S7 BasicViewerZoom and in my case I have multiple depending on how many images I need to zoom on.
When instantiating the s7viewers class you can then reference that instance later and access the event handlers on each button and other properties and methods.
From there it was just looking through the object returned from the instance and calling the handler for the reset button.

ng-animate : conditionally switching "back" transition (BUG?)

Hi everyone,
reading through this google group and the fiddles and blogpost linked from there, I managed to get page transitions working with ng-animate.
Here's my Fiddle
the fiddle is nicely commented, please let me know if anything's unclear
By setting a 'transitionClass' (either .LR or .RL) on the ng-view I was able to trigger different css-transitions for every view change.
Now, what I want to do, is manually applying a "back" transition in case of changing the view one step back, no matter whether that step back is caused by a link within the app or the browser's back button.
To do so, within app.run(), I'm listening for $locationChangeStart, saving the current url slug and then checking against it on the next $locationChangeStart to determine whether we're going back one page. If that's the case, the "back" transition is applied.
This works pretty well, except for...
The entering page (.page-enter, .page-enter-active) is transitioning as expected, while the leaving page (.page-leave, .page-leave-active) seems to be stuck on the previously used transition.
I'd expect, setting a transitionClass 'LR' on the ng-view, that both pages, entering and leaving, use the css transition for '.LR page-enter' and 'LR page-leave'.
What seems to happen instead: If the transitionClass was 'ANY' before, the ng-animate will use '.LR page-enter' for the entering page and '.ANY page-leave' for the leaving page.
Reproducing the 'bug':
App starts on Page 1. Go from 1 to 2. Now go from 2 to 3, this transition is broken. Go from 3 to 1, this transition works as expected. Both transitions are 'RL' (Right To Left), so they should look the same. The only difference being that page 2 enters 'LR' while page 3 enters 'RL'. So, actually, page 1 will use the '.enter-active' transition that was originally set for page 3 when changing from 2 to 3.
Is this the expected behavior?
I'm majorly confuzzled right now, but only working with angular for the last week or so and ng-animate being relatively new feature I might very well be missing something. So before reporting a bug or anything I'd welcome any input on this.
Thanks!
Ok, so based on the comments I'm pretty sure you want the incoming page to also determine exit animations to apply to the outgoing page. So you really need your $locationChange code.
It also looks like the problem you are seeing is that you are setting a class on the parent independently on the incoming page but there is nothing to keep the animations waiting for this class change to occur.
The simplest fix seems to be to make the ng-animate depend on your changing variable to determine the animation class names:
<ng-view ng-animate="transitionClass"></ng-view>
then the CSS selectors just collapse into single classes:
.LR-enter-active {
...
}
(where transitionClass is still being set on the $rootScope in the locationChangeStart:)
$rootScope.$on("$locationChangeStart", function (event, next, current) {
...
http://jsfiddle.net/9XPVX/4/

IVideoWindow interface does not show video frames properly in UserControl

I am using DirectShow.NET library [ http://directshownet.sourceforge.net/ ] and I use below code in order to show video streams.
videowindow.put_Owner(handle);
videowindow.put_WindowStyle(WindowStyle.Child | WindowStyle.ClipChildren);
videowindow.put_WindowState(DirectShowLib.WindowState.Show);
Note: The handle is System.Windows.Forms.UserControl handle [ this->Handle]
The problem is that:
In my user control the video frames are not shown properly: I see half
of the video frame and the other half is out of screen.
Also when I scale my user control, the video stream frames are not
scaled.
What may cause this ? How can i fix it?
Update:
Based on Roman Answer I added following code:
videoWindow.SetWindowPosition(this.ClientRectangle.Left,
this.ClientRectangle.Top,
this.ClientRectangle.Width,
this.ClientRectangle.Height);
And Now I can able to see video frame in my user control rectangle properly....
Additionally to putting video renderer's window as a child control and providing window stypes, you should be setting IVideoWindow.SetWindowPosition. You are also responsible to update it when layout of your window changes.

Performance issue with ASP.NET page with many (hundreds of) CollapsiblePanelExtenders

I'm maintaining an ASP.NET site where users can log on to register some set of data (for statistical purposes). One user registers data for a set of units, and for each of these units a set of forms are to be filled out (with a handful of fields in each form, but that doesn't matter here). One scenario is that a user has 12 units, and in each of these units there is 25 forms to be filled, meaning a total of 300 forms.
The ASP.NET page for registering these data is made the following way: each form is in a panel that can be collapsed using an AjaxControlToolkit CollapsiblePanelExtender, and all forms in a unit is inside another panel that also can be collapsed. The result is that you have a tree view-like structure with the units on the top, and under each unit you can expand a set of forms, and further each form can be expanded to fill data (the page is loaded with all panels collapsed by default).
The page is generated completely dynamically (as forms can be added in a database), and for generating the CollapsiblePanelExtenders I have the following code:
private CollapsiblePanelExtender GenerateCollapsiblePanelExtender(string id, Panel headerPanel, Panel contentPanel)
{
CollapsiblePanelExtender collapsiblePanel = new CollapsiblePanelExtender();
collapsiblePanel.ID = id + ID_COLLAPSIBLE_PANEL_POSTFIX;
collapsiblePanel.TargetControlID = contentPanel.ID;
collapsiblePanel.CollapseControlID = headerPanel.ID;
collapsiblePanel.ExpandControlID = headerPanel.ID;
collapsiblePanel.Collapsed = true;
collapsiblePanel.BehaviorID = collapsiblePanel.ID + ID_BEHAVIOUR_POSTFIX;
return collapsiblePanel;
}
With one user having 12 units each with 25 forms, this means a total of 312 CollapsiblePanelExtenders. As I said, they are all set to be collapsed by default, but here's the problem:
When the page loads, they all appear to be expanded, and then the browser "starts collapsing them". This however takes a very long time (in Firefox I even get a warning about an unresponsive script, IE and Chrome only takes forever but without the warning). When all the "collapsing" is complete it works smooth to open and close single panels, but users have complained about the extremely slow initial loading.
So my question is simple: is there a way to optimize this so that the loading goes smoother? Is it for instance possible to only load the header panels in each CollapsiblePanelExtender initially, and then load the content panel asynchronously in some way?
One final clarification:
I know I could simply change the design of the page to only include one unit and thus reducing size of the contents drastically, but I hope to avoid this (users prefer the way with everything in one page). It would also mean a rather large change to the logic of the page (yes, I know - it's a poor code base at that point)
After asking some more around other places, I finally managed to solve this issue. The solution was to skip the CollapsiblePanelExtenders altogether, and instead use jQuery to handle the collapsing/extending.
In my structure, all header panels use the css class HeaderPanel, and all content panels use the css class ContentPanel (all of these are hidden by default). I can then use the following script to handle all the collapse/expand logic:
<script language="javascript">
$(document).ready(function() {
$("div.HeaderPanel").toggle(
function() {
$(this).next("div.ContentPanel").show("slow");
},
function() {
$(this).next("div.ContentPanel").hide("slow");
});
});
</script>
The solution was really quite simple, and it works like a charm! The collapsing/extending is soo much smoother and nicer than what it looked like when I used the CollapsiblePanelExtenders, and the page loads really fast as well :)

dragging components in flex

so I am trying to drag around some images in a canvas.
I am adding eventlisteners to the components and calling startDrag() and stopDrag() to pick them up and stuff:
component.addEventListener(MouseEvent.MOUSE_DOWN, component.startDrag)
The problem is that it is selecting the image at its (0,0) location and not where I initially click on it. So there's a sudden "jump" when I click on the image. It is not smooth.
I noticed that startDrag() has two default parameters, one of them is lockCenter and it is default to false. Maybe do I set it equal to true somehow? (I don't know how to pass arguments to my second parameter in addeventlistener)
Another question: if I want to add more conditions to it, like make a new function that uses component.startDrag(), how do I pass the component to this function while adding event listener to it at the same time?
for example: I want to do:
component.addEventListener(MouseEvent.MOUSE_DOWN, some_other_function);
where some_other_function uses component.startDrag();
Thanks!
You should have your event listener call an event handler instead of start drag directly - that way you can pass arguments:
ie:
component.addEventListener(MouseEvent.MOUSE_DOWN, dragStartHandler);
public function dragStartHandler(event:MouseEvent):void{
component.startDrag(true);
}
You don't have to do all that. Use the DragManager. Here's a page to show you how:
http://www.switchonthecode.com/tutorials/simple-flex-drag-and-drop

Resources