准确地说,本文是与各位分享一下小技巧。也不知道各位喜不喜欢。
嗯,废话就不说了,先看看我要实现什么样的运行结果。
是的,很像报纸的排版效果,那么,怎么做到的呢?
好了,大概原理说了,下面就是动手实现了。
1、启动Visual Studio for Win 8 ,新建一个项目。
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、对于后台的代码,先贴出完整的吧。
嗯,废话就不说了,先看看我要实现什么样的运行结果。
是的,很像报纸的排版效果,那么,怎么做到的呢?
这就要提到一个类——RichTextBlockOverflow。他的用途就是,当RichTextBlock中的文本溢出后(
就是当前RichTextBlock显示不完比较长的文本),可以在RichTextBlockOverflow上接着显示。
RichTextBlock的OverflowContentTarget属性设置为要接着显示文本的RichTextBlockOverflow,如果第
一个RichTextBlockOverflow仍然不够用,则可以添加更多的RichTextBlockOverflow,只要把前一个的
RichTextBlockOverflow的OverflowContentTarget属性设置为新的RichTextBlockOverflow,以此类推。
好了,大概原理说了,下面就是动手实现了。
1、启动Visual Studio for Win 8 ,新建一个项目。
2、MainPage.xaml比较简单,按钮是为了选取一个较长的文本文件,文本框用于输入字体大小。
用于排列文本的是一个StackPanel。
<Pagex: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、对于后台的代码,先贴出完整的吧。