Develop Reference

Fix an image at top right corner of wpf window irrespective of the height of grid row

I have to place an image on top right corner of grid. But it should not take the height of grid row. Means it should appear as a top layer of grid. How can I achieve this?
Doing like below, the height of grid row is increases as the height of image (Img_Data).
<Grid x:Name="LayoutRoot" Background="Black" >
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" ></ColumnDefinition>
<ColumnDefinition Width="*" ></ColumnDefinition>
<ColumnDefinition Width="*" ></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel x:Name="menu" Grid.Row="0" Grid.ColumnSpan="3" >
<Button x:Name="btnOpen" Margin="8" Padding="4" Content="Select" Click="btnOpen_Click" Width="auto" Height="25"/>
<Button Margin="8" Width="100" Height="28" Content="Play" BorderBrush="Transparent" Name="btnPlay" Click="btnPlay_Click" Style="{StaticResource CommonButton}" >
</Button>
<Label x:Name="lblRecordTimer" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></Label>
<Label x:Name="lblPlayMode" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" >Play</Label>
<Image Name="Img_Data" Source="/images/Data.png" HorizontalAlignment="Right" Width="187" Height="150" />
</StackPanel>
<StackPanel Grid.Row="1" Grid.ColumnSpan="3" Orientation="Vertical" HorizontalAlignment="Center">
<Label Content="Show Details" FontSize="18" Foreground="White" ></Label>
<fa:ImageAwesome Icon="Refresh" Foreground="Red" Visibility="Collapsed" Width="50" Height="50" x:Name="spinner1" Spin="True" SpinDuration="4" />
</StackPanel>
</Grid>

You can use Canvas as last child of your Grid. Like this:
<Grid x:Name="LayoutRoot" Background="Black" >
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" ></ColumnDefinition>
<ColumnDefinition Width="*" ></ColumnDefinition>
<ColumnDefinition Width="*" ></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel x:Name="menu" Grid.Row="0" Grid.ColumnSpan="3" >
<Button x:Name="btnOpen" Margin="8" Padding="4" Content="Select" Width="auto" Height="25"/>
<Button Margin="8" Width="100" Height="28" Content="Play" BorderBrush="Transparent" Name="btnPlay">
</Button>
<Label x:Name="lblRecordTimer" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></Label>
<Label x:Name="lblPlayMode" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" >Play</Label>
</StackPanel>
<StackPanel Grid.Row="1" Grid.ColumnSpan="3" Orientation="Vertical" HorizontalAlignment="Center">
<Label Content="Show Details" FontSize="18" Foreground="White" ></Label>
</StackPanel>
<Canvas
Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="0"
Grid.ColumnSpan="3">
<Image
Name="Img_Data"
Canvas.Top="16"
Canvas.Right="16"
Source="/images/Data.png"
Width="187"
Height="150"/>
</Canvas>
</Grid>

Display ListBox inside of RadGrid while using DataBinding

