Horizontally stretch items with horizontal orientation - xaml

Question

I'm looking to show a dynamic number of buttons in a horizontal way, so that they always fill up the space horizontally no matter how many items.
For example, when there are two button
__________________________________
| other controls |
| |
|________________________________|
| Button 1 | Button 2 | Button 3 |
----------------------------------
and button 2 gets hidden(collapsed), this should become
__________________________________
| other controls |
| |
|________________________________|
| Button 1 | Button 3 |
----------------------------------
Is this possible with Winrt/WP 8.1 xaml?

Answer 1

I would work with a Grid and set the column width to zero in order to hide it. Since all other columns have star values they should stretch accordingly. If everything fails you can recalculate the star values manually since you know the number of visible buttons.
Sample:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Content="Foo" Margin="0,0,0,0" HorizontalAlignment="Stretch" />
<Button Grid.Column="1" Content="Foo" Margin="0,0,0,0" HorizontalAlignment="Stretch" />
<Button Grid.Column="2" Content="Foo" Margin="0,0,0,0" HorizontalAlignment="Stretch" />
</Grid>
Set the ColumnDefinition of one column to zero and the button is hidden and the other columns adjust accordingly.

Answer 2

You can always provide your own custom layout logic by deriving from Panel. Here's what I came up with:
StretchPanel.cs
class StretchPanel : Panel
{
#region Properties
public bool EqualWidths
{
get { return (bool)GetValue(EqualWidthsProperty); }
set { SetValue(EqualWidthsProperty, value); }
}
public static readonly DependencyProperty EqualWidthsProperty =
DependencyProperty.Register("EqualWidths", typeof(bool), typeof(StretchPanel), new PropertyMetadata(false, onEqualWidthsChanged));
#endregion
static void onEqualWidthsChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var panel = (StretchPanel)d;
panel.InvalidateMeasure();
panel.InvalidateArrange();
}
protected override Size MeasureOverride(Size availableSize)
{
var renderedChildren = Children.Where(c => c.Visibility == Visibility.Visible);
var count = renderedChildren.Count();
Size childAvailableSize = availableSize;
if (EqualWidths)
childAvailableSize = new Size(availableSize.Width / count, availableSize.Height);
foreach (var child in renderedChildren)
child.Measure(childAvailableSize);
var totalHeight = renderedChildren.Max(c => c.DesiredSize.Height);
return new Size(availableSize.Width, totalHeight);
}
protected override Size ArrangeOverride(Size finalSize)
{
var renderedChildren = Children.Where(c => c.Visibility == Visibility.Visible);
var count = renderedChildren.Count();
var equalWidth = finalSize.Width / count;
var totalWidth = renderedChildren.Sum(c => c.DesiredSize.Width);
var totalHeight = renderedChildren.Max(c => c.DesiredSize.Height);
var x = 0.0;
foreach (var child in renderedChildren)
{
var r = new Rect();
r.X = x;
r.Y = 0;
r.Width = EqualWidths ? equalWidth : child.DesiredSize.Width / totalWidth * finalSize.Width;
r.Height = child.DesiredSize.Height;
child.Arrange(r);
x += r.Width;
}
return new Size(finalSize.Width, totalHeight);
}
}
You can use it like so:
<Page
x:Class="App19.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App19"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.Resources>
<Style TargetType="Button">
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="MinWidth" Value="0" />
</Style>
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="16" />
<Setter Property="Foreground" Value="Yellow" />
<Setter Property="Margin" Value="0,10,0,0" />
</Style>
</Page.Resources>
<StackPanel>
<TextBlock>Different widths</TextBlock>
<local:StretchPanel EqualWidths="False">
<Button>a</Button>
<Button>big</Button>
<Button>purple</Button>
<Button>dishwasher</Button>
</local:StretchPanel>
<TextBlock>Equal widths</TextBlock>
<local:StretchPanel EqualWidths="True">
<Button>a</Button>
<Button>big</Button>
<Button>purple</Button>
<Button>dishwasher</Button>
</local:StretchPanel>
<TextBlock>Different widths, one child hidden</TextBlock>
<local:StretchPanel EqualWidths="False">
<Button>a</Button>
<Button>big</Button>
<Button Visibility="Collapsed">purple</Button>
<Button>dishwasher</Button>
</local:StretchPanel>
<TextBlock>Equal widths, one child hidden</TextBlock>
<local:StretchPanel EqualWidths="True">
<Button>a</Button>
<Button>big</Button>
<Button Visibility="Collapsed">purple</Button>
<Button>dishwasher</Button>
</local:StretchPanel>
</StackPanel>
</Page>
And a screenshot: