Windows Phone7 Silverlight中的界面设计

时间：2011-11-17 07:36:33

标签： c# silverlight windows-phone-7 silverlight-4.0

在我的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 textBlocks时它们是重叠的。如果我可以给相对于其他textBlock的边距我认为它会没问题。通过dafault保证金来自页面顶部。

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

3 个答案:

答案 0 :(得分：3)

我认为你所需要的只是Grid。只需要Heights自动调整大小。此外，您可能希望始终将样式应用于TextBlock以获得一致的边距。

enter image description here 

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

答案 1 :(得分：0)

看看此论坛帖子是否可以帮助您。如果其他一切都失败，基本上尝试设置stackpanel的MaxWidth属性;）

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

希望这有帮助。

答案 2 :(得分：0)

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

<StackPanel Orientation="Vertical">

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

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

</StackPanel>

修改

我做了一个看起来不错的示例项目，但我不确定我是否真的遇到了问题。第一个标题没有包装，因为它有一个固定的高度，但第二个标题没有设置高度。所有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>
相关问题
最新问题