Develop Reference

How can I make controls in WPF stretch to fill available width when HorizontalAlignment and HorizontalContentAlignment don't work?

I'm trying to make a simple WPF app that has sections that fill the available width. Despite trying various ways of stretching the width of elements, containers, and children, nothing is working and I can't figure out why.
Another question said to use uniformgrid which worked well EXCEPT that it set the height of all the elements uniformly which was definitely not what I wanted. I want all of the sections to look like the one in the picture - filled width, height auto based on the content. Here's the basic setup:
<Window x:Class="A_Customizer.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:A_Customizer"
mc:Ignorable="d"
Title="MainWindow"
Background="#FF2B2B2B"
Width="800"
>
<Window.Resources>
<Style TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand"/>
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="{x:Type CheckBox}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand"/>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid Name="mainApp" >
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<WrapPanel Grid.Row="0" >
<Button ToolTip="Click to apply the below settings to this Jumpbox" Click="ApplyCustomizations">Customize</Button>
</WrapPanel>
<ScrollViewer Grid.Row="1">
<WrapPanel HorizontalAlignment="Stretch" >
<GroupBox
Background="#FFE2E2E2"
BorderBrush="#FF7F7F7F"
Margin="10,10,10,10"
Name="pathsBox"
HorizontalContentAlignment="Stretch"
HorizontalAlignment="Stretch"
>
<GroupBox.Header>
<Border Background="#FFAFAFAF" CornerRadius="3">
<Label FontWeight="Bold">Key Paths</Label>
</Border>
</GroupBox.Header>
<StackPanel HorizontalAlignment="Stretch">
<Grid Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<TextBox Name="homeFolder" Grid.Column="0" HorizontalAlignment="Stretch"></TextBox>
<Button Grid.Column="1" Click="NewQuickPath" ToolTip="Change home folder">
<Image Source="images\add_folder.png" Height="25" Cursor="Hand"></Image>
</Button>
</Grid>
<TextBox Name="progFolder" Grid.Column="0" HorizontalAlignment="Stretch"></TextBox>
</StackPanel>
</GroupBox>
<GroupBox
Background="#FFE2E2E2"
BorderBrush="#FF7F7F7F"
Margin="10,10,10,10"
Name="quickBox"
Height="auto"
HorizontalContentAlignment="Stretch"
>
<GroupBox.Header>
<Border Background="#FFAFAFAF" CornerRadius="3">
<Label FontWeight="Bold">Quick Access Folders</Label>
</Border>
</GroupBox.Header>
<StackPanel HorizontalAlignment="Stretch">
<TextBlock TextWrapping="Wrap" Margin="15">
There are going to be folders you'll need to access frequently and keeping them pinned on top of the left menu in Explorer is helpful.
Select here to add them to the list of folders restored with the "Customize" button. Click any folder to remove it.
</TextBlock>
<Border CornerRadius="3" Background="#FFF3C7C7" Margin="6" Visibility="Collapsed" Name="quickErr" Tag="err_box">
<TextBlock Tag="errMsg" Foreground="#FFFD3434" TextWrapping="Wrap" Margin="6" ></TextBlock>
</Border>
<UniformGrid Name="quickPathsArea" Columns="1">
</UniformGrid>
<Grid Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0" HorizontalAlignment="Stretch"></TextBox>
<Button Grid.Column="1" Click="NewQuickPath" ToolTip="Add a new folder">
<Image Source="images\add_folder.png" Height="25" Cursor="Hand"></Image>
</Button>
</Grid>
</StackPanel>
</GroupBox>
</wrappanel>
</scrollviewer>
</grid>

StackPanel with Orientation="Vertical" (default value) instead of WrapPanel should work: it will allow each child element use full width and as much height as necessary

How to keep my screen responsive using grid in wpf

