We Keep Coding

Binding in WPF not propagating into usercontrol

I am new and learning WPF. I am making a demo project to learn the working of binding and dependency properties. To make it easy to understand I briefly explain this project. In solution, I have three projects. Two projects are user control and one is the main application.
This is user control for the child page
<UserControl x:Class="DefectTracking.DefectTrace"
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="450" d:DesignWidth="1200"
Grid.IsSharedSizeScope="True"
Loaded="ElementGeladen"
Name="Self">
<UserControl.Resources>
<ResourceDictionary Source="Resources.xaml" />
</UserControl.Resources>
<UserControl.Style>
<Style TargetType="{x:Type UserControl}">
<Setter Property="Background" Value="{StaticResource Hintergrundfarbe}"/>
</Style>
</UserControl.Style>
<Grid DataContext="{Binding ElementName=Self}" Margin="4">
<FrameworkElement x:Name="ProxyElement"/>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<!--#region Kopfzeile -->
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="Ergebnisse"/>
<ColumnDefinition SharedSizeGroup="Name"/>
<ColumnDefinition SharedSizeGroup="Folgefehler" Width="*"/>
<ColumnDefinition SharedSizeGroup="Fehler"/>
<ColumnDefinition SharedSizeGroup="Aktiviert"/>
</Grid.ColumnDefinitions>
<TextBox Grid.Column="2" Style="{StaticResource FolgefehlerStil}" Text="FF" />
<TextBox Grid.Column="3" Style="{StaticResource FehlerStil}" Text="Fehler"/>
<TextBox Grid.Column="4" Style="{StaticResource FehlerStil}" Text="Aktiviert"/>
</Grid>
<!--#endregion-->
<!--#region Prüfung -->
<ItemsControl Grid.Row="1" ItemsSource="{Binding Prüfungen}" Name="Prüfungselement">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Background="Black">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="Ergebnisse"/>
<ColumnDefinition SharedSizeGroup="Name"/>
<ColumnDefinition SharedSizeGroup="Folgefehler"/>
<ColumnDefinition SharedSizeGroup="Fehler"/>
<ColumnDefinition SharedSizeGroup="Aktiviert"/>
</Grid.ColumnDefinitions>
<!--#region Ergebnisse -->
<ItemsControl Grid.Column="0" ItemsSource="{Binding Ergebnisse}" Style="{StaticResource ErgebnisStil}" Background="Black" MouseDoubleClick="ItemsControl_MouseDoubleClick">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<DockPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
<!--#endregion-->
<!--#region Tabelle -->
<TextBox Grid.Column="1" Margin="10,0" MinWidth="50" Text="{Binding Path=Name}" Style="{StaticResource PrüfungsnameStil}"/>
<TextBox Grid.Column="2" MinWidth="40" Text="{Binding Path=Folgefehler}" Style="{StaticResource FolgefehlerStil}"/>
<TextBox Grid.Column="3" MinWidth="60" Text="{Binding Path=Fehler}" Style="{StaticResource FehlerStil}" IsReadOnly="True"/>
<CheckBox Grid.Column="4" MinWidth="40" IsChecked="{Binding Status, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Margin="5,0,0,0"/>
<!--#endregion-->
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<!--#endregion-->
</Grid>
<!--#region Folgefehlerschieber -->
<Canvas>
<Thumb DragDelta="LinealVerschieben" Canvas.Left="450" Canvas.Top="0">
<Thumb.Template>
<ControlTemplate>
<Grid>
<Line X1="0" Y1="0" X2="0"
Y2="{Binding ActualHeight, Source={x:Reference ProxyElement}}"
Canvas.ZIndex="2"
Style="{StaticResource LinealStil}" Cursor="Hand">
</Line>
<Rectangle Width="11" Margin="0,0,20,0"
Height="{Binding ActualHeight, Source={x:Reference ProxyElement}}"
Style="{StaticResource AnfasserStil}" Cursor="Hand">
<Rectangle.RenderTransform>
<TranslateTransform X="-5" Y="0"/>
</Rectangle.RenderTransform>
</Rectangle>
<Label Style="{StaticResource LabelStil}" Content="{Binding Linealposition}"/>
</Grid>
</ControlTemplate>
</Thumb.Template>
</Thumb>
</Canvas>
<!--#endregion-->
</Grid>
</UserControl>
I am just testing
<CheckBox Grid.Column="4" MinWidth="40" IsChecked="{Binding Status, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Margin="5,0,0,0"/>
This is the user control for the child page
<UserControl x:Class="Demo.View.Dashboard"
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"
xmlns:local="clr-namespace:Demo.View"
xmlns:vm="clr-namespace:Demo.ViewModel"
xmlns:dt="clr-namespace:DefectTracking;assembly=DefectTrackingControl"
mc:Ignorable="d"
d:DesignHeight="900" d:DesignWidth="1600"
>
<UserControl.DataContext>
<vm:DashboardViewModel/>
</UserControl.DataContext>
<UserControl.Resources>
<vm:BindingProxy x:Key="proxy" Data="{Binding}"/>
<dt:Prüfung x:Key="www"/>
</UserControl.Resources>
<Grid Background="White">
<dt:DefectTrace Margin="0,0,-321,-91">
<dt:DefectTrace.Prüfungen>
<dt:Prüfung
Status="{Binding Path=status}" />
<dt:Prüfung Name="Stabseite" />
<dt:Prüfung Name="Stosskappe" />
<dt:Prüfung Name="Druckbild"
/>
<dt:Prüfung Name="Oberfläche"
/>
</dt:DefectTrace.Prüfungen>
</dt:DefectTrace>
<CheckBox IsChecked="{Binding state, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Margin="100,100,100,10">Test check box</CheckBox>
</Grid>
</UserControl>
Property definition which I want to bind with checkbox but it's not propagating into a user control. If I just set true and false then it works but if I bind then it doesn't work.
Any help would be highly appreciated

