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 文本块时，它们是重叠的。如果我可以给相对于其他文本块的边距，我认为就可以了。默认边距从页面顶部开始计数。

我向每一行添加了 StackPanel，并给了 stackPanel height property=Auto Also。当上面的记录太长时它仍然会重叠。

如果有人可以帮助我克服这个问题，那就有很大帮助了。谢谢

编辑................................................. ......................

 <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

我认为您所需要的只是一个网格。只需要让 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 的 MaxWidth 属性;)

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

希望这有帮助。

Answer 3

我不会对所有项目使用一个网格单元和多个边距。如果您使用 StackPanel 而不是 Grid，则排列应该没问题。

<StackPanel Orientation="Vertical">

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

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

</StackPanel>

编辑：

我做了一个示例项目，看起来很适合我，但我不确定我是否真的遇到了你的问题。第一个标题不会换行，因为它具有固定的高度，但第二个标题会换行，因为高度未设置。所有堆栈面板都会根据需要调整其大小。

<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>