Develop Reference

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.

UWP C# - Problems with Grid in a Listview

I am writing a little app in C# for windows 10, and I have a listview as below, which is already in a grid.
However the grid I am adding to the listview doesn't expand out to fill the space, it is just grows as wide as the length of the data contained in the field bound to it. What am I doing wrong? I don't want to use fixed fields, I'd prefer to use a relative proportion of the page width.
Help!
<Grid x:Name="RootGrid" Margin="5" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="FolderMate" Style="{StaticResource SampleHeaderTextStyle}"/>
<Button x:Name="GetFilesAndFoldersButton"
Grid.Row="1"
Grid.Column="0"
Content="Get files and folders"
Click="GetFilesAndFoldersButton_Click"
Margin="0,10,0,10"/>
<TextBlock x:Name="FileInfo"
Grid.Row="1"
Grid.Column="1"
Grid.ColumnSpan="3"
VerticalAlignment="Center"
Margin="10"
Foreground="Green"/>
<Button x:Name="ResetButton"
Grid.Row="1"
Grid.Column="5"
Content="reset"
HorizontalAlignment="Right"
Click="ResetButton_Click"
Margin="0,10,10,0"/>
<!--<ScrollViewer VerticalScrollMode="Auto"
VerticalScrollBarVisibility="Auto"
Grid.Row="2"
Grid.ColumnSpan="5"
BorderBrush="Black"
BorderThickness="2"
Background="Chartreuse"
Margin="0,5,0,5">-->
<ListView x:Name="ThisList"
Grid.Row="2"
Grid.ColumnSpan="5"
Background="LightBlue"
Margin="5"
IsItemClickEnabled="True"
ItemClick="ThisList_ItemClick">
<ListView.ItemTemplate>
<DataTemplate>
<Grid BorderThickness="1" BorderBrush="Red" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Background="Aquamarine" Grid.Column="0">
<SymbolIcon Symbol="Folder" HorizontalAlignment="Center" Margin="15 0"/>
</Border>
<Border Background="Yellow" Grid.Column="1">
<TextBlock Text="{Binding FName}" Margin="10" />
</Border>
<Border Background="Cyan" Grid.Column="2">
<TextBlock Text="{Binding FTime}" Margin="10"/>
</Border>
<Border Background="Tomato" Grid.Column="3">
<TextBlock Text="{Binding FSize}" HorizontalAlignment="Right" Margin="10"/>
</Border>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<!--</ScrollViewer>-->
</Grid>

You need to set the HorizontalContentAlignment inside ListView.ItemContainerStyle for ListViewItem to Stretch.
Your Full XAML For ListView will be like below.
<ListView x:Name="ThisList"
Grid.Row="2"
Grid.ColumnSpan="5"
Background="LightBlue"
Margin="5"
ItemsSource="{Binding data}"
IsItemClickEnabled="True"
ItemClick="ThisList_ItemClick">
<ListView.ItemTemplate>
<DataTemplate>
<Grid BorderThickness="1" BorderBrush="Red" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Background="Aquamarine" Grid.Column="0">
<SymbolIcon Symbol="Folder" HorizontalAlignment="Center" Margin="15 0"/>
</Border>
<Border Background="Yellow" Grid.Column="1">
<TextBlock Text="{Binding FName}" Margin="10" />
</Border>
<Border Background="Cyan" Grid.Column="2">
<TextBlock Text="{Binding FTime}" Margin="10"/>
</Border>
<Border Background="Tomato" Grid.Column="3">
<TextBlock Text="{Binding FSize}" HorizontalAlignment="Right" Margin="10"/>
</Border>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
See in the end, How I added ItemContainerStyle Targeting Only ListViewItem.
Final Output will be
Good Luck.

Might be it will helpful for you. I had used like that-
<ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Auto">
<StackPanel>
<ListView x:Name="UserMessageList">
<ListView.ItemTemplate>
<DataTemplate x:DataType="local1:MessageModel">
<StackPanel>
//Add your conrole
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</ScrollViewer>

Scale while keep horizontal align

I have WPF control:
<UserControl x:Class="MyProject.LabelWithUnit"
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="30" d:DesignWidth="150">
<Viewbox StretchDirection="Both" Stretch="Uniform">
<Grid Width="150">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label x:Name="ValueLabel" Grid.Column="0" Content="1013.0" Margin="0" VerticalAlignment="Center" HorizontalAlignment="Center" FontWeight="Bold" FontSize="18"/>
<Label x:Name="UnitLabel" Grid.Column="1" Content="m/s" Margin="1" FontSize="10" />
</Grid>
</Viewbox>
</UserControl>
How it behave now:
Default:
When width increased:
(this is what i need to change)
That how it scales when i increase height:(that should stay as it is)
How it should behave:
(only this behavior should change - "m/s" should stick to top-right corner):
So, "m/s" part should always stick to top-right corner and numeric part should stay somehow near middle. When i increase Height of my control, it should scale both Labels.
EDIT: more pictures added.

Change the stretching on the ViewBox control:
<Viewbox StretchDirection="UpOnly" Stretch="Uniform">

have you tried
<Label x:Name="UnitLabel" Grid.Column="1" Content="m/s" FontSize="10" HorizontalAlignment="Right" VerticalAlignment="Top" />
EDIT: I am also unsure how these columns are helping you

I get the style you wish simply swapping VerticalAlignment of Labels to Stretch
<UserControl x:Class="MyProject.LabelWithUnit"
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="30" d:DesignWidth="150">
<Viewbox StretchDirection="Both" Stretch="Uniform">
<Grid Width="1900">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label x:Name="ValueLabel" Grid.Column="0" Content="1013.0" Margin="0" VerticalAlignment="Stretch" HorizontalAlignment="Center" FontWeight="Bold" FontSize="18"/>
<Label x:Name="UnitLabel" Grid.Column="1" Content="m/s" Margin="1" FontSize="10" VerticalAlignment="Stretch"/>
</Grid>
</Viewbox>
</UserControl>

