TextBox doesn't stretch inside a Stackpanel - wpf

Question

Please see my attached example code:
<StackPanel Width="300">
<StackPanel Orientation="Horizontal">
<Label Content="Label" Width="100" />
<TextBox Text="Content" />
</StackPanel>
</StackPanel>
How can I make the TextBox stretch to fill all the remaining space horizontally? HorizontalAlignment is not working the way I expect it.
The inner StackPanel will be a UserControl, so I can't just replace both StackPanels with a Grid.

Answer 1

Instead of using the inner StackPanel, you can use a DockPanel.
<StackPanel Width="300">
<DockPanel>
<Label Content="Label" Width="100" />
<TextBox Text="Content" />
</DockPanel>
</StackPanel>

Answer 2

I would recommend using DockPanel as the root control for your UserControl so that you could get the behavior you are looking for in its Child Controls. However if you absolutely need it to be based on a StackPanel then just use some code behind to set the textbox width dynamically.
Xaml:
<StackPanel Name="stpnlOuterControl" Width="300" SizeChanged="StackPanel_SizeChanged">
<StackPanel Orientation="Horizontal">
<Label Content="Test" Width="100"/>
<TextBox Name="txtbxTest" Text="Content"/>
</StackPanel>
</StackPanel>
Code Behind:
Private Sub Window_Loaded(sender As Object, e As RoutedEventArgs)
txtbxTest.Width = stpnlOuterControl.ActualWidth - 100
End Sub
Private Sub StackPanel_SizeChanged(sender As Object, e As SizeChangedEventArgs)
txtbxTest.Width = stpnlOuterControl.ActualWidth - 100
End Sub

Answer 3

