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
| 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 .../>
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.
The identifier for the Content dependency property.