I'm working on small and very simple WPF application, BUT I'm having trouble with responsive stuffs, computer where I'm working at is like 22'' with full HD resolution and everything looks fine, let me post picture how it looks like this:
[![enter image description here][1]][1]
But when I run application on smaller monitor, my content also moves up, acctualy my datagrid and my textboxes somehow glue up to the header ( which has blue background). And it looks really bad on smaller devices. I'm working with grids and I thought that's right way, but probably I am doing something wrong..
So this is how it looks on smaller device and resolution:
[![enter image description here][2]][2]
And here is my xaml code:
<Window x:Class="Test.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" WindowStartupLocation="CenterScreen" WindowState="Maximized" WindowStyle="None">
<!-- This is my main grid which is coming by default when I created this window -->
<Grid>
<!-- I created this grid, because soon I will put image to the left, as my logo, and few informations also, thats reason why I have column definition -->
<Grid Height="65" Margin="0" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0,60*" />
<ColumnDefinition Width="0,10*" />
<ColumnDefinition Width="0,10*" />
<ColumnDefinition Width="0,10*" />
<ColumnDefinition Width="0,10*" />
</Grid.ColumnDefinitions>
<Rectangle Grid.ColumnSpan="5">
<Rectangle.Fill>
<SolidColorBrush Color="#0091EA"></SolidColorBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
<!-- This is big grid which is separated in two columns which fits on screen 80% of screen - left part 20% of screen right part -->
<Grid Margin="0,50,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0,80*"/>
<ColumnDefinition Width="0,20*"/>
</Grid.ColumnDefinitions>
<Border Grid.Column="0" Grid.RowSpan="10" BorderThickness="0,0,3,0" BorderBrush="#0091EA"/>
<!-- Here are my text boxes, 6 of them, so I have 6 column definitions-->
<Grid Margin="0,0,0,0" Grid.Column="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0,20*" />
<ColumnDefinition Width="0,30*"/>
<ColumnDefinition Width="0,12*" />
<ColumnDefinition Width="0,12*" />
<ColumnDefinition Width="0,12*" />
<ColumnDefinition Width="0,12*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0,10*"/>
<RowDefinition Height="0,86*"/>
<RowDefinition Height="0,04*"/>
</Grid.RowDefinitions>
<Border Grid.Row="2" Grid.ColumnSpan="10" BorderThickness="0,3,0,0" BorderBrush="#0091EA"/>
<TextBox Height="40" Margin="15,0,8,0" Grid.Row="0" Grid.Column="0" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" FontSize="20" BorderThickness="1" />
<TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="1" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" />
<TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="2" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" />
<TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="3" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" />
<TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="4" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" />
<TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="5" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" />
<DataGrid Grid.ColumnSpan="6" MinHeight="200" Margin="15,-20,8,50" Grid.Row="1" Grid.Column="0" AutoGenerateColumns="False" Background="White" >
<DataGrid.Resources>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Background" Value="#0091EA"/>
<Setter Property="Opacity" Value="1"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="FontSize" Value="16"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="Height" Value="40"/>
</Style>
</DataGrid.Resources>
</DataGrid>
</Grid>
</Grid>
</Grid>
</Window>
Edit after Mark's answer:
XAML CODE:
<Window x:Class="xTouchPOS.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" WindowStartupLocation="CenterScreen" WindowState="Maximized" WindowStyle="None">
<Grid>
<!-- I created this grid, because soon I will put image to the left, as my logo, and few informations also, thats reason why I have column definition -->
<Grid.RowDefinitions>
<!--Reserved header space-->
<RowDefinition Height="50" />
<!--Rest of space for textboxes and grid, etc.-->
<RowDefinition />
</Grid.RowDefinitions>
<Rectangle Fill="#0091EA" />
<!--My edit.Added one more grid to row 0 which will contain some things that I need like time, date, user which is currently using app-->
<Grid Height="50" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0,60*" />
<ColumnDefinition Width="0,10*" />
<ColumnDefinition Width="0,10*" />
<ColumnDefinition Width="0,10*" />
<ColumnDefinition Width="0,10*" />
</Grid.ColumnDefinitions>
<Image Stretch="Fill" Name="image2" Source="C:\Users\Tuca\Desktop\microsoft.logo.png" Width="135" Height="42" VerticalAlignment="Center" Margin="15,0,0,0" Grid.Column="0" HorizontalAlignment="Left"/>
<StackPanel Grid.Column="4" Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center">
<TextBlock x:Name="lblTimeText" Text="Time" Margin="0,0,0,0" FontSize="15" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" VerticalAlignment="Bottom" />
<TextBlock x:Name="lblTime" Text="labelTime" Grid.Column="0" Margin="0" FontSize="18" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" />
</StackPanel>
<StackPanel Grid.Column="3" Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center">
<TextBlock Name="lblDateText" Text="Date" Margin="0" FontSize="15" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" />
<TextBlock Name="lblDate" Text="labelaDate" Margin="0" FontSize="18" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" />
</StackPanel>
<StackPanel Grid.Column="2" Orientation="Vertical" VerticalAlignment="Center">
<TextBlock x:Name="lblOperater" Text="User" Margin="0,0,0,0" FontSize="15" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" VerticalAlignment="Bottom" />
<TextBlock x:Name="lblOperaterText" Text="Tony Montana" Grid.Column="0" Margin="0" FontSize="16" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" />
</StackPanel>
<StackPanel Grid.Column="1" Orientation="Vertical" VerticalAlignment="Center">
<TextBlock x:Name="lblNumber" Text="Ordinal number." Margin="0,0,40,0" FontSize="15" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" VerticalAlignment="Bottom" />
<TextBlock x:Name="lblNumber" Text="0014" Grid.Column="0" Margin="0" FontSize="16" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" />
</StackPanel>
</Grid>
<!--header section-->
<!-- This is big grid which is separated in two columns which fits on screen 80% of screen - left part 20% of screen right part -->
<Grid Margin="0,0,0,0" Grid.Row="1">
<Grid.RowDefinitions>
<!--Space for Textboxes - left to auto so that it is not overconstrained, but does
not take up too much space-->
<RowDefinition Height="Auto" />
<!--Datagrid gets the remainder of the space-->
<RowDefinition />
<!--This is the space allowed for the bottom border-->
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<!--Reserved 80% of remaining space for text/grid-->
<ColumnDefinition Width="8*"/>
<!--This is the space allowed for the right border-->
<ColumnDefinition Width="Auto" />
<!--This is the 20% of remaining space-->
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<!--textbox section-->
<Grid Grid.Row="0" Margin="0 5">
<Grid.ColumnDefinitions>
<!--you only had 8 definitions, but 6 boxes... not sure what is intended-->
<ColumnDefinition Width="6*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBox Height="40" Margin="15,0,8,0" Grid.Row="0" Grid.Column="0" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" FontSize="20" BorderThickness="1" />
<TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="1" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" />
<TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="2" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" />
<TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="3" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" />
<TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="4" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" />
<TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="5" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" />
</Grid>
<!--grid element-->
<DataGrid Grid.Row="1" MinHeight="200" Margin="15,0,8,0" AutoGenerateColumns="False" Background="White" >
<DataGrid.Resources>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Background" Value="#0091EA"/>
<Setter Property="Opacity" Value="1"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="FontSize" Value="16"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="Height" Value="40"/>
</Style>
</DataGrid.Resources>
</DataGrid>
<!--right border element-->
<Rectangle Fill="#0091EA" Width="3" Grid.Column="1" Grid.RowSpan="3" />
<!--bottom border element-->
<Rectangle Fill="#0091EA" Height="3" Grid.Row="2" />
<Grid Grid.Row="0" Grid.Column="2"/>
<Grid Grid.Row="1" Grid.Column="2"/>
</Grid>
</Grid>
</Window>
So mate take a look I edited header, is that right way? To add one more grid with stackpanels, and how could I add copyright and stuffs at the bottom, shouldn't I treat it as one more row which will be very small by heigh for exaple 20px?
Thanks a lot