Try removing Width from your grid will solve your problem.
<Grid Width="150">
Edit
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="25" />
</Grid.ColumnDefinitions>
<Label x:Name="ValueLabel" Grid.Column="0" Content="1013.0" Margin="0" VerticalAlignment="Center" HorizontalAlignment="Center" FontWeight="Bold" FontSize="18"/>
<Label x:Name="UnitLabel" Grid.Column="1" Content="m/s" FontSize="10" />
</Grid>
EDIT
As try this below,
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<Viewbox Grid.Column="0" MaxHeight="150" MinHeight="10" MaxWidth="800" MinWidth="10" Stretch="Uniform" Margin="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Label x:Name="ValueLabel" Content="1013.0" Margin="0" VerticalAlignment="Center" HorizontalAlignment="Center" FontWeight="Bold" FontSize="18"/>
</Viewbox>
<Viewbox Grid.Column="1" MaxHeight="150" MinHeight="10" MaxWidth="800" MinWidth="10" Stretch="Uniform" Margin="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Label x:Name="UnitLabel" Content="m/s" FontSize="10" />
</Viewbox>
</Grid>

<Grid>
<Viewbox Margin="0">
<Label Margin="0" Padding="1" FontWeight="Bold"/>
</Viewbox>
<Grid SnapsToDevicePixels="True">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="0.8*" />
</Grid.RowDefinitions>
<Viewbox HorizontalAlignment="Right" Stretch="Uniform" Margin="3,0">
<Label Margin="0" Padding="0"/>
</Viewbox>
</Grid>
</Grid>

WPF datagrid multi Tier Header, editing cells

So I have a multi tier header, that is basically just a header with two sub headers underneath it,
the code for the look of the header is:
<Style x:Key="PlateDetailsmultitier" TargetType="DataGridColumnHeader" BasedOn="{StaticResource DataGridHeaderStyleBase2Tier}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid x:Name="Root" VerticalAlignment="Top" HorizontalAlignment="Stretch" Height="49" Margin="0,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="24" />
<RowDefinition Height="1" />
<RowDefinition Height="24" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="49"/>
<ColumnDefinition Width="1" />
<ColumnDefinition Width="49"/>
</Grid.ColumnDefinitions>
<Rectangle Fill="LightGray" Grid.ColumnSpan="3"/>
<Rectangle Fill="Black" Height="1" VerticalAlignment="Top" HorizontalAlignment="Stretch" Grid.ColumnSpan="3"/>
<ContentPresenter Content="Plate Details" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.ColumnSpan="3" MouseDown="ContentPresenter_MouseDown"/>
<Rectangle Fill="Black" VerticalAlignment="Stretch" Height="1" Grid.Row="1" Grid.ColumnSpan="3"/>
<ContentPresenter Content="t__plate" Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Center" MouseDown="ContentPresenter_MouseDown"/>
<Rectangle Fill="Black" VerticalAlignment="Stretch" Width="1" Visibility="Visible" Grid.Row="2" Grid.Column="1" />
<ContentPresenter Content="σy" Grid.Row="2" Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Center" MouseDown="ContentPresenter_MouseDown"/>
<Rectangle Fill="Black" VerticalAlignment="Stretch" Width="1" Visibility="Visible" Grid.Row="3" Grid.Column="1" />
<Rectangle Fill="Black" VerticalAlignment="Stretch" Width="1" Visibility="Visible" Grid.Row="4" Grid.Column="1" />
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
But the problem is that when I go to try to edit these cells it just selects both columns as one cell, and i can not edit either of these columns.
I would like to be able to edit both columns seperatly.
To start off datagrid template column I just used
<DataGridTemplateColumn HeaderStyle="{StaticResource PlateDetailsmultitier}" Width="100">
Is anyone aware of a solution to this problem.

WPF DockPanel Layout

I want to change the alignment of my dockPanel, and I'm having some trouble. I'm relatively new to WPF, so that may explain it.
Anyways, here is the current layout:
<theme:bottomPanel DockPanel.Dock="Bottom" x:Name="bottomPanel" ClipToBounds="False" SnapsToDevicePixels="False" HorizontalAlignment="Center" Height="145" />
<theme:rightPanel DockPanel.Dock="Right" x:Name="rightPanel" ClipToBounds="False" SnapsToDevicePixels="False"/>
<theme:leftPanel DockPanel.Dock="Left" x:Name="leftPanel" ClipToBounds="False" SnapsToDevicePixels="False" />
<theme:MapPanel DockPanel.Dock="Top" x:Name="mapPanel" ClipToBounds="False" SnapsToDevicePixels="False" />
Visualized in Paint (lol) :
I would like to change the layout to something like the following:
Is this possible? If so, what approach would you recommend? Any guidance would be helpful! Thank you.
As an aside: is there any application that allows me to see my application layout as the app runs (i.e. add gridlines to each panel or something)?
Anyways, thanks!

<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border Background="Gray" Grid.ColumnSpan="3">
<TextBlock Text="Top Area"/>
</Border>
<Border Background="Magenta" Grid.Row="1" Height="200">
<TextBlock Text="Left Area"/>
</Border>
<Border Background="Red" Grid.Row="1" Grid.Column="1" Height="200">
<TextBlock Text="Bottom Area"/>
</Border>
<Border Background="Cyan" Grid.Column="2" Grid.RowSpan="2" Margin="0,200,0,0" Width="200">
<TextBlock Text="Right Area"/>
</Border>
</Grid>