如何在Windows Phone中创建此UI以在连续文本环绕中显示图像和文本？

Question

如何在Windows手机中创建这种UI，可以使用WPF中的flowdocument来完成？ Windows Phone中是否有任何flowdocument控件可用，还有其他方法吗？

Answer 1

我为这个问题创建了一个解决方案。通过测量文本，您可以手动将文本拆分为两部分＆gt;

<Grid Width="400">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Image x:Name="WrapContent" Width="200" Height="192" />
    <TextBlock x:Name="RightTextBlock" Width="200" FontSize="24" FontFamily="Segoe WP" TextWrapping="Wrap" Grid.Column="1" />
    <TextBlock x:Name="BottomTextBlock" Width="400" FontSize="24" FontFamily="Segoe WP" TextWrapping="Wrap" Grid.Row="1" Grid.ColumnSpan="2" />
</Grid>

public MainPage()
{
    InitializeComponent();

    string text = "Lorem ipsum dolor sit amet consectetur adipiscing elit. Lorem ipsum dolor sit amet consectetur adipiscing elit. Lorem ipsum dolor sit amet consectetur adipiscing elit. Lorem ipsum dolor sit amet consectetur adipiscing elit. Lorem ipsum dolor sit amet consectetur adipiscing elit. Lorem ipsum dolor sit amet consectetur adipiscing elit.";
    string[] words = text.Split(' ');
    RightTextBlock.Text = words[0];

    for (int i = 0; i < words.Length; i++)
    {
        string word = words[i];
        string previousText = RightTextBlock.Text;
        RightTextBlock.Text += " " + word;
        if (RightTextBlock.ActualHeight > WrapContent.ActualHeight)
        {
            RightTextBlock.Text = previousText;
            BottomTextBlock.Text += String.Join(" ", words.Skip(i));
            break;
        }
    }
}