I think you've got the right idea - use grids for layout... You just need some more experience with it. Pikoh is correct in the comment about "hard coded" dimensions. What was a red flag for me was the negative margin on the grid (this is why it will be allowed to overlap your textboxes).
I tend to use multiple grids nested within each other to create what you're looking to do. Think of it from the largest container to the smallest. For example, there is no reason for your main grid to have 6 columns... it only needs 1 column, but 2 rows to fit your "sections". The larger section needs 3 sections side-by-side (80%/border/20%) (columns) and 2 sections in the left-most section (grid/border) Here is an example of what I think you're trying to accomplish. I left a number of the hard-coded heights and such, as I'm not privy to your requirements, but left off enough to make it responsive.
<Grid>
<!-- I created this grid, because soon I will put image to the left, as my logo, and few informations also, thats reason why I have column definition -->
<Grid.RowDefinitions>
<!--Reserved header space-->
<RowDefinition Height="40" />
<!--Rest of space for textboxes and grid, etc.-->
<RowDefinition />
</Grid.RowDefinitions>
<!--header section-->
<Rectangle Fill="#0091EA" />
<!-- This is big grid which is separated in two columns which fits on screen 80% of screen - left part 20% of screen right part -->
<Grid Margin="0,0,0,0" Grid.Row="1">
<Grid.ColumnDefinitions>
<!--Reserved 80% of remaining space for text/grid-->
<ColumnDefinition Width="8*"/>
<!--This is the space allowed for the right border-->
<ColumnDefinition Width="Auto" />
<!--This is the 20% of remaining space-->
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<!--left-hand grid-->
<Grid>
<Grid.RowDefinitions>
<!--Space for Textboxes - left to auto so that it is not overconstrained, but does
not take up too much space-->
<RowDefinition Height="Auto" />
<!--Datagrid gets the remainder of the space-->
<RowDefinition />
<!--This is the space allowed for the bottom border-->
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!--textbox section-->
<Grid Grid.Row="0" Margin="0 5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBox Height="40" Margin="15,0,8,0" Grid.Row="0" Grid.Column="0" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" FontSize="20" BorderThickness="1" />
<TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="1" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" />
<TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="2" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" />
<TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="3" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" />
<TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="4" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" />
<TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="5" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" />
</Grid>
<!--grid element-->
<DataGrid Grid.Row="1" MinHeight="200" Margin="15,0,8,0" AutoGenerateColumns="False" Background="White" >
<DataGrid.Resources>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Background" Value="#0091EA"/>
<Setter Property="Opacity" Value="1"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="FontSize" Value="16"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="Height" Value="40"/>
</Style>
</DataGrid.Resources>
</DataGrid>
<!--bottom border element-->
<Rectangle Fill="#0091EA" Height="3" Grid.Row="2" />
</Grid>
<!--right border element-->
<Rectangle Fill="#0091EA" Width="3" Grid.Column="1" Grid.RowSpan="3" />
<!--right-hand grid-->
<Grid Grid.Column="2">
<!--Whatever content ends up here-->
</Grid>
</Grid>
</Grid>
UPDATE:
Here is the final product based on the image you included. At this point, it is just reviewing the different pieces that were used to put it together and practice that will get it to all come together for you. Subdivide into logical sections, then work within those sections when you need to manipulate the layout. If you found this helpful, please feel free to mark as answer and good luck with your application!
<!--header section-->
<Rectangle Fill="#0091EA" />
<Grid Height="50" Grid.Row="0">
<Grid.Resources>
<Style TargetType="TextBlock">
<Setter Property="Margin" Value="0" />
<Setter Property="Foreground" Value="#FFFFFFFF" />
<Setter Property="FontSize" Value="15" />
<Setter Property="FontFamily" Value="Arial" />
</Style>
<Style TargetType="StackPanel">
<Setter Property="Margin" Value="6 0" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" MinWidth="135" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="4" >
<TextBlock x:Name="lblTimeText" Text="Time" />
<TextBlock x:Name="lblTime" Text="labelTime" />
</StackPanel>
<StackPanel Grid.Column="3" >
<TextBlock Name="lblDateText" Text="Date" />
<TextBlock Name="lblDate" Text="labelaDate" />
</StackPanel>
<StackPanel Grid.Column="2" >
<TextBlock x:Name="lblOperater" Text="User" />
<TextBlock x:Name="lblOperaterText" Text="Tony Montana" />
</StackPanel>
<StackPanel Grid.Column="1" >
<TextBlock x:Name="lblBrojRacuna" Text="Ordinal number." />
<TextBlock x:Name="lblBrojRacunaText" Text="0014" FontSize="16" />
</StackPanel>
</Grid>
<!-- This is big grid which is separated in two columns which fits on screen 80% of screen - left part 20% of screen right part -->
<Grid Margin="0,0,0,0" Grid.Row="1">
<Grid.ColumnDefinitions>
<!--Reserved 80% of remaining space for text/grid-->
<ColumnDefinition Width="8*"/>
<!--This is the space allowed for the right border-->
<ColumnDefinition Width="Auto" />
<!--This is the 20% of remaining space-->
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<!--left-hand grid-->
<Grid>
<Grid.RowDefinitions>
<!--Space for Textboxes - left to auto so that it is not overconstrained,
but does not take up too much space-->
<RowDefinition Height="Auto" />
<!--Datagrid gets the remainder of the space-->
<RowDefinition />
<!--This is the space allowed for the bottom border-->
<RowDefinition Height="Auto" />
<!--This is the space allowed for the copyright-->
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<!--textbox section-->
<Grid Grid.Row="0" Margin="15 5">
<Grid.Resources>
<Style TargetType="TextBox">
<Setter Property="Height" Value="40" />
<Setter Property="Margin" Value="0 0 8 0" />
<Setter Property="TextWrapping" Value="Wrap" />
<Setter Property="BorderBrush" Value="#0091EA" />
<Setter Property="BorderThickness" Value="1" />
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBox Grid.Row="0" Grid.Column="0" Text="TextBox" FontSize="20" />
<TextBox Grid.Row="0" Grid.Column="1" Text="TextBox" />
<TextBox Grid.Row="0" Grid.Column="2" Text="TextBox" />
<TextBox Grid.Row="0" Grid.Column="3" Text="TextBox" />
<TextBox Grid.Row="0" Grid.Column="4" Text="TextBox" />
<TextBox Grid.Row="0" Grid.Column="5" Text="TextBox" />
</Grid>
<!--grid element-->
<DataGrid Grid.Row="1" MinHeight="200" Margin="15,0,8,0" AutoGenerateColumns="False" Background="White" >
<DataGrid.Resources>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Background" Value="#0091EA"/>
<Setter Property="Opacity" Value="1"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="FontSize" Value="16"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="Height" Value="40"/>
</Style>
</DataGrid.Resources>
</DataGrid>
<!--bottom border element-->
<Rectangle Fill="#0091EA" Height="3" Grid.Row="2" />
<!--copyright-->
<TextBlock Grid.Row="3" HorizontalAlignment="Center" Text="Copyright some holder ####" />
</Grid>
<!--right border element-->
<Rectangle Fill="#0091EA" Width="3" Grid.Column="1" Grid.RowSpan="3" />
<!--right-hand grid-->
<Grid Grid.Column="2">
<!--Whatever content ends up here-->
</Grid>
</Grid>

