--- title: "Controls" description: Learn about Windows Presentation Foundation common UI components, referred to as controls, but which might not inherit from the Control class. ms.date: "03/30/2017" dev_langs: - "csharp" - "vb" helpviewer_keywords: - "controls [WPF], about WPF controls" ms.assetid: 3f255a8a-35a8-4712-9065-472ff7d75599 --- # Controls [!INCLUDE[TLA#tla_winclient](../../../includes/tlasharptla-winclient-md.md)] ships with many of the common UI components that are used in almost every Windows application, such as , , , , and . Historically, these objects have been referred to as controls. While the [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] SDK continues to use the term "control" to loosely mean any class that represents a visible object in an application, it is important to note that a class does not need to inherit from the class to have a visible presence. Classes that inherit from the class contain a , which allows the consumer of a control to radically change the control's appearance without having to create a new subclass. This topic discusses how controls (both those that do inherit from the class and those that do not) are commonly used in [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)]. ## Creating an Instance of a Control You can add a control to an application by using either [!INCLUDE[TLA#tla_xaml](../../../includes/tlasharptla-xaml-md.md)] or code. The following example shows how to create a simple application that asks a user for their first and last name. This example creates six controls: two labels, two text boxes, and two buttons, in [!INCLUDE[TLA2#tla_xaml](../../../includes/tla2sharptla-xaml-md.md)]. All controls can be created similarly. [!code-xaml[ControlsOverview#1](~/samples/snippets/csharp/VS_Snippets_Wpf/ControlsOverview/CSharp/Window1.xaml#1)] The following example creates the same application in code. For brevity, the creation of the , `grid1`, has been excluded from the sample. `grid1` has the same column and row definitions as shown in the preceding [!INCLUDE[TLA2#tla_xaml](../../../includes/tla2sharptla-xaml-md.md)] example. [!code-csharp[ControlsOverview#2](~/samples/snippets/csharp/VS_Snippets_Wpf/ControlsOverview/CSharp/AppInCode.xaml.cs#2)] [!code-vb[ControlsOverview#2](~/samples/snippets/visualbasic/VS_Snippets_Wpf/ControlsOverview/VisualBasic/AppInCode.xaml.vb#2)] ## Changing the Appearance of a Control It is common to change the appearance of a control to fit the look and feel of your application. You can change the appearance of a control by doing one of the following, depending on what you want to accomplish: - Change the value of a property of the control. - Create a for the control. - Create a new for the control. ### Changing a Control's Property Value Many controls have properties that allow you to change how the control appears, such as the of a . You can set the value properties in both [!INCLUDE[TLA2#tla_xaml](../../../includes/tla2sharptla-xaml-md.md)] and code. The following example sets the , , and properties on a in [!INCLUDE[TLA2#tla_xaml](../../../includes/tla2sharptla-xaml-md.md)]. [!code-xaml[ControlsOverview#3](~/samples/snippets/csharp/VS_Snippets_Wpf/ControlsOverview/CSharp/AppInCode.xaml#3)] The following example sets the same properties in code. [!code-csharp[ControlsOverview#4](~/samples/snippets/csharp/VS_Snippets_Wpf/ControlsOverview/CSharp/AppInCode.xaml.cs#4)] [!code-vb[ControlsOverview#4](~/samples/snippets/visualbasic/VS_Snippets_Wpf/ControlsOverview/VisualBasic/AppInCode.xaml.vb#4)] ### Creating a Style for a Control [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] gives you the ability to specify the appearance of controls wholesale, instead of setting properties on each instance in the application, by creating a . The following example creates a that is applied to each in the application. definitions are typically defined in [!INCLUDE[TLA2#tla_xaml](../../../includes/tla2sharptla-xaml-md.md)] in a , such as the property of the . [!code-xaml[ControlsOverview#5](~/samples/snippets/csharp/VS_Snippets_Wpf/ControlsOverview/CSharp/AppInCode.xaml#5)] You can also apply a style to only certain controls of a specific type by assigning a key to the style and specifying that key in the `Style` property of your control. For more information about styles, see [Styling and Templating](styles-templates-overview.md). ### Creating a ControlTemplate A allows you to set properties on multiple controls at a time, but sometimes you might want to customize the appearance of a beyond what you can do by creating a . Classes that inherit from the class have a , which defines the structure and appearance of a . The property of a is public, so you can give a a that is different than its default. You can often specify a new for a instead of inheriting from a control to customize the appearance of a . Consider the very common control, . The primary behavior of a is to enable an application to take some action when the user clicks it. By default, the in [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] appears as a raised rectangle. While developing an application, you might want to take advantage of the behavior of a --that is, by handling the button's click event--but you might change the button's appearance beyond what you can do by changing the button's properties. In this case, you can create a new . The following example creates a for a . The creates a with rounded corners and a gradient background. The contains a whose is a with two objects. The first uses data binding to bind the property of the to the color of the button's background. When you set the property of the , the color of that value will be used as the first . For more information about data binding, see [Data Binding Overview](../data/data-binding-overview.md). The example also creates a that changes the appearance of the when is `true`. [!code-xaml[ControlsOverview#6](~/samples/snippets/csharp/VS_Snippets_Wpf/ControlsOverview/CSharp/Window1.xaml#6)] [!code-xaml[ControlsOverview#7](~/samples/snippets/csharp/VS_Snippets_Wpf/ControlsOverview/CSharp/AppInCode.xaml#7)] > [!NOTE] > The property of the must be set to a for the example to work properly. ## Subscribing to Events You can subscribe to a control's event by using either [!INCLUDE[TLA2#tla_xaml](../../../includes/tla2sharptla-xaml-md.md)] or code, but you can only handle an event in code. The following example shows how to subscribe to the `Click` event of a . [!code-xaml[ControlsOverview#10](~/samples/snippets/csharp/VS_Snippets_Wpf/ControlsOverview/CSharp/Window1.xaml#10)] [!code-csharp[ControlsOverview#8](~/samples/snippets/csharp/VS_Snippets_Wpf/ControlsOverview/CSharp/AppInCode.xaml.cs#8)] [!code-vb[ControlsOverview#8](~/samples/snippets/visualbasic/VS_Snippets_Wpf/ControlsOverview/VisualBasic/AppInCode.xaml.vb#8)] The following example handles the `Click` event of a . [!code-csharp[ControlsOverview#9](~/samples/snippets/csharp/VS_Snippets_Wpf/ControlsOverview/CSharp/AppInCode.xaml.cs#9)] [!code-vb[ControlsOverview#9](~/samples/snippets/visualbasic/VS_Snippets_Wpf/ControlsOverview/VisualBasic/AppInCode.xaml.vb#9)] ## Rich Content in Controls Most classes that inherit from the class have the capacity to contain rich content. For example, a can contain any object, such as a string, an , or a . The following classes provide support for rich content and act as base classes for most of the controls in [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)]. - -- Some examples of classes that inherit from this class are , , and . - -- Some examples of classes that inherit from this class are , , and . - -- Some examples of classes that inherit from this class are , , and . - --Some examples of classes that inherit from this class are , , and . For more information about these base classes, see [WPF Content Model](wpf-content-model.md). ## See also - [Styling and Templating](styles-templates-overview.md) - [Controls by Category](controls-by-category.md) - [Control Library](control-library.md) - [Data Templating Overview](../data/data-templating-overview.md) - [Data Binding Overview](../data/data-binding-overview.md) - [Input](../advanced/input-wpf.md) - [Enable a Command](../advanced/how-to-enable-a-command.md) - [Walkthroughs: Create a Custom Animated Button](walkthroughs-create-a-custom-animated-button.md) - [Control Customization](control-customization.md)