✅ Help needed with WPF GUI
Hello, Good Day!
Overview
I just started with WPF a few weeks ago so I'm still quite new to all this, for now I've been trying to create a dashboard UI for my project which has been going good so far, in my dashboard UI I have a grid divided into 3 rows (1 header, 1 footer and 1 for content) and 2 columns (1 for sidebar and one for content). I've created an interactive sidebar, so when you hover over to it, it'll auto expand and show you the button names and everything, when it's collapsed it'll show only the icons of those buttons.Problem
So, as the sidebar is interactive, it auto expands when mouse over, but if the main window is resized it and the column 1 (the one with sidebar) has enough space to hold the expanded form of the sidebar, it will expand the sidebar to it's expanded state and will remove the mouse over animations. But if the sidebar's column's width is greater than the collapsed width but still lesser than the expanded width, it leaves a space between the sidebar and the content column, which gives a very inconsistent look to my app. So is there any way to overcome this issue? I'm attaching my xaml and code behind for your better understanding.