Alternative way is to use custom StackPanel
https://github.com/SpicyTaco/SpicyTaco.AutoGrid/blob/master/src/AutoGrid/StackPanel.cs
MainWindow
<Window x:Class="WpfApplication4.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:System="clr-namespace:System;assembly=mscorlib"
xmlns:VM="clr-namespace:WpfApplication4" >
<StackPanel Background="Red" Width="300">
<VM:StackPanel Orientation="Horizontal">
<Label Background="Blue" Content="Label" Width="100" />
<TextBox VM:StackPanel.Fill="Fill" Text="Content" />
</VM:StackPanel>
</StackPanel>
</Window>
Code for Custom Stack panel from SpicyTaco
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
namespace WpfApplication4
{
public class StackPanel : Panel
{
protected override Size MeasureOverride(Size constraint)
{
UIElementCollection children = InternalChildren;
double parentWidth = 0;
double parentHeight = 0;
double accumulatedWidth = 0;
double accumulatedHeight = 0;
var isHorizontal = Orientation == Orientation.Horizontal;
var totalMarginToAdd = CalculateTotalMarginToAdd(children, MarginBetweenChildren);
for (int i = 0; i < children.Count; i++)
{
UIElement child = children[i];
if (child == null) { continue; }
// Handle only the Auto's first to calculate remaining space for Fill's
if (GetFill(child) != StackPanelFill.Auto) { continue; }
// Child constraint is the remaining size; this is total size minus size consumed by previous children.
var childConstraint = new Size(Math.Max(0.0, constraint.Width - accumulatedWidth),
Math.Max(0.0, constraint.Height - accumulatedHeight));
// Measure child.
child.Measure(childConstraint);
var childDesiredSize = child.DesiredSize;
if (isHorizontal)
{
accumulatedWidth += childDesiredSize.Width;
parentHeight = Math.Max(parentHeight, accumulatedHeight + childDesiredSize.Height);
}
else
{
parentWidth = Math.Max(parentWidth, accumulatedWidth + childDesiredSize.Width);
accumulatedHeight += childDesiredSize.Height;
}
}
// Add all margin to accumulated size before calculating remaining space for
// Fill elements.
if (isHorizontal)
{
accumulatedWidth += totalMarginToAdd;
}
else
{
accumulatedHeight += totalMarginToAdd;
}
var totalCountOfFillTypes = children
.OfType<UIElement>()
.Count(x => GetFill(x) == StackPanelFill.Fill
&& x.Visibility != Visibility.Collapsed);
var availableSpaceRemaining = isHorizontal
? Math.Max(0, constraint.Width - accumulatedWidth)
: Math.Max(0, constraint.Height - accumulatedHeight);
var eachFillTypeSize = totalCountOfFillTypes > 0
? availableSpaceRemaining / totalCountOfFillTypes
: 0;
for (int i = 0; i < children.Count; i++)
{
UIElement child = children[i];
if (child == null) { continue; }
// Handle all the Fill's giving them a portion of the remaining space
if (GetFill(child) != StackPanelFill.Fill) { continue; }
// Child constraint is the remaining size; this is total size minus size consumed by previous children.
var childConstraint = isHorizontal
? new Size(eachFillTypeSize,
Math.Max(0.0, constraint.Height - accumulatedHeight))
: new Size(Math.Max(0.0, constraint.Width - accumulatedWidth),
eachFillTypeSize);
// Measure child.
child.Measure(childConstraint);
var childDesiredSize = child.DesiredSize;
if (isHorizontal)
{
accumulatedWidth += childDesiredSize.Width;
parentHeight = Math.Max(parentHeight, accumulatedHeight + childDesiredSize.Height);
}
else
{
parentWidth = Math.Max(parentWidth, accumulatedWidth + childDesiredSize.Width);
accumulatedHeight += childDesiredSize.Height;
}
}
// Make sure the final accumulated size is reflected in parentSize.
parentWidth = Math.Max(parentWidth, accumulatedWidth);
parentHeight = Math.Max(parentHeight, accumulatedHeight);
var parent = new Size(parentWidth, parentHeight);
return parent;
}
protected override Size ArrangeOverride(Size arrangeSize)
{
UIElementCollection children = InternalChildren;
int totalChildrenCount = children.Count;
double accumulatedLeft = 0;
double accumulatedTop = 0;
var isHorizontal = Orientation == Orientation.Horizontal;
var marginBetweenChildren = MarginBetweenChildren;
var totalMarginToAdd = CalculateTotalMarginToAdd(children, marginBetweenChildren);
double allAutoSizedSum = 0.0;
int countOfFillTypes = 0;
foreach (var child in children.OfType<UIElement>())
{
var fillType = GetFill(child);
if (fillType != StackPanelFill.Auto)
{
if (child.Visibility != Visibility.Collapsed && fillType != StackPanelFill.Ignored)
countOfFillTypes += 1;
}
else
{
var desiredSize = isHorizontal ? child.DesiredSize.Width : child.DesiredSize.Height;
allAutoSizedSum += desiredSize;
}
}
var remainingForFillTypes = isHorizontal
? Math.Max(0, arrangeSize.Width - allAutoSizedSum - totalMarginToAdd)
: Math.Max(0, arrangeSize.Height - allAutoSizedSum - totalMarginToAdd);
var fillTypeSize = remainingForFillTypes / countOfFillTypes;
for (int i = 0; i < totalChildrenCount; ++i)
{
UIElement child = children[i];
if (child == null) { continue; }
Size childDesiredSize = child.DesiredSize;
var fillType = GetFill(child);
var isCollapsed = child.Visibility == Visibility.Collapsed || fillType == StackPanelFill.Ignored;
var isLastChild = i == totalChildrenCount - 1;
var marginToAdd = isLastChild || isCollapsed ? 0 : marginBetweenChildren;
Rect rcChild = new Rect(
accumulatedLeft,
accumulatedTop,
Math.Max(0.0, arrangeSize.Width - accumulatedLeft),
Math.Max(0.0, arrangeSize.Height - accumulatedTop));
if (isHorizontal)
{
rcChild.Width = fillType == StackPanelFill.Auto || isCollapsed ? childDesiredSize.Width : fillTypeSize;
rcChild.Height = arrangeSize.Height;
accumulatedLeft += rcChild.Width + marginToAdd;
}
else
{
rcChild.Width = arrangeSize.Width;
rcChild.Height = fillType == StackPanelFill.Auto || isCollapsed ? childDesiredSize.Height : fillTypeSize;
accumulatedTop += rcChild.Height + marginToAdd;
}
child.Arrange(rcChild);
}
return arrangeSize;
}
static double CalculateTotalMarginToAdd(UIElementCollection children, double marginBetweenChildren)
{
var visibleChildrenCount = children
.OfType<UIElement>()
.Count(x => x.Visibility != Visibility.Collapsed && GetFill(x) != StackPanelFill.Ignored);
var marginMultiplier = Math.Max(visibleChildrenCount - 1, 0);
var totalMarginToAdd = marginBetweenChildren * marginMultiplier;
return totalMarginToAdd;
}
public static readonly DependencyProperty OrientationProperty = DependencyProperty.Register(
"Orientation", typeof(Orientation), typeof(StackPanel),
new FrameworkPropertyMetadata(
Orientation.Vertical,
FrameworkPropertyMetadataOptions.AffectsArrange |
FrameworkPropertyMetadataOptions.AffectsMeasure));
public Orientation Orientation
{
get { return (Orientation)GetValue(OrientationProperty); }
set { SetValue(OrientationProperty, value); }
}
public static readonly DependencyProperty MarginBetweenChildrenProperty = DependencyProperty.Register(
"MarginBetweenChildren", typeof(double), typeof(StackPanel),
new FrameworkPropertyMetadata(
0.0,
FrameworkPropertyMetadataOptions.AffectsArrange |
FrameworkPropertyMetadataOptions.AffectsMeasure));
public double MarginBetweenChildren
{
get { return (double)GetValue(MarginBetweenChildrenProperty); }
set { SetValue(MarginBetweenChildrenProperty, value); }
}
public static readonly DependencyProperty FillProperty = DependencyProperty.RegisterAttached(
"Fill", typeof(StackPanelFill), typeof(StackPanel),
new FrameworkPropertyMetadata(
StackPanelFill.Auto,
FrameworkPropertyMetadataOptions.AffectsArrange |
FrameworkPropertyMetadataOptions.AffectsMeasure |
FrameworkPropertyMetadataOptions.AffectsParentArrange |
FrameworkPropertyMetadataOptions.AffectsParentMeasure));
public static void SetFill(DependencyObject element, StackPanelFill value)
{
element.SetValue(FillProperty, value);
}
public static StackPanelFill GetFill(DependencyObject element)
{
return (StackPanelFill)element.GetValue(FillProperty);
}
}
public enum StackPanelFill
{
Auto, Fill, Ignored
}
}