We Keep Coding

WPF: How do I get a text box to fill all available horizontal space?

I'm creating a form in WPF. The form has TextBoxes with TextBlocks to their left. A screenshot with GridLines is below:
I want it to look like this (forgive the MS Paint style):
The problem is: the text boxes are really small unless I set the HorizontalAlignment to Stretch, but if I do that, I can't align them to the left. How do I get the Grid containing TextBlock/TextBox to align to the left and make the TextBox fill all available space?
It's trivially easy if I hardcode widths, but that obviously won't work with resizing. I've tried playing with Stack and Dock Panels to hold the Grids with no luck.
I can't use HorizontalAlignment=Stretch, MaxWidth, and Left aligned at the same time? because there is no other control that is the width of the space I am trying to fill.
I also can't use How to get controls in WPF to fill available space? because nothing in my xaml has HorizontalContentAllignment. I tried wrapping stuff in ContentControls and using an ItemsControl to force it with no luck.
The xaml for the form is below. Note, this xaml is for the control that is under the 'Create' header and to the right of the 3 buttons.
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--Left hand side content goes here-->
<DockPanel Grid.Row="0" Grid.Column="1" Grid.RowSpan="2"
Margin="20,0,0,0">
<Grid ShowGridLines="True" DockPanel.Dock="Top" HorizontalAlignment="Stretch" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="TextBlockColumn"/>
<ColumnDefinition SharedSizeGroup="TextBoxColumn"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Text="Input Name:"
HorizontalAlignment="Right" VerticalAlignment="Center"/>
<TextBox Grid.Column="1"
HorizontalAlignment="Stretch" VerticalAlignment="Center"
Style="{StaticResource FormTextBox}"
Margin="5,0,5,0"/>
</Grid>
<Grid ShowGridLines="True" DockPanel.Dock="Top" HorizontalAlignment="Left" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="TextBlockColumn"/>
<ColumnDefinition SharedSizeGroup="TextBoxColumn"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Text="Input Name:"
HorizontalAlignment="Right" VerticalAlignment="Center"/>
<TextBox Grid.Column="1"
HorizontalAlignment="Stretch" VerticalAlignment="Center"
Style="{StaticResource FormTextBox}"
Margin="5,0,5,0"/>
</Grid>
</DockPanel>
</Grid>
The FormTextBox style is:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="TextBox"
x:Key="FormTextBox">
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Border CornerRadius="10"
Background="{StaticResource InputBrush}">
<Grid>
<Rectangle StrokeThickness="1"/>
<TextBox Margin="1"
Text="{Binding RelativeSource={RelativeSource TemplatedParent},
Path=Text,
Mode=TwoWay,
UpdateSourceTrigger=PropertyChanged}"
BorderThickness="0"
Background="Transparent"
VerticalContentAlignment="Center"
Padding="5"
Foreground="{StaticResource TextBrush}"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
It rounds the corners, changes the background color, and removes the dotted line that shows up if it was selected before you alt-tabbed out and back into the application.

You indicate that this is the desired layout:
There are a few problems with your current code. First, using a DockPanel to host the TextBlock/TextBox pairs, and second, no control has Grid.IsSharedSizeScope=true set on it. You also have defined a shared size for the text box column when in reality you just want it to take up all the available space.
Here is some code that achieves the desired layout:
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--Left hand side content goes here-->
<StackPanel Orientation="Vertical" Grid.Column="1"
Grid.RowSpan="2"
Margin="20,0,0,0"
Grid.IsSharedSizeScope="True" >
<StackPanel.Resources>
<Style TargetType="TextBlock">
<Setter Property="Grid.Column" Value="0"/>
<Setter Property="Text" Value="Input Name:"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
</StackPanel.Resources>
<Border BorderBrush="Blue" BorderThickness="5">
<Grid ShowGridLines="True" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="TextBlockColumn"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock/>
<TextBox Grid.Column="1"
VerticalAlignment="Center"
Style="{StaticResource FormTextBox}"
Margin="5,0,5,0"/>
</Grid>
</Border>
<Border BorderBrush="Red" BorderThickness="5">
<Grid ShowGridLines="True" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="TextBlockColumn"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock/>
<TextBox Grid.Column="1"
VerticalAlignment="Center"
Style="{StaticResource FormTextBox}"
Margin="5,0,5,0"/>
</Grid>
</Border>
</StackPanel>
</Grid>
This code produces:
In reality though, if you're going for maximum usability, you'll want to create your own control for the TextBlock/TextBox, and then you could just put it in an ItemsControl of some kind for dynamic content.

change scrollbar inside scrollviewer

