Windows Phone 8.1中自定义用户控件及如何调用用户控件

对于有些强迫症的我，还是作为程序员，在自己编程的世界里，凡事都要按照自己的意愿来安排布局或者设计动画等

等。虽说微软已经给我们封装了太多太多的控件和模板，但是难免有时候不会符合我们的意愿和要求，在这个时候就

需要我们自己来设计用户自定义控件。

首先需要在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)
        {
        }
    }
}