Question

The following template shows dynamic information in a colored box.

However, the box is always the full width of the DockPanel/screen.

I could put a fixed Width in the Border element, but then a very long customer name might get cut off.

How can I tell the Border that it should expand and contract its width based on width of its content, something like a <table> element does in HTML?

HTML:

<table>
    <tr>
        <td style="background-color: #eee; padding: 5px">
            the table will be as wide as this text
        </td>
    </tr>
</table>

XAML:

<Window.Resources>
    <DataTemplate x:Key="CustomerTemplateShow">
        <Border CornerRadius="5" Background="#eee" Padding="5">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding FirstName}"/>
                <TextBlock Text=" "/>
                <TextBlock Text="{Binding LastName}"/>
            </StackPanel>
        </Border>
    </DataTemplate>
</Window.Resources>

<DockPanel LastChildFill="False" Margin="10">
    <ContentControl 
        DockPanel.Dock="Top"
        Content="{Binding SelectedCustomer}" 
        ContentTemplate="{StaticResource CustomerTemplateShow}"/>
</DockPanel>

Answer 1

The simplest way is to set the Border’s HorizontalAlignment=”Center” (or Left, or Right, whichever you prefer for your layout).