Windows Phone 8.1中自訂使用者控制項及如何調用使用者控制項

標籤：windows phone 8.1   自訂控制項   引用自訂控制項   usercontrol   localusing   

對於有些強迫症的我，還是作為程式員，在自己編程的世界裡，凡事都要按照自己的意願來安排布局或者設計動畫等

等。雖說微軟已經給我們封裝了太多太多的控制項和模板，但是難免有時候不會符合我們的意願和要求，在這個時候就

需要我們自己來設計使用者自訂控制項。

首先需要在VS中建立自訂控制項，所以需要在項目名右擊->添加->建立項->選擇User Control(使用者控制項)->添加

結合之前一篇提及到的XAML文法和開頭的定義的說明，這邊借自訂使用者控制項和引用自訂控制項進一步說明。

之前部落格中見到XAML開頭定義的各種說明連結： Windows Phone 8.1中的.xaml檔案開頭那些奇怪的定義

自訂控制項的XAML代碼：

<UserControl
    x:Class="App1.StackPanelByMyself"
    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"
    d:DesignHeight="300"
    d:DesignWidth="400">

項目名稱：App1，自訂控制項檔案名稱：StackPanelByMyself

所以看出類的定義 x:Class="App1.StackPanelByMyself"，說明自訂控制項StackPanelByMyself類在App1空間中

而xmlns:local="using:App1"表示local即為App1的命名空間，所以可以得出結論StackPanelByMyself類就在local

命名空間中。

在另外一個檔案UserControlDemo中引用自訂控制項

<Page
    x:Class="App1.UserControlDemo"
    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"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <local:StackPanelByMyself x:Name="stackPanelByMyself" FontSize="30">
        </local:StackPanelByMyself>
    </Grid>
</Page>

結合上方標紅的文字說明和<local:StackPanelByMyself>這種寫法，自訂控制項的引用和命名空間就可以理解了。

下面是林政老師出版的書中關於自訂控制項的例子，大家可以研究一下：

自訂控制項XAML代碼：

<UserControl    x:Class="App1.StackPanelByMyself"    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"    d:DesignHeight="300"    d:DesignWidth="400">        <Grid>        <ScrollViewer>            <StackPanel x:Name="stackPanel" Orientation="Vertical" />        </ScrollViewer>    </Grid></UserControl>

自訂控制項.cs代碼：

using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Runtime.InteropServices.WindowsRuntime;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;// “使用者控制項”項目範本在 http://go.microsoft.com/fwlink/?LinkId=234236 上提供namespace App1{    public sealed partial class StackPanelByMyself : UserControl    {        //定義StackPanel控制項中的元素的text屬性        private string text = "";        public string Text        {            get            {                return text;            }            set            {                text = value;                //解析文本資訊進行排列顯示                ParseText(text);            }        }        public StackPanelByMyself()        {            this.InitializeComponent();        }        //解析孔家的Text屬性的賦值        private void ParseText(string value)        {            string[] textBlockTexts = value.Split(' ');            //清除之前的stackPanel容器的子項目            this.stackPanel.Children.Clear();            //重新添加stackPanel的子項目            for(int i=0;i<textBlockTexts.Length;i++)            {                TextBlock textBlock = this.GetTextBlock();                textBlock.Text = textBlockTexts[i].ToString();                this.stackPanel.Children.Add(textBlock);            }        }        private TextBlock GetTextBlock()        {            TextBlock textBlock = new TextBlock();            textBlock.TextWrapping = TextWrapping.Wrap;            textBlock.FontSize = this.FontSize;            textBlock.Margin = new Thickness(0,10,0,0);            return textBlock;        }    }}

引用自訂控制項：

XAML代碼：

<Page    x:Class="App1.UserControlDemo"    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"    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">    <Grid>        <local:StackPanelByMyself x:Name="stackPanelByMyself" FontSize="30">        </local:StackPanelByMyself>    </Grid></Page>

.CS代碼：

using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Runtime.InteropServices.WindowsRuntime;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;// “空白頁”項目範本在 http://go.microsoft.com/fwlink/?LinkID=390556 上有介紹namespace App1{    /// <summary>    /// 可用於自身或導航至 Frame 內部的空白頁。    /// </summary>    public sealed partial class UserControlDemo : Page    {        public UserControlDemo()        {            this.InitializeComponent();            string text = "超級英雄： 超人 蜘蛛俠 神奇四俠 綠巨人 美國隊長 綠燈俠 鋼鐵俠 蝙蝠俠";            stackPanelByMyself.Text = text;        }        /// <summary>        /// 在此頁將要在 Frame 中顯示時進行調用。        /// </summary>        /// <param name="e">描述如何訪問此頁的事件數目據。        /// 此參數通常用於配置頁。</param>        protected override void OnNavigatedTo(NavigationEventArgs e)        {        }    }}

Windows Phone 8.1中自訂使用者控制項及如何調用使用者控制項