I believe the problem here is
<UserControl.DataContext>
<vm:DashboardViewModel/>
</UserControl.DataContext>
because that basically means using a new instance of DashboardViewModel for this particular view, so I would assume that in your code somewhere you are using a different instance of this view model in which changing the value of Status does not really matter.
If the reason is what I think it is and you want to enhance your user comfort while developing XAML files and using this to help the compiler to know the types you can use the d:DataContext something like:
d:DataContext={x:Type vm:DashboardViewModel}

Windows Template Studio WPF UserControl not showing MetroWindow theme when changing TitleTemplate

(UPDATE: even without DEVEXPRESS controls, the same behavior is observed. So, I tested it with a couple textBlocks inside of a Grid...)
I am new to WPF development and I am using Windows Template Studio on VS 2019 (net core 3.1).
I am also using DEVEXPRESS.
I am wondering why I am losing the default MetroWindow theme in a user control when I add a custom TitleTemplate to the ShellWindow.xaml.
This is likely something very simple that I am not doing properly...
Repro steps:
1 - Create a default WPF Windows Template Studio Project. Select Navigation Pane as the Project type.
2 - Add a second blank page.
3 - Add DevExpress.WPF to the project (Not needed to duplicate).
4 - Create a simple user control
<UserControl x:Class="NoDevExpresssTitleTemplate.Views.TestUserControl"
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"
xmlns:local="clr-namespace:NoDevExpresssTitleTemplate.Views"
xmlns:dxlc="http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol"
xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Grid>
<dxlc:LayoutControl >
<dxlc:LayoutGroup>
<dxlc:LayoutItem Label="test1:" Width="150" VerticalAlignment="Center" Margin="20,0,0,0">
<dxe:TextEdit EditValue="Test1"/>
</dxlc:LayoutItem>
<dxlc:LayoutItem Label="test2:" Width="150" VerticalAlignment="Center" Margin="20,0,0,0">
<d:TextBox Text="test2"/>
</dxlc:LayoutItem>
</dxlc:LayoutGroup>
</dxlc:LayoutControl>
</Grid>
5 - Use the user control on the second blank page created,
<Page
x:Class="NoDevExpresssTitleTemplate.Views.SearchPage"
Style="{DynamicResource MahApps.Styles.Page}"
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"
xmlns:properties="clr-namespace:NoDevExpresssTitleTemplate.Properties"
xmlns:views="clr-namespace:NoDevExpresssTitleTemplate.Views"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="48" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock
Style="{StaticResource PageTitleStyle}"
Margin="{StaticResource MediumLeftMargin}"
Text="{x:Static properties:Resources.SearchPageTitle}" />
<Grid
Grid.Row="1"
Margin="{StaticResource MediumLeftRightMargin}"
Background="{DynamicResource MahApps.Brushes.Gray10}">
<!--
The Mahapps Gray10 color represents where you should place your content.
Place your content here.
-->
<views:TestUserControl></views:TestUserControl>
</Grid>
</Grid>
6 - Update the ShellWindow.xaml, including the TitleTemplate,
<controls:MetroWindow
x:Class="NoDevExpresssTitleTemplate.Views.ShellWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:dxlc="http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"
xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
xmlns:properties="clr-namespace:NoDevExpresssTitleTemplate.Properties"
xmlns:templateSelectors="clr-namespace:NoDevExpresssTitleTemplate.TemplateSelectors"
Style="{StaticResource CustomMetroWindow}"
mc:Ignorable="d"
MinWidth="500"
MinHeight="350"
Title="{x:Static properties:Resources.AppDisplayName}">
<controls:MetroWindow.TitleTemplate>
<DataTemplate>
<dxlc:LayoutControl>
<dxlc:LayoutGroup Orientation="Vertical" Height="50" >
<TextBlock Text="{TemplateBinding Content}"
TextTrimming="CharacterEllipsis"
VerticalAlignment="Center"
Margin="8 -1 8 0"
FontWeight="Light"
FontSize="{DynamicResource WindowTitleFontSize}"
FontFamily="{DynamicResource HeaderFontFamily}" />
<TextBlock Text="{TemplateBinding Content}"
TextTrimming="CharacterEllipsis"
VerticalAlignment="Center"
Margin="8 -1 8 0"
FontWeight="Light"
FontSize="{DynamicResource WindowTitleFontSize}"
FontFamily="{DynamicResource HeaderFontFamily}" />
</dxlc:LayoutGroup>
</dxlc:LayoutControl>
</DataTemplate>
</controls:MetroWindow.TitleTemplate>
<i:Interaction.Triggers>
<i:EventTrigger EventName="Loaded">
<i:InvokeCommandAction Command="{Binding LoadedCommand}" />
</i:EventTrigger>
<i:EventTrigger EventName="Unloaded">
<i:InvokeCommandAction Command="{Binding UnloadedCommand}" />
</i:EventTrigger>
</i:Interaction.Triggers>
<controls:MetroWindow.LeftWindowCommands>
<controls:WindowCommands>
<Button
Width="{Binding ElementName=hamburgerMenu, Path=CompactPaneLength}"
AutomationProperties.Name="{x:Static properties:Resources.ShellGoBackButton}"
ToolTip="{x:Static properties:Resources.ShellGoBackButton}"
Command="{Binding GoBackCommand}">
<TextBlock
Text=""
FontSize="14"
FontFamily="Segoe MDL2 Assets"
AutomationProperties.Name="{x:Static properties:Resources.ShellGoBackButton}" />
</Button>
</controls:WindowCommands>
</controls:MetroWindow.LeftWindowCommands>
<controls:MetroWindow.Resources>
<templateSelectors:MenuItemTemplateSelector
x:Key="MenuItemTemplateSelector">
<templateSelectors:MenuItemTemplateSelector.GlyphDataTemplate>
<DataTemplate DataType="{x:Type controls:HamburgerMenuGlyphItem}">
<Grid Height="48">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock
Grid.Column="0"
FontSize="16"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontFamily="Segoe MDL2 Assets"
Text="{Binding Glyph}"
ToolTip="{Binding Label}" />
<TextBlock
Grid.Column="1"
VerticalAlignment="Center"
FontSize="16"
Text="{Binding Label}" />
</Grid>
</DataTemplate>
</templateSelectors:MenuItemTemplateSelector.GlyphDataTemplate>
<templateSelectors:MenuItemTemplateSelector.ImageDataTemplate>
<DataTemplate DataType="{x:Type controls:HamburgerMenuImageItem}">
<Grid Height="48">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Ellipse
Grid.Column="0"
Width="24"
Height="24"
HorizontalAlignment="Center"
VerticalAlignment="Center"
ToolTip="{Binding Label}">
<Ellipse.Fill>
<ImageBrush ImageSource="{Binding Thumbnail}" />
</Ellipse.Fill>
</Ellipse>
<TextBlock
Grid.Column="1"
VerticalAlignment="Center"
FontSize="16"
Text="{Binding Label}" />
</Grid>
</DataTemplate>
</templateSelectors:MenuItemTemplateSelector.ImageDataTemplate>
</templateSelectors:MenuItemTemplateSelector>
</controls:MetroWindow.Resources>
<controls:MetroWindow.Content>
<controls:HamburgerMenu
x:Name="hamburgerMenu"
HamburgerButtonName="{x:Static properties:Resources.ShellHamburgerButtonName}"
IsPaneOpen="False"
DisplayMode="CompactInline"
ItemsSource="{Binding MenuItems}"
SelectedItem="{Binding SelectedMenuItem}"
ItemCommand="{Binding MenuItemInvokedCommand}"
ItemTemplateSelector="{StaticResource MenuItemTemplateSelector}">
<controls:HamburgerMenu.Content>
<Frame
x:Name="shellFrame"
Grid.Row="1"
NavigationUIVisibility="Hidden"
Focusable="False" />
</controls:HamburgerMenu.Content>
</controls:HamburgerMenu>
</controls:MetroWindow.Content></controls:MetroWindow>
The default Light.Blue theme/style is lost,

