Develop Reference

Override MediaElement on top of Webview2

I created a WPF project in which I need display two StackPanels like this:
This screen is child of main Grid
StackPanel 1 will be displayed without any alternation of width and height and I need to display the entire second StackPanel on top of previous StackPanel. Using Canvas and DockPanel doesn't help me in this case.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel VerticalAlignment="Center" Grid.Row="0" x:Name="web1">
<wv2:WebView2 Name="MyWebView"
Height="800" >
</wv2:WebView2>
</StackPanel>
<StackPanel Grid.Row="0" x:Name="videoPlayerPanel">
<Canvas >
<local:VideoPlayer x:Name="videoPlayer" Background="AntiqueWhite"/>
</Canvas>
</StackPanel>
</Grid>

I agree with #thatguy answer , if we use the zIndex we can overlap the element in WPF, But the question here is related to webview2 and mediaElement.
As of now webview2 not allow another element to come on top.
So there is no way to display your mediaElement on top of webview as of now.
Reffer to this Link for this issue : Webview2 issue
You can try to display mediaElement using popup but this will give other problems
I think this is the only answer to your question right now .

The order in which you define the StackPanels inside the Grid matters. The next item is displayed above the previous one. In your example, videoPlayerPanel will be above web1, because it is defined after web1. There are two options to alter this behavior.
Change the order, define videoPlayerPanel before web1, to display web1 above videoPlayerPanel.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" x:Name="videoPlayerPanel">
<Canvas >
<local:VideoPlayer x:Name="videoPlayer" Background="AntiqueWhite"/>
</Canvas>
</StackPanel>
<StackPanel VerticalAlignment="Center" Grid.Row="0" x:Name="web1">
<wv2:WebView2 Name="MyWebView"
Height="800" >
</wv2:WebView2>
</StackPanel>
</Grid>
Define the Z-Order explicitly by setting a ZIndex for the items.
Gets or sets a value that represents the order on the z-plane in which an element appears. [...] The greater the value of a given element, the more likely the element is to appear in the foreground.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel VerticalAlignment="Center" Grid.Row="0" x:Name="web1" ZIndex="1">
<wv2:WebView2 Name="MyWebView"
Height="800" >
</wv2:WebView2>
</StackPanel>
<StackPanel Grid.Row="0" x:Name="videoPlayerPanel">
<Canvas >
<local:VideoPlayer x:Name="videoPlayer" Background="AntiqueWhite"/>
</Canvas>
</StackPanel>
</Grid>
The default ZIndex is zero, and that explains why the order in the Grid matters.
Members of a Children collection that have equal ZIndex values are rendered in the order in which they appear in the visual tree. You can determine the index position of a child by iterating the members of the Children collection.

Add canvas that takes all window size, and a button in bottom left corner, margined by percentage

I am trying to have a canvas that takes all window size upon resizing, and a button over it, in the bottom left corner, but which resizes with the window(up to some max size, maybe), and the margin from the button to left and bottom resizes with the window as well.
I have tried to achieve it with a grid like this:
<Canvas Background = "LightGray" x:Name="PaintCanvas"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
Height="auto" Width="auto">
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="8*" />
<RowDefinition Height="20*" />
<RowDefinition Height="62*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="8*" />
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="87*" />
</Grid.ColumnDefinitions>
<Button x:Name="testBut" Content="TEST"
Grid.Column="1" Grid.Row="1"
MaxHeight="150" MaxWidth="50"
/>
</Grid>
</Canvas>
Edit: it seems that i have to fill the canvas with the grid.

So, here's how i handled it:
Added my grid(with predefined empty cells that serve as margins) as the only child of Window. Then added Canvas as child of grid, but specified it to span across all its rows and columns - filling whole grid(and Window):
<Canvas Background="WhiteSmoke" x:Name="PaintCanvas"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
Grid.RowSpan="3" Grid.ColumnSpan="3"/>
Finally,i put the button in needed cell

Route event to element under the current element