I would advise looking into using stackpanels and dockpanels. Stackpanels have generally been more useful to me in my WPF experience. Also for headers and stuff near the top of the page use fixed spacing instead of calculated percentages based on screen size. I find it's generally better to keep menu bars at a fixed size and let the content be dynamic size.

WPF XAML Custom Listbox Does Not Position Elements Correctly

I am trying to implement a custom multi-page dialog that takes an arbitrary number of visuals (slides) and displays them. The desired behavior would be that the selected item would appear at the top-center of the display area in the foreground. The previous slide would be at the bottom-left with a lower z-index, and the next slide would be at the bottom-right with a lower z-index. "Previous" and "Next" buttons would set the selected index. In the set method for the index, I loop through the slides and set an integer value called "SelectionState" based on whether each slide is hidden, selected, just before the selected one, or just after the selected one. I am trying to position the slides based on this integer using IValueConverters.
For my Listbox.ItemsPanelTemplate, I tried using a Grid. In the ItemsTemplate, I was setting the Grid.Column and Grid.Row using IValueConverters. Stepping through code, I can see that the value converters are being called, and that they are returning appropriate values, but all items appear in row 0, column 0 anyway.
After getting frustrated, I tried changing the Grid to a Canvas and setting the Canvas.Left and Canvas.Top properties, and again, I can see that I am getting good values back from the converter, but all items position themselves in the top-left corner anyway. (This code is shown, but commented out)
Since I know the value converters are behaving as expected, does anybody else see what I am doing wrong? Thank you in advance for any suggestions!
<Grid x:Name="DialogLayer">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="420" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="1100" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ListBox x:Name="lbSlides" ItemsSource="{Binding CurrentFormSet.InterviewSlides}" Grid.Column="1" Grid.Row="1" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Hidden">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250" />
<ColumnDefinition Width="250" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="250" />
<ColumnDefinition Width="250" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60" />
<RowDefinition Height="300" />
<RowDefinition Height="60" />
</Grid.RowDefinitions>
</Grid>
<!--<Canvas Grid.Row="1" Grid.Column="1" />-->
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<!--<Border BorderBrush="Black" BorderThickness="1" Width="600" Height="360" Canvas.Top="{Binding SelectionState, Converter={StaticResource SelectionStateToCanvasTopConverter}}" Canvas.Left="{Binding SelectionState, Converter={StaticResource SelectionStateToCanvasLeftConverter}}" Panel.ZIndex="{Binding SelectionState, Converter={StaticResource SelectionStateToZIndexConverter}}">
<TextBlock Text="Hello World" />
</Border>-->
<Border BorderBrush="Black" BorderThickness="1" Width="600" Height="360" Grid.Column="{Binding SelectionState, Converter={StaticResource SelectionStateToGridColumnConverter}}" Grid.Row="{Binding SelectionState, Converter={StaticResource SelectionStateToGridRowConverter}}" Panel.ZIndex="{Binding SelectionState, Converter={StaticResource SelectionStateToZIndexConverter}}">
<TextBlock Text="Hello World" />
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>

