Click here to Skip to main content
15,846,343 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more: , +
I have been searching the Internet for hours and can't figure out how to move a stack panel based on a datatrigger. I'm new to WPF so I don't know if this is the correct way to do what I want. Basically, I want to move views (I was told that using custom controls and putting them into stack panels would allow me to move them as needed) in and out. As an example, I want to have the user login control move into the center of the screen when the application opens. Then, once the user successfully logs in I want the control to move off the screen and I will have another control move in from the side, etc. I am at the point where I have the MainWindow looking at the IsLoggedIn boolean (I'm using MVVM) and being notified when I have a successful login from the ViewModel. I have the storyboards to move in and out working but I can't figure out how to trigger them based on the value of IsLoggedIn.

Once I get this I'd like to be able to adjust how far the movement happens based on the size of the control and the screen size since monitors will be different. As an example, I'd like to adjust the margin height to take the total height of the computer screen being used (calculated at runtime by the OS) then subtract the height of the control. That will give me the amount of "white space" that I can divide by two so the control will end up in the middle of the screen. I don't know how to put that calculation into the Margin settings for the storyboard.

What I have tried:

So far I've tried this and failed at everything (note that I've commented out my attempts because they don't work. Currently, it is working so the application runs and the "test label" I put in fills with False at startup and changes to True on successful login so I know that binding works):


<storyboard x:key="sbShowUserLogin">
<thicknessanimation storyboard.targetproperty="Margin" from="0,-400,0,0" to="0,400,0,0" decelerationratio=".9" duration="0:0:3">

<storyboard x:key="sbHideUserLogin">
<thicknessanimation storyboard.targetproperty="Margin" from="0,400,0,0" to="0,-400,0,0" accelerationratio=".9" duration="0:0:3">


<stackpanel panel.zindex="2" name="pnlUserLoginControl" orientation="Vertical" width="500" height="400" horizontalalignment="Center" verticalalignment="Top" margin="0,-400,0,0">
<lv:loginviewcontrol horizontalalignment="Center" verticalalignment="Center" height="400" width="500">
Updated 17-Nov-20 21:17pm

1 solution

(StackPanel is one of the less flexible panels).

Grids can "overlay" content; stack panels can't.

To center any control, set the vertical and horizontal alignments to center.

Instead of "moving", set the visibility of the controls to Collapsed; set it to Visible, to pop it into view. Alternatively, storyboard the Opacity in conjunction with toggling the visibility.

If the Grid has multiple columns and rows, set the column and row spans accordingly; the control will still center relative to the spans.

A lot simpler than "moving".
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900