Windows phone7 Дизайн интерфейса в Silverlight

Question

В моем приложении Windows Phone7 Silverlight у меня есть несколько пар текстовых блоков для отображения некоторых динамических данных во время выполнения.

Например

Name:     TextBlock[Dynamically_loading_Name]   <-----------------(A)
Address:  TextBlock[Dynamically_loading_Asddress]  <--------------(B)
Phone:    TextBlock[Dynamically_loading_Phone]  <-----------------(C)

Так как я не знаю, как долго динамические данные, для TextBlocks (A, B, C), я дал свойства Height = Auto и TextWrapping = Wrap.

Проблема в том, что когда данные загружаются в текстовые блоки A, B, C, они перекрываются. Если я могу дать поле относительно другого текстового блока, думаю, все будет в порядке. По значению по умолчанию на счет от верхней части страницы.

Я добавил StackPanels в каждую строку, а свойство Gave stackPanel height = Auto Также. Тем не менее он перекрывается, когда верхняя запись слишком длинная.

Если кто-то может помочь мне преодолеть эту проблему, это большая помощь. Спасибо

Правки .............................................. ..................

 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <StackPanel Height="Auto" HorizontalAlignment="Left" Margin="9,20,0,0" Name="stackPanel1" VerticalAlignment="Top" Width="441">
            <TextBlock Height="30" Name="txt_Title" Text="Title:" Width="90" VerticalAlignment="Top" HorizontalAlignment="Left" />
            <TextBlock Height="Auto" Name="item_Title" Text="TextBlock" Width="330" TextWrapping="Wrap" />
        </StackPanel>

        <StackPanel Height="Auto" HorizontalAlignment="Left" Margin="9,83,0,0" Name="stackPanel2" VerticalAlignment="Top" Width="441">
            <TextBlock Height="30" Name="txt_Link" Text="Link:" HorizontalAlignment="Left" VerticalAlignment="Top" />
            <TextBlock Height="Auto" Name="item_Link" Text="TextBlock" Width="306" TextWrapping="Wrap" Padding="0" />
        </StackPanel>

        <StackPanel Height="Auto" HorizontalAlignment="Right" Margin="0,146,8,0" Name="stackPanel3" VerticalAlignment="Top" Width="439">
            <TextBlock Height="30" Name="txt_Description" Text="Description:" HorizontalAlignment="Left" VerticalAlignment="Top" />
            <TextBlock Height="Auto" Name="item_Description" Text="TextBlock" TextWrapping="Wrap" Width="305" />
        </StackPanel>

        <StackPanel Height="Auto" HorizontalAlignment="Left" Margin="9,209,0,0" Name="stackPanel4" VerticalAlignment="Top" Width="439">
            <TextBlock Height="30" Name="txt_Comment" Text="Comment:" HorizontalAlignment="Left" VerticalAlignment="Top" />
            <TextBlock Height="Auto" Name="item_Comment" Text="TextBlock" TextWrapping="Wrap" Width="305" />
        </StackPanel>

        <StackPanel Height="Auto" HorizontalAlignment="Left" Margin="6,272,0,0" Name="stackPanel5" VerticalAlignment="Top" Width="444">
            <TextBlock Height="30" Name="txt_PubDate" Text="Published_Date:" HorizontalAlignment="Left" VerticalAlignment="Top" />
            <TextBlock Height="Auto" Name="item_PubDate" Text="TextBlock" TextWrapping="Wrap" Width="307" />
        </StackPanel>

        <StackPanel HorizontalAlignment="Left" Margin="6,335,0,239" Name="stackPanel6" Width="444">
            <TextBlock Height="30" Name="txt_Creator" Text="Creator: " HorizontalAlignment="Left" VerticalAlignment="Top" />
            <TextBlock Height="Auto" Name="item_creator" Text="TextBlock" TextWrapping="Wrap" Width="305" />
        </StackPanel>

    </Grid>

Answer 1