I've been trying to have one canvas with two layers. One layer scrolls horizontally, the second one is on top and scrolls vertically.
In the second layer (the one that scrolls vertically), I stacked a transparent grid (or panel) and a panel with information so that we can see the first layer that is under this one and if we scroll up, we have the information that appears on the screen.
That works like a charm except that if I scroll horizontally, the first layer (the one under) does not scroll at all. It's not a problem if the vertical scrolls does not scroll if we swipe the transparent grid.
This is my xaml
<Canvas x:Name="Canvas">
<local:MyPage x:Name="PageContainer"/> <!--This one scrolls horizontally -->
<ScrollViewer
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Hidden"
Height="{Binding ActualHeight, ElementName=UcRoot}">
<!--This one scrolls vertically and appears on top -->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Height="600" Width="600" Grid.Row="0" x:Name="TransparentGrid" ></Grid>
<Grid x:Name="Information" Background="Azure" Height="1200" Width="600" Grid.Row="1">
</Grid>
</Grid>
</ScrollViewer>
</Canvas>
I tried many things on the transparent grid (setting width to 1, removing it and setting the information grid margin top to 1200 for example) but the grid captures the event and does not relay to my page.
Can I get some help?
Thanks!

You have to set the background to 'Transparent' to the grid in order to be able to tap on it and swipe.. and you maybe need these properties to play with:
ScrollViewer.VerticalScrollMode
ScrollViewer.HorizontalScrollMode
Although, this is my suggested solutions:
<ScrollViewer ScrollViewer.VerticalScrollMode="Enabled" ScrollViewer.HorizontalScrollMode="Disabled" >
<Grid >
<TextBlock Text="contnet" />
</Grid>
</ScrollViewer>
<ScrollViewer ScrollViewer.VerticalScrollMode="Disabled" ScrollViewer.HorizontalScrollMode="Enabled" >
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Height="600" Width="600" Grid.Row="0" x:Name="TransparentGrid" Background="Transparent" ></Grid>
<Grid x:Name="Information" Background="Azure" Height="1200" Width="600" Grid.Row="1"/>
</Grid>
</ScrollViewer>
</Canvas>

Using multiple frame in a wpf window

I'm developing an application using WPF by c#.
I have 2 frames next to each other. The above will not change and just updated(like Facebook toolbar).
The bottom frame will change by clicking on some buttons. (it is something like masterpage in ASP).
I don't want to set a height and width for window or for frames. The problem is when I make the window full screen there is a space between two frames.
However none of the vertical/horizontal alignment stretch does not work.
<window>
<Frame VerticalAlignment="Top" Background="Crimson" />
<Frame VerticalAlignment="Bottom" Background="Black"
/>
</Window>
I want to create something like the this site as you see. the notify section and the main page.
EDIT:
i can put them next to each other just by set the height, but when i make full the window the heights stay and the yellow space becomes appear, so i want to find a way to put them Exactly next to each other in every window size.

As Mitch noted in the comments, you could place the two frames in a grid instead, and let the grid size the items.
<Window>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Frame Grid.Row="0" Background="Crimson" />
<Frame Grid.Row="1" Background="Black" />
</Grid>
</Window>

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Frame Grid.Row="0" Background="Crimson" />
<Frame Grid.Row="1" Background="Black" />
</Grid>

Autosizing button child elements as button changes size

I have a number of buttons within a grid, that all change size based on the application being resized. Some buttons have child elements such as an ellipse or rectangle. I can't seem to get these to resize as well.
Here is some code:
<Grid DockPanel.Dock="Right" Width="121">
<Grid.RowDefinitions>
<RowDefinition Height="121*" />
<RowDefinition Height="121*" />
// Snip
</Grid.RowDefinitions>
<Button Name="ellipseButton" PreviewMouseDown="EllipseButtonClickedEvent" HorizontalAlignment="Stretch" Grid.Row="0">
<Ellipse Width="90" Height="90" Stroke="Black"></Ellipse>
</Button>
// Snip
</Grid>
I know that the height and width of the ellipse is explicitly set, but when I remove that, I can't seem to get the ellipse to show at all.
I would appreciate any advice.
Thanks.

Just set the HorizontalContentAlignment and VerticalContentAlignment properties of the button to Stretch:
<Button Name="ellipseButton" PreviewMouseDown="EllipseButtonClickedEvent" HorizontalAlignment="Stretch" Grid.Row="0"
HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" >
<Ellipse Stroke="Black" />
</Button>