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}

How to add TextBox over PasswordBox?

I want to put a TextBox over the PasswordBox to make the encrypted password visible with a button.
When I press the button I want to see the password from the PasswordBox in the TextBox, but my problem is the alignment, because these two components are in the Grid, the TextBox is aligned to the right of the PasswordBox.
This is my XAML file:
<UserControl
x:Class="Waters.NuGenesis.LmsBundle.Plugins.Views.RpcView"
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:controls="clr-namespace:Waters.NuGenesis.UiEngine.Presentation.Controls;assembly=Waters.NuGenesis.UiEngine.Presentation"
xmlns:presentation="clr-namespace:Waters.NuGenesis.UiEngine.Presentation;assembly=Waters.NuGenesis.UiEngine.Presentation"
xmlns:viewModels="clr-namespace:Waters.NuGenesis.LmsBundle.Plugins.ViewModels"
xmlns:buttons="clr-namespace:Waters.NuGenesis.UiEngine.Presentation.Controls.Buttons;assembly=Waters.NuGenesis.UiEngine.Presentation"
mc:Ignorable="d"
d:DesignHeight="450"
d:DesignWidth="800"
d:DataContext="{d:DesignInstance viewModels:RpcViewModel}">
<UserControl.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
</UserControl.Resources>
<DockPanel>
<controls:PageTitleBlock
DockPanel.Dock="Top"
Title="RPC & SDMS Login"
Description="Configure SDMS RPC and SDMS Login services." />
<Grid>
<Grid.Resources>
<Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource {x:Type TextBox}}">
<Setter Property="Margin" Value="0 3" />
</Style>
<Style TargetType="{x:Type Label}" BasedOn="{StaticResource {x:Type Label}}">
<Setter Property="Margin" Value="0 3 15 0" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
<Style TargetType="{x:Type PasswordBox}" BasedOn="{StaticResource {x:Type PasswordBox}}">
<Setter Property="Margin" Value="0 3" />
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="35" />
<RowDefinition Height="Auto" />
<RowDefinition Height="35" />
<RowDefinition Height="Auto" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Label
Grid.Column="0"
Grid.Row="0"
Content="User Name"
Visibility="{Binding IsRpcUserNameVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />
<TextBox
Grid.Column="1"
Grid.Row="0"
Text="{Binding RpcUserName, UpdateSourceTrigger=LostFocus}"
Visibility="{Binding IsRpcUserNameVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />
<Label
Grid.Column="0"
Grid.Row="2"
Content="Password"
Visibility="{Binding IsRpcPasswordVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />
<DockPanel
Grid.Column="1"
Grid.Row="2">
<buttons:SmallButton
DockPanel.Dock="Right"
Content="See"
Margin="15 0 0 0"
Command="{Binding ShowPasswordCommand}" />
<PasswordBox
Grid.Column="1"
Grid.Row="2"
presentation:UnsafePasswordBox.BindPassword="True"
presentation:UnsafePasswordBox.BoundPassword="{Binding Path=RpcPassword, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Visibility="{Binding IsRpcPasswordVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />
<TextBox
Grid.Column="1"
Grid.Row="2"
Name="TestShowPassword"
Text="{Binding DisplayRpcPassword, UpdateSourceTrigger=PropertyChanged}"
Visibility="{Binding SetVisibility}" />
</DockPanel>
<Label
Grid.Column="0"
Grid.Row="4"
Content="Domain"
Visibility="{Binding IsRpcDomainVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />
<TextBox
Grid.Column="1"
Grid.Row="4"
Text="{Binding RpcDomain}"
Visibility="{Binding IsRpcDomainVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />
</Grid>
</DockPanel>
</UserControl>
What I want to modify is this DockPanel:
<DockPanel
Grid.Column="1"
Grid.Row="2">
<buttons:SmallButton
DockPanel.Dock="Right"
Content="See"
Margin="15 0 0 0"
Command="{Binding ShowPasswordCommand}" />
<PasswordBox
Grid.Column="1"
Grid.Row="2"
presentation:UnsafePasswordBox.BindPassword="True"
presentation:UnsafePasswordBox.BoundPassword="{Binding Path=RpcPassword, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Visibility="{Binding IsRpcPasswordVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />
<TextBox
Grid.Column="1"
Grid.Row="2"
Name="TestShowPassword"
Text="{Binding DisplayRpcPassword, UpdateSourceTrigger=PropertyChanged}"
Visibility="{Binding SetVisibility}" />
</DockPanel>

You put the PasswordBox and the TextBox in a DockPanel, but set the attached Grid.Row and Grid.Column properties, which do not have any effect here, they are only respected by Grid.
The DockPanel will arrange items next to each other, but not overlapping.
Defines an area where you can arrange child elements either horizontally or vertically, relative to each other.
You should use a Grid instead which the same column for the PasswordBox and the TextBox.
<Grid
Grid.Column="1"
Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<buttons:SmallButton
Grid.Column="1"
Content="See"
Margin="15 0 0 0"
Command="{Binding ShowPasswordCommand}"/>
<PasswordBox
Grid.Column="0"
presentation:UnsafePasswordBox.BindPassword="True"
presentation:UnsafePasswordBox.BoundPassword="{Binding Path=RpcPassword, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Visibility="{Binding IsRpcPasswordVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />
<TextBox
Grid.Column="0"
Name="TestShowPassword"
Text="{Binding DisplayRpcPassword, UpdateSourceTrigger=PropertyChanged}"
Visibility="{Binding SetVisibility}"/>
</Grid>

Controls moving haphazardly when resizing window

I have created a wpf application. The XAML code for the application is below.
The window looks great when its run, however when I try to resize the window the controls moves haphazardly. I want the controls to stay in place like a proper windows application. Also I am new to WPF. Any suggestion would be appreciated.
I have inserted a image of original and resized window.
<Window x:Class="demoUI.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:demoUI"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="8*"/>
<RowDefinition Height="17*"/>
<RowDefinition Height="397*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="39*"/>
<ColumnDefinition Width="113*"/>
<ColumnDefinition Width="46*"/>
<ColumnDefinition Width="12*"/>
<ColumnDefinition Width="149*"/>
<ColumnDefinition Width="38*"/>
<ColumnDefinition Width="141*"/>
<ColumnDefinition Width="256*"/>
</Grid.ColumnDefinitions>
<!--<Border BorderBrush="Black" BorderThickness="1" Grid.Column="6" Height="100" Margin="9.2,13,21.6,0" Grid.Row="1" Grid.RowSpan="2" VerticalAlignment="Top" HorizontalAlignment="Stretch"/>-->
<Menu Margin="0,-4,56.2,5.8" Grid.ColumnSpan="2" Grid.RowSpan="2" >
<MenuItem Header="File">
<MenuItem Header="Open Log File"/>
<MenuItem Header="Open Workspace"/>
<Separator/>
<MenuItem Header="Save as Workspace"/>
<MenuItem Header="Set Path host file"/>
<Border BorderBrush="Black" BorderThickness="1" Margin="-34,-117,-656.4,37.6"/>
</MenuItem>
<MenuItem Header="Control" Grid.Row="0" Grid.Column="1" Width="60">
<MenuItem Header="Open Command Line View"/>
</MenuItem>
</Menu>
<TextBlock Text="Connect To" Width="65" Height="Auto" HorizontalAlignment="Left" Margin="4,16.2,0,360.6" Grid.Row="2" Grid.ColumnSpan="2"/>
<TextBox TextWrapping="Wrap" Text="IP/HostName" Margin="37.8,14.2,11.4,360.6" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.ColumnSpan="2"/>
<TextBox TextWrapping="Wrap" Text="Line" Margin="100.8,46.2,12.4,328.6" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.ColumnSpan="2"/>
<TextBlock Text="Protocol" Width="78" Height="Auto" HorizontalAlignment="Left" Margin="111.6,9,0,383.6" Grid.Column="4" Grid.ColumnSpan="3" Grid.RowSpan="2" Grid.Row="1"/>
<StackPanel VerticalAlignment="Top" Grid.Column="3" Orientation="Horizontal" Grid.ColumnSpan="2" Height="48" Margin="2.6,0.2,0,0" Grid.Row="2" HorizontalAlignment="Left" Width="78">
<Button Content="Play" HorizontalAlignment="Left" VerticalAlignment="Top" Height="20" Margin="4.5,14.2,0,0" Width="32"/>
<Button Content="Stop" HorizontalAlignment="Right" VerticalAlignment="Top" Height="20" Margin="4.5,14.2,0,0" Width="32"/>
</StackPanel>
<StackPanel Orientation="Vertical"
VerticalAlignment="Top" Grid.Column="4" Grid.ColumnSpan="2" Grid.Row="2"
HorizontalAlignment="Center" Width="34" Margin="123.6,6.2,28.8,0" Height="115">
<TextBlock Text="Rx" Width="20" Height="Auto" HorizontalAlignment="Center"/>
<CheckBox Margin="5,5,4.6,5" Height="14" />
<CheckBox Margin="5,5,4.6,5" Height="14" RenderTransformOrigin="0.492,-0.286" />
<CheckBox Margin="5,5,4.6,5" Height="14" />
<CheckBox Margin="5,5,4.6,5" Height="14" />
</StackPanel>
<StackPanel Orientation="Vertical"
VerticalAlignment="Top" Grid.Column="5" Grid.ColumnSpan="2" Grid.Row="2"
HorizontalAlignment="Left" Margin="4.8,6.2,0,0" Height="124" Width="36">
<TextBlock Text="Tx" Width="20" Height="Auto" HorizontalAlignment="Center" />
<CheckBox Margin="5,5,4.8,5" Height="14" />
<CheckBox Margin="5,5,4.8,5" Height="14" />
<CheckBox Margin="5,5,4.8,5" Height="14" />
<CheckBox Margin="5,5,4.8,5" Height="14" />
</StackPanel>
<TextBlock Text="Log Cmd" Width="65" Height="Auto" HorizontalAlignment="Left" Margin="9,51.2,0,325.6" Grid.Row="2" Grid.ColumnSpan="2"/>
<TextBlock TextWrapping="Wrap" Text="RSP" Margin="93.6,25.2,15.2,348.6" Grid.Column="4" Grid.Row="2" />
<TextBlock TextWrapping="Wrap" Text="RTU" Margin="93.6,49.2,15.2,327.6" Grid.Column="4" Grid.Row="2" />
<TextBlock TextWrapping="Wrap" Text="Error" Margin="93.6,69.2,15.2,307.6" Grid.Column="4" Grid.Row="2"/>
<TextBlock TextWrapping="Wrap" Text="Info" Margin="93.6,96.2,15.2,280.6" Grid.Column="4" Grid.Row="2" />
<ComboBox x:Name="Job"
VerticalAlignment="Bottom" Margin="38.8,0,16,324.6"
Height="23" Grid.Row="2" Grid.Column="1">
<ComboBoxItem Content="Trace"/>
<ComboBoxItem Content="List"/>
<ComboBoxItem Content="Dump"/>
<ComboBoxItem Content="Off"/>
</ComboBox>
<StackPanel Grid.Column="3" Grid.Row="2" Grid.ColumnSpan="2" Margin="3.6,52.2,82.2,315.6">
<Button Content="Send" VerticalAlignment="Top" Height="20" Margin="3,0,0,0" HorizontalAlignment="Left" Width="69"/>
</StackPanel>
</Grid>
</Window>

The direct cause for the wandering TextBoxes and ComboBox is that their VerticalAlignment is set to Center and they are offset back to the top of the row with the use of gigantic bottom marigins.
They are also within the third row of a Grid, and all of the rows' Height is set in a way that makes them scale to the parent container (window) size. The star '*' in Height="8*", Height="17*" etc. results in rows filling the leftover space in their parent aiming for the specified proportions.
The main culprit behind all of this is most likely use of the designer to drag and drop everything into its place, rather than mindful utilization of the various panels/containers that are avaliable in WPF.
At the very least, you should create the initial panel setup by writing the code yourself. It will result in much cleaner and more maintainable code. I recommend using the designer only as a feedback tool in the beginning of your journey with WPF.
This is probably the layout you're looking for:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Menu Grid.Row="0">
<MenuItem Header="File">
<MenuItem Header="Open Log File" />
<MenuItem Header="Open Workspace" />
<Separator />
<MenuItem Header="Save as Workspace" />
<MenuItem Header="Set Path host file" />
</MenuItem>
<MenuItem Header="Control">
<MenuItem Header="Open Command Line View" />
</MenuItem>
</Menu>
<WrapPanel Grid.Row="1" Margin="10">
<WrapPanel.Resources>
<Style TargetType="Grid">
<Setter Property="Margin" Value="0,0,20,0" />
</Style>
</WrapPanel.Resources>
<Grid>
<Grid.Resources>
<Style TargetType="TextBox">
<Setter Property="Margin" Value="3" />
<Setter Property="VerticalContentAlignment" Value="Center" />
</Style>
<Style TargetType="TextBlock">
<Setter Property="Margin" Value="3" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
<Style TargetType="ComboBox">
<Setter Property="Margin" Value="3" />
<Setter Property="VerticalContentAlignment" Value="Center" />
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock VerticalAlignment="Center" Text="Connect To" />
<TextBox
Grid.Column="1"
Grid.ColumnSpan="2"
Text="IP/HostName" />
<TextBlock Grid.Row="1" Text="Log Cmd" />
<ComboBox
x:Name="Job"
Grid.Row="1"
Grid.Column="1">
<ComboBoxItem Content="Trace" />
<ComboBoxItem Content="List" />
<ComboBoxItem Content="Dump" />
<ComboBoxItem Content="Off" />
</ComboBox>
<TextBox
Grid.Row="1"
Grid.Column="2"
VerticalContentAlignment="Center"
Text="Line" />
</Grid>
<Grid>
<Grid.Resources>
<Style TargetType="Button">
<Setter Property="Margin" Value="3" />
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button Content=" Play " />
<Button Grid.Column="1" Content=" Stop " />
<Button
Grid.Row="1"
Grid.ColumnSpan="2"
Content=" Job " />
</Grid>
<Grid>
<Grid.Resources>
<Style TargetType="TextBlock">
<Setter Property="Margin" Value="3" />
</Style>
<Style TargetType="CheckBox">
<Setter Property="Margin" Value="3" />
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Grid.ColumnSpan="3" Text="Protocol" />
<TextBlock
Grid.Row="1"
Grid.Column="1"
Text="Rx" />
<TextBlock
Grid.Row="1"
Grid.Column="2"
Text="Tx" />
<TextBlock Grid.Row="2" Text="RSP" />
<CheckBox Grid.Row="2" Grid.Column="1" />
<CheckBox Grid.Row="2" Grid.Column="2" />
</Grid>
</WrapPanel>
</Grid>
Also, I would recommend reading the following article about Panels and Containers in WPF https://www.codeproject.com/Articles/140613/WPF-Tutorial-Layout-Panels-Containers-Layout-Trans
Edit: Other than that I advise to avoid setting hard Width and Height for the containers and most of the controls. Also do not fear to nest containers into one another to achieve the desired result. It's much easier to create and work with nested containers than with a mega Grid.

The main problem is in your row/column definitions. By using starred values, you instruct the application to scale the width/height relative to the other columns/rows.
In other words, to make the controls stay where they are when resizing, remove the stars from the ColumnDefinitions / RowDefinitions.

How to make the scrollviewer work in this scenario?

Having some problems with my MVVM Application.
So the scenario is the following:
In my MainWindow.xaml, I have a ContentControl placed in a Grid Column, its content is bind to the CurrentViewModel which will be rendered to the appropriate View (in this case, Overview.xaml).
<ContentControl Grid.Row="1" Grid.Column="1" Content="{Binding CurrentViewModel}">
Within this particular view (Overview.xaml) there are multiple UserControls placed within a StackPanel.
<ScrollViewer CanContentScroll="True" VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Visible">
<StackPanel CanVerticallyScroll="True" CanHorizontallyScroll="True">
<views:DiagramView DataContext="{Binding Path=DiagramViewModel, Source={StaticResource Locator}}" />
<views:IncomeCollectionView DataContext="{Binding Path=IncomesViewModel, Source={StaticResource Locator}}" />
<views:ExpenseCollectionView DataContext="{Binding Path=ExpensesViewModel, Source={StaticResource Locator}}" />
<views:CheckCollectionView DataContext="{Binding Path=ChecksViewModel, Source={StaticResource Locator}}" />
<views:BalanceCollectionView DataContext="{Binding Path=BalancesViewModel, Source={StaticResource Locator}}" />
<views:VacationCollectionView DataContext="{Binding Path=VacationsViewModel, Source={StaticResource Locator}}" />
<views:KHCollectionView DataContext="{Binding Path=KhViewModel, Source={StaticResource Locator}}" />
<views:OctaviaCollectionView DataContext="{Binding Path=OctaviaViewModel, Source={StaticResource Locator}}" />
</StackPanel>
</ScrollViewer>
Each UserControl within this StackPanel has a very similar look (obviously there are more stuff in the XAML). There is no constant value regarding Width or Height within my application.
<ListView ItemsSource="{Binding Source={StaticResource groupedCollection}}" SelectedItem="{Binding CurrentItem}">
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Items[0].CurrentCategory}" />
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="12" Rows="1" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemContainerStyle>
<Style>
<Setter Property="Grid.Column" Value="{Binding GeneratedColumn}"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding EncryptedAmount}" />
<StackPanel Orientation="Horizontal">
<TextBlock Text="Got paid on " />
<TextBlock Text="{Binding Date}" />
</StackPanel>
<Button Content="details"
Command="{Binding Path=DataContext.ShowDialogCommand,
RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}"
CommandParameter="QuickEdit"/>
<Button Content="remove" Command="{Binding RemoveCommand}" CommandParameter="Income removed." />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The problem is that I can't seem to make the vertical scrollviewer work. It is displayed because I make it visible, but it's disabled. Obviously the StackPanel is gonna grow indefintely, but isn't there a way for it to calculate how much space is needed? Because most of the content is just cut off right now.
So I tried to put scrollviewer in every possible place, but they're all disabled.
<Style TargetType="{x:Type ContentControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<ScrollViewer>
<ContentPresenter Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
So then I tried dropping the StackPanel implementation and tried it with a Grid.
Nope, it doesn't work either.
Obviously I'm missing some basis solution here, but just can't figure it out.
Any ideas would be appreciated, seems like a very common scenario to be honest.
Cheers
<ScrollViewer CanContentScroll="True"
VerticalScrollBarVisibility="Visible"
HorizontalScrollBarVisibility="Visible">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<views:DiagramView DataContext="{Binding Path=DiagramViewModel, Source={StaticResource Locator}}" />
<views:IncomeCollectionView Grid.Row="1" DataContext="{Binding Path=IncomesViewModel, Source={StaticResource Locator}}" />
<views:ExpenseCollectionView Grid.Row="2" DataContext="{Binding Path=ExpensesViewModel, Source={StaticResource Locator}}" />
<views:CheckCollectionView Grid.Row="3" DataContext="{Binding Path=ChecksViewModel, Source={StaticResource Locator}}" />
...etc...
</Grid>
</ScrollViewer>
Edit: The DiagramView UserControl contains the following:
<UserControl x:Class="Expense.Manager.WPF.Views.DiagramView"
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:pie="clr-namespace:Expense.Manager.WPF.CustomPie"
xmlns:local="clr-namespace:Expense.Manager.WPF.Shared"
mc:Ignorable="d">
<UserControl.Resources>
<local:BoolToBrushConverter x:Key="BoolToBrushConverter" />
</UserControl.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Income this month: " />
<TextBlock>
<TextBlock.Text>
<PriorityBinding FallbackValue="Retrieving data...">
<Binding Path="EncryptedCurrentMonthIncome" Mode="TwoWay" IsAsync="True" />
</PriorityBinding>
</TextBlock.Text>
</TextBlock>
</StackPanel>
<pie:PieChart Data="{Binding PieChartIncomeData, Mode=TwoWay}" Width="250" PieWidth="130" PieHeight="130" Height="140" />
</StackPanel>
<StackPanel Grid.Row="0" Grid.Column="1">
<StackPanel Orientation="Horizontal">
<TextBlock Text="Expenses this month: " />
<TextBlock>
<TextBlock.Text>
<PriorityBinding FallbackValue="Retrieving data...">
<Binding Path="CurrentMonthExpense" Mode="TwoWay" IsAsync="True" />
</PriorityBinding>
</TextBlock.Text>
</TextBlock>
</StackPanel>
<pie:PieChart Data="{Binding PieChartExpenseData, Mode=TwoWay}" Width="250" PieWidth="130" PieHeight="130" Height="140" />
</StackPanel>
<StackPanel Grid.Column="2">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding VacationsLeft}" />
<TextBlock Text=" days left" />
</StackPanel>
<ItemsControl ItemsSource="{Binding VacationsPerYearCollection}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Rectangle Margin="5, 0, 0, 0" Height="25" Width="4" Fill="{Binding Converter={StaticResource BoolToBrushConverter}}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Bank savings:" />
<TextBlock Text="{Binding BankSavings}" />
</StackPanel>
</StackPanel>
</Grid>
IncomeCollectionView:
<UserControl x:Class="Expense.Manager.WPF.Views.IncomeCollectionView"
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:views="clr-namespace:Expense.Manager.WPF.Views"
mc:Ignorable="d">
<UserControl.Resources>
<CollectionViewSource x:Key="groupedCollection" IsLiveGroupingRequested="True" Source="{Binding Collection}">
<CollectionViewSource.GroupDescriptions>
<PropertyGroupDescription PropertyName="CurrentCategory" />
</CollectionViewSource.GroupDescriptions>
</CollectionViewSource>
</UserControl.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Text="{Binding DisplayName}" Foreground="White" FontWeight="SemiBold" Padding="5" Background="SteelBlue" />
<ListView Grid.Row="1" ItemsSource="{Binding Source={StaticResource groupedCollection}}" SelectedItem="{Binding CurrentItem}">
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Items[0].CurrentCategory}" />
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Columns="12" Rows="1" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemContainerStyle>
<Style>
<Setter Property="Grid.Column" Value="{Binding GeneratedColumn}"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Text="{Binding EncryptedAmount}" />
<TextBlock Grid.Row="1" Text="{Binding Date}" />
<Button Grid.Row="2" Content="details"
Command="{Binding Path=DataContext.ShowDialogCommand,
RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}"
CommandParameter="QuickEdit"/>
<Button Grid.Row="3" Content="remove" Command="{Binding RemoveCommand}" CommandParameter="Income removed." />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
and where it is used:
why is the listview not resizing itself after resizing the window itself?
<ScrollViewer CanContentScroll="True" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<views:IncomeCollectionView Grid.Row="1" DataContext="{Binding Path=IncomesViewModel, Source={StaticResource Locator}}" />
</Grid>
</ScrollViewer>

