[源码下载]

背水一战 Windows 10 (27) - 控件(文本类): TextBlock

作者:webabcd

介绍
背水一战 Windows 10 之 控件(文本类)

  • TextBlock

示例
1、TextBlock 的示例 1
Controls/TextControl/TextBlockDemo1.xaml

<Page
    x:Class="Windows10.Controls.TextControl.TextBlockDemo1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.TextControl"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="10 0 10 10">

            <!--
                TextBlock 的常用属性
                    Text - 显示的文本,如果需要显示引号等特殊字符需要使用相应的 HTML 编码
                    Foreground - 文本颜色
                    FontFamily - 首选字体,多个用“,”分隔,找不到第 1 个就用第 2 个,找不到第 2 个就用第 3 个,以此类推
                    FontSize - 字号大小(单位:像素)
                    FontWeight - 字体粗细,默认值是 Normal
                    FontStyle - 字体样式,默认值是 Normal
                        Italic - 使用字体自带的斜体
                        Oblique - 通过程序让正常字体倾斜(对于自身不带斜体的字体可以使用此值让字体倾斜)
                    FontStretch - 字体的拉伸值,默认值是 Normal(大部分字体都不支持这个属性)
                    Padding - Padding
                    IsTextScaleFactorEnabled - 是否启用文本自动放大功能(默认值是 true)
                        在“设置”->“轻松使用”中可以调整文本缩放大小,IsTextScaleFactorEnabled 就是用于决定 TextBlock 显示的文本是否跟着这个设置走
            -->
            <TextBlock Text="i am a &quot;TextBlock&quot;" Margin="5"
                       Foreground="Blue"
                       FontFamily="微软雅黑"
                       FontSize="24"
                       FontWeight="Bold"
                       FontStyle="Italic"
                       FontStretch="Normal"
                       Padding="5" />

            <!--
                 TextAlignment - 文本的水平对齐方式
                    Center, Left(默认值), Right, Justify(两端对齐)
            -->
            <TextBlock Text="i am a &quot;TextBlock&quot;" Margin="5" TextAlignment="Justify" />

            <!--
                TextWrapping - 换行方式
                    NoWrap - 不换行
                    Wrap - 换行,必要时可截断单词
                    WrapWholeWords - 换行,但是绝不截断单词,即使单词可能会显示不全
            -->
            <TextBlock Width="100" HorizontalAlignment="Left" Text="abcdefghijklmnopq www" Margin="5" TextWrapping="NoWrap" />
            <TextBlock Width="100" HorizontalAlignment="Left" Text="abcdefghijklmnopq www" Margin="5" TextWrapping="Wrap" />
            <TextBlock Width="100" HorizontalAlignment="Left" Text="abcdefghijklmnopq www" Margin="5" TextWrapping="WrapWholeWords" />

            <!--
                TextTrimming - 内容溢出时的修整方式
                    None - 不修整文本
                    Clip - 在像素级别修整文本
                    WordEllipsis - 在单词级别修整文本,同时用省略号代替剩余文本
                    CharacterEllipsis - 在字符级别修整文本,同时用省略号代替剩余文本
            -->
            <TextBlock Width="100" HorizontalAlignment="Left" Text="abcdefghi jklmnopqrstuvwxyz" Margin="5" TextTrimming="None"/>
            <TextBlock Width="100" HorizontalAlignment="Left" Text="abcdefghi jklmnopqrstuvwxyz" Margin="5" TextTrimming="Clip"/>
            <TextBlock Width="100" HorizontalAlignment="Left" Text="abcdefghi jklmnopqrstuvwxyz" Margin="5" TextTrimming="WordEllipsis"/>
            <TextBlock Width="100" HorizontalAlignment="Left" Text="abcdefghi jklmnopqrstuvwxyz" Margin="5" TextTrimming="CharacterEllipsis"/>

            <!--
                MaxLines - 用于指定文本最大的显示行数
            -->
            <TextBlock MaxLines="3" Margin="5">
                <TextBlock.Inlines>
                    <Run>111111</Run>
                    <LineBreak />
                    <Run>222222</Run>
                    <LineBreak />
                    <Run>333333</Run>
                    <LineBreak />
                    <Run>444444</Run>
                    <LineBreak />
                    <Run>555555</Run>
                </TextBlock.Inlines>
            </TextBlock>

            <!--
                CharacterSpacing - 用于设置字符间距
                    具体字符间隔像素计算公式如下:字体大小 * CharacterSpacing值 / 1000 = 字符间距像素值
                LineHeight - 行高
                LineStackingStrategy - 控制行高的策略
                    MaxHeight - 每行的行高以 LineHeight 值和每行的自然行高中的最大值为准。默认值
                    BlockLineHeight - 每行的行高以 LineHeight 值为准,以字符区域为参考
                    BaselineToBaseline - 每行的行高以 LineHeight 值为准,以基线为参考(什么是基线:英文字符的基线基本相当于单词本4条线中的第3条线)
                Inlines - 内联元素的集合。包括 span, bold, italic, underline 等,但是 InlineUIContainer 不可用,其需要在 RichTextBlock 中使用
            -->
            <TextBlock Margin="5" CharacterSpacing="100" LineStackingStrategy="MaxHeight" LineHeight="50">
                <TextBlock.Inlines>
                    <Run Foreground="Red">Run</Run>
                    <Span Foreground="Blue">Span</Span>
                    <LineBreak />
                    <Bold>Bold</Bold>
                    <Italic>Italic</Italic>
                    <Underline>Underline</Underline>
                </TextBlock.Inlines>
            </TextBlock>

            <!--
                TextLineBounds - 行框的绘制方式
                    Full - 正常,默认值
                    TrimToCapHeight - 行框顶部和大写字体的顶部一致
                    TrimToBaseline - 行框底部与文本基线一致(什么是基线:英文字符的基线基本相当于单词本4条线中的第3条线)
                    Tight -  行框顶部和大写字体的顶部一致,行框底部与文本基线一致
            -->
            <Grid Background="Red" Margin="5">
                <TextBlock Text="Aj" FontSize="24" TextLineBounds="Full" />
            </Grid>
            <Grid Background="Red" Margin="5">
                <TextBlock Text="Aj" FontSize="24" TextLineBounds="TrimToCapHeight" />
            </Grid>
            <Grid Background="Red" Margin="5">
                <TextBlock Text="Aj" FontSize="24" TextLineBounds="TrimToBaseline" />
            </Grid>
            <Grid Background="Red" Margin="5">
                <TextBlock Text="Aj" FontSize="24" TextLineBounds="Tight" />
            </Grid>

        </StackPanel>
    </Grid>
