2013-07-13 135 views
1

我创建了显示新闻的控件。每个新包含文本和图像。 Here我发现例如对于RichTextBox的:Windows Phone - RichTextBox文字换行

<RichTextBox VerticalAlignment="Top"> 
    <Paragraph 
     TextAlignment="Left"> 
     <InlineUIContainer> 
      <InlineUIContainer.Child> 
       <Rectangle 
        Width="50" 
        Height="50" 
        Fill="Red" /> 
      </InlineUIContainer.Child> 
     </InlineUIContainer> 
     <InlineUIContainer> 
      <Border> 
       <TextBlock 
        Padding="0" 
        Width="370" 
        Margin="0,0,0,-5" 
        TextWrapping="Wrap" 
        Text="First part of text that fits to the right of the image before the other part wraps to"> 
       </TextBlock> 
      </Border> 
     </InlineUIContainer> 
     <Run 
      Text="the next line. This part of the text is already below the image." /> 
    </Paragraph> 
</RichTextBox> 

但有麻烦,新的包含一个文本块(<p>...</p>),我不能动态地划分文本从实例2周的TextBlocks。我如何解决我的问题?谢谢。 UPD:这里是我的控制标记:

<UserControl> 
    <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}" Margin="0,0,0,-100">  
     <TextBlock x:Name="tblNewName" HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Width="460" Height="50" TextAlignment="Center" FontFamily="Mangal"/> 
     <Grid Height="105" Width="441"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="97*"/> 
       <ColumnDefinition Width="344*"/> 
      </Grid.ColumnDefinitions> 
      <Image x:Name="imgThumbnail" Grid.ColumnSpan="2" HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100"/> 
      <TextBlock Grid.Column="1" x:Name="tblNewTeaser" HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Width="460" Height="50" TextAlignment="Center" FontFamily="Mangal"/> 
     </Grid> 
    </Grid> 
</UserControl> 

我需要周围的图像文本块文本换行。

回答

1

你想显示什么数据? 这是HTML吗?给我一个新闻数据的例子。

更新: 你需要的是:

public class NewsItem 
    { 
     public string ImageUri { get; set; } 
     public IEnumerable<string> Paragraphs { get; set; }   
    } 

<DataTemplate x:Key="newsTemplate"> 
      <Grid Height="105" Width="441"> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="97*"/> 
        <ColumnDefinition Width="344*"/> 
       </Grid.ColumnDefinitions> 
       <Image Grid.ColumnSpan="2" HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100"/> 
       <ListBox Grid.Column="1" ItemsSource="{Binding Paragraphs}"></ListBox> 
      </Grid> 
     </DataTemplate> 

<Grid x:Name="colorPlace" Grid.Row="1" Margin="12,0,12,0"/>   
<ListBox Grid.Row="1" Name="newList" ItemTemplate="{StaticResource newsTemplate}"> 

</ListBox> 
</Grid> 

最后:

var data = new List<NewsItem> 
         { 
          new NewsItem 
          { 
           ImageUri = String.Empty, 
           Paragraphs = new[] 
              { 
               "blablabla", 
               "blablabla", 
               "blablabla" 
              } 
          }, 
          new NewsItem 
          { 
           ImageUri = String.Empty, 
           Paragraphs = new[] 
              { 
               "blablabla", 
               "blablabla", 
               "blablabla" 
              } 
          } 
         }; 
+0

感谢您的答复。我更新了我的问题并添加了我的控制代码。我已经为它编写了DependencyProperty和所有的逻辑,但是我不知道如何在图像周围创建textwrapping。 –

相关问题