2013-07-13 108 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。 –

相關問題