Buttons with TextTrimming in limited space of Grid or StackPanel

Question

I am trying to build a row of buttons that will be left aligned in normal state, and shrink uniformly when the space provided by the container is no longer sufficient for their normal size.

If there is enough space, the StackPanel behaves the right way: enter image description here

If there is not enough space, the Grid with star-sized columns provides what I want: enter image description here

How to accomplish both states with one Layout Container?

My xaml:

<Window x:Class="WpfApplication1.MainWindow"
                    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    Title="MainWindow" Height="350" Width="500">

    <Window.Resources>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Margin" Value="5"/>
            <Setter Property="Padding" Value="3"/>
            <Setter Property="VerticalAlignment" Value="Top"/>
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <TextBlock TextTrimming="CharacterEllipsis" Text="{TemplateBinding Content}"/>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button Grid.Column="0" Content="Save As" />
            <Button Grid.Column="1" Content="Copy" />
            <Button Grid.Column="2" Content="Exit Application" />
        </Grid>

        <StackPanel Grid.Row="1" Orientation="Horizontal">
            <Button Content="Save As" />
            <Button Content="Copy" />
            <Button Content="Exit Application" />
        </StackPanel>

    </Grid>
</Window>

EDIT: The suggestion of Novitchi (HorizontalAlignment left for the grid) almost works:

enter image description here

Novitchi S Novitchi S · Accepted Answer · 2014-08-19T13:24:12

You can try horizontally aligning the grid to left:

        <Grid HorizontalAlignment="Left">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button Grid.Column="0" Content="Save As" />
            <Button Grid.Column="1" Content="Copy" />
            <Button Grid.Column="2" Content="Exit Application" />
        </Grid>

Buttons with TextTrimming in limited space of Grid or StackPanel

1 Answers