I'm trying to perform a slide in/out animation on my windows phone project.
The effect I'm trying to create is that a user presses a button, that a list of buttons ( a panel ) slides in from the side and the current page slides a bit off screen.
Look at a good example here ( the panel is fully slided in, so a small part of the active page is still visible )
Now I think the animations are not that difficult ( but any tips on how to create it are welcome ), but I was wondering how do you add the subtle shadow effect?
If you look at the image you will notice that it's like the panel is underneath the active screen, because of the shadow...
I might have an idea.
-Create a timer, for each tick you execute this:
int x = pnl.Location.X;
int y = pnl.Location.Y;
pnl.Location = new Point(x + 1, y);
-Then you should create an if to stop the timer when the panel is on the right position, for example:
if (x == 20)
{
tmrMove.Stop();
}
Related
I can't find tools or properties to place a label or a button exactly in the middle of the Form. For example, on the X axis. VS 2015.
Design time :
In my VisualStudio2010 I have these 2 buttons to center horizontally and vertically:
Its located in the toolbar "Layout". If it isn't, you can add them by clicking the small button to the right. It is also in the Format menu.
To keep centered at Runtime: Turn off all anchoring.
Note:This will keep the control at its relative position as long as it doesn't change it Size. If it does, like autosize Labels are prone to, you will have to code the Resize event. Examples are here
For controls that may change in size, you need to catch the Resize event.
In my case I have a Panel, representing a page, inside another Panel which is the workspace. The workspace is set to autoscroll. In this scenario, it's important that the control is only centered when smaller than the container.
Whenever the form changes size or when I change the content, I call this function:
private void resetPagePos()
{
int wWS = pnlWorkspace.Width;
int hWS = pnlWorkspace.Height;
int wPage = pnlPage.Width;
int hPage = pnlPage.Height;
pnlPage.Location = new Point(Math.Max(0, (wWS - wPage) / 2), pnlPage.Top = Math.Max(0, (hWS - hPage) / 2));
}
The use of Math.Max(0, ...) makes sure that if the item doesn't fit, and the scrollbars are activates, then our page scrolls correctly. If the Left or Top are set to a negative number, you would get unwanted side-effects.
I have a question about forms and controls. I want to add the ability to sort of make a part of my form only show when something is clicked. For example I have form1 and on the form i have a button and when that button is clicked the form grows or extends (slides out?) to show other controls that werent there before the button was clicked. I have no idea what this is called so I don't know what to look for but Ive seen it used in many other applications. Any information on this would be greatly appreciated.
You'd probably have to roll your own animation, increasing the size dimensions of your form (or panel, or whatever) on a timer, thereby exposing the previously hidden controls.
Timer T = new Timer();
T.Interval = 10;
T.Tick += (s, e) =>
{
myForm.Size = new System.Drawing.Size(myForm.Width + 10, myForm.Height);
if (myForm.Size.Width >= FormWidthThreashold)
T.Stop();
};
T.Start();
At the risk of stating the obvious, I don't suppose there's any way to switch the WPF? This stuff is built in, and quite easy for WPF. If not though, something like this should get you started.
I've done this before. Start by organising your form into logical sections. Don't leave all your controls on the form, place them inside panels. At Design-time you'll need to have the panels "fully expanded", but then at runtime you manipulate the panels' left, top, width, height, and maybe even the alignment and anchors properties, through code. You could use a timer as suggested by #Adam Rackis.. or you could change the increment value to alter the speed of the animation. The animation itself is just a loop that starts with x = x1 and ends with x = x2, where x = x + increment_value inside the loop. As the value of "x" changes, the component will be automatically redrawn. To get a smoother effect you might need to repaint the control (or the entire panel) on each iteration. If it runs too fast, you can either insert a delay or try to make the loop rely on a timer. I've had problems with timers for this kind of stuff, but admittedly I wasn't using C#.NET at the time (I did it in Delphi). It takes a lot of fiddling with the fine details to get this working nicely, so be patient, it's not Flash! Good luck.
Here is some background to the problem. We are working with an EyeVis wall setup, see this link: http://www.eyevis.co.uk/
The EyeVis wall can have any number of 'windows' displayed on the wall at any time. We query the wall for its size dimensions, and then query it for a list of all the windows currently being displayed on the wall. This comes back as a set of co-ordinates as follows:
Left, Top, Width, Height
So at this stage we have the size of the wall, and the co-ordinates of each window being displayed within that wall.
What we need to do is display a representation of the wall's layout on a monitor being viewed by the controller. The controller will then select one of the windows (from the monitor) and this window will be enlarged on the EyeVis wall.
I have tried a few things, in the hope that there might be a simple way to achieve this. One idea I had was this:
Create a panel in code with the dimensions of the wall.
Add each window to this panel using the co-ordinates.
Add the main panel to a form and dock the panel
I thought this would auto scale all the panels within the main panel and we would see the layout, but docking at runtime doesn't seem to behave the way I imagined?
This is the code I had: (Using C#)
Panel mainPanel = new Panel();
mainPanel.Width = eyeVisWallWidth;
mainPanel.Height = eyeVisWallHeight;
foreach (Window thisWindow in windowList)
{
Panel newWindow = new Panel();
newWindow.Top = thisWindow.windowTop;
newWindow.Width = thisWindow.windowWidth;
newWindow.Height = thisWindow.windowHeight;
newWindow.Left = thisWindow.windowLeft;
Label newLabel = new Label();
newLabel.Text = thisWindow.windowID.ToString() + ":" + newWindow.Height + ":" + newWindow.Width;
newWindow.Controls.Add(newLabel);
newWindow.BorderStyle = BorderStyle.FixedSingle;
mainPanel.Controls.Add(newWindow);
}
this.panel1.Controls.Add(mainPanel);
mainPanel.Dock = DockStyle.Fill;
mainPanel.Anchor = AnchorStyles.None;
So now I'm starting to think this might have to be solved with math, which is really not my strong point. Does anyone have any advice or a pointer to something which might help me with this?
Any help appreciated!
Regards
Adrian
Forgot to close thise, we just ended up dividing all the co-ordinates by a common factor.
G'day,
I am attempting to simulate the old XBox 360 GUI with the sliding tabs (Remember, you'd press left or right and the content would slide in depending on the tab?) Anyways, at the moment, I have this working well, however I cannot get the "animation" working.
When the user presses left arrow or right arrow, my OpenWindow(int iIndex) method will be called, where iIndex is the index to the next or previous "window" to be slid in. (Not a window... each "Window" is a struct with a parent grid control containing a button and a smaller grid control that contains the windows contents.)
Now, my problem lies with resizing the parent grid control. When it is slid in, it is resized by calling mygrid.Width += 1; That works, but I don't see it happen over a determined period of time, it just lags a bit and then resizes to the required width. Whereas if I call this.Width += 1 in the same method, (this being the main program window) the window resizes how I want the grid control to resize. I've tried UpdateLayout() but to no avail. This tells me my timing is okay.
If anyone could be of assistance, it would be greatly appreciated.
Here is my OpenWindow method...
public void OpenWindow(int iIndex)
{
int iInterval = 1;
for (int i = (int)myDict[iIndex].Shell.Width; i < (int)stack_outter.Width; i += iInterval)
{
myDict[iIndex].Shell.Width += 1;
myDict[iIndex].Shell.UpdateLayout();
System.Threading.Thread.Sleep(1);
}
myDict[iIndex].Shell.Width = stack_outter.Width - (BUTTON_WIDTH * (myDict.Count - 1));
}
myDict is a Dictionary, Shell is the grid that I am attempting to animate when resizing. Sorry about the code, it's messy, my code is always hacked when I am trying to get stuff working :)
Thanks,
Ash
Neried Web Solutions
Your OpenWindow method is happening on the Dispatcher thread. That's also the thread responsible for rendering, so as long as your OpenWindow method doesn't return, nothing gets rendered.
The proper way to fix this would be to animate the Width property. I don't have any experience in starting animations from code (I've only used them in the past for things like a fade-in button highlight on mouse over, which is more easily done from WPF), but I took a quick read-through this page, Animation Overview on MSDN, and I think you'll want something like this:
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = myDict[iIndex].Shell.Width;
myDoubleAnimation.To = stack_outter.Width;
myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(0.5));
myDoubleAnimation.AutoReverse = false;
myDoubleAnimation.RepeatBehavior = new RepeatBehavior(1.0);
myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);
Storyboard.SetTarget(myDoubleAnimation, myDict[iIndex].Shell);
Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(FrameworkElement.WidthProperty));
myStoryboard.Begin(myDict[iIndex].Shell);
I would like to know if it's possible to create nice form effects on the compact framework.
My plan is that when a user selects an image on the main form this is opened in a new form, this currently works. What I now want to do is make the form that contains the fullsize picture to load off the edge (left or right) of the screen at around 4 pixels high then slide into view. Once the form is fully on the screen then expand the height until it hits the max for the screen.
On close i would like to reduce the height back down to the 4 pixels high and the slide off the edge again before disposing the form.
I've tried the code below when instantiating the form and the dp.Top property was always 0 regardless of dp.Width == 240
DisplayPicture dp = new DisplayPicture(ImageUrl);
dp.WindowState = FormWindowState.Normal;
dp.Left = dp.Width * -1;
dp.Top = (dp.Height / 2) - 2;
dp.Height = 4;
dp.ShowDialog();
Within the DisplayPicture form i also have the following to try and move the form but as it isn't setting the Top property this code doesn't matter yet.
void t_Tick(object sender, EventArgs e)
{
if (this.Left < 0)
this.Left += 5;
if (this.Left > -1)
{
this.Left = 0;
if (this.Height < pictureBox1.ClientRectangle.Height)
{
this.Height += 4;
this.Top -= 2;
}
if ((this.Left == 0) && (this.Top == 0))
t.Enabled = false;
}
}
Any help would be greatly appreciated!
TIA
OneSHOT
To do this, start with a PictureBox control that has your image loaded. Set the Height to 4, the Width to the width of your form, and (very important) set the SizeMode of the PictureBox to StretchImage.
Next, position the PictureBox off the screen by setting Top to 0 and Left to -Width. Put a Timer control on your form with an interval of 100 (or whatever), and have its event gradually move the PictureBox to the right until its Left property is 0. Once you reach that point, have the timer event gradually increase the Height until it reaches the height of the form.
You'll probably have to deal with flicker, but this should get you started.
Update: I just read your question a little closer, and realized that you actually want to move the form itself from offscreen to full screen. This is not possible if you want the entire form (including the title bar at the top) to animate in this way, but you can sort of do this by setting the form's FormBorderStyle (or I think it's just called BorderStyle in the Compact Framework) to None. With the BorderStyle set to None, changing the Height, Width, Top and Left properties will actually have a visible effect on the form (although the form will be borderless). These properties are otherwise ignored completely in Windows Mobile, which is probably why your code didn't appear to be doing anything.
Update 2: here is my answer to a similar WM question, which may help you make your animated window look like a real window.