重新想象 Windows 8.1 Store Apps (77) - 控件增强: 文本类控件的增强, 部分控件增加了 Header 属性和 HeaderTemplate 属性, 部分控件增加了 PlaceholderText 属性

浏览数：28 / 时间：2015年06月11日

作者：webabcd

介绍
重新想象 Windows 8.1 Store Apps 之控件增强

文本类控件的增强
为一些控件增加了 Header 属性和 HeaderTemplate 属性
为一些控件增加了 PlaceholderText 属性

示例
1、演示文本类控件的新增功能
TextDemo.xaml

<Page
    x:Class="Windows81.Controls.TextDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows81.Controls"
    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="120 0 0 0">

            <!--文本显示类控件新增了 MaxLines 属性：用于指定文本最大的显示行数-->
            <TextBlock FontSize="14.667" MaxLines="3">
                <TextBlock.Inlines>
                    <Run>111111</Run>
                    <LineBreak />
                    <Run>222222</Run>
                    <LineBreak />
                    <Run>333333</Run>
                    <LineBreak />
                    <Run>444444</Run>
                    <LineBreak />
                    <Run>555555</Run>
                    <LineBreak />
                    <Run>666666</Run>
                </TextBlock.Inlines>
            </TextBlock>


            <!--文本输入类控件新增了 PreventKeyboardDisplayOnProgrammaticFocus 属性：当通过编程方式在文本框上设置焦点时，是否不显示屏幕触摸键盘-->
            <TextBox Margin="0 10 10 0" PreventKeyboardDisplayOnProgrammaticFocus="True" />
            
            
            <!--
                文本显示类控件和文本输入类控件：
                    IsTextSelectionEnabled - 用于指定文本是否可以选中
                    SelectionHighlightColor - 用于指定选中文本的颜色
            -->
            <TextBlock Text="webabcd" FontSize="14.667" Margin="0 10 0 0" IsTextSelectionEnabled="True">
                <TextBlock.SelectionHighlightColor>
                    <SolidColorBrush Color="Red" />
                </TextBlock.SelectionHighlightColor>
            </TextBlock>


            <!--文本输入类控件新增了 Paste 事件-->
            <TextBox Name="txtPaste" PlaceholderText="自定义粘贴文本数据" Paste="txtPaste_Paste" Margin="0 10 0 0" />

            
            <!--
                文本显示类控件
                    TextTrimming.None - 不修整文本
                    TextTrimming.Clip - 在像素级别修整文本（win8.1 新增）
                    TextTrimming.WordEllipsis - 在单词级别修整文本，同时用省略号代替剩余文本
                    TextTrimming.CharacterEllipsis - 在字符级别修整文本，同时用省略号代替剩余文本（win8.1 新增）
            -->
            <TextBlock FontSize="24" HorizontalAlignment="Left" Text="abcdefghijklmnopqrstuvwxyz" Width="200" Margin="0 10 0 0" TextTrimming="None"/>
            <TextBlock FontSize="24" HorizontalAlignment="Left" Text="abcdefghijklmnopqrstuvwxyz" Width="200" Margin="0 10 0 0" TextTrimming="Clip"/>
            <TextBlock FontSize="24" HorizontalAlignment="Left" Text="abcdef ghijklm nopqrstuvwxyz" Width="200" Margin="0 10 0 0" TextTrimming="WordEllipsis"/>
            <TextBlock FontSize="24" HorizontalAlignment="Left" Text="abcdef ghijklm nopqrstuvwxyz" Width="200" Margin="0 10 0 0" TextTrimming="CharacterEllipsis"/>


            <!--
                新增的 TextWrapping.WrapWholeWords 仅针对文本显示类控件：
                    TextWrapping.NoWrap - 不换行（文本显示类控件和文本输入类控件可用）
                    TextWrapping.Wrap - 换行，必要时可截断单词（文本显示类控件和文本输入类控件）
                    TextWrapping.WrapWholeWords - 换行，但是绝不截断单词，即使单词可能会显示不全（仅针对文本显示类控件，win8.1 新增）
            -->
            <TextBlock FontSize="24.667" HorizontalAlignment="Left" Width="100" Height="60" Text="iamwebabcd w" Margin="0 10 0 0" TextWrapping="NoWrap" />
            <TextBlock FontSize="24.667" HorizontalAlignment="Left" Width="100" Height="60" Text="iamwebabcd w" Margin="0 10 0 0" TextWrapping="Wrap" />
            <TextBlock FontSize="24.667" HorizontalAlignment="Left" Width="100" Height="60" Text="iamwebabcd w" Margin="0 10 0 0" TextWrapping="WrapWholeWords" />

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

