C
C#•8mo 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•8mo ago
Mind showing your code? the (A)XAML that is
Greya
GreyaOP•8mo ago
ok so thats the simpe login page xaml with a login button @Buddy, Citizen of Pluto šŸ”±
Greya
GreyaOP•8mo 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•8mo ago
What are you making? the app that is šŸ˜„
Greya
GreyaOP•8mo ago
No description
No description
Greya
GreyaOP•8mo ago
just a simple photo app to hold my ingame screenshots
Buddy
Buddy•8mo ago
Cool
Greya
GreyaOP•8mo 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•8mo ago
Please, do not use Margin as your layout
Greya
GreyaOP•8mo ago
i use grid
Buddy
Buddy•8mo ago
Margin is the spacing between elements
Greya
GreyaOP•8mo ago
ohhh ok
Buddy
Buddy•8mo 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•8mo ago
alright
Buddy
Buddy•8mo ago
either way, back to your issue.
Greya
GreyaOP•8mo ago
do you know how to make a sliding animation when the second page shows up
Buddy
Buddy•8mo ago
Oh, my apologies. I thought you were using Avalonia
Greya
GreyaOP•8mo ago
i am
Buddy
Buddy•8mo ago
Wait, you are.
Greya
GreyaOP•8mo ago
that is avalonia
Greya
GreyaOP•8mo ago
No description
Greya
GreyaOP•8mo ago
this is how they say to do it on their documents
Buddy
Buddy•8mo ago
Please change title to Avalonia, the styling API is not the same
Greya
GreyaOP•8mo ago
but i really dont get it it doesnt work for me
Buddy
Buddy•8mo ago
Mind sharing code of what you have so far regarding PageSlide?
Greya
GreyaOP•8mo ago
No description
Buddy
Buddy•8mo ago
Right, and it will animate when content of ContentControl is changed
Greya
GreyaOP•8mo ago
where can i insert this i dont think ive made a content control
Buddy
Buddy•8mo 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•8mo ago
No description
Greya
GreyaOP•8mo ago
like this? oh edited
Greya
GreyaOP•8mo ago
No description
Buddy
Buddy•8mo ago
You were right with this, except you were setting the content and not the PageTransition
Greya
GreyaOP•8mo ago
your example its binded to an image i want it so the new window slides in not a specific image
Buddy
Buddy•8mo ago
Yes, you bind it to whatever you want from your ViewModel as Content is an object, so it can contain anything
Greya
GreyaOP•8mo ago
No description
Greya
GreyaOP•8mo ago
it doesnt recognise the mainwindow
Buddy
Buddy•8mo ago
You must use a binding
Greya
GreyaOP•8mo ago
i know binding works for iamges but for windows?
Buddy
Buddy•8mo ago
Or by setting the content from code-behind, but I do not recommend it
Greya
GreyaOP•8mo ago
ive never done that for entire windows idk how
Buddy
Buddy•8mo ago
You can't bind a window as Content, but you can however bind to a usercontrol
Greya
GreyaOP•8mo ago
all of this just for 1 page to slide in>?
Buddy
Buddy•8mo ago
It's how their API is set up.
Greya
GreyaOP•8mo ago
can you guide me on where to go
Greya
GreyaOP•8mo ago
No description
Greya
GreyaOP•8mo ago
so these are my 2 windows
Buddy
Buddy•8mo ago
If a person plans incorrectly it could go like this.
Greya
GreyaOP•8mo 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•8mo ago
does Dashboard derive from Window?
Greya
GreyaOP•8mo ago
their both avalonia windows thats just their names
Buddy
Buddy•8mo 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

Did you find this page helpful?