there is a grid inside scrollviewer which is having a vertical scrollbar. But that scroll bar is not clear, there are 2 small horizontal lines at the bottom of scrollbar.
<ScrollViewer VerticalScrollBarVisibility="Auto" >
<Grid VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Name="DetailsBackButton" Style="{StaticResource BackButtonStyle}" Click="AttachementDetailsBackButton_Click" Grid.Row="0" Visibility="Collapsed" />
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ListBox x:Name="DetailsListbox" BorderBrush="#d2d4d5" BorderThickness="1" FontFamily="Arial" FontSize="12px" ItemsSource="{Binding}" Grid.Row="0" Visibility="Collapsed" Width="{Binding RelativeSource={RelativeSource TemplatedParent},Path=ActualHeight}" Style="{DynamicResource ListBoxDefaultStyle}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid >
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Text="{Binding Title}" Grid.Row="0" Style="{DynamicResource AttachmentTitleText}" MouseLeftButtonDown="AttachmentTitle_MouseLeftButtonDown" >
</TextBlock>
<Border Style="{DynamicResource AreaButtonBorder}" Grid.Row="1"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ListBox>
<WebBrowser Name="WebBrowser" Style="{DynamicResource WebBrowserStyle}" Visibility="Visible" Grid.Row="1" Navigating="FullTextWebBrowser_Navigating" LoadCompleted="WebBrowser_LoadCompleted" />
</Grid>
</Grid>
</ScrollViewer>
And further, if I am scrolling it a bit, these 2 horizontal lines will go off. how this can be solved? or Is there any way to move the scroll bar little down by default inside scrollviewer?
Thanks.

XAML Custom control - mathematical fraction

I'm completely new to XAML but not to C# and .NET in general. I'm creating a Windows 8.1 App and I want to create and implement a mathematical fraction control which would represent a structure with numerator and denominator (the first above the second) with horizontal line between them. I'll present here what I already achieved but I know it's very poor and probably the way of my thinking itself is not XAML-like.
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestWindowsApplication"
xmlns:local2="using:TestWindowsApplication.CustomControls">
<Style TargetType="local2:MathStructure" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local2:MathStructure">
<StackPanel>
<Border>
<Grid>
<Canvas>
<TextBlock>
1
</TextBlock>
</Canvas>
</Grid>
</Border>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="local2:FractionControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local2:FractionControl">
<Border BorderThickness="2" BorderBrush="Green">
<Grid Height="200" Width="120">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"></ColumnDefinition>
<ColumnDefinition Width="20"></ColumnDefinition>
<ColumnDefinition Width="20"></ColumnDefinition>
<ColumnDefinition Width="20"></ColumnDefinition>
<ColumnDefinition Width="20"></ColumnDefinition>
<ColumnDefinition Width="20"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="20"></RowDefinition>
</Grid.RowDefinitions>
<Border Grid.Row="4" Grid.Column="1" Grid.ColumnSpan="4" BorderThickness="0,0,0,2" BorderBrush="Red"/>
<Border BorderThickness="1" BorderBrush="White" Grid.Row="2" Grid.Column="2" Grid.ColumnSpan="2" Grid.RowSpan="2">
<Grid>
</Grid>
</Border>
<Border BorderThickness="1" BorderBrush="White" Grid.Row="6" Grid.Column="2" Grid.ColumnSpan="2" Grid.RowSpan="2">
<Grid>
</Grid>
</Border>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
I'd like this control to be reusable - I'm going to implement many more of such structures (like integrals, derivatives, sums etc.) so the goal of all of these controls is to enable putting one inside another (e.g. fraction with another fraction as its numerator and an integral as its denominator).
I'm not expecting a working example (although one full example would be great for me to learn), I'll appreciate every tip, hint, code I get here.

I would start off by adding a new UserControl item to your project.
Then, using the standard set of controls (textboxes/blocks, comboboxes, ect)arrange them how you wish to get the desired result you're after.
You can then add styles to those controls - as well as possibly adding in any "background computation" for your fraction-control; such as
1/4 == (value/4)
3/8 == (value/8)*3
If nobody beats me too it, I will attempt to provide you with some code... but I recommend having a quick go yourself :D

Is it possible to have a VariableSizedGridView with virtualization?