You have to set those properties on the item container (i.e. the ListBoxItem) by setting the ItemContainerStyle property:
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Grid.Column" Value="{Binding SelectionState, ...}"/>
<Setter Property="Grid.Row" Value="{Binding SelectionState, ...}"/>
<Setter Property="Panel.ZIndex" Value="{Binding SelectionState, ...}"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="1" Width="600" Height="360">
<TextBlock Text="Hello World" />
</Border>
</DataTemplate>
</ListBox.ItemTemplate>

How to make a custom tool tip template in WPF XAML

I have a number of buttons on a form (devcomponents ButtonDropDown controls to be precise).
I want to show a tool tip for each that contains a header at the top, an image on the left and a description on the right.
The header needs to be tied to the ButtonDropDown.Header, the image to the ButtonDropDown.Image. I also then need to define the description somewhere.
I've only been using WPF for a few weeks so I've not managed to find any answers via searching, though I have studied a few.
Below is my attempt at creating a template that really doesn't work at all:
<Style TargetType="dcr:ButtonDropDown">
<Setter Property="OverridesDefaultStyle" Value="True"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="dcr:ButtonDropDown">
<ContentControl>
<ContentControl.ToolTip>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
Content="{TemplateBinding Header}" FontWeight="Bold" />
<Viewbox Grid.Row="1" Grid.Column="0" Width="64" Height="32" Margin="3">
<ContentControl Content="{TemplateBinding Image}" />
</Viewbox>
<Label Grid.Row="1" Grid.Column="1"
Content="{TemplateBinding ToolTip.Content}" />
</Grid>
</ContentControl.ToolTip>
</ContentControl>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I then define a button as follows:
<dcr:ButtonDropDown Header="-X" Command="{Binding MoveCommand}" CommandParameter="xMinus"
ImagePosition="Top" IsEnabled="{Binding UserConfiguration.Move.Visible}"
ToolTip="move x axis down">
<dcr:ButtonDropDown.Image>
<Viewbox Width="32" Height="32" Margin="3">
<ContentControl Content="{StaticResource minusXImage}" />
</Viewbox>
</dcr:ButtonDropDown.Image>
</dcr:ButtonDropDown>
Please could someone give me an idea how to go about this?

