We Keep Coding

Opening a subwindow as part of the MainWindow

Overview
Hey everyone, I'm working on a project that is a C# WPF desktop app to create and edit a complex system. Simply think of it as and editor that can put together a full description of a car with all it's subcomponents.
I want each different component of the car to have a separate editor window. Like select the painting on the car and tada a sidewindow appears where you can fully customize the car's paint. Then when you click on the engine, that same sidewindow get's replaced by a new editor about the car's engine.
Question
How can I make that editor window that I already created with xaml and codebehind to appear as a part of the MainWindow, embedded as a sidebar?
If possible, I would avoid any 3rd party libraries, but if there is no other 'clean' way of doing it then I'm open to suggestions in that area as well.
I have fully functional windows that I created with the designer, wrote all the code for it to work, now I just have to find a way to embed those into the MainWindow on a press of a button.
Thanks for any answers

If you want something to "part of the MainWindow", you should not create another window because a Window cannot be a child of another element.
What you probably want to do is to move the XAML markup and code-behind from your current subwindow into a UserControl. You can then put the UserControl(s) into an appropriate Panel in your MainWindow.
For example, if you want UserControl to appear a sidebar in the window, you could use a DockPanel to dock it to the right:
<DockPanel>
<Border DockPanel.Dock="Right" Background="Yellow">
<local:SidebarUserControl Margin="10" />
</Border>
<TextBlock>main content...</TextBlock>
</DockPanel>

How does WPF allow named items to be recognized across the entire application?

When a named XAML element is used in a WPF application, it can be accessed from anywhere. For example:
<Grid>
<Grid>
<TreeViewItem Name="itemScreen" />
The element itemScreen will be directly accessible in MainWindow(), although it is several levels deep in the XAML hierarchy.
How does WPF enable this to work in C#?

There's a mechanism called NameScope.
https://learn.microsoft.com/en-us/dotnet/framework/wpf/advanced/wpf-xaml-namescopes
Simple markup you put in a window which has no templating or styling will all have the one namescope.
If you dig through that link it will explain about styles and templates in more detail. Essentially, they have their own namescope.
This is probably as far as you want to go with an explanation at this stage but there are a couple of oddities like when you "inherit" a style using basedon.
I wouldn't worry about them just yet but throw it to the back of your mind for later.
ps
That control is a private member of your window and the name doesn't have to be unique across the entire application.

Issue about WebBrowser component

Why WebBrowser component does not allow other components (button, textbox, etc) is created over it? I was using Popup to contain the components that need to use, but to move the program screen popups do not follow the screen remain static in the place they were created.
<Grid>
<WebBrowser x:Name="wbBrowser" />
<Canvas ClipToBounds="False">
<Popup PlacementTarget="{Binding ElementName=wbBrowser}" IsOpen="true" AllowsTransparency="True" >
<Button>asdasdasdsadasd</Button>
</Popup>
</Canvas>
</Grid>

The WebBrowser control in WPF is actually a wrapped version of the WebBrowser control from WinForms. As such it is always rendered above other WPF controls. The only things that you can show above would be another window.
The WebBrowser control is pretty limited in WPF, I believe it uses IE8, so there is no HTML5 support. There are some open source browser controls for WPF that are newer that likely don't suffer from the same limitations of the built in WPF control. Take a look at this project: https://wpfchromium4.codeplex.com/

Custom ContentControl in WPF

I think I'm asking for a lecture on the proper application of WPF here but I'm going to take my chances since I'm at my wit's end. I think this is probably largely a result of my lethargy in fully embracing WPF templates and styles so I'm happy to listen to any such lectures.
I'm writing a sort of audio editor / event orchestrator. I've got a track editor that I'm fairly happy with. However, I built it largely out of custom controls (I know, this is probably a WPF sin). In keeping with that theme, I want to make a standard header for the tracks but I want the individual track "types" to be able to define what goes in that header. I thought a control that defines a sort of "grip" on the edge and then allowed the implementer to "fill in" the substance would work well. However, I have no idea how to do this in WPF without using styles and even if I end up using styles, I would like to understand this.
This probably comes down to wanting a sort of exemplar implementation of a simple ContentControl control (e.g. a button) and not being able to find one (other than AvalonDock, which ultimately uses - correctly i'm sure - templates for this). In my head, the xaml looks something like this:
<ContentControl x:Class="TestArea.CustomContentControl2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Hello"/>
<ContentPresenter Grid.Column="1"/>
</Grid>
But of course, that doesn't work. I'm fairly sure I could pull the same thing off by playing tricks with overloads behind the scenes, but it would be nice if I could do something like this. Do I really have to put all my terrible, procedural ways behind me and use these styles you speak of? If so, can someone at least tell me what that button looks like down in the framework?

Here is a complete example of deriving from ContentControl to accomplish what you want: Creating Customized UserControls (Deriving from ContentControl) in WPF 4
Pete's ContentPresenter is doing the same thing as it does in your example.

Using styles allows you to seperate functionality of a control with representation of a control; such as the Button.
Think as a control at the start as nothing more then functionality. A simple class containing predefined events, properties, etc... Once that control takes on the job of becoming part of a visual tree it now needs a visual identity. It didn't need one previously; however now it does. Defining a default style allows that control to now have a visual representation which it did not need prior as it was not living within the visual tree.
Ignoring styles would be like ignoring CSS when making use of HTML.

How to put a custom windows forms control in a WPF application?

As a short term solution I'm trying to jam a windows form 'usercontrol' into a WPF application. I see in the WPF application view that I can add a 'custom windows form control' to the project and it makes an empty custom control, but I can't figure out how to add it. Ideally I'd like to know how to take the .dll from my compiled windows forms user control and stick it into the WPF app, or import the user control into the WPF application.
Thanks,
Sam

You can't really add it as a control to the toolbox like you could for a Windows Forms Application. What you should do instead is "host" the user control inside of the WPF application.
See how to do it on MSDN.
Here's an example of how to use a masked text box (which you can easily modify to use your custom control):
<Window x:Class="Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
Title="HostingWfInWpf">
<Grid>
<WindowsFormsHost>
<wf:MaskedTextBox x:Name="mtbDate" Mask="00/00/0000"/>
</WindowsFormsHost>
</Grid>
</Window>

Add a reference to System.Windows.Forms and WindowsFormsIntegration to your Project
xmlns:WinForms="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
xmlns:WindowsFormsIntegration="clr-namespace:System.Windows.Forms.Integration;assembly=WindowsFormsIntegration"
And place Windows forms host in the window.
<WindowsFormsHost Name="wfhDate"
HorizontalAlignment="Center"
VerticalAlignment="Stretch">
<WinForms:FlowLayoutPanel/>
</WindowsFormsHost>
Now in C# code
using Forms = System.Windows.Forms;
.........................
Forms.FlowLayoutPanel flpPanel = this.wfhDate.Child as Forms.FlowLayoutPanel;
// Initialize your Forms contol here.
flpPanel.Controls.Add( yourControl );

Lucas' answer is correct, but I wanted to add something needed. If you are creating a web application, then you must change the Security setting to This is a full trust application. I could not get the WindowsFormsHost control to work prior to doing this.