</Page>

Controls/TextControl/TextBlockDemo1.xaml.cs

/*
 * TextBlock - 文本显示框(继承自 FrameworkElement, 请参见 /Controls/BaseControl/FrameworkElementDemo/)
 */

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace Windows10.Controls.TextControl
{
    public sealed partial class TextBlockDemo1 : Page
    {
        public TextBlockDemo1()
        {
            this.InitializeComponent();
        }
    }
}

2、TextBlock 的示例 2
Controls/TextControl/TextBlockDemo2.xaml

<Page
    x:Class="Windows10.Controls.TextControl.TextBlockDemo2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.TextControl"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="10 0 10 10">

            <!--
                IsTextSelectionEnabled - 文本是否可以被选中
                SelectionHighlightColor - 选中文本的颜色
            -->
            <TextBlock Name="textBlock1" Margin="5" IsTextSelectionEnabled="True" SelectionHighlightColor="Red">
                <TextBlock.Inlines>
                    <Run>abcdefg</Run>
                    <LineBreak />
                    <Run>hijklmn</Run>
                    <LineBreak />
                    <Run>opqrst</Run>
                </TextBlock.Inlines>
            </TextBlock>
            <!--显示 textBlock1 中被用户选中的文本-->
            <TextBlock Name="lblMsg1" Margin="5" />

            <TextBlock Name="textBlock2" Margin="5" IsTextSelectionEnabled="True" SelectionHighlightColor="Red">
                <Run>abcdefghijklmn</Run>
                <LineBreak />
                <Run>opqrstuvwxyz</Run>
            </TextBlock>
            <TextBlock Name="lblMsg2" Margin="5" />

            <Grid Background="Red" Margin="5">
                <TextBlock Name="textBlock3" Text="abcdefghijklmnopqrstuvwxyz" FontSize="24" />
                <!--用于绘制基线-->
                <Line Name="line" Stroke="Blue" StrokeThickness="1" X1="0" X2="300" />
            </Grid>
            <TextBlock Name="lblMsg3" Margin="5" />

            <!--用于显示 Segoe UI Emoji 字符-->
            <TextBlock Name="textBlock4" Margin="5" FontSize="24" TextWrapping="Wrap" />

            <!--用于演示如何计算 TextBlock 的实际宽度和实际高度-->
            <Grid Name="grid" Margin="5">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition x:Name="gridColumn1" Width="Auto" />
                    <ColumnDefinition x:Name="gridColumn2" Width="*" />
                </Grid.ColumnDefinitions>
                <TextBlock Name="textBlock5" FontSize="24">
                    <Run>abc</Run>
                    <LineBreak />
                    <Run>xyz</Run>
                </TextBlock>
            </Grid>
            <TextBlock Name="lblMsg5" Margin="5" />

        </StackPanel>
    </Grid>