Я думаю, все, что вам нужно, это Grid. Просто нужно сделать Heights авто размера. Кроме того, вы можете всегда хотеть применить стиль к TextBlock, чтобы иметь постоянные поля.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <TextBlock x:Name="txt_Title" Text="Title:" Style="{StaticResource PhoneTextNormalStyle}" /> 
    <TextBlock x:Name="item_Title" Text="This is a very long title and I have no idea how long it will be" TextWrapping="Wrap" Grid.Column="1" Style="{StaticResource PhoneTextNormalStyle}" />
    <TextBlock x:Name="txt_Link" Text="Link:" d:LayoutOverrides="Width" Grid.Row="1" Style="{StaticResource PhoneTextNormalStyle}" />
    <TextBlock x:Name="item_Link" Text="This could be long too..." TextWrapping="Wrap" Padding="0" Grid.Column="1" Grid.Row="1" Style="{StaticResource PhoneTextNormalStyle}" />
    <TextBlock x:Name="txt_Description" Text="Description:" Grid.Row="2" Style="{StaticResource PhoneTextNormalStyle}" />
    <TextBlock x:Name="item_Description" Text="This will be very very very very very very very very very very very very very very very very very very long..." TextWrapping="Wrap" Grid.Column="1" Grid.Row="2" Style="{StaticResource PhoneTextNormalStyle}" />
    <TextBlock x:Name="txt_Comment" Text="Comment:" Grid.Row="3" Style="{StaticResource PhoneTextNormalStyle}" />
    <TextBlock x:Name="item_Comment" Text="TextBlock" TextWrapping="Wrap" Grid.Column="1" Grid.Row="3" Style="{StaticResource PhoneTextNormalStyle}" />
    <TextBlock x:Name="txt_PubDate" Text="Published_Date:" Grid.Row="4" Style="{StaticResource PhoneTextNormalStyle}" />
    <TextBlock x:Name="item_PubDate" Text="TextBlock" TextWrapping="Wrap" Grid.Column="1" Grid.Row="4" Style="{StaticResource PhoneTextNormalStyle}" />
    <TextBlock x:Name="txt_Creator" Text="Creator: " Grid.Row="5" Style="{StaticResource PhoneTextNormalStyle}" />
    <TextBlock x:Name="item_creator" Text="TextBlock" TextWrapping="Wrap" Grid.Column="1" Grid.Row="5" Style="{StaticResource PhoneTextNormalStyle}" /> 
</Grid> 

Answer 2

Я бы не использовал одну ячейку сетки и несколько полей для всех предметов. Если вы используете StackPanel вместо Grid, порядок должен быть в порядке.

<StackPanel Orientation="Vertical">

  <StackPanel Orientation="Horizontal">
  </StackPanel>

  <StackPanel Orientation="Horizontal">
  </StackPanel>

</StackPanel>

Edit:

Я сделал пример проекта, который выглядит хорошо для меня, но я не уверен, действительно ли у меня возникла ваша проблема. Первый заголовок не переносится, так как имеет фиксированную высоту, а второй - поскольку высота не установлена. Все панели Stackpanels корректируют свои размеры так, как должны.

<StackPanel>
    <StackPanel Orientation="Horizontal">
        <TextBlock Height="30" Width="90" TextWrapping="Wrap" Text="Title does not wrap" VerticalAlignment="Top" HorizontalAlignment="Left" />
        <TextBlock Width="330" TextWrapping="Wrap" Text="TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText" />
    </StackPanel>
    <StackPanel Orientation="Horizontal">
        <TextBlock Width="90" TextWrapping="Wrap" Text="Title wraps" VerticalAlignment="Top" HorizontalAlignment="Left" />
        <TextBlock Width="330" TextWrapping="Wrap" Text="TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText" />
    </StackPanel>
</StackPanel>

Answer 3

Посмотрите, может ли это сообщение форума помочь вам.В основном попробуйте установить свойство MaxWidth панели стека, если все остальное не сработает;)

http://forums.silverlight.net/t/58227.aspx/1?Why+TextBlock+doesn+t+wrap+even+I+set+TextWrapping+to+Wrap+

Надеюсь, это поможет.