I am creating a Windows Phone 8.1 (WinRT) application. The mainpage template is a two GridView (2 grids per row) and the height of grid varies (one item might occupy one row and other might occupy two rows). The design is similar to the pinterest app (pin.it) except the varying height in pinterest app. I was able to achieve it using VariableSizedGridView and I did lazy loading as well. But I could find that there is no virtualization because of which the memory goes on increasing on scrolling down. Can you suggest me the how to achieve variable sized grid with virtualization like the pinterest app?
Please check the code below:
<local:VariableSizedGridView x:Name="samples"
ItemsSource="{Binding listofData}"
Margin="0,0,-24,0">
<local:VariableSizedGridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid ItemHeight="190"
ItemWidth="{Binding Converter={StaticResource ScreenWidthMultiplier}, ConverterParameter=1}"
Orientation="Horizontal"/>
</ItemsPanelTemplate>
</local:VariableSizedGridView.ItemsPanel>
<local:VariableSizedGridView.ItemTemplate>
<DataTemplate>
<Grid>
<local:MainPageTemplateSelector Content="{Binding}">
<local:MainPageTemplateSelector.BigTemplate>
<DataTemplate>
<Grid Height="380" Background="White"
Margin="0,3,6,3">
<Grid Margin="12" Background="Pink">
<Grid.RowDefinitions>
<RowDefinition Height="250"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Image Source="{Binding ImagePath}"
Stretch="Fill"/>
<Grid Grid.Row="1" Background="Black">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="35"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Name}" Foreground="Red"
Margin="12 3 12 5"/>
</Grid>
</Grid>
</Grid>
</DataTemplate>
</local:MainPageTemplateSelector.BigTemplate>
<local:MainPageTemplateSelector.SmallTemplate>
<DataTemplate>
<Grid Height="190" Width="{Binding Converter={StaticResource ScreenWidthMultiplier}, ConverterParameter=1}"
Background="Blue" Margin="0,3,6,3">
<Grid Margin="12" Background="Green">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition />
</Grid.RowDefinitions>
<Image Height="150"
Stretch="Fill"
Source="{Binding ImagePath}"/>
<Grid Grid.Row="1" Background="Black">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<TextBlock Foreground="Red"
Text="{Binding Name}"
TextWrapping="Wrap"
Margin="12 5 12 5"/>
</Grid>
</Grid>
</Grid>
</DataTemplate>
</local:MainPageTemplateSelector.SmallTemplate>
</local:MainPageTemplateSelector>
</Grid>
</DataTemplate>
</local:VariableSizedGridView.ItemTemplate>
</local:VariableSizedGridView>
And the VariableSizedGridView
public class VariableSizedGridView : GridView
{
protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
{
dynamic model = item;
try
{
element.SetValue(Windows.UI.Xaml.Controls.VariableSizedWrapGrid.ColumnSpanProperty, model.ColSpan);
element.SetValue(Windows.UI.Xaml.Controls.VariableSizedWrapGrid.RowSpanProperty, model.RowSpan);
}
catch
{
element.SetValue(Windows.UI.Xaml.Controls.VariableSizedWrapGrid.ColumnSpanProperty, 1);
element.SetValue(Windows.UI.Xaml.Controls.VariableSizedWrapGrid.RowSpanProperty, 1);
}
finally
{
element.SetValue(VerticalContentAlignmentProperty, VerticalAlignment.Stretch);
element.SetValue(HorizontalContentAlignmentProperty, HorizontalAlignment.Stretch);
base.PrepareContainerForItemOverride(element, item);
}
}
Thank you,
Neenu

Vertically aligning the contents of a ListBox in a Windows Store app

I have a Windows Store App with a ListBox which contains Grids of variable height. I can't get these to align at the top. I've tried every combo of VerticalAlignment and VerticalContentAlignment I can think of, and they're always centered vertically.
Here's my XAML
<Page
x:Class="MyApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyApp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid Margin="50,50,50,50" HorizontalAlignment="Stretch" Width="Auto">
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="80"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="" Margin="12,0,0,0" Style="{StaticResource HeaderTextStyle}" />
<Grid Grid.Row="1" Margin="30,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300"></ColumnDefinition>
<ColumnDefinition Width="15"></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="15"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0" x:Name="bxAddItem" Width="300" Height="28" Margin="0,0,0,0" Text="Item text" KeyUp="bxAddItem_KeyUp" GotFocus="bxAddItem_GotFocus" LostFocus="bxAddItem_LostFocus"></TextBox>
<ComboBox Grid.Column="2" x:Name="comboList" SelectionChanged="comboList_SelectionChanged" Width="100" Height="32">
<ComboBoxItem Tag="0">No List</ComboBoxItem>
</ComboBox>
<Button Grid.Column="4" x:Name="btnAddItem" Click="AddItem_Click" HorizontalAlignment="Left" Background="#45000000" Height="34">Add an Item</Button>
</Grid>
<ScrollViewer HorizontalScrollBarVisibility="Visible" Grid.Row="2">
<ListBox Width="Auto" VerticalContentAlignment="Top" ItemsSource="{Binding ToDoLists}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Background="Beige">
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Title}"></TextBlock>
<ListBox Grid.Row="1" Grid.Column="0" Name="ToDoList" ItemsSource="{Binding Path=Items}"
Margin="24,0,0,0" Height="Auto" MinWidth="200" VerticalAlignment="Stretch"
BorderBrush="BlueViolet" SelectionChanged="ToDoList_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock Text="{Binding ItemName}"></TextBlock>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ListBox>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel VerticalAlignment="Top" Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ListBox>
</ScrollViewer>
</Grid>
</Grid>
</Page>
EDIT:
Sheridan's answer does not work for me. There may be something else on the page that's causing the issue.
I've updated the question to include the entire page code.
EDIT 2:
This post was incorrectly tagged as WPF when in fact the issue is in a Windows Store app. This code works perfectly in WPF, hence the confusion. However it does NOT work in a Windows Store app

Have you tried setting the ItemContainerStyle to VerticalAlignment="Top"
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="VerticalAlignment" Value="Top"></Setter>
</Style>
</ListBox.ItemContainerStyle>