GridExtra Child Element Z-index

I have used grid extra to design individual responsive components in my WPF application. I have a View like following:
<UserControl x:Class="..."
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"
xmlns:local="clr-namespace:..."
mc:Ignorable="d"
xmlns:ge="clr-namespace:SourceChord.GridExtra;assembly=GridExtra.Wpf">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="...">
</ResourceDictionary>
<ResourceDictionary Source="...">
</ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<UserControl.Width>
<StaticResource ResourceKey="ApplicationWidth" />
</UserControl.Width>
<Grid Style="{StaticResource SelectContainer}"
ge:GridEx.RowDefinition="1*, 3*"
ge:GridEx.TemplateArea="Message/ Companies/">
<Grid ge:GridEx.AreaName="Message"
ge:GridEx.RowDefinition="*"
ge:GridEx.ColumnDefinition="*,*"
ge:GridEx.TemplateArea="L1 L2/"
>
<TextBlock Text="{Binding Path=MessageL1Text}" Style="{StaticResource MessageTextStyle}" ge:GridEx.AreaName="L1"/>
<TextBlock Text="{Binding Path=MessageL2Text}" Style="{StaticResource MessageTextUrduStyle}" ge:GridEx.AreaName="L2"/>
</Grid>
<Grid ge:GridEx.AreaName="Companies"
ge:GridEx.RowDefinition="*"
ge:GridEx.ColumnDefinition="1*,1.5*,1.5*,1.5*,1.5*,1.5*,1.5*,1*"
ge:GridEx.TemplateArea="MarginLeft Company1 Company2 Company3 Company4 Company5 More MarginRight/">
<Grid ge:GridEx.AreaName="MarginLeft"></Grid>
<Grid ge:GridEx.AreaName="MarginRight"></Grid>
<Grid ge:GridEx.AreaName="Company1" Style="{StaticResource CompanyButtonOneStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyOne.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyOneClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyOne.IsVisible}" IsEnabled="{Binding Path=CompanyOne.IsActive}">
</Button>
</Grid>
<Grid ge:GridEx.AreaName="Company2" Style="{StaticResource CompanyButtonTwoStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyTwo.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyTwoClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyTwo.IsVisible}" IsEnabled="{Binding Path=CompanyTwo.IsActive}">
</Button>
</Grid>
<Grid ge:GridEx.AreaName="Company3" Style="{StaticResource CompanyButtonThreeStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyThree.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyThreeClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyThree.IsVisible}" IsEnabled="{Binding Path=CompanyThree.IsActive}">
</Button>
</Grid>
<Grid ge:GridEx.AreaName="Company4" Style="{StaticResource CompanyButtonFourStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyFour.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyFourClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyFour.IsVisible}" IsEnabled="{Binding Path=CompanyFour.IsActive}">
</Button>
</Grid>
<Grid ge:GridEx.AreaName="Company5" Style="{StaticResource CompanyButtonFiveStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyFive.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyFiveClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyFive.IsVisible}" IsEnabled="{Binding Path=CompanyFive.IsActive}">
</Button>
</Grid>
<Grid ge:GridEx.AreaName="More" Style="{StaticResource MoreButtonStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=More.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=MoreClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=More.IsVisible}" IsEnabled="{Binding Path=More.IsActive}">
</Button>
</Grid>
</Grid>
</Grid>
Next what I require was to bring a disable panel to flood over this user control disabling all the controls and graying out the UI like:
<UserControl x:Class="..."
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"
xmlns:local="clr-namespace:..."
mc:Ignorable="d"
xmlns:ge="clr-namespace:SourceChord.GridExtra;assembly=GridExtra.Wpf">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="...">
</ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<Grid Style="{StaticResource DisableGridStyle}" Opacity="0.8" Background="Gray">
</Grid>
As you can see next I wrap both in a container Panel and will keep the disabled control hidden till I want it to appear on top of the actual panel using Grid and Grid.Zindex in somewhat manner like explained in this answer.
I have tried it and it works like a charm.
So now let's move on to my actual requirement which is to bring up one of the child component of the actual panel say the following on top while keeping the others behind the disabled panel;
<Grid ge:GridEx.AreaName="Company1" Style="{StaticResource CompanyButtonOneStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyOne.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyOneClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyOne.IsVisible}" IsEnabled="{Binding Path=CompanyOne.IsActive}">
</Button>
</Grid>
I tried to do it by tweaking the Z-index for the said component but it did not work for me. I do not know if this is being caused by grid extra but using grid extra is a constraint that I cannot let go. Thus, what I need is a solution to get the required results using grid extra. Thanks in advance.
Note details about GridExtra can be viewed here.