I have a content app I have created that displays a list of tracks (for now) that represent different situations. They each have a target button, case #, case type, and date. I am using a telerik:radgridview to achieve this and each row is clickable. When expanding the row you see more information about the situation. One section is called 'Responding Assets'. In this section I want to display a ListBox or anything I can use to display those same tracks again. This is just for testing purposes and I will you a certain set of data later, but I can't get anything to display here. I don't know if there is an issue trying to display another list in a radgrid or what? Any ideas why this isn't working?
.xaml code
<telerik:RadGridView.RowDetailsTemplate>
<DataTemplate>
<StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="Auto" Background="#303134" Name="RowDetails">
<Grid Margin="10 10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!--SUMMARY-->
<Grid Margin="10 10" Grid.ColumnSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Text="SUMMARY" FontSize="14" FontFamily="Segoe UI Bold" Foreground="White" Margin="4 0 0 5" />
<Rectangle Height="1" Fill="#A6A6A6" Grid.Row="1" VerticalAlignment="Center" Margin="2 0 2 10" Stretch="Fill" Grid.ColumnSpan="2" />
<TextBlock Text="Address: " FontSize="12" FontFamily="Segoe UI Bold" Foreground="#A6A6A6" Margin="4 2" Grid.Row="2" />
<TextBlock Text="1501 Main Street Columbia, SC" FontSize="12" FontFamily="Segoe UI" Foreground="#A6A6A6" Margin="4 2"
Grid.Row="2" Grid.Column="1" HorizontalAlignment="Left" />
<TextBlock Text="Subtype: " FontSize="12" FontFamily="Segoe UI Bold" Foreground="#A6A6A6" Margin="4 2" Grid.Row="3" />
<TextBlock Text="Active Shooter on Foot" FontSize="12" FontFamily="Segoe UI" Foreground="#A6A6A6" Margin="4 2" Grid.Row="3"
Grid.Column="1" HorizontalAlignment="Left"/>
<TextBlock Text="Dispatch Group: " FontSize="12" FontFamily="Segoe UI Bold" Foreground="#A6A6A6" Margin="4 2" Grid.Row="4"/>
<TextBlock Text="District 22" FontSize="12" FontFamily="Segoe UI" Foreground="#A6A6A6" Margin="4 2" Grid.Row="4" Grid.Column="1"
HorizontalAlignment="Left"/>
</Grid>
<!--COMMENTS-->
<Grid Margin="10 10" Grid.Row="1" Grid.ColumnSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Text="COMMENTS" FontSize="14" FontFamily="Segoe UI Bold" Foreground="White" Margin="4 10 0 5" />
<Rectangle Height="1" Fill="#A6A6A6" Grid.Row="1" VerticalAlignment="Center" Margin="2 0 2 10" Stretch="Fill" />
<TextBlock Text="Event Comments" FontSize="12" FontFamily="Segoe UI Bold" Foreground="#A6A6A6" Margin="4 6" Grid.Row="2"/>
<Border Grid.Row="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="100" BorderBrush="#535354">
<TextBox Grid.Row="3" Name="EventComments" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" TextAlignment="Left"
Margin="4 0 10 10" TextWrapping="Wrap" Text="Comments from CAD system here" IsReadOnly="True" Height="100" Background="#3F4145"
BorderThickness="0" Foreground="#A6A6A6" />
</Border>
<TextBlock Text="Location Comments" FontSize="12" FontFamily="Segoe UI Bold" Foreground="#A6A6A6" Margin="4 6" Grid.Row="4"/>
<Border Grid.Row="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="100" BorderBrush="#535354">
<TextBox Grid.Row="5" Name="LocationComments" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" TextAlignment="Left"
Margin="4 0 10 10" TextWrapping="Wrap" IsReadOnly="True" Height="100" Background="#3F4145"
BorderThickness="0" Foreground="#A6A6A6" />
</Border>
</Grid>
<!--RESPONDING ASSETS-->
<Grid Margin="10 10" Grid.Row="2" Grid.ColumnSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="300" />
</Grid.RowDefinitions>
<TextBlock Text="RESPONDING ASSETS" FontSize="14" FontFamily="Segoe UI Bold" Foreground="White" Margin="4 10 0 5" />
<Rectangle Height="1" Fill="#A6A6A6" Grid.Row="1" VerticalAlignment="Center" Margin="2 0 2 10" Stretch="Fill" />
<!--ENTITY LIST-->
<Grid Grid.Row="2">
<ListBox ItemsSource="{Binding FilteredTrackList}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0 5 0 10">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0 2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding TrackName.Value}" />
<TextBlock Text="{Binding DateCreated}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Grid>
</Grid>
</StackPanel>
</DataTemplate>
</telerik:RadGridView.RowDetailsTemplate>
I am not providing the code for how I obtain the FilteredTrackList because this clearly works otherwise I wouldn't have rows to click on in the radgrid.

The DataContext of the ListBox is an individual Entity object. If you want to bind to the same FilteredTrackList as the parent RadGridView binds to, you could use {RelativeSource}:
<ListBox ItemsSource="{Binding DataContext.FilteredTrackList, RelativeSource={RelativeSource AncestorType=telerik:RadGridView}}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0 5 0 10">

WPF Using GridSplitter for individual Row Column in Grid