</Page>

Controls/TextControl/TextBlockDemo2.xaml.cs

/*
 * TextBlock - 文本显示框(继承自 FrameworkElement, 请参见 /Controls/BaseControl/FrameworkElementDemo/)
 *     SelectedText - 获取选中的文本内容
 *     SelectionChanged - 选中的文本内容发生变化后触发的事件
 *     ContentStart - 开头内容的 TextPointer 对象
 *     ContentEnd - 结尾内容的 TextPointer 对象
 *     Focus(FocusState value) - 获取焦点
 *     SelectAll() - 选中全部内容(先要获取焦点后,才能做这个操作)
 *     Select(TextPointer start, TextPointer end) - 选中指定范围的内容(先要获取焦点后,才能做这个操作)
 *     SelectionStart - 选中内容的起始位置(TextPointer 对象)
 *     SelectionEnd - 选中内容的结束位置(TextPointer 对象)
 *     BaselineOffset - 获取基线的位置(什么是基线:英文字符的基线基本相当于单词本4条线中的第3条线)
 *     IsColorFontEnabled - 是否以彩色方式显示 Segoe UI Emoji 之类的字符(默认值是 true)
 *
 *
 * TextPointer - 文本框中的指针对象
 *     Offset - 指针的位置
 *     LogicalDirection - 指针的逻辑方向
 *         Backward - 向后,即从右到左(比如,如果插入字符的话,就会在指针位置的左边插入)
 *         Forward - 向前,即从左到右(比如,如果插入字符的话,就会在指针位置的右边插入)
 *     Rect GetCharacterRect(LogicalDirection direction) - 返回当前指针的矩形框
 *     TextPointer GetPositionAtOffset(offset, LogicalDirection direction) - 将指针位置偏移指定的距离(正代表向右偏移,负代表向左偏移)
 */

using System;
using System.Text;
using Windows.Foundation;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Documents;

namespace Windows10.Controls.TextControl
{
    public sealed partial class TextBlockDemo2 : Page
    {
        public TextBlockDemo2()
        {
            this.InitializeComponent();

            this.Loaded += TextBlockDemo2_Loaded;
        }

