Move a stackpanel using a datatrigger

See more:

WPF

animation

storyboard

, +

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):


<window.resources>



<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">












<grid>



<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">