I want to have GridSplitter that resizes only one cell (actually not correct term per se for WPF Grid, let's call it individual Grid[r][c]) and cell adjacent to it to be resized.
Here what I tried:
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border Grid.IsSharedSizeScope="True" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="0">
<TextBlock>Testing 1</TextBlock>
</Border>
<Border Grid.IsSharedSizeScope="True" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="1">
<TextBlock>Testing 2</TextBlock> </Border>
<Border Grid.IsSharedSizeScope="True" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="2">
<TextBlock>Testing 2</TextBlock>
</Border>
<Border Grid.IsSharedSizeScope="True" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="1" Grid.Column="0">
<TextBlock>Testing 3</TextBlock>
</Border>
<Border Grid.IsSharedSizeScope="True" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="1" Grid.Column="1">
<TextBlock>Testing 4</TextBlock></Border>
<Border Grid.IsSharedSizeScope="True" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="1" Grid.Column="2">
<TextBlock>Testing 5</TextBlock></Border>
<Border Grid.IsSharedSizeScope="True" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="3" Grid.Column="0">
<TextBlock>Testing 6</TextBlock></Border>
<Border Grid.IsSharedSizeScope="True" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="3" Grid.Column="1">
<TextBlock>Testing 7</TextBlock></Border>
<Border Grid.IsSharedSizeScope="True" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="3" Grid.Column="2">
<TextBlock>Testing 8</TextBlock></Border>
<GridSplitter Grid.Row="0"
Grid.Column="1"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
Background="Black"
ShowsPreview="true"
ResizeDirection="Columns"
Width="2"/>
<GridSplitter Grid.Row="1"
Grid.Column="1"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
Background="Black"
ShowsPreview="true"
ResizeDirection="Columns"
Width="2"/>
<GridSplitter Grid.Row="2"
Grid.Column="1"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
Background="Black"
ShowsPreview="true"
ResizeDirection="Columns"
Width="2"/>
<GridSplitter Grid.Row="2"
Grid.Column="1"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Background="Black"
ShowsPreview="true"
ResizeDirection="Columns"
Width="2"/>
<GridSplitter Grid.Row="0"
Grid.Column="2"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
Background="Black"
ShowsPreview="true"
ResizeDirection="Columns"
Width="2"/>
<GridSplitter Grid.Row="1"
Grid.Column="2"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
Background="Black"
ShowsPreview="true"
ResizeDirection="Columns"
Width="2"/>
<GridSplitter Grid.Row="2"
Grid.Column="2"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
Background="Black"
ShowsPreview="true"
ResizeDirection="Columns"
Width="2"/>
<GridSplitter Grid.Row="1"
Grid.Column="0"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Background="Black"
ShowsPreview="true"
ResizeDirection="Rows"
Height="2"/>
<GridSplitter Grid.Row="2"
Grid.Column="0"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Background="Black"
ShowsPreview="true"
ResizeDirection="Rows"
Height="2"/>
<GridSplitter Grid.Row="1"
Grid.Column="1"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Background="Black"
ShowsPreview="true"
ResizeDirection="Rows"
Height="2"/>
<GridSplitter Grid.Row="2"
Grid.Column="1"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Background="Black"
ShowsPreview="true"
ResizeDirection="Rows"
Height="2"/>
<GridSplitter Grid.Row="1"
Grid.Column="2"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Background="Black"
ShowsPreview="true"
ResizeDirection="Rows"
Height="2"/>
<GridSplitter Grid.Row="2"
Grid.Column="2"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Background="Black"
ShowsPreview="true"
ResizeDirection="Rows"
Height="2"/>
</Grid>
I want it to behave in a way that individual cell in the Grid shall be resized.
At app start
While resizing via grid splitter:
After Reisize:
I wanted that Only Grid[ 0][ 0] and Grid[ 0][ 1] to be resized

You have 3 columns and 3 lines, not 3 columns inside each line,
try this:
<Grid >
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<GridSplitter Grid.Column="0"/>
<GridSplitter Grid.Column="1"/>
<GridSplitter Grid.Column="2"/>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
</Grid>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
</Grid>
</Grid>

Have own code (for "simplicity", sorry) which addresses vertical gridsplitting. Given time, will be including an update for the horizontal, but assuming it's no more than defining distinct grid columns instead of Celso's distinct grid rows.
There's certainly some issue in applying the particular member fields of GridSizeBehaviour.
Replace CurrentAndNext with the BasedOnAlignment property in the first attached vertical gridsplitting example to find that all rows are affected- not just the the row the gridsplitter was defined on.
To bug out GridSizeBehaviour, replace CurrentAndNext with PreviousAndCurrent in there for the 0'th row definition and find that once the gridsplitter is clicked, it never returns/loses visibility, along with the rest of the controls on the form.
<Window x:Class="GridSplitterSample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="GridSplitterSample" Height="300" Width="300">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Left side</TextBlock>
<GridSplitter Grid.Row="0" Grid.Column="1" Width="5" HorizontalAlignment="Stretch" ResizeBehavior="CurrentAndNext" />
<TextBlock Grid.Column="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Right side</TextBlock>
<Button Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3">Button 1</Button>
<Button Grid.Row="2" Grid.Column="0">Button 2</Button>
<Button Grid.Row="2" Grid.Column="2">Button 3</Button>
</Grid>
Perhaps there is an API solution to this? But using Celso's idea of nested grids, it works in the following code:
<Window x:Class="GridSplitterSample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="GridSplitterSample" Height="300" Width="300">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Left side</TextBlock>
<GridSplitter Grid.Row="0" Grid.Column="1" Width="5" HorizontalAlignment="Stretch" ResizeBehavior="CurrentAndNext" />
<TextBlock Grid.Column="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Right side</TextBlock>
</Grid>
<Grid Grid.Row="1" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Grid.ColumnSpan="3">Button 1</Button>
</Grid>
<Grid Grid.Row="2" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0">Button 2</Button>
<Button Grid.Column="2">Button 3</Button>
</Grid>
</Grid>
More needs to be done with this, however, for if the user drags the gridsplitter to the edge of a form maximised to screen size, it cannot be retrieved! Looks like it was never the policy of MS to touch row/columns/cells in a grid, as they are basically user defined criteria.

WPF Grid Rows and ResizeGrip do not anchor correctly

once again after hours of struggle with WPF I need your awesome help.
I have read many different StackOverflows, nonetheless, I cannot seem to get my current situation working and I don't understand why. I have chosen to use a Grid in contrast to a DockPanel and I would like to keep it that way as well. According to what I have read the row definitions are ok, the second row of the template grid should automatically stretch. Unfortunately it does not, as it seems that the last row of the grid does not move away.
This is how my window looks at the moment:
As you can see is the blue row not at the bottom of the window. In fact, the window should not be that long in the first place.
This is the code snippet of my Generic.xaml file that is relevant to the problem.
The way it works is, that I have a Skin with a custom control group:
<!-- Window START-->
<ControlTemplate x:Key="WindowTemplate" TargetType="{x:Type Window}">
<Border BorderBrush="LightGray" BorderThickness="1" Background="Red" Padding="0" VerticalAlignment="Stretch">
<Grid x:Name="WindowRoot" Margin="0" VerticalAlignment="Top" Background="Blue" MouseDown="Window_MouseDown">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="75"/>
<ColumnDefinition Width="25"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<!-- HEADER START-->
<Frame x:Name="header_background" Grid.Column="0" Grid.ColumnSpan="4" Grid.Row="0" Background="#ddd" BorderThickness="0 0 0 1" BorderBrush="#c9c9c9"/>
<Image x:Name="LogoICon" Source="/MTApp;component/Resources/Icon.png" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Left" Margin="10 8"/>
<Label x:Name="windowTitle" Grid.ColumnSpan="2" Content="{TemplateBinding Title}" VerticalAlignment="Center" Foreground="#393939" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" FontFamily="Segoe UI Regular" FontSize="12"/>
<Grid Grid.Column="2" Grid.ColumnSpan="2" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="35"/>
<ColumnDefinition Width="18"/>
<ColumnDefinition Width="19"/>
<ColumnDefinition Width="18"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="10"/>
<RowDefinition Height="20" />
<RowDefinition Height="10" />
</Grid.RowDefinitions>
<Button x:Name="minimizeBtn" Content="0" FontFamily="Marlett" Foreground="#393939" Background="Transparent" BorderThickness="0" Grid.Row="1" Grid.Column="1" Margin="3 0 0 0" Click="minimizeBtn_Click"/>
<Button x:Name="maximizeBtn" Content="2" FontFamily="Marlett" Foreground="#393939" Background="Transparent" BorderThickness="0" Grid.Row="1" Grid.Column="2" Margin="3 0 0 0" Click="maximizeBtn_Click"/>
<Button x:Name="quitBtn" Content="r" FontFamily="Marlett" Foreground="#393939" Background="Transparent" BorderThickness="0" Grid.Row="1" Grid.Column="3" Margin="3 0 0 0" Click="quitBtn_Click"/>
</Grid>
<!-- HEADER END-->
<!-- CONTENT START-->
<ContentPresenter Grid.Column="0" Grid.ColumnSpan="4" Grid.Row="1" Height="Auto"/>
<!-- CONTENT END-->
<!-- FOOTER START-->
<Border x:Name="footer_background" Grid.Column="0" Grid.ColumnSpan="4" Grid.Row="2" Height="25">
<ResizeGrip />
</Border>
<!-- FOOTER END-->
</Grid>
</Border>
</ControlTemplate>
<!-- Window END-->
<Style x:Key="LightSkin_0_1" TargetType="Window">
<Setter Property="WindowStyle" Value="None" />
<Setter Property="AllowsTransparency" Value="True" />
<Setter Property="ResizeMode" Value="CanResizeWithGrip" />
<Setter Property="Template" Value="{StaticResource WindowTemplate}" />
<Style.Triggers>
<DataTrigger Binding="{Binding WindowState}" Value="Maximized">
</DataTrigger>
</Style.Triggers>
</Style>
And my MainWindow.xaml is:
<Window x:Class="UHashIt.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:UHashIt"
mc:Ignorable="d"
Title="Window title"
WindowStartupLocation="CenterScreen"
MinHeight="275"
MinWidth="700"
Width="700"
Style="{DynamicResource LightSkin_0_1}">
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- Menu -->
<Border VerticalAlignment="Top" Padding="5" Background="#f2f2f2" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" BorderThickness="0 0 0 1" BorderBrush="LightGray">
<DockPanel >
<Menu DockPanel.Dock="Left">
<MenuItem Header="File">
<MenuItem Header="Add File" />
<MenuItem Header="Export.." />
<Separator />
<MenuItem Header="Close"/>
</MenuItem>
<MenuItem Header="Help">
<MenuItem Header="Online Documentation" />
<MenuItem Header="About"/>
</MenuItem>
</Menu>
</DockPanel>
</Border>
<!-- Menu End -->
<!-- Content -->
<Grid Grid.Row="1" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="150*"/>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="150*"/>
<ColumnDefinition Width="25"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="40" />
<RowDefinition Height="30" />
<RowDefinition Height="40" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Label Style="{DynamicResource headline4}" Content="File 1" Grid.Row="0" Grid.Column="1"/>
<TextBox Grid.Row="1" Style="{DynamicResource NormalTextBox}" Grid.Column="1"/>
<Button Grid.Column="2" Grid.Row="1" Style="{DynamicResource CommonButton}" Height="30" Width="30" VerticalAlignment="Top"/>
<Label Style="{DynamicResource headline5}" Grid.Row="1" Grid.Column="3"/>
<Label Style="{DynamicResource headline4}" Content="File 2" Grid.Row="2" Grid.Column="1"/>
<TextBox Grid.Row="3" Style="{DynamicResource NormalTextBox}" Grid.Column="1"/>
<Button Grid.Column="2" Grid.Row="3" Style="{DynamicResource CommonButton}" Height="30" Width="30" VerticalAlignment="Top"/>
<Label Style="{DynamicResource headline5}" Grid.Row="3" Grid.Column="3"/>
<!-- Hash Button and Selection -->
<ComboBox Grid.Row="4" Grid.Column="1" HorizontalAlignment="Left" Width="200" Height="30">
<ComboBoxItem>
Please Choose Your Algorithm
</ComboBoxItem>
</ComboBox>
<Button Grid.Column="1" Grid.Row="4" Style="{DynamicResource ActionBtn}" Content="Button" HorizontalAlignment="Right"/>
<!-- End-->
</Grid>
<!-- Content End-->
</Grid>
I cannot explain myself why the "blue bar" is not attached to the bottom. Despite the fact, that the window is so big.

I think you want to change this:
<Grid x:Name="WindowRoot" Margin="0" VerticalAlignment="Top" Background="Blue" MouseDown="Window_MouseDown">
to this:
<Grid x:Name="WindowRoot" Margin="0" VerticalAlignment="Stretch" Background="Blue" MouseDown="Window_MouseDown">

Can I get headers in a WPF grid getting its rows from a data template?

I am implementing a headered table using grids above each other, so I can specify columns headers. There is one grid for headers, and one grid for every row in the table. It is not very practical, header widths has to be specified twice. Maybe I instead can have a ListView/DataGrid without all styling?
How can I get rid of this multi Grid approach?
Here is what I got:
<StackPanel Orientation="Vertical">
<Grid Margin="0, 10, 0, 0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40" />
<ColumnDefinition Width="70" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0"
Text="header 1" />
<TextBlock Grid.Column="1" Grid.Row="0"
Text="header 2" />
</Grid>
<ItemsControl ItemsSource="{Binding Entities}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Grid Margin="0, 10, 0, 0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40" />
<ColumnDefinition Width="70" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0"
Text="{Binding Property1}" />
<TextBlock Grid.Column="1" Grid.Row="0"
Text="{Binding Property2}" />
</Grid>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>

You can use Grid.IsSharedSizeScope attached property
<StackPanel Orientation="Vertical" Grid.IsSharedSizeScope="True">
<Grid Margin="0, 10, 0, 0">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="First" Width="40" />
<ColumnDefinition SharedSizeGroup="Second" Width="70" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0"
Text="header 1" />
<TextBlock Grid.Column="1" Grid.Row="0"
Text="header 2" />
</Grid>
<ItemsControl ItemsSource="{Binding Entities}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Grid Margin="0, 10, 0, 0">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="First" />
<ColumnDefinition SharedSizeGroup="Second" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0"
Text="{Binding Property1}" />
<TextBlock Grid.Column="1" Grid.Row="0"
Text="{Binding Property2}" />
</Grid>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>