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

本文轉載自查看原文 2014-06-05 08:41 3034 Windows Store Apps

作者：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();
        }
    }
}

OK
[源碼下載]

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。