How to open page in window - wpf

Question

There is a window on how to make it so that after clicking on the button, a page opens inside this window, while it moves along with the window, the background of the window darkens and when you click on, all the elements of the window become non-clickable.

Answer 1

You don't necessarily need actual Flyout. The combination of ordinary Grids would surffice.
<Window x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="800" Height="400">
<Grid>
<!-- Main content -->
<!-- Flyout Grid -->
<Grid Visibility="Visible"
Background="#22000000">
<Grid Width="400" Height="300" Background="Black">
<TextBlock Text="Flyout" Foreground="White"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Grid>
</Grid>
</Window>
This Flyout Grid covers the entire Window and looks as a Flyout. You can show/hide this Grid by changing its Visibility somehow by binding.
Edit
Assuming you have a System.Windows.Controls.Page named "FlyoutPage", You can add it in design time:
<!-- Flyout Grid -->
<Grid Visibility="Visible"
Background="#22000000">
<Grid x:Name="FlyoutGrid" Width="400" Height="300" Background="Black">
<Frame>
<Frame.Content>
<local:FlyoutPage/>
</Frame.Content>
</Frame>
</Grid>
</Grid>
You can add it at run time as well.
this.FlyoutGrid.Children.Clear();
this.FlyoutGrid.Children.Add(new Frame { Content = new FlyoutPage() });

Answer 2

If you are not bound to the default WPF controls, you could check out Material Design in XAML. This library provides a DialogHost control which does exactly what you want. For more information, please refer to the Wiki on Dialogs. The library is available as NuGet package MaterialDesignThemes.
<materialDesign:DialogHost>
<materialDesign:DialogHost.DialogContent>
<StackPanel>
<TextBlock Text="This is the dialog content."
Margin="10"/>
<Button Content="Close dialog"
Command="{x:Static materialDesign:DialogHost.CloseDialogCommand}"/>
</StackPanel>
</materialDesign:DialogHost.DialogContent>
<Button DockPanel.Dock="Bottom"
Content="Open dialog"
Command="{x:Static materialDesign:DialogHost.OpenDialogCommand}"
VerticalAlignment="Bottom"/>
</materialDesign:DialogHost>
There is the regular content and a dialog content, as well as special commands for open and close.