I tried dropping the StackPanel implementation and tried it with a Grid. Nope, it doesn't work either.
That's almost correct, apart from the last sentence. Using a Grid is half of the answer, because the StackPanel has no functionality to resize its items... you just need to inform the ScrollViewer when to scroll. Take this example:
<ScrollViewer>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Rectangle Fill="Cyan" />
<Rectangle Grid.Row="1" Fill="Green" />
<Rectangle Grid.Row="2" Fill="Red" />
<Rectangle Grid.Row="3" Fill="Blue" />
<Rectangle Grid.Row="4" Fill="Orange" />
<Rectangle Grid.Row="5" Fill="Purple" />
<Rectangle Grid.Row="6" Fill="Yellow" />
</Grid>
</ScrollViewer>
This XAML will make the ScrollViewer ScrollBar appear (once the Window.Height is small enough), but if you remove the RowDefinition.Height values (thereby giving each row a proportion of the whole Grid.Height), you'll see your previous situation where no ScrollBar appears.
Now, none of us want to hard code constant values into our UIs, but you can do this using the Auto setting on the RowDefinition.Height properties instead. Unlike these Rectangles, your controls will all have some Height, so your solution is to set each of your Grid.RowDefinitions like this:
<RowDefinition Height="Auto" />
This will provide your controls with as much space as they need within the Grid and therefore (hopefully) they will have more Height together than the ScrollViewer and therefore the ScrollViewer will display its vertical ScrollBar.

