We Keep Coding

C# MaterialDesign PopupBox Cascading

I have a WPF application (C#) thats using a Material Designs PopUpBox for its menu navigation, as per the following:-
<materialDesign:PopupBox Margin="10,0,0,0" PlacementMode="BottomAndAlignLeftEdges" StaysOpen="false" IsEnabled="{Binding IsSystemControlsEnabled}" Style="{DynamicResource template_NavigationMenu}" >
<materialDesign:PopupBox.ToggleContent>
<materialDesign:PackIcon Foreground="White" Height="25" Kind="Menu" Width="25"/>
</materialDesign:PopupBox.ToggleContent>
<StackPanel Width="150" >
<Button Command="{Binding ScreenCommand}" CommandParameter="Dashboard" Content="Dashboard" FontSize="12" FontWeight="Medium" Height="20" Name="MenuDashboard" VerticalAlignment="Top" VerticalContentAlignment="Top" />
<Separator/>
<Button Command="{Binding ScreenCommand}" CommandParameter="Encrypt" Content="Encrypt" FontSize="12" FontWeight="Medium" Height="20" Name="MenuEncrypt" VerticalAlignment="Top" VerticalContentAlignment="Top" />
<Separator />
<Button Command="{Binding ScreenCommand}" CommandParameter="Decrypt" Content="Decrypt" FontSize="12" FontWeight="Medium" Height="20" Name="MenuDecrypt" VerticalAlignment="Top" VerticalContentAlignment="Top" />
<Separator />
</StackPanel>
</materialDesign:PopupBox>
Is there a way to cascade this menu and add an extra layer? So for example, if I was to select or hover over the button for Encryption, it would they give me a new popupbox, just to the right, with some new options relating to encryption?
I'm trying to find something like this https://m2.material.io/components/menus (first image) but can't find anything relating to C# / XAML, so looking for some inspiration from the experts...
Any help is greatly appreciated.
Thank you

WPF doesn't prevent duplicate tabindex input

When I set the control's tabindex to a repeated value, the error doesn't occur.
Focus on the 2 controls with a tabindex value of 2, first focus on Textbox 5, and then focus on Textbox 6. How does it work?
Why not prevent users from entering duplicate values?
<TextBox x:Name="Textbox0" TabIndex="0" Height="23" Margin="5,5,0,0" TextWrapping="Wrap" Text="TextBox" Width="505"/>
<TextBox x:Name="Textbox1" TabIndex="4" Height="23" Margin="5,5,0,0" TextWrapping="Wrap" Text="TextBox" Width="505"/>
<TextBox x:Name="Textbox2" TabIndex="1" Height="23" Margin="5,5,0,0" TextWrapping="Wrap" Text="TextBox" Width="505"/>
<Button x:Name="Textbox3" TabIndex="3" Content="Button" Height="40" Margin="5" Width="505"/>
<Button x:Name="Textbox5" TabIndex="2" Content="Button" Height="40" Margin="5" Width="505"/>
<Button x:Name="Textbox6" TabIndex="2" Content="Button" Height="40" Margin="5" Width="505"/>
The result:

Source
A tab index can consist of any valid integer greater than or equal to zero, lower numbers being earlier in the tab order. If more than one control on the same parent control has the same tab index, the z-order of the controls determines the order to cycle through the controls.

How to Animate Visibility.Collapsed + Update StackPanel

I think my title is a bit confusing so let me explain my question in detail.
I have a StackPanel with multiple Grids inside it. It basicly looks like a table with a "Header Grid" and a "Content Grid" below. The StackPanel itself is inside a ScrollViewer.
Whenever the user clicks on the "Header Grid" the corresponding "Content Grid" should be collapsed and visible vice versa.
Here is a short version of my table:
<ScrollViewer Margin="0,0,0,10">
<StackPanel>
<Grid x:Name="Header_Grid1" Height="24" Background="#BF101820" VerticalAlignment="Top" Margin="34,0,0,0" Cursor="Hand" >
<Label Content="Click me to show/hide Content_Grid1" Padding="5,0" VerticalContentAlignment="Center" Margin="5,0,0,0" Grid.ColumnSpan="2" Width="982"/>
</Grid>
<Grid x:Name="Content_Grid1" Height="100" Width="967" HorizontalAlignment="Right" Margin="0,5,0,0" RenderTransformOrigin="0.5,0.5">
<Label Content="some content" Foreground="#FF918F82" Padding="5,0" VerticalContentAlignment="Center" Margin="0,0,719,75"/>
<Label Content="some content" Foreground="#FF918F82" Padding="5,0" VerticalContentAlignment="Center" Margin="0,25,719,50"/>
</Grid>
<Grid x:Name="Header_Grid2" Height="24" Background="#BF101820" Width="1001" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,10,0,0">
<Label Content="Click me to show/hide Content_Grid2" Padding="5,0" VerticalContentAlignment="Center" Margin="5,0,0,0" Grid.ColumnSpan="2" Width="982"/>
</Grid>
<Grid x:Name="Content_Grid2" Height="100" Width="967" HorizontalAlignment="Right" Margin="0,5,0,0" RenderTransformOrigin="0.5,0.5">
<Label Content="some content" Foreground="#FF918F82" Padding="5,0" VerticalContentAlignment="Center" Margin="0,0,719,75"/>
<Label Content="some content" Foreground="#FF918F82" Padding="5,0" VerticalContentAlignment="Center" Margin="0,25,719,50"/>
</Grid>
</StackPanel>
</ScrollViewer >
Lets say the user clicks on "Header_Grid1" the "Content_Grid1" hides with an kinda "flow to the top" animation by reducing its size. Thats no problem at all - the thing is I´d like the "Header_Grid2" aswell as the "Content_Grid2" to flow to the top while the animation of hiding "Content_Grid1" is playing. "Header_Grid2" and "Content_Grid2" should not just pop to the place where "Content_Grid1" has been. It should rather happen in a smooth animation.
Hopefully someone understands what I mean. It´s pretty hard to explain...
Thanks

As far as I am aware you can't animate the collapsed method, but there are various tricks to get around that such as animating the opacity, size, location etc...

Setting background & opacity to button but not affecting it's content

I am working with WPF, and what I want to do is to set opacity and background color of my button but I dont want to affect content inside my button. I tried few ways but unfortunately that did not work.
I found this style and I would like to apply something like that:
This is my numeric keyboard: ( I AM TRYING TO EDIT BTN 7) :
As you can see guys, unfortunately I could not set opacity of my button without affecting the content inside.
Here is my XAML code (focus on btn 7):
<StackPanel Height="50" Orientation="Horizontal" Margin="0,0,0,5">
<Button FontSize="15" FontWeight="Bold" x:Name="btn7" Foreground="#83D744" Click="btn7_Click" BorderBrush="#83D744" BorderThickness="0.5" Content="7" Width="80" RenderTransformOrigin="0.557,0.693" d:LayoutOverrides="HorizontalAlignment" Background="Black" Opacity="0.2" Margin="0,0,5,0" />
<Button FontSize="15" Foreground="Black" FontWeight="Bold" x:Name="btn8" Click="btn8_Click" Content="8" Width="80" Background="#FF50504F" Margin="0,0,5,0"/>
<Button FontSize="15" Foreground="Black" FontWeight="Bold" x:Name="btn9" Click="btn9_Click" Content="9" Width="80" d:LayoutOverrides="HorizontalAlignment" Background="#FF50504F"/>
</StackPanel>
So could anyone help me please how to solve this thing..
Thanks!

add transparency to a brush used for Background
hex code for Black color is #000000
change alpha channel to make it semi-transparent (Background="#50000000") and remove Opacity="0.2"
<Button x:Name="btn7"
FontSize="15" FontWeight="Bold" Foreground="#83D744"
Click="btn7_Click"
BorderBrush="#83D744" BorderThickness="0.5"
Content="7" Width="80" RenderTransformOrigin="0.557,0.693"
d:LayoutOverrides="HorizontalAlignment"
Background="#50000000" Margin="0,0,5,0" />

Make the opacity of the button 0.2 to 1

WPF alignment of textbox and button within a Grid?

this is a rather simple question and its technically not that big of a deal but my OCD is tingling when i see this.
I have designed a basic WPF application and i cannot figure out why exactly the button and the textboxs are not alligning correctly as can be seen in this image(bottom right side):
This is the code responsible for it:
<Grid Margin="283,365.288,18,10" Grid.ColumnSpan="2">
<Label Content="GUID" HorizontalAlignment="Left" Margin="0,0.998,0,0" VerticalAlignment="Top" Height="22.96"/>
<Label Content="UniqueID" HorizontalAlignment="Left" Margin="0,22.68,0,0" VerticalAlignment="Top" Height="25.516" Width="63.297"/>
<Label Content="Akt/GZ" HorizontalAlignment="Left" Margin="0,48.196,0,0" VerticalAlignment="Top" Height="25.516" Width="63.297"/>
<TextBox HorizontalAlignment="Left" Height="23.958" Margin="63.297,0,0,49.754" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Bottom" Width="125"/>
<TextBox HorizontalAlignment="Left" Height="23.958" Margin="63.297,0,0,25.796" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Bottom" Width="125"/>
<TextBox HorizontalAlignment="Left" Height="23.958" Margin="63.297,0,0,1.558" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Bottom" Width="125"/>
<Button Content="Search" HorizontalAlignment="Left" Margin="193.297,0.998,0,0" VerticalAlignment="Top" Width="60.703" Height="22.96"/>
<Button Content="Search" HorizontalAlignment="Left" Margin="193.297,25.236,0,0" VerticalAlignment="Top" Width="60.703" Height="22.96"/>
<Button Content="Search" HorizontalAlignment="Left" Margin="193.297,49.194,0,0" VerticalAlignment="Top" Width="60.703" Height="22.96"/>
<CheckBox Content="07" HorizontalAlignment="Left" Margin="259,5.498,0,0" VerticalAlignment="Top"/>
<CheckBox Content="10" HorizontalAlignment="Left" Margin="296.915,5.498,0,0" VerticalAlignment="Top"/>
<CheckBox Content="07" HorizontalAlignment="Left" Margin="259,29.736,0,0" VerticalAlignment="Top"/>
<CheckBox Content="10" HorizontalAlignment="Left" Margin="296.915,29.736,0,0" VerticalAlignment="Top"/>
<CheckBox Content="07" HorizontalAlignment="Left" Margin="259,53.694,0,0" VerticalAlignment="Top"/>
<CheckBox Content="10" HorizontalAlignment="Left" Margin="296.915,53.694,0,0" VerticalAlignment="Top"/>
</Grid>
Either way I am not quite sure what causes it to... drift away for a bit. Also (in case someone asks) I am not sure why i used a Grid to group these objects, I googled on object groupings in WPF and i found some answers but the Grid and the Stackpanel seemed like the easiest to use, but the Stackpanel gave me even bigger headaches when aligning the content properly.
If you have some criticism regarding the imlpementation please feel free to do so, I have already ordered some books regardnig WPF design but I am more than happy and willing to listen to experienced devs and learn.
I apologize for the "noobish" question but I have spent the last 2 days fiddling around with the settings to no avail and wouldn't have come here and asked otherwise.
Thank you

You are using the Grid layout in the wrong way.
Using Margin in Grid is not recommended, for many reasons (Performance, Stretching problems and so on)
The Grid layout allows you to set Rows and Columns and order your controls in a table.
You can read more about it here
http://www.wpftutorial.net/GridLayout.html
You first have to declare your rows and cols using ColumnDefinitions and RowDefinitions and then apply each control to it's row and column using the attribute Grid.Row and Grid.Column
reading the link I've attached will explain things better