I've gone some way to answering this question.
The following style is defined for ToolTip:
<Style TargetType="ToolTip">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToolTip">
<Border Background="GhostWhite" BorderBrush="Gainsboro" BorderThickness="1">
<Grid Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
Content="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ToolTip}},
Path=PlacementTarget.(dcr:ButtonDropDown.Header)}"
FontWeight="Bold" />
<Viewbox Grid.Row="1" Grid.Column="0" Width="64" Height="32" Margin="3">
<ContentControl Content="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ToolTip}},
Path=PlacementTarget.(dcr:ButtonDropDown.Image)}" />
</Viewbox>
<Label Grid.Row="1" Grid.Column="1"
Content="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ToolTip}},
Path=PlacementTarget.(dcr:ButtonDropDown.ToolTip)}" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I then define a button as above and the ToolTip text and header appear in the ToolTipas required.
The key is the binding:
Content="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ToolTip}},
Path=PlacementTarget.(dcr:ButtonDropDown.Header)}"
Which finds the Tooltip as an ancestor of Label and casts its PlacementTarget into a ButtonDropDown
What doesn't work is the image. This appears in the ToolTip but is removed from the button.
This will also break any other controls' tooltips if they are not ButtonDropDown controls.
I'm beginning to think I'll need to create some custom controls that contain the information I require for the ToolTip for each control.