Databound listbox below a text block is not scrolling in windows phone

I have a databound list box and a text block in my application
Initially the listbox will be populated with some values (More than 10 values). i tried to scroll the list. But I couldn't. When I Click on the list and drag the mouse up, the list goes further down. The effect is more or like pulling down the list.
The xaml code is as follows. please help.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<TextBlock x:Name="RequestFilterTxtBlock" Grid.Row="0" Text="-" FontWeight="Bold" FontStyle="Italic" TextDecorations="Underline"/>
<ScrollViewer Grid.Row="1">
<ListBox x:Name="Requests1" ItemsSource="{Binding Details_OC}" SelectionChanged="Requests_SelectionChanged" ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="0,0,0,2" BorderBrush="White">
<Grid HorizontalAlignment="Stretch" Width="450">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<CheckBox x:Name="CheckBox1" Grid.Column="0" IsChecked="{Binding Path=IsComplete, Mode=TwoWay}" Grid.RowSpan="2" Checked="CheckBox1_Checked" Unchecked="CheckBox1_Unchecked" />
<TextBlock x:Name="WorkOrderID" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Left" Text="{Binding WORKORDERID}" VerticalAlignment="Top"/>
<TextBlock x:Name="date" Text="{Binding Path=DUEBYTIME}" HorizontalAlignment="Left" Grid.Column="1" Grid.Row="1" VerticalAlignment="Top"/>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
</Grid>
Thank you.