        private void TextBlockDemo2_Loaded(object sender, RoutedEventArgs e)
        {
            textBlock1.SelectionChanged += (x, y) =>
            {
                // 显示用户选中的文本内容
                lblMsg1.Text = textBlock1.SelectedText;
            };

            textBlock1.ContextMenuOpening += (x, y) =>
            {
                // 触发条件:触摸屏长按或鼠标右键
            };

            // 获取焦点
            textBlock2.Focus(FocusState.Programmatic);
            TextPointer start = textBlock2.ContentStart;
            TextPointer end = textBlock2.ContentEnd;
            // textBlock2 的 Text 的内容一共有 26 个字符,但是这里的指针位置 offset 是从 0 到 34,一共 35 个指针位置
            // <LineBreak /> 占 4 个指针位置,开头占 2 个指针位置,结尾占 2 个指针位置。剩下的就比较好理解了,就是 26 个字符拥有 27 个指针位置
            lblMsg2.Text = $"ContentStart.Offset: {start.Offset}, ContentEnd.Offset: {end.Offset}";
            lblMsg2.Text += Environment.NewLine;

            // 从左到右偏移 3 个位置,即指针位置在第 1 个字符的右边
            start = start.GetPositionAtOffset(, LogicalDirection.Backward);
            // 从右到左偏移 3 个位置,即指针位置在最后一个字符的左边
            end = end.GetPositionAtOffset(-, LogicalDirection.Forward);
            textBlock2.Select(start, end); // SelectAll() - 选中全部
            lblMsg2.Text += $"SelectionStart.Offset: {textBlock2.SelectionStart.Offset}, SelectionEnd.Offset: {textBlock2.SelectionEnd.Offset}";

            // 获取基线的位置,并通过 Line 绘制基线
            lblMsg3.Text += $"BaselineOffset: {textBlock3.BaselineOffset}";
            line.Y1 = textBlock3.BaselineOffset;
            line.Y2 = textBlock3.BaselineOffset;

            // 显示 Segoe UI Emoji 字符
            StringBuilder strContect = new StringBuilder();
            for (int code = 0x1F600; code < 0x1F6C6; code++)
            {
                strContect.Append(char.ConvertFromUtf32(code));
            }
            // 是否以彩色方式显示 Segoe UI Emoji 之类的字符(默认值是 true)
            textBlock4.IsColorFontEnabled = true;
            textBlock4.Text = strContect.ToString();

            // 通过封一层 Grid 的方式计算 TextBlock 的实际宽度和实际高度
            lblMsg5.Text = $"textBlock5 的实际高度: {grid.ActualHeight}";
            lblMsg5.Text += Environment.NewLine;
            lblMsg5.Text += $"textBlock5 的实际宽度: {gridColumn1.ActualWidth}";
            lblMsg5.Text += Environment.NewLine;

            // 通过 TextPointer 的方式计算 TextBlock 的实际高度
            TextPointer last = textBlock5.ContentEnd;
            last = last.GetPositionAtOffset(-, LogicalDirection.Forward);
            Rect rectLast = last.GetCharacterRect(LogicalDirection.Forward);
            lblMsg5.Text += $"textBlock5 的实际高度: {rectLast.Bottom}";
            lblMsg5.Text += Environment.NewLine;

            // 通过 TextPointer 的方式计算 TextBlock 的实际宽度
            int count = textBlock5.ContentEnd.Offset - textBlock5.ContentStart.Offset;
            ;
            ; i < count; i++)
            {
                TextPointer current = textBlock5.ContentStart.GetPositionAtOffset(i, LogicalDirection.Backward);
                width = Math.Max(width, current.GetCharacterRect(LogicalDirection.Backward).Right);
            }
            lblMsg5.Text += $"textBlock5 的实际宽度: {width}";
        }
    }
}

3、使用自定义字体, 使用 Unicode 编码
Controls/TextControl/Tips.xaml

<Page
    x:Class="Windows10.Controls.TextControl.Tips"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.TextControl"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="10 0 10 10">

            <!--
                文本类控件使用自定义字体
                1、将字体文件复制到项目中
                2、通过 FontFamily 指定字体文件的路径,在路径后加“#”并在其后写上字体名称(通过“Windows 字体查看器”可以查看字体文件的字体名称)
            -->
            <TextBlock Text="逐浪大雪钢笔体" FontSize="36" Margin="5"
                       FontFamily="/Controls/TextControl/MyFont.otf#逐浪大雪钢笔体">

            </TextBlock>

            <!--
                文本类控件使用 Unicode 编码
                1、无法在 xaml 中使用 \u(在 code-behind 中可以)
                2、通过 &#0000; 的方式来显示 Unicode 字符(注:unicode 的 0 - 127 与 ascii 一样)
            -->
            <TextBlock Text=""123"
123" FontSize="36" Margin="5" />

        </StackPanel>
    </Grid>
</Page>

Controls/TextControl/Tips.xaml.cs

/*
 * 演示文本类控件如何使用自定义字体,以及使用 Unicode 编码
 */

using Windows.UI.Xaml.Controls;

namespace Windows10.Controls.TextControl
{
    public sealed partial class Tips : Page
    {
        public Tips()
        {
            this.InitializeComponent();
        }
    }
}

OK
[源码下载]