TextDemo.xaml.cs

/*
 * 本例演示文本类控件的新增功能
 * 
 * 
 * 关于文本类控件的基础请参见：
 * http://www.cnblogs.com/webabcd/archive/2013/01/07/2848564.html
 */

using System;
using Windows.ApplicationModel.DataTransfer;
using Windows.UI.Xaml.Controls;

namespace Windows81.Controls
{
    public sealed partial class TextDemo : Page
    {
        public TextDemo()
        {
            this.InitializeComponent();
        }

        // 当在一个文本输入类控件中粘贴时触发的事件
        private async void txtPaste_Paste(object sender, TextControlPasteEventArgs e)
        {
            // 关于剪切板的基础请参见：http://www.cnblogs.com/webabcd/archive/2013/07/08/3177123.html

            DataPackageView dataPackageView = Windows.ApplicationModel.DataTransfer.Clipboard.GetContent();

            // 判断剪切板中是否有文本数据
            if (dataPackageView.Contains(StandardDataFormats.Text))
            {
                try
                {
                    // 获取剪切板中的文本数据
                    string text = await dataPackageView.GetTextAsync();

                    // 用我们自定义的方式粘贴数据
                    txtPaste.Text = text + text;
                }
                catch
                {
                   
                }
            }
            else
            {
                
            }

            // 已经处理粘贴操作了，其他路由不用再处理了
            e.Handled = true;
        }
    }
}

2、控件 ComboBox, Slider, DatePicker, TimePicker, TextBox, PasswordBox, RichEditBox 增加了 Header 属性和 HeaderTemplate 属性
ControlHeader.xaml

<Page
    x:Class="Windows81.Controls.ControlHeader"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows81.Controls"
    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="120 0 0 0">

            <!--
                控件 ComboBox, Slider, DatePicker, TimePicker, TextBox, PasswordBox, RichEditBox
                增加了 Header 属性和 HeaderTemplate 属性
            -->

            <!--
                设置 TextBox 的 HeaderTemplate
            -->
            <TextBox Name="textBox" IsReadOnly="True" Margin="0 0 20 0">
                <TextBox.HeaderTemplate>
                    <DataTemplate>
                        <Button Content="Click to edit" Click="Button_Click" />
                    </DataTemplate>
                </TextBox.HeaderTemplate>
            </TextBox>

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

ControlHeader.xaml.cs

/*
 * 控件 ComboBox, Slider, DatePicker, TimePicker, TextBox, PasswordBox, RichEditBox 增加了 Header 属性和 HeaderTemplate 属性
 * 1、Header - 可以设置一个纯文本，不能命中测试，空 Header 的话不会占用任何空间
 * 2、HeaderTemplate - 可以将 Header 设置为任何 xaml，且支持命中测试
 */

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

namespace Windows81.Controls
{
    public sealed partial class ControlHeader : Page
    {
        public ControlHeader()
        {
            this.InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            textBox.IsReadOnly = false;

            // 设置 TextBox 的 HeaderTemplate 和 Header
            textBox.HeaderTemplate = null;
            textBox.Header = "Editable TextBox";
        }
    }
}

3、控件 ComboBox, PasswordBox, RichEditBox, SearchBox, TextBox 增加了 PlaceholderText 属性
PlaceholderTextDemo.xaml

<Page
    x:Class="Windows81.Controls.PlaceholderTextDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows81.Controls"
    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="120 0 0 0">

            <!--
                控件 ComboBox, PasswordBox, RichEditBox, SearchBox, TextBox
                增加了 PlaceholderText 属性
            -->

            <!--
                设置 ComboBox 的 PlaceholderText
            -->
            <ComboBox Header="Colors" PlaceholderText="Pick a color" Margin="0 0 20 0">
                <x:String>Blue</x:String>
                <x:String>Green</x:String>
                <x:String>Red</x:String>
                <x:String>Yellow</x:String>
            </ComboBox>

            <!--
                设置 PasswordBox 的 PlaceholderText
            -->
            <PasswordBox Header="Password" PlaceholderText="Enter your password" Margin="0 20 20 0" />

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

PlaceholderTextDemo.xaml.cs

/*
 * 控件 ComboBox, PasswordBox, RichEditBox, SearchBox, TextBox 增加了 PlaceholderText 属性
 */

using Windows.UI.Xaml.Controls;

namespace Windows81.Controls
{
    public sealed partial class PlaceholderTextDemo : Page
    {
        public PlaceholderTextDemo()
        {
            this.InitializeComponent();
        }
    }
}