老周的博客http://blog.csdn.net/tcjiaan,转载请注明原作者和出处。
准确地说,本文是与各位分享一下小技巧。也不知道各位喜不喜欢。
嗯,废话就不说了,先看看我要实现什么样的运行结果。
是的,很像报纸的排版效果,那么,怎么做到的呢?
这就要提到一个类——RichTextBlockOverflow。他的用途就是,当RichTextBlock中的文本溢出后(就是当前RichTextBlock显示不完比较长的文本),可以在RichTextBlockOverflow上接着显示。
RichTextBlock的OverflowContentTarget属性设置为要接着显示文本的RichTextBlockOverflow,如果第一个RichTextBlockOverflow仍然不够用,则可以添加更多的RichTextBlockOverflow,只要把前一个的RichTextBlockOverflow的OverflowContentTarget属性设置为新的RichTextBlockOverflow,以此类推。
要判断文本是否溢出,可以通过HasOverflowContent属性获得。
好了,大概原理说了,下面就是动手实现了。
1、启动Visual Studio for Win 8 ,新建一个项目。
2、MainPage.xaml比较简单,按钮是为了选取一个较长的文本文件,文本框用于输入字体大小。用于排列文本的是一个StackPanel。
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal" Margin="25">
<Button Content="打开文件" Click="onClick"/>
<TextBlock Text="字体大小" Margin="37,0,0,0" FontSize="24" VerticalAlignment="Center"/>
<TextBox Name="txtSize" VerticalAlignment="Center" Margin="8,0,0,0" Width="130" Text="16">
<TextBox.InputScope>
<InputScope>
<InputScope.Names>
<InputScopeName NameValue="Number"/>
</InputScope.Names>
</InputScope>
</TextBox.InputScope>
</TextBox>
</StackPanel>
<ScrollViewer Margin="15" Grid.Row="1" HorizontalScrollBarVisibility="Auto" HorizontalScrollMode="Auto">
<StackPanel Name="stPanel" Orientation="Horizontal" />
</ScrollViewer>
</Grid>
</Page>
3、对于后台的代码,先贴出完整的吧。
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using Windows.Storage;
using Windows.Storage.Streams;
using Windows.Storage.Pickers;
using Windows.UI.Xaml.Documents;
namespace App1
{
public sealed partial class MainPage : Page
{
const double CT_WIDTH = 400d; //文本块的宽度
const double CT_HEIGHT = 500d; //文本块的高度
const double CT_MARGIN = 25d; //文本块的边距
public MainPage()
{
this.InitializeComponent();
}
private async void onClick(object sender, RoutedEventArgs e)
{
// 从文本文件中读取内容
FileOpenPicker opPicker = new FileOpenPicker();
opPicker.FileTypeFilter.Add(".txt");
opPicker.CommitButtonText = "打开";
opPicker.SuggestedStartLocation = PickerLocationId.Desktop;
StorageFile file = await opPicker.PickSingleFileAsync();
if (file != null)
{
using (IRandomAccessStream stream = await file.OpenAsync(FileAccessMode.Read))
{
// 从流中读取文本,考虑utf-8读出来的是乱码,
// 改用Stream类来读取
// 使用gb2312编码格式
string msg = string.Empty;
using (Stream strm = stream.AsStream())
{
StreamReader render = new StreamReader(strm, System.Text.Encoding.GetEncoding("gb2312"));
msg = render.ReadToEnd();
}
// 去掉特殊的换行符
msg = msg.Replace(" ", "").Replace("\n", "").Replace("\r","\n").Replace("\t","");
stPanel.Children.Clear();
// 为了支持文本分块,使用RichTextBlock
RichTextBlock tbContent = new RichTextBlock();
tbContent.Width = CT_WIDTH;
tbContent.Height = CT_HEIGHT;
tbContent.TextWrapping = TextWrapping.Wrap;
tbContent.Margin = new Thickness(CT_MARGIN);
Paragraph ph = new Paragraph();
ph.TextIndent = 33;
Run txtRun = new Run();
txtRun.Text = msg;
ph.Inlines.Add(txtRun);
tbContent.Blocks.Add(ph);
tbContent.FontSize = Convert.ToDouble(txtSize.Text);
stPanel.Children.Add(tbContent);
// 更新一下状态,方便获取是否有溢出的文本
tbContent.UpdateLayout();
bool isflow = tbContent.HasOverflowContent;
// 因为除了第一个文本块是RichTextBlock,
// 后面的都是RichTextBlockOverflow一个一个接起来的
// 所以我们需要两个变量
RichTextBlockOverflow oldFlow = null, newFlow = null;
if (isflow)
{
oldFlow = new RichTextBlockOverflow();
oldFlow.Width = CT_WIDTH;
oldFlow.Height = CT_HEIGHT;
oldFlow.Margin = new Thickness(CT_MARGIN);
tbContent.OverflowContentTarget = oldFlow;
stPanel.Children.Add(oldFlow);
oldFlow.UpdateLayout();
// 继续判断是否还有溢出
isflow = oldFlow.HasOverflowContent;
}
while (isflow)
{
newFlow = new RichTextBlockOverflow();
newFlow.Height = CT_HEIGHT;
newFlow.Width = CT_WIDTH;
newFlow.Margin = new Thickness(CT_MARGIN);
oldFlow.OverflowContentTarget = newFlow;
stPanel.Children.Add(newFlow);
newFlow.UpdateLayout();
// 继续判断是否还有溢出的文本
isflow = newFlow.HasOverflowContent;
// 当枪一个变量填充了文本后,
// 把第一个变量的引用指向当前RichTextBlockOverflow
// 确保OverflowContentTarget属性可以前后相接
oldFlow = newFlow;
}
}
}
}
}
}
其实,重点就是循环加入文本块的地方,代码中我也做了注释。