Z Index is used to control the ordering of the elements that are at the same level in your components heirarchy. As per you state that:
As you can see next I wrap both in a container Panel and will keep the disabled control hidden till I want it to appear on top of the actual panel using Grid and Grid.Zindex
I believe in doing so, your required component is not at the same level as your disable panel and it would not be possible to bring it up using the Z-Index.
One alternate solution that I can think of is to have multiple disable panels with same properties and use one at the same sibling level at the component that you wish to send back or bring in front.
As an example consider the following code:
<Window x:Class="ZindexForVaryingChildren.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:ZindexForVaryingChildren"
xmlns:ge="clr-namespace:SourceChord.GridExtra;assembly=GridExtra.Wpf"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid ge:GridEx.RowDefinition="*,*"
ge:GridEx.TemplateArea="R1/ R2/" Opacity="0.8" Background="Red">
<TextBlock Opacity="0.8" Background="Red" Grid.ZIndex="2" ge:GridEx.Area="0,0,2,2" HorizontalAlignment="Stretch"/>
<Grid ge:GridEx.AreaName="R1" Grid.ZIndex="1">
<TextBlock TextWrapping="Wrap" Text="Hello" FontSize="40"/>
</Grid>
<Grid ge:GridEx.AreaName="R2" Grid.ZIndex="3">
<TextBlock TextWrapping="Wrap" Text="Hello" FontSize="40"/>
</Grid>
</Grid>
Here you can see even using the GridExtra I have tried to illustrate how you can bring the R2 to front when pushing R1 to back. Also using the TextBlock as the disabler panel while you can use the component you wish.
The above will yield output as follows:
Also note this is one of the suggested solution you can totally work out a strategy of your own but have to keep in mind that Z-Index only works for siblings.

