C
C#ā€¢4mo ago
Greya

How to make a sliding panel animation on Avalonia>?

Hi, im working on a avalonia project , but its similar to wpf i have a login panel, (username password etc) but id like to add a sliding animation to that to make it look more professional, how would i do this?
54 Replies
Buddy
Buddyā€¢4mo ago
Mind showing your code? the (A)XAML that is
Greya
GreyaOPā€¢4mo ago
ok so thats the simpe login page xaml with a login button @Buddy, Citizen of Pluto šŸ”±
Greya
GreyaOPā€¢4mo ago
and this is the second apge with just images what i want is when the second page is shown, to have a little animation like it sliding from the right
Buddy
Buddyā€¢4mo ago
What are you making? the app that is šŸ˜„
Greya
GreyaOPā€¢4mo ago
No description
No description
Greya
GreyaOPā€¢4mo ago
just a simple photo app to hold my ingame screenshots
Buddy
Buddyā€¢4mo ago
Cool
Greya
GreyaOPā€¢4mo ago
since i kidna lose it all in the default photo apps i just want a page sliding animation it seems so simple yet so hard
Buddy
Buddyā€¢4mo ago
Please, do not use Margin as your layout
Greya
GreyaOPā€¢4mo ago
i use grid
Buddy
Buddyā€¢4mo ago
Margin is the spacing between elements
Greya
GreyaOPā€¢4mo ago
ohhh ok
Buddy
Buddyā€¢4mo ago
<Image Source="../Assets/user.png" Height=" 20" Margin="0,-200,225,0" ZIndex="0" />
<Image Source="../Assets/Password.png" Height="20" Margin="0,-75,225,0" ZIndex="0"/>
<Image Source="../Assets/user.png" Height=" 20" Margin="0,-200,225,0" ZIndex="0" />
<Image Source="../Assets/Password.png" Height="20" Margin="0,-75,225,0" ZIndex="0"/>
Please prefer layouting controls such as Grid, DockPanel, StackPanel, etc. And do not have margin higher than 50
Greya
GreyaOPā€¢4mo ago
alright
Buddy
Buddyā€¢4mo ago
either way, back to your issue.
Greya
GreyaOPā€¢4mo ago
do you know how to make a sliding animation when the second page shows up
Buddy
Buddyā€¢4mo ago
Oh, my apologies. I thought you were using Avalonia
Greya
GreyaOPā€¢4mo ago
i am
Buddy
Buddyā€¢4mo ago
Wait, you are.
Greya
GreyaOPā€¢4mo ago
that is avalonia
Greya
GreyaOPā€¢4mo ago
No description
Greya
GreyaOPā€¢4mo ago
this is how they say to do it on their documents
Buddy
Buddyā€¢4mo ago
Please change title to Avalonia, the styling API is not the same
Greya
GreyaOPā€¢4mo ago
but i really dont get it it doesnt work for me
Buddy
Buddyā€¢4mo ago
Mind sharing code of what you have so far regarding PageSlide?
Greya
GreyaOPā€¢4mo ago
No description
Buddy
Buddyā€¢4mo ago
Right, and it will animate when content of ContentControl is changed
Greya
GreyaOPā€¢4mo ago
where can i insert this i dont think ive made a content control
Buddy
Buddyā€¢4mo ago
https://docs.avaloniaui.net/docs/reference/controls/transitioningcontentcontrol But first, your xaml structure is invalid
<TransitioningContentControl Content="{Binding SelectedImage}">
<TransitioningContentControl.PageTransition>
<PageSlide Orientation="Horizontal" Duration="0:00:00.500" />
</TransitioningContentControl.PageTransition>
</TransitioningContentControl>
<TransitioningContentControl Content="{Binding SelectedImage}">
<TransitioningContentControl.PageTransition>
<PageSlide Orientation="Horizontal" Duration="0:00:00.500" />
</TransitioningContentControl.PageTransition>
</TransitioningContentControl>
You need to set it like that
Greya
GreyaOPā€¢4mo ago
No description
Greya
GreyaOPā€¢4mo ago
like this? oh edited
Greya
GreyaOPā€¢4mo ago
No description
Buddy
Buddyā€¢4mo ago
You were right with this, except you were setting the content and not the PageTransition
Greya
GreyaOPā€¢4mo ago
your example its binded to an image i want it so the new window slides in not a specific image
Buddy
Buddyā€¢4mo ago
Yes, you bind it to whatever you want from your ViewModel as Content is an object, so it can contain anything
Greya
GreyaOPā€¢4mo ago
No description
Greya
GreyaOPā€¢4mo ago
it doesnt recognise the mainwindow
Buddy
Buddyā€¢4mo ago
You must use a binding
Greya
GreyaOPā€¢4mo ago
i know binding works for iamges but for windows?
Buddy
Buddyā€¢4mo ago
Or by setting the content from code-behind, but I do not recommend it
Greya
GreyaOPā€¢4mo ago
ive never done that for entire windows idk how
Buddy
Buddyā€¢4mo ago
You can't bind a window as Content, but you can however bind to a usercontrol
Greya
GreyaOPā€¢4mo ago
all of this just for 1 page to slide in>?
Buddy
Buddyā€¢4mo ago
It's how their API is set up.
Greya
GreyaOPā€¢4mo ago
can you guide me on where to go
Greya
GreyaOPā€¢4mo ago
No description
Greya
GreyaOPā€¢4mo ago
so these are my 2 windows
Buddy
Buddyā€¢4mo ago
If a person plans incorrectly it could go like this.
Greya
GreyaOPā€¢4mo ago
i want the dashboard window to be the one sliding in from ther ight so i would bind the dashboard or the mainwindow to the useercontrol?
Buddy
Buddyā€¢4mo ago
does Dashboard derive from Window?
Greya
GreyaOPā€¢4mo ago
their both avalonia windows thats just their names
Buddy
Buddyā€¢4mo ago
Okay, unfortunately you cannot do that. it has to be a usercontrol You can simply just create a new usercontrol it will be the same except you won't have the window itself but the content; can still be done with xaml
Want results from more Discord servers?
Add your server