Multi column list in windows 8 phone

I am trying to create a app to display tabular list (ID, Name, Lname) in the windows 8 phone.
My XAML file is as below
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style x:Key="ListBoxStyle" TargetType="ListBoxItem">
<Setter Property="Background" Value="{StaticResource PhoneSemitransparentBrush}" />
<Setter Property="Margin" Value="3,5" />
<Setter Property="FontSize" Value="20" />
<Setter Property="BorderBrush" Value="{StaticResource PhoneBorderBrush}" />
<!-- Replace the default item template with a basic template that does not highlight selected items. -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ContentPresenter/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SummaryStyle" TargetType="TextBlock">
<Setter Property="Margin" Value="5" />
<Setter Property="Width" Value="75" />
<Setter Property="HorizontalAlignment" Value="Left" />
</Style>
</Grid.Resources>
<StackPanel Orientation="Horizontal">
<TextBlock Text="ID" Width="100" />
<TextBlock Text="Name" Width="150"/>
<TextBlock Text="LName" Width="150"/>
</StackPanel>
<ScrollViewer Margin="-5,13,3,36" Height="558">
<ListBox Name="lstBox"
ItemsSource="{Binding}"
Height="380" HorizontalAlignment="Left" Margin="5,25,0,0"
VerticalAlignment="Top" Width="444" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding ID}" />
<TextBlock Text="{Binding FName}" />
<TextBlock Text="{Binding LName}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
</Grid>
and I call the below code on the button click even
List<Customers> cust = new List<Customers>();
cust.Add(new Customers(1, "Ganesh", "S"));
cust.Add(new Customers(2, "Shan", "S"));
cust.Add(new Customers(3, "Anjan", "A"));
lstBox.ItemsSource = cust;
But, it does not display the list it is just showing the column. These customer name should display as in windows 8 phone
ID Name LName
1 Ganesh S
2 Shan S
3 Anjan A
What is missing in the code? or What should I follow while to display multi column list in windows 8 phone?

You have defined three columns but the StackPanel is placed in the first column (default behavior), hence i guess that you are not able to view the data.
Or probably you can assign the header TextBlocks to the grid (remove the stackpanel) and within the itemtemplate define another grid with similar width which should help you achieve the layout.
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<TextBlock Text="ID" Width="100" Grid.Column="0"/>
<TextBlock Text="Name" Width="150" Grid.Column="1"/>
<TextBlock Text="LName" Width="150" Grid.Column="2"/>
and then your template like
<ListBox.ItemTemplate>
<DataTemplate>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding ID}" Grid.Column="0"/>
<TextBlock Text="{Binding FName}" Grid.Column="1"/>
<TextBlock Text="{Binding LName}" Grid.Column="2"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
(not tested code just re arranged as per your post) hope this helps

Create a Grid inside the StackPanel. In that create a column.
Here it looks like:
<ScrollViewer Margin="-5,13,3,36" Height="558">
<ListBox Name="lstBox"
ItemsSource="{Binding}"
Height="380" HorizontalAlignment="Left" Margin="5,25,0,0"
VerticalAlignment="Top" Width="444" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Specify width" />
<ColumnDefinition Width="Specify width" />
<ColumnDefinition Width="Specify width" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding ID}" Grid.Column="0" />
<TextBlock Text="{Binding FName}" Grid.Column="1" />
<TextBlock Text="{Binding LName}" Grid.Column="2" />
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>