背水一战 Windows 10 (27) - 控件(文本类): TextBlock的更多相关文章

  1. 背水一战 Windows 10 (30) - 控件(文本类): AutoSuggestBox

    [源码下载] 背水一战 Windows 10 (30) - 控件(文本类): AutoSuggestBox 作者:webabcd 介绍背水一战 Windows 10 之 控件(文本类) AutoSug ...

  2. 背水一战 Windows 10 (29) - 控件(文本类): RichTextBlock, RichTextBlockOverflow, RichEditBox

    [源码下载] 背水一战 Windows 10 (29) - 控件(文本类): RichTextBlock, RichTextBlockOverflow, RichEditBox 作者:webabcd ...

  3. 背水一战 Windows 10 (28) - 控件(文本类): TextBox, PasswordBox

    [源码下载] 背水一战 Windows 10 (28) - 控件(文本类): TextBox, PasswordBox 作者:webabcd 介绍背水一战 Windows 10 之 控件(文本类) T ...

  4. 背水一战 Windows 10 (37) - 控件(弹出类): MessageDialog, ContentDialog

    [源码下载] 背水一战 Windows 10 (37) - 控件(弹出类): MessageDialog, ContentDialog 作者:webabcd 介绍背水一战 Windows 10 之 控 ...

  5. 背水一战 Windows 10 (34) - 控件(进度类): RangeBase, Slider, ProgressBar, ProgressRing

    [源码下载] 背水一战 Windows 10 (34) - 控件(进度类): RangeBase, Slider, ProgressBar, ProgressRing 作者:webabcd 介绍背水一 ...

  6. 背水一战 Windows 10 (33) - 控件(选择类): ListBox, RadioButton, CheckBox, ToggleSwitch

    [源码下载] 背水一战 Windows 10 (33) - 控件(选择类): ListBox, RadioButton, CheckBox, ToggleSwitch 作者:webabcd 介绍背水一 ...

  7. 背水一战 Windows 10 (32) - 控件(选择类): Selector, ComboBox

    [源码下载] 背水一战 Windows 10 (32) - 控件(选择类): Selector, ComboBox 作者:webabcd 介绍背水一战 Windows 10 之 控件(选择类) Sel ...

  8. 背水一战 Windows 10 (31) - 控件(按钮类): ButtonBase, Button, HyperlinkButton, RepeatButton, ToggleButton, AppBarButton, AppBarToggleButton

    [源码下载] 背水一战 Windows 10 (31) - 控件(按钮类): ButtonBase, Button, HyperlinkButton, RepeatButton, ToggleButt ...

  9. 背水一战 Windows 10 (76) - 控件(控件基类): Control - 基础知识, 焦点相关, 运行时获取 ControlTemplate 和 DataTemplate 中的元素

    [源码下载] 背水一战 Windows 10 (76) - 控件(控件基类): Control - 基础知识, 焦点相关, 运行时获取 ControlTemplate 和 DataTemplate 中 ...

随机推荐

  1. cell与cell之间的间距问题,以及section跟随屏幕滑动而滑动问题

    苹果在cell与cell之间默认没有间距,这样有时候不能满足我们界面要求,所以我们就需要将cell设置为分组模式(也就是每组一行或者多行,分为n组),然后我们就可以在代理中根据自己的需求设计cell之 ...

  2. [UOJ 25] [IOI 2014] Wall 【线段树】

    题目链接:UOJ - 25 题目分析 每个操作就是将被操作的数限制在一个区间,比如 Set_Max(5) 就是将被操作的数限定在了 [5, INF] 的区间里. 这些操作是可加的,但是必须按照顺序,不 ...

  3. 使用Runtime.getRuntime().exec()方法的几个陷阱 (转)

    Process 子类的一个实例,该实例可用来控制进程并获得相关信息.Process 类提供了执行从进程输入.执行输出到进程.等待进程完成.检查进程的退出状态以及销毁(杀掉)进程的方法. 创建进程的方法 ...

  4. c++各类变量汇总

    一.局部变量和全局变量: (1)局部变量:局部变量也叫自动变量,它声明在函数开始,生存于栈,它的生命随着函数的返回而结束. #include <stdio.h> int main(void ...

  5. 你应该要知道的vue.js

    前言 小组同事最近都在学习前端,目前我们小组前端技术栈主要是vue.在和同事交流过程成,发现他们对vue都不了解,所以整理了问的比较多的问题. 组件data为什么必须是函数? 因为组件可能被多处使用, ...

  6. G2 绘制混合图例 demo

    G2 绘制混合图例 demo import G2 from '@antv/g2'; import DataSet from '@antv/data-set'; // G2 对数据源格式的要求,仅仅是 ...

  7. LeetCode 349 Intersection of Two Arrays 解题报告

    题目要求 Given two arrays, write a function to compute their intersection. 题目分析及思路 给定两个数组,要求得到它们之中共同拥有的元 ...

  8. ansible with_subelements

    with_subelements 循环列表中的子元素 (意想不到的地方会用到) --- - hosts: web tasks: - authorized_key: "user={{ item ...

  9. DevExpress v17.2新版亮点—Windows 10篇

    用户界面套包DevExpress v17.2日前终于正式发布,本站将以连载的形式为大家介绍各版本新增内容.本文将介绍了Windows 10 Controls v17.2 的新功能,快来下载试用新版本! ...

  10. MSSQL-&gt;serverlink[Oracle]

    需求描述:     SQL Server数据库连接Oracle数据库   条件准备:     SQL Server数据库,SQL Server 2008R2     Oracle数据库,Oracle ...