Your ScrollViewer is currently wrapped around only the ListBox. Bearing in mind the ListBox has its own ScrollViewer this will result in unpredictable behaviour.
I would wrap your Grid with a ScrollViewer and disable the ListBox one so that you can scroll your TextBlock and ListBox smoothly.
<ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<TextBlock x:Name="RequestFilterTxtBlock" Grid.Row="0" Text="-" FontWeight="Bold" FontStyle="Italic" TextDecorations="Underline"/>
<ListBox x:Name="Requests1" ItemsSource="{Binding Details_OC}" SelectionChanged="Requests_SelectionChanged" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="0,0,0,2" BorderBrush="White">
<Grid HorizontalAlignment="Stretch" Width="450">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<CheckBox x:Name="CheckBox1" Grid.Column="0" IsChecked="{Binding Path=IsComplete, Mode=TwoWay}" Grid.RowSpan="2" Checked="CheckBox1_Checked" Unchecked="CheckBox1_Unchecked" />
<TextBlock x:Name="WorkOrderID" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Left" Text="{Binding WORKORDERID}" VerticalAlignment="Top"/>
<TextBlock x:Name="date" Text="{Binding Path=DUEBYTIME}" HorizontalAlignment="Left" Grid.Column="1" Grid.Row="1" VerticalAlignment="Top"/>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</ScrollViewer>

I achieved what i wanted. I didn't even need to include the scroll viewer. I just needed to change the row definition of the grid (row of the list box) from 'auto' to '*'. That worked as expected.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock x:Name="RequestFilterTxtBlock" Grid.Row="0" Text="-" FontWeight="Bold" FontStyle="Italic" TextDecorations="Underline"/>
<ListBox x:Name="Requests1" ItemsSource="{Binding Details_OC}" SelectionChanged="Requests_SelectionChanged" ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="0,0,0,2" BorderBrush="White">
<Grid HorizontalAlignment="Stretch" Width="450">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<CheckBox x:Name="CheckBox1" Grid.Column="0" IsChecked="{Binding Path=IsComplete, Mode=TwoWay}" Grid.RowSpan="2" Checked="CheckBox1_Checked" Unchecked="CheckBox1_Unchecked" />
<TextBlock x:Name="WorkOrderID" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Left" Text="{Binding WORKORDERID}" VerticalAlignment="Top"/>
<TextBlock x:Name="date" Text="{Binding Path=DUEBYTIME}" HorizontalAlignment="Left" Grid.Column="1" Grid.Row="1" VerticalAlignment="Top"/>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>