UserControl UserControl UserControl UserControl Class

Definition

Provides the base class for defining a new control that encapsulates related existing controls and provides its own logic.

public : class UserControl : Control, IUserControlpublic class UserControl : Control, IUserControlPublic Class UserControl Inherits Control Implements IUserControl// This API is not available in Javascript.
<UserControl ...>
  singleContentElement
</UserControl>
-or-
<UserControl .../>
Inheritance
Attributes
Windows 10 requirements
Device family
Windows 10 (introduced v10.0.10240.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v1)

Inherited Members

Inherited properties

Inherited events

Inherited methods

Examples

The following examples demonstrate creating a UserControl and using it multiple times in an app. This first example creates a UserControl called NameReporter that asks for a name of a person, and reports it back to the user. NameReporter has several TextBlock controls, two TextBox controls, and a Button. The user enters a first and last name into the appropriate TextBox, and then clicks the button. The control then displays a message box with the name that the user entered.

<UserControl x:Class="UserControlExample.NameReporter"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
  <StackPanel HorizontalAlignment="Center">

    <StackPanel.Resources>
      <!--Create a Style for a TextBlock.-->
      <Style TargetType="TextBlock" x:Key="TextBlockStyle">
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="VerticalAlignment" Value="Bottom"/>
      </Style>

      <!--Create a Style for a TextBox.-->
      <Style TargetType="TextBox" x:Key="TextBoxStyle">
        <Setter Property="Width" Value="200"/>
        <Setter Property="Height" Value="30"/>
        <Setter Property="Margin" Value="4"/>
        <Setter Property="FontSize" Value="14"/>
      </Style>
    </StackPanel.Resources>
    <TextBlock FontSize="18" Text="Enter your name."/>
    <StackPanel Orientation="Horizontal">
      <TextBlock Style="{StaticResource TextBlockStyle}">
                First Name:
      </TextBlock>
      <TextBox Name="firstName" Style="{StaticResource TextBoxStyle}"/>
    </StackPanel>
    <StackPanel Orientation="Horizontal">
      <TextBlock Style="{StaticResource TextBlockStyle}">
                Last Name:
      </TextBlock>
      <TextBox Name="lastName" Style="{StaticResource TextBoxStyle}"  
                     Margin="6,4,4,4"/>

    </StackPanel>
    <Button Content="Submit" Click="Button_Click"/>
    <TextBlock Name="result" Style="{StaticResource TextBlockStyle}" />

    </StackPanel>
</UserControl>
using System.Text;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace UserControlExample
{
    public partial class NameReporter : UserControl
    {
        public NameReporter()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            StringBuilder displayText = new StringBuilder("Hello, ");
            displayText.AppendFormat("{0} {1}.", firstName.Text, lastName.Text);
            result.Text = displayText.ToString();
        }
    }
}
Imports System.Text
Imports System.Windows
Imports System.Windows.Controls

Partial Public Class NameReporter
    Inherits UserControl
    Public Sub New()
        InitializeComponent()
    End Sub

    Private Sub Button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
        Dim displayText As New StringBuilder("Hello, ")
        'displayText.AppendFormat("{0} {1}.", firstName.Text, lastName.Text)

        MessageBox.Show(displayText.ToString())
    End Sub

End Class

Note

The src prefix in this XAML references the app itself and the UserControlExample code namespace within it. That is where the NameReporter control is defined. For more info on XAML prefixes, see XAML namespaces and namespace mapping.

  <Grid xmlns:src="using:UserControlExample" 
         Margin="0,50,0,0">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="Auto"/>
  </Grid.RowDefinitions>
  <src:NameReporter Grid.Row="0"/>
  <src:NameReporter Grid.Row="1" Margin="0,15,0,0"/>
</Grid>

Remarks

Note that UserControl does not manifest the value of its property in its control template. Instead, set the Background of the root element inside the UserControl. For more info, see Remarks in Control.Background.

Constructors

UserControl() UserControl() UserControl() UserControl()

Initializes a new instance of the UserControl class.

public : UserControl()public UserControl()Public Sub New()// This API is not available in Javascript.

Properties

Content Content Content Content

Gets or sets the content that is contained within a user control.

public : UIElement Content { get; set; }public UIElement Content { get; set; }Public ReadWrite Property Content As UIElement// This API is not available in Javascript.
<UserControl ...>
  singleContentElement
</UserControl>
-or-
<UserControl .../>
Value
UIElement UIElement UIElement UIElement

The content of the user control.

ContentProperty ContentProperty ContentProperty ContentProperty

Identifies the Content dependency property.

public : static DependencyProperty ContentProperty { get; }public static DependencyProperty ContentProperty { get; }Public Static ReadOnly Property ContentProperty As DependencyProperty// This API is not available in Javascript.
Value
DependencyProperty DependencyProperty DependencyProperty DependencyProperty

The identifier for the Content dependency property.