Customizing user controls in Windows Phone 8.1 and how to call user controls

For some OCD I, as a programmer, in my own programming world, everything should be arranged according to their own intention layout or design animation, etc.

such as While Microsoft has encapsulated too many controls and templates for us, there are times when we will not be able to meet our wishes and requirements at this time

We need to design the user custom control ourselves.

You first need to create a custom control in VS, so you'll need to add the user control, new item, add-in, project name right-click.

In conjunction with a description of the XAML syntax and the definition of the beginning of the previous article, this side borrows the custom user control and references the custom control for further clarification.

The various description links in the previous blog that were seen in the XAML start definition: Those strange definitions at the beginning of the. xaml file in Windows Phone 8.1

XAML code for custom controls:

<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= ">"

Project name: APP1, custom control file name: stackpanelbymyself

So we see the definition of the class x:class= "App1.stackpanelbymyself", which describes the custom control Stackpanelbymyself class in the App1 space

The xmlns:local= "Using:app1" means that local is the App1 namespace, so you can conclude that the Stackpanelbymyself class is in the local

namespace.

Referencing a custom control in another file 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= "a";
        </local:stackpanelbymyself>
    </grid>
</page>

The reference and namespace of the custom control can be understood in conjunction with the text description and <local:StackPanelByMyself> of the above-labeled red.

The following is an example of a custom control in a book published by teacher Forestry Administration, which you can look at:

Custom control XAML Code:

<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=" "    d:designwidth=" >        < grid>        <ScrollViewer>            <stackpanel x:name= "StackPanel" orientation= "Vertical"/>        < /scrollviewer>    </Grid></UserControl>

Custom control. CS Code:

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;//" User Control "Item template in http://go.microsoft.com/fwlink/? linkid=234236 available on namespace app1{public sealed partial class Stackpanelbymyself:usercontrol {//Definition Stackpane        The Text property of the element in the L control is private string text = "";            public string Text {get {return Text;                } set {text = value;            Parse text information to arrange display parsetext (text); }} public Stackpanelbymyself () {this.        InitializeComponent (); }//Parse hole home The assignment of the Text property private VoiD parsetext (String value) {string[] textblocktexts = value.            Split (');            Clears the child element of the previous StackPanel container this.stackPanel.Children.Clear (); Re-add StackPanel child element for (int i=0;i<textblocktexts.length;i++) {TextBlock Textbloc K = 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; }    }}

To reference a custom control:

XAML Code:

<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=" >        </local:StackPanelByMyself>    </Grid></Page>

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;//" Blank page "Item template in http://go.microsoft.com/fwlink/?    linkid=390556 on the namespace app1{////<summary>//////for self or to navigate to a blank page inside the Frame.            </summary> public sealed partial class Usercontroldemo:page {public Usercontroldemo () { This.            InitializeComponent ();            string text = "super hero: Superman Spider-Man Magic quad Hulk Green Giant US captain Green Lantern Iron Man Batman";        Stackpanelbymyself.text = Text;        }///<summary>///This page will be called when it is displayed in Frame.        </summary>//<param name= "E" > Describes how to access event data for this page. This parameter is typically used for configuration pages.       </param> protected override void Onnavigatedto (NavigationEventArgs e) {}}} 

Customizing user controls in Windows Phone 8.1 and how to call user controls