CODEWITHSUNDEEP
xamlwindows-phone-8windows-phone
Subby
Subby

Reputation: 5480

WP8 StackPanel Controls

I have a handful of TextBlock's which I wish to group together, so that if one of them happens to contain a lot of text, the controls beneath it move down accordingly.

At the moment I have wrapped the TextBlock's in a <StackPanel>, however, the controls are now widely seperated, vertically. How can I shorten the distance between them?

This is my code:

<StackPanel>
    <TextBlock TextAlignment="Left" x:Name="lblCategoryTitle" TextWrapping="Wrap" Text="Category"
                VerticalAlignment="Top" Height="29" Width="456" Margin="0,59,0,0" FontWeight="Bold">
        <TextBlock.Foreground>
            <SolidColorBrush Color="{StaticResource PhoneAccentColor}" />
        </TextBlock.Foreground>
    </TextBlock>
    <TextBlock Height="auto" TextAlignment="Left" x:Name="lblCategory" TextWrapping="Wrap"
                Text="Category" Margin="0,88,10,428" />
    <TextBlock TextAlignment="Left" x:Name="lblContactDetails" TextWrapping="Wrap"
                Text="Contact Details" Margin="0,179,289,396" FontWeight="Bold">
        <TextBlock.Foreground>
            <SolidColorBrush Color="{StaticResource PhoneAccentColor}" />
        </TextBlock.Foreground>
    </TextBlock>
    <TextBlock Height="auto" TextAlignment="Left" x:Name="lblName" TextWrapping="Wrap" Text="Name"
                Margin="0,211,10,364" />
    <TextBlock Height="auto" TextAlignment="Left" x:Name="lblAddress" TextWrapping="Wrap"
                Text="Address" Margin="0,243,10,332" />
    <TextBlock Height="auto" TextAlignment="Left" x:Name="lblEmail" TextWrapping="Wrap" Text="Email"
                Margin="0,275,10,300" />
    <TextBlock Height="auto" TextAlignment="Left" x:Name="lblTelephone" TextWrapping="Wrap"
                Text="Telephone" Margin="0,307,10,268" />
</StackPanel>

I guess I should also ask if StackPanel is the right control for my requirement. What do you folks think?

Upvotes: 0

Views: 292

Answers (2)

Kevin Gosse
Kevin Gosse

Reputation: 39007

If you don't want your control to be widely separated, just reduce the margins. It looks like you forgot to adjust the margins after changing the type of panel.

For instance, for your last TextBlock:

<TextBlock Height="auto" TextAlignment="Left" x:Name="lblTelephone" TextWrapping="Wrap"
            Text="Telephone" Margin="0,307,10,268" />

The four numbers of the margin indicate respectively the left margin, top, right, bottom. So just reduce the second number and it should be fine.

Upvotes: 1

Rowland Shaw
Rowland Shaw

Reputation: 38130

You've got some pretty big margins there -- if you reduce the sizes of the margins, the text blocks will get a lot closer. You don't need to offset everything to the top (in fact, you shouldn't) as the stackpanel will treat the offset from the previous item in the <StackPanel>

Upvotes: 1

Related Questions