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,

Background Color for Radiobutton

In a MetroWindow I want to create three big rectangular radio buttons. When selected the radio button should change his background color to mark it as selected.
Currently I have somewhat like this:
MainWindow.xaml:
<ma:MetroWindow x:Class="WpfForm.MainWindow"
xmlns:ma="http://metro.mahapps.com/winfx/xaml/controls"
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:WpfForm"
mc:Ignorable="d"
Title="MainWindow" Height="720" Width="1280" DataContext="{Binding RelativeSource={RelativeSource Self}}" WindowStartupLocation="CenterScreen" WindowStyle="ThreeDBorderWindow" Background="White" Loaded="MainWindow_Loaded" Closing="Window_Closing">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.285*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TabControl TabStripPlacement="Left" Width="Auto" Height="Auto" Grid.ColumnSpan="4" Margin="4,0,3,0"
SelectedIndex="{Binding SelectedTab, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
SelectionChanged="MainWindowTabControl_SelectionChanged" >
<TabItem >
<TabItem.Header>
<StackPanel>
<TextBlock Text="Aktion" FontSize="20" FontWeight="Bold" Padding="8" HorizontalAlignment="Center" />
</StackPanel>
</TabItem.Header>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<RadioButton Style="{DynamicResource SquareButtonStyle}"
Grid.Column="0"
IsChecked="{Binding isFirstButtonSelected, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Width="210" Height=" 320"
Margin="0,0,0,170"
BorderBrush="#FF707070"
ma:ButtonHelper.CornerRadius="50"
FontSize="28"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
ma:ButtonHelper.PreserveTextCase="True"
Content="Text1">
</RadioButton>
<RadioButton Style="{DynamicResource SquareButtonStyle}"
Grid.Column="1"
IsChecked="{Binding isSecondButtonSelected, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Width="210" Height=" 320"
Margin="0,0,0,170"
BorderBrush="#FF707070"
ma:ButtonHelper.CornerRadius="50"
FontSize="28"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
ma:ButtonHelper.PreserveTextCase="True"
Content="Text2"/>
<RadioButton Style="{DynamicResource SquareButtonStyle}"
Grid.Column="2"
IsChecked="{Binding isThirdButtonSelected, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Width="210" Height=" 320"
Margin="0,0,0,170"
BorderBrush="#FF707070"
ma:ButtonHelper.CornerRadius="50"
FontSize="28"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
ma:ButtonHelper.PreserveTextCase="True"
Content="Text3">
</RadioButton>
<Button VerticalAlignment="Bottom" HorizontalAlignment="Right" Padding="35,3"
Margin="0,0,8,6" Grid.Column="2" IsEnabled="{Binding ActionTabAllowNext, UpdateSourceTrigger=PropertyChanged}"
Command="{Binding ActionCommand}" Content="Next" FontSize="18" />
</Grid>
</TabItem>
</TabControl>
</Grid>
</ma:MetroWindow>
App.xaml:
<Application x:Class="WpfForm.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfForm"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<!-- MahApps.Metro resource dictionaries. Make sure that all file names are Case Sensitive! -->
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
<!-- Accent and AppTheme setting -->
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Crimson.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
When clicking on the button it only changes color on hovering and on mouse press but changes back to normal on mouse release. Maybe I can add an additional property to mark the buttons as selected?
Solution
The answer below worked for me. Thank you for your help.
In the end I made another approach that fits better: I changed the style for the RadioButtons to a ToggleButton. Nevertheless the answer below is correct.

You can find the style definition online on mahapp's github: https://github.com/MahApps/MahApps.Metro/blob/develop/src/MahApps.Metro/Styles/Controls.RadioButton.xaml
Just copy and paste it into your App.xaml for example and change the color values as you wish.
Don't forget to rebind the style to your edited version wherever you use a RadioButton.

Why size of controls are wrong before resize? [WPF]