I ended up using my disable component as a sibling to the hierarchy as:
<UserControl x:Class="..."
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"
xmlns:local="clr-namespace:..."
mc:Ignorable="d"
xmlns:ge="clr-namespace:SourceChord.GridExtra;assembly=GridExtra.Wpf">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="...">
</ResourceDictionary>
<ResourceDictionary Source="...">
</ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<UserControl.Width>
<StaticResource ResourceKey="ApplicationWidth" />
</UserControl.Width>
<Grid Style="{StaticResource NetworkSelectContainer}"
ge:GridEx.RowDefinition="1*, 3*"
ge:GridEx.TemplateArea="Message/ Companies/">
<Grid ge:GridEx.AreaName="Message"
ge:GridEx.RowDefinition="*"
ge:GridEx.ColumnDefinition="*,*"
ge:GridEx.TemplateArea="L1 L2/"
>
<local:DisablePanel Panel.ZIndex="3" ge:GridEx.Area="0,0,2,2" x:Name="DisableMessage"></local:DisablePanel>
<TextBlock Text="{Binding Path=MessageText}" Style="{StaticResource MessageTextStyle}" ge:GridEx.AreaName="L1"/>
<TextBlock Text="{Binding Path=MessageUrduText}" Style="{StaticResource MessageTextStyle}" ge:GridEx.AreaName="L2"/>
</Grid>
<Grid ge:GridEx.AreaName="Companies"
ge:GridEx.RowDefinition="*"
ge:GridEx.ColumnDefinition="1*,1.5*,1.5*,1.5*,1.5*,1.5*,1.5*,1*"
ge:GridEx.TemplateArea="MarginLeft Company1 Company2 Company3 Company4 Company5 More MarginRight/">
<local:DisablePanel ge:GridEx.Area="0,0,1,8" Panel.ZIndex="3" x:Name="DisableCompany"></local:DisablePanel>
<Grid ge:GridEx.AreaName="MarginLeft"></Grid>
<Grid ge:GridEx.AreaName="MarginRight"></Grid>
<Grid ge:GridEx.AreaName="Company1" Style="{StaticResource CompanyButtonOneStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyOne.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyOneClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyOne.IsVisible}" IsEnabled="{Binding Path=CompanyOne.IsActive}">
</Button>
</Grid>
<Grid ge:GridEx.AreaName="Company2" Style="{StaticResource CompanyButtonTwoStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyTwo.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyTwoClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyTwo.IsVisible}" IsEnabled="{Binding Path=CompanyTwo.IsActive}">
</Button>
</Grid>
<Grid ge:GridEx.AreaName="Company3" Style="{StaticResource CompanyButtonThreeStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyThree.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyThreeClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyThree.IsVisible}" IsEnabled="{Binding Path=CompanyThree.IsActive}">
</Button>
</Grid>
<Grid ge:GridEx.AreaName="Company4" Style="{StaticResource CompanyButtonFourStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyFour.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyFourClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyFour.IsVisible}" IsEnabled="{Binding Path=CompanyFour.IsActive}">
</Button>
</Grid>
<Grid ge:GridEx.AreaName="Company5" Style="{StaticResource CompanyButtonFiveStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyFive.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyFiveClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyFive.IsVisible}" IsEnabled="{Binding Path=CompanyFive.IsActive}">
</Button>
</Grid>
<Grid ge:GridEx.AreaName="More" Style="{StaticResource MoreButtonStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=More.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=MoreClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=More.IsVisible}" IsEnabled="{Binding Path=More.IsActive}">
</Button>
</Grid>
</Grid>
</Grid>
Although using much of the approach in the above answer yet adding it for clarifying idea to others.

WPF window doesn't render content until resized?

I have a simple WPF dialog that shows any errors that occurred in the program. The view model it's bound to is very simple, just a text property and a list property that displays the list of errors. However, when I show this dialog in my application it shows up as empty, it's just the title bar and a completely white window. As soon as I resize the window all the content populates properly. Why would this be? Here is the constructor of the window:
public Wnd_Errors(string description, List<GamutError> ers)
{
InitializeComponent();
_myVM = new ErrorWindowVM()
{
DescriptionText = description,
Errors = ers,
};
DataContext = _myVM;
}
Here is the entire XAML of the window:
<Window 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"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" x:Class="SPTR.Gamut.Wnd_Errors"
mc:Ignorable="d"
Title="Gamut | Errors"
WindowStartupLocation="CenterScreen"
Icon="Images/Icon_Gamut.ico"
Height="442" Width="846">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="SPECtrumStyles.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Background="{StaticResource br_RibbonBackdrop}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Source="Images/Icon_Error.png" Margin="10" />
<TextBlock x:Name="tb_Desc" Grid.Column="1" FontWeight="Bold" Margin="5" Text="{Binding DescriptionText}"
TextWrapping="Wrap" />
</Grid>
<telerik:RadGridView Grid.Row="1" AutoGenerateColumns="False" RowIndicatorVisibility="Collapsed" GridLinesVisibility="Horizontal"
CanUserFreezeColumns="False" EditTriggers="None" CanUserDeleteRows="False" CanUserInsertRows="False"
ItemsSource="{Binding Errors}" CanUserSelect="False">
<telerik:RadGridView.Columns>
<telerik:GridViewDataColumn Header="Error Type" DataMemberBinding="{Binding ErrorTypeText}" />
<telerik:GridViewDataColumn Header="Message" DataMemberBinding="{Binding UIText}"
TextWrapping="Wrap" Width="*" />
<telerik:GridViewDataColumn Header="Internal Error" DataMemberBinding="{Binding ErrorTypeText}">
<telerik:GridViewDataColumn.CellTemplate>
<DataTemplate>
<ScrollViewer MaxWidth="800" VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto">
<TextBlock Text="{Binding InternalMessage, Mode=OneWay}" />
</ScrollViewer>
</DataTemplate>
</telerik:GridViewDataColumn.CellTemplate>
</telerik:GridViewDataColumn>
<telerik:GridViewDataColumn Header="Stack Trace" DataMemberBinding="{Binding ErrorTypeText}"
IsVisible="{Binding ShowStackTrace}">
<telerik:GridViewDataColumn.CellTemplate>
<DataTemplate>
<ScrollViewer MaxHeight="250" VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto">
<TextBox Text="{Binding Stack, Mode=OneWay}" />
</ScrollViewer>
</DataTemplate>
</telerik:GridViewDataColumn.CellTemplate>
</telerik:GridViewDataColumn>
</telerik:RadGridView.Columns>
</telerik:RadGridView>
<CheckBox Grid.Row="2" Content="Show Stack Trace (for error reporting)"
IsChecked="{Binding ShowStackTrace, Mode=TwoWay}" Margin="5,3" />
<Grid Grid.Row="3" Background="{StaticResource br_BaseBar}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48*"/>
<ColumnDefinition Width="371*"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="0,0,10,0" Grid.Column="1">
<Button Margin="5" Content="OK" HorizontalAlignment="Right" Width="75" IsDefault="True"
x:Name="btn_OK" Click="btn_OK_Click" />
<Button Margin="5" Content="Cancel" HorizontalAlignment="Right" Width="75" IsCancel="True"
x:Name="btn_Cancel" Click="btn_Cancel_Click" />
</StackPanel>
<Button Content="Export to .xlsx" Width="100" Margin="5" HorizontalAlignment="Left"
x:Name="Button2" Click="Button2_Click" Grid.ColumnSpan="2" />
</Grid>
<Separator Grid.Row="2" VerticalAlignment="Bottom" Margin="-1" Background="{StaticResource Br_Orange}" />
</Grid>
</Window>
As you can see I don't even subscribe to any of the window events to have any type of custom handler that could be suppressing anything...
Where do I even start trying to debug this? This is the only window in the application that does this (at least the only one I've encountered it with).

Create and switch between Edit / View Templates for a control

I have a TextBlock that dislays a message. I have to build the ability to edit and save this message. When the Edit Icon is clicked, instead of popping up another view with a TextBox and a Save Button, I wanted to somehow just show a Textbox and Save Button in place of the TextBlock. Then when Save is clicked it would change the State back again only showing the read only TextBlock.
I thought that I could do this with the VisualStateManager but it seems you can only do Storyboards for States and even if I leave the button always there and make it invisible I can't seem to change the Property Value between States either.
Is VisualStateManager the answer for this or is there something better to use?
Update
I found and followed this example View / Edit Control and it looks like it will solve my issue.
<UserControl x:Class="WpfApplication1.Test2"
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"
xmlns:c="clr-namespace:WpfApplication1"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Label Name="MyTest" c:ReadOnlyControlTemplate.Enabled="True" c:ReadOnlyControlTemplate.DoLock="False" Grid.Column="0" Grid.Row="0" Content="{Binding Path=Message}" >
<Control.Template>
<ControlTemplate TargetType="{x:Type Label}">
<TextBox Width="{TemplateBinding Property=Width}" Height="{TemplateBinding Property=Height}" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content}" AcceptsReturn="True" Margin="100,0" />
</ControlTemplate>
</Control.Template>
<c:ReadOnlyControlTemplate.LockTemplate>
<ControlTemplate TargetType="{x:Type Label}">
<Border BorderBrush="Red" BorderThickness="3">
<TextBlock Width="{TemplateBinding Property=Width}" Height="{TemplateBinding Property=Height}" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content}" Foreground="White" />
</Border>
</ControlTemplate>
</c:ReadOnlyControlTemplate.LockTemplate>
</Label>
<WrapPanel Grid.Column="0" Grid.Row="1" HorizontalAlignment="Center">
<Button Content="ReadOnly" Width="70" Height="25" Click="Button_Click" Margin="0,0,5,0" />
<Button Content="Edit" Grid.Column="0" Grid.Row="1" Width="50" Height="25" Click="Button_Click2" />
</WrapPanel>
</Grid>