调整控件的宽度和高度以包装其内容

Question

How can I do to set the Width/Height of a Windows Phone control to be just the minimum necessary to wrap its content? In Android I would have done it the following way:

android:layout_width="wrap_content"

Thank you

Answer 1

You could use a ViewBox. This will scale the content inside to fit the space available.

<ViewBox>
    <Grid Width="Auto" Height="Auto"> 
    <!-- Your content goes here -->
    <Grid/>
<ViewBox/>

Answer 2

Controls have some properties wich you can make use of: MinWidth , MaxWidth , Width , some controls with text content have also TextWrapping and TextTrimming . By using those you will probably achieve what you want - some examples:

<StackPanel Margin="20">
    <StackPanel.Resources>
        <Style TargetType="Border">
            <Setter Property="BorderBrush" Value="Red"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="Margin" Value="0,0,0,10"/>
        </Style>
        <Style TargetType="TextBlock">
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="FontSize" Value="20"/>
            <Setter Property="Text" Value="Simple long description"/>
        </Style>
    </StackPanel.Resources>
    <Border> <!-- Implicit width -->
        <TextBlock Width="150"/>
    </Border>
    <Border> <!-- Implicit width with text wrapping -->
        <TextBlock Width="150" TextWrapping="Wrap"/>
    </Border>
    <Border> <!-- Auto width -->
        <TextBlock Width="Auto"/>
    </Border>
    <Border> <!-- Auto width but with limit -->
        <TextBlock Width="Auto" MaxWidth="180"/>
    </Border>
    <Border> <!-- Short text with min width -->
        <TextBlock Width="Auto" MinWidth="100" Text="Min"/>
    </Border>
    <Button> <!-- Button with wrapped text -->
        <TextBlock Width="120" TextWrapping="Wrap"/>
    </Button>
</StackPanel>

The result:

In some cases you will probably also what to use HorizontalAlignment = Stretch which will set control's width to available space.

Answer 3

You can use width="Auto" and height="Auto" attribute of the respective controls.

For example

<StackPanel>
    <TextBlock x:Name="textBlock" Width="Auto" Text="Sample Text" />
</StackPanel>