Current custom window(base) is:
<Window x:Class="Views.DialogWindow"
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:Views"
xmlns:dialog="clr-namespace:ViewModels"
mc:Ignorable="d"
Title="DialogWindow" Height="450" Width="800" WindowStartupLocation="CenterScreen" WindowStyle="None" AllowsTransparency="True" Background="Transparent" ResizeMode="CanResizeWithGrip" SizeToContent="WidthAndHeight">
<Window.Resources>
<ResourceDictionary>
<DataTemplate DataType="{x:Type dialog:Dialog_1ViewModel}">
<local:Dialog_1></local:Dialog_1>
</DataTemplate>
</ResourceDictionary>
</Window.Resources>
<ContentPresenter x:Name="ContentPresenter" Content="{Binding}"></ContentPresenter>
</Window>
Window in designer:
Its DataContext is set to an instance of UserControl:
<UserControl x:Class="Views.Dialog_1"
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:Views"
xmlns:t1="clr-namespace:Windows"
mc:Ignorable="d" d:DesignHeight="400" d:DesignWidth="600">
<UserControl.Resources>
<ResourceDictionary>
<Style TargetType="TextBlock">
<Setter Property="TextTrimming" Value="CharacterEllipsis"></Setter>
</Style>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Resources/Resource_1.xaml"></ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<Border CornerRadius="4" Background="#ffff" BorderThickness="1" BorderBrush="#9888">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="2*"></RowDefinition>
<RowDefinition Height="12*"/>
<RowDefinition Height="15*"></RowDefinition>
<RowDefinition Height="40"></RowDefinition>
</Grid.RowDefinitions>
<Border Grid.Row="0" BorderThickness="0,0,0,1" BorderBrush="#f999" Cursor="Hand" MouseDown="Border_MouseDown">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="Header"></TextBlock>
</Border>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" MinWidth="150"></ColumnDefinition>
<ColumnDefinition Width="3*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Margin="4">
<Image Source="C:\test.png"></Image>
</Grid>
<Grid Grid.Column="1" Margin="4">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<DockPanel>
<TextBlock Text="Foo: " FontWeight="Bold" Margin="0,0,4,0"></TextBlock>
<TextBlock Text="Bar"></TextBlock>
</DockPanel>
<DockPanel Margin="0,8,0,0">
<TextBlock Text="Foo: " FontWeight="Bold" Margin="0,0,4,0"></TextBlock>
<TextBlock Text="Bar"></TextBlock>
</DockPanel>
<DockPanel>
<TextBlock Text="Foo: " FontWeight="Bold" Margin="0,0,4,0"></TextBlock>
<TextBlock Text="Bar"></TextBlock>
</DockPanel>
<DockPanel>
<TextBlock Text="Foo: " FontWeight="Bold" Margin="0,0,4,0"></TextBlock>
<TextBlock Text="Bar"></TextBlock>
</DockPanel>
</StackPanel>
<DockPanel Grid.Row="1" VerticalAlignment="Center">
<TextBlock Text="Foo: " FontWeight="Bold" Margin="0,0,4,0"/>
<TextBlock Text="Bar"/>
</DockPanel>
</Grid>
</Grid>
<DataGrid Grid.Row="2" Background="#ff88" ColumnWidth="Auto" VerticalAlignment="Stretch" AutoGenerateColumns="False" ItemsSource="{Binding data_1}">
<DataGridTextColumn Header="Name" MinWidth="200" Binding="{Binding Name}"/>
<DataGridTextColumn Header="Description" MinWidth="100" Binding="{Binding Description}"/>
</DataGrid>
<Border Grid.Row="3" BorderThickness="0,1,0,0" BorderBrush="#f999">
<Grid HorizontalAlignment="Right" Margin="4">
<Button Style="{StaticResource T_button_1}" HorizontalAlignment="Right" VerticalAlignment="Center" Width="100" Command="{Binding C_No}" CommandParameter="{Binding RelativeSource={RelativeSource AncestorType=Window}}" t1:Button_1.Icon="/Icons/no.png" t1:Button_1.Label="Cancel"/>
<Button Style="{StaticResource T_button_1}" HorizontalAlignment="Right" VerticalAlignment="Center" Width="100" Command="{Binding C_Yes}" CommandParameter="{Binding RelativeSource={RelativeSource AncestorType=Window}}" Margin="0,0,105,0"/>
</Grid>
</Border>
</Grid>
</Border>
</UserControl>
UserControl in designer:
The result(run and resize process):
Close look shows interesting behaviour(seems like style changes):
Edit 1
Made some more minimized version:
<UserControl x:Class="Views.Dialog_1"
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="400" d:DesignWidth="600">
<UserControl.Resources>
<ResourceDictionary>
<Style TargetType="TextBlock">
<Setter Property="TextTrimming" Value="CharacterEllipsis"></Setter>
</Style>
<Style TargetType="Grid">
<Setter Property="ShowGridLines" Value="True"></Setter>
</Style>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Resources/Resource_1.xaml"></ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<Border Background="#ffff" BorderThickness="1" BorderBrush="#ccc">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="2*"/>
<RowDefinition Height="3*"></RowDefinition>
<RowDefinition Height="40"></RowDefinition>
</Grid.RowDefinitions>
<Border Grid.Row="0">
</Border>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="3*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Margin="4">
<Image Source="C:\test.ico"></Image>
</Grid>
<Grid Grid.Column="1" Margin="4">
</Grid>
</Grid>
<Grid Grid.Row="2">
</Grid>
<Border Grid.Row="3">
</Border>
</Grid>
</Border>
</UserControl>
When run:
What could cause such issue where controls' initial sizes are oddly wrong and after resizing they return to "normal" or how would it be possible to fix/escape that situation leaving similar logic with custom UserControl of Window?
May this be caused by ContentPresenter part?

How to remove default chrome from a WPF ToggleButton

I have a ToggleButton defined like:
<ToggleButton Name="tbPinned" Grid.Row="0" Grid.Column="3" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="1,0,0,-5" Height="30" Width="30" IsChecked="True" Checked="tbPinned_Checked" Unchecked="tbPinned_Unchecked" >
<Image Source="/some_image.png" Stretch="Fill" />
</ToggleButton>
However, I just want the button to be an image, not an image on a button. If I was using a normal Button I would just do something like Style="{DynamicResource NoChromeButton}" in the opening ToggleButton tag. But this does not work.
How can I mimic the whole NoChromeButton thing in a ToggleButton?
EDIT: Editted to include how I do it with regular Buttons:
<Button Style="{DynamicResource NoChromeButton}" Height="17" Margin="0,0,30,0" Name="btnMinimize" VerticalAlignment="Top" Grid.Column="1" Click="btnMinimize_Click" HorizontalAlignment="Right" Width="27" Padding="0" Visibility="Visible">
<Image Source="/some_image.png" Stretch="None" />
</Button>

Just copy/paste this into new WPF project.
<Window x:Class="SOChromeButton.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style x:Key="Chromeless" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border BorderThickness="0" Width="54" Height="54">
<ContentPresenter/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<ToggleButton Style="{StaticResource Chromeless}" Name="tbPinned" Grid.Row="0" Grid.Column="0" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="10,0,0,0" IsChecked="True" >
<Image Source="C:\Temp\info.png"></Image>
</ToggleButton>
</Grid> </Window>

Will this do?
<ToggleButton Name="tbPinned" Grid.Row="0" Grid.Column="3" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="1,0,0,-5" Height="30" Width="30" IsChecked="True" Checked="tbPinned_Checked" Unchecked="tbPinned_Unchecked"
BorderThickness="0" Background="Transparent">
<Image Source="/some_image.png" Stretch="Fill" />
</ToggleButton>