XAML - Quick Start Guide - Free Online Tutorials (2023)

XAML stands for Extensible Application Markup Language. It is a simple, declarative language based on XML.

• In XAML it is very easy to create, initialize and set properties of objects with hierarchical relationships.

• Mainly used for GUI design.

• It can also be used for other purposes, such as declaring workflows in Workflow Foundation.

XAML can be used on various platforms such as WPF (Windows Presentation Foundation), Silverlight, Mobile Development, and the Windows Store app. It can be used in various .Net Framework and CLR (Common Language Runtime) versions.

How XML works

XML is oneDeclarativelanguage in the sense it definesWhatInHowwhat are you doing. The XAML editor is responsible forHowplace to learn. Let's take a look at the following architecture. It summarizes the XAML side of things -

The figure illustrates the following operations −

• XAML files are interpreted by platform-specific XAML editors.

• An XAML editor converts XAML into internal code that describes elements of the user interface.

• The internal code and the C# code are linked together through some class definitions and the .NET compiler builds the application.

Benefits of XML

Using XAML can solve one of the eternal problems we all have with GUI design. It can be used to design user interface elements in Windows Forms applications.

In early GUI frameworks, there was no real separation between an application's appearance and its behavior. Both the GUI and its behavior are made in the same language, such as C# or VB.net, which will require more effort from the developer to implement the user interface and associated behavior.

Using XAML, it's easy to separate behavior from designer code. Therefore developers and XAML designers can work side by side. XAML code is very easy to read and understand.

Microsoft provides two main tools for XAML −

• optical studio
• mixed expression

Currently, both tools can generate XAML, but the fact is that Visual Studio is more used by developers, while Expression Blend is still more used by designers.

Microsoft offers a free version of Visual Studio that you can downloadhttps://www.visualstudio.com/en-us/downloads/download-visual-studio-vs.aspx

notes− For this tutorial, we mainly work with WPF projects and Windows Store apps. However, the free version of Visual Studio does not support Windows Store apps. Therefore, you need a licensed version of Visual Studio for this.

To set up

Follow the steps below to install Visual Studio on your system −

• After downloading the file, run the installer. The following dialog box appears.

• Click the Install button and the installation process will begin.

• After the installation process is successfully completed, you will see the following screen.

• Close this dialog and restart your computer if necessary.

• Now open Visual Studio from the Start menu, the following dialog will appear. The first time it will take some time just to prepare.

When everything is done, you will see the main Visual Studio window.

first step of implementation

Let's start with a simple implementation. Follow the steps below −

• Click the File → New → Project menu option.

• The following dialog appears −

• Select Visual C# under Templates and select WPF Application. Give the project a name and click OK.

• By default, the mainwindow.xaml file writes the following XAML tags. You will learn about all of these tags later in this tutorial.

By default, the grid is set as the first element after the page.

Let's add a button and text block below the Grid element. This is calledSyntax of object elements, an opening angle brace, followed by the name we want to create, such as a button, then set a content property. The string assigned to the content is displayed on the button. Now set the height and width of the button to 30 and 50 respectively. Also initialize the properties of the text block.

Now look at the drawing window. You will see a button. Now press F5 to run this XAML code.

When you compile and run the above code, you will see the following window.

Congratulations! You have designed your first button.

XAML applications can also be developed on a Mac. On Mac, XAML is available as an iOS and Android app. To set up the environment on a Mac, go towww.xamarin.com.Click on Products and select Xamarin Platform. Download and install Xamarin Studio. It allows you to develop applications for different platforms.

XAML - C#-syntax

In this chapter you will learn the basic XAML syntax/rules for writing XAML applications. Let's look at a simple XAML file.

As you can see in the XAML file above, there are different types of tags and elements. The following table summarizes all elements.

Syntax rules for object elements

The syntax rules of XAML are almost the same as those of XML. If you look at the XAML document, you will see that it is actually a valid XML file. However, the XML file cannot be a valid XAML file. This is because in XML the value of a property must be a string while in XAML it can be any other object, this is known as Property element syntax.

• The syntax for the Object element begins with an opening parenthesis (<), followed by the name of the object, such as a button.

• It sets certain properties and properties of the object elements.

• Object elements must end with a slash (/) followed by a closing parenthesis (>).

Example of a simple object with no child elements −

An example of an object element with some attributes −

Example of alternative syntax for defining properties (Properties Element Syntax) −

 assign 30 60 

Example object with child elements - StackPanel contains Textblock as a child element

You can use XAML to create, initialize, and set properties for objects. The same activities can also be performed using programming code.

XAML is just another easy way to design user interface elements. With XAML, it's up to you to decide whether to declare objects in XAML or in code.

Let's take a simple example to show how we write in XAML −

  < Button Content = "Ok" Height = "20" Width = "60" Margin = "5"/> 

In this example, we'll create a stacking panel with a button and a text block and set some properties of the button and text block, such as height, width, and margins. When the above code is compiled and executed, it produces the following output −

Now look at the same code written in C#.

with System, with SystemText, with System.Windows, with System.Windows.Controls, namespace XAMLVsCode { ///
/// MainWindow.xaml interaction logic ///
public partial class MainWindow: Window { public MainWindow() { InitializeComponent(); // Create StackPanel StackPanel stackPanel = new StackPanel(); this.Content = stackPanel; // Create TextBlock TextBlock textBlock = new TextBlock(); textBlock.Text = "Welcome to the XAML Tutorial"; textBlock.Height = 20; textBlock.Width = 200; textBlock.Margin = new thickness(5); stackPanel.Children.Add(textBlock); // create button Button Button = new button(); button.Contents = "OK"; button.Height = 20; button.Width = 50; button.Margin = new Thickness(20); stackPanel.Children.Add(button); } }}

When the above code is compiled and executed, it produces the following output. Note that this is exactly the same output as the XAML code.

Now you can see how easy it is to use and understand XAML.

In this chapter we will write the same example in VB.Net so that those familiar with VB.Net also understand the benefits of XAML.

Let's look again at the same example written in XAML −

In this example, we'll create a stacking panel with a button and a text block and set some properties of the button and text block, such as height, width, and margins. When the above code is compiled and executed, it produces the following output −

Now look at the same code written in VB.Net −

public class mainwindow private sub window_loaded(afzender als object, e als roudedEventArgs) dim panel as new stackpanel() panel.orientation = oriëntatie; .net" txtInput.Width = 220 txtInput.Height = 20 txtInput.Margin = New Thickness(5) panel.Children.Add(txtInput) Dim btn As New Button() btn.Content = "Ok" btn.Widtn = .Height = 20 btn. Margin = NewThicknessTable(5). Children. Add(btn) End Subklasse

When the above code is compiled and executed, the output is exactly the same as the XAML code.

You can now imagine how easy it is to work with XAML compared to VB.Net.

In the examples above, we saw that what we can do in XAML can also be done in other procedural languages ​​such as C# and VB.Net.

Let's see another example where we will be using both XAML and VB.Net. We design a GUI in XAML and the behavior is implemented in VB.Net.

In this example, a button is added to the main window. When the user clicks this button, a message is displayed in a message box. Below is the code in XAML that declares a button object with some properties.

The button click event (behavior) is implemented in VB.Net. This event displays a message in a message box.

Public Class MainWindow Private Sub btn_Click(sender as object, and as RoutedEventArgs) Handles btn.Click MessageBox.Show("The button was clicked") End Sub

After compiling and executing the code above, the following screen will appear −

Now click on the button that says "Click With". It will display the following message −

This chapter introduces some basic and important building blocks of XAML applications. will explain how

• Create and initialize an object,
• Objects can be easily modified using resources, styles and templates,
• Make objects interactive with transitions and animations.

object

XAML is a standard declarative language that can create and present objects. It's another way of describing XML-based objects, which objects to create and how to initialize them before running the program. object can be

• Containers (stack panels, dock panels)
• UI elements / controls (buttons, text boxes, etc.)
• source dictionary

bron

A resource is usually a definition associated with an object that you expect to use often. It can store data locally for the current control or window, or globally for the entire application.

style

The XAML framework offers many strategies for personalizing and customizing the appearance of an application. Styles give us the flexibility to set certain properties of an object and reuse those specific settings across multiple objects for a consistent look.

• In a style you can only set existing properties of the object, such as height, width, font size, etc.
• Only the default behavior of the control can be specified.
• Many properties can be added to a style.

In the first image you can see that the same height and width properties are set separately for all three buttons, but in the second image you can see that the height and width of all buttons are added to one style. associated with all buttons.

role model

A template describes the overall appearance and visual appearance of a control. Each control has a default template associated with it that determines the appearance of that control. XAML makes it easy to create your own templates when you want to customize the visual behavior and appearance of a control.

In the screenshot below, there are two buttons, one with a template and one with a default button.

Now when you mouse over the button, it also changes color as shown below.

Templates give you access to more parts of the control than styles. You can specify existing and new behavior for the control.

Animations and transitions

Animations and transitions within the Windows runtime can enhance XAML applications by creating interactivity and movement. You can easily embed interactive surfaces in your XAML applications using animations from the Windows Runtime Animation Library. use animations

• To improve or make the user interface more attractive.
• to draw the user's attention to the change.

In the screenshot below you see a − square

When you hover over this square, it expands in all directions, as shown below.

The XAML UI framework provides an extensive library of controls to support user interface development for Windows. Some have a visual representation, such as Button, TextBox, TextBlock, etc., while others serve as containers for other controls or content, such as images. All XAML controls inherit fromSystem.Windows.Controls.Control.

The complete inheritance hierarchy for a control is as follows −

Here is the list of controls that we will discuss one by one in this chapter.

In this chapter we discuss all these controls and their implementation.

The layout of the controls is very important and crucial to the usability of the application. A set of GUI components must be arranged in your application. There are some points to consider when choosing a layout board.

• The position of the child element.
• The size of the child element.
• Layer child elements that overlap.

The fixed pixel layout of the controls does not work when the app is used in a different screen resolution. XAML provides a comprehensive set of built-in layout frameworks to properly arrange GUI elements. Some of the most commonly used and popular layout panels are as follows −

The general concept of events in XAML is similar to events in other popular programming languages ​​such as .NET and C++. In XAML, all controls expose certain events to subscribe to for specific purposes.

When an event occurs, the application is notified and the program can respond to it. For example, a Close button is used to close a dialog box.

Depending on application requirements, there are many types of events that you can subscribe to for different application behaviors, but the most commonly used events are mouse and keyboard related events, for example

• Click
• mouse down
• enter mouse
• the mouse has left
• mouse up
• knob
• knob

In this chapter we use some basic events and more commonly used events to understand how the events of a particular control relate to what happens behind the code, that the behavior will be executed according to what the user wants to do when the specific event occurs.

Let's look at a simple example of a button click event. Below is the XAML implementation of the Button control, created and initialized with some properties and a Click event (Click="OnClick").

Each time this button is clicked, awhen you clickevent you can add any type of behavior in response to a click. Let's look at the implementation of the OnClick event, which displays a message when the button is clicked.

with System, with System.Windows, with System.Windows.Controls, namespace XAMLEventHandling { ///
/// MainWindow.xaml interaction logic ///
public partial class MainWindow: Window { public MainWindow() { InitializeComponent(); } private void OnClick(Object sender, RoutedEventArgs e) { MessageBox.Show("The button has been clicked!"); } }}

When you compile and run the above code, it produces the following output −

When the button is clicked, the OnClick event is triggered and the following message is displayed.

Now let's look at a slightly more complex example of handling multiple events.

example

The following example contains a text box with a context menu that manipulates the text in the text box.

The following XAML code creates a TextBox, a ContextMenu, and MenuItems with properties and events such as Checked, Unchecked, and Click.

  Hello, this is an XAML tutorial.           

Below is the C# implementation for the various events that are triggered when a menu item is checked, unchecked, or clicked.

use System, use System.Collections.Generic, use System.Linq, use System Text, use System.Threading.Tasks, use System.Windows, use System.Windows.Controls, use System.Windows.Data, namespace XAMLContextMenu { // /
/// MainWindow.xaml interaction logic ///
Open MainWindow: Open { public MainWindow() { InitializeComponent(); } private void Bold_Checked(object afzender, RoutedEventArgs e) { textBox1.FontWeight = FontWeights.Bold; } private void Bold_Unchecked(object afzender, RoutedEventArgs e) { textBox1.FontWeight = FontWeights.Normal; } private void Italic_Checked(object afzender, RoutedEventArgs e) { textBox1.FontStyle = FontStyles.Italic; } private void Italic_Unchecked(object afzender, RoutedEventArgs e) { textBox1.FontStyle = FontStyles.Normal; } private void VerhoogFont_Click(object afzender, RoutedEventArgs e) { if (textBox1.FontSize < 18) { textBox1.FontSize += 2; } } private void DecreaseFont_Click(object afzender, RoutedEventArgs e) { if (textBox1.FontSize > 10) { textBox1.FontSize -= 2; } }}

When you compile and run the above code, it produces the following output −

We recommend running the sample code above and experimenting with some other events.

Event

Data binding is a mechanism in XAML applications that provides a simple and easy way for Windows Runtime applications that use a few classes to represent and work with data. In this mechanism, data management is completely separate from how the data is displayed.

Data binding allows data to flow between user interface elements and data objects in the user interface. When bindings are created and your data or business model changes, they automatically reflect updates to the UI elements and vice versa. It is also possible not to bind to a standard data source, but to another element on the page. Data connection can be of two types −

• data binding in one direction
• data binding in two directions

data binding in one direction

In one-way binding, data is bound from the source (that is, the object containing the data) to the destination (that is, the object that represents the data).

Let's look at a simple example of a one-way data connection. The following XAML code creates four text blocks with specific properties.

   < TextBlock Text = "Name: " Margin = "10" Width = "100" />        

The text properties of two text blocks are statically set to "Name" and "Title", while the text properties of the other two text blocks are bound to "Name" and "Title", which are class variables of the Employee class, as shown below.

with System, with System.Collections.Generic, with System.Linq, with System Text, with System.Threading.Tasks, namespace DataBindingOneWay { public class Employee { public string Name { get; put down? } public string title { get; put down? } public static Employee GetEmployee() { var emp = new Employee() { Name = "Ali Ahmed", Title = "Developer" }; return emp; } }}

In this class we have only two variables,NameIntitle, and a static method that initializes the Employee object, which returns the employee object. So we bind a property, Name and Title, but we didn't choose which object this property belongs to. The easiest way is to assign an object to the DataContext whose properties we bind in the following C# code

with System, with System.Windows, with System.Windows.Controls, namespace DataBindingOneWay { ///
/// MainWindow.xaml interaction logic ///
public partial class MainWindow: Window { public MainWindow() { InitializeComponent(); DataContext = Employee.GetEmployee(); } }}

Let's launch the application and you can see right away in our main window that we have successfully linked the name and title to the Employee object.

data binding in two directions

With a two-way connection, a user can change data through the user interface and update that data to the source. You can update the view if the source changes while the user is viewing the view.

example

Let's look at the following example that creates a combo box with three combo box elements and a text box with some properties. In this example we do not have standard data sources, but UI elements are linked to other UI elements.

   < ComboBoxItem Content = "Geel" IsSelected = "True" />     

When you compile and run the above code, it produces the following output. When the user selects an item from the combo box, the text and background color of the text box are updated accordingly.

Similarly, when the user types a valid color name in the text box, the background color of the combo box and text box are also updated.

In XAML applications, a markup extension is a method/technique to obtain a value that is neither a specific XAML object nor a primitive type. Marker extensions can be defined by opening and closing braces, which define the scope of the markup extension.

Data Binding and Static Resources are markup extensions. There are some predefined XAML markup extensionssystem.xamlcan be used.

Let's look at a simple examplestatic resourcesUse markup extensions, which are predefined XAML markup extensions.

The following XAML code creates two text blocks with some properties with the foreground setresource window.

consistsresource window, you can seex: keyUsed to uniquely identify elements created and referenced in dictionaries defined by XAML to identify resources in source dictionaries.

When you compile and run the above code, the MainWindow will be created as below. You see two blocks of text with a blue foreground color.

In XAML, you can also define custom markup extensions by inheriting from the MarkupExtension class and overriding the ProvideValue abstract method in the MarkupExtension class.

Let's look at a simple example of a custom markup extension.

The XAML code above creates a button with some attributes and a custom markup extension for the content value(my:my markup extension)It is used with two values ​​"Markup" and "Extension" assigned to FirstStr and SecondStr respectively.

In fact,my markup extensionis a class derived frommarker extensionAs shown below, in the C# implementation. This class contains two string variables, FirstStr and SecondStr, that bind the string from the ProvideValue method and return it to the content of the button.

Use System, use System.Collections.Generic, use System.Linq, use System. Documents, with System.Windows.Input, with System.Windows.Markup, with System.Windows.Media, with System.Windows.Media.Imaging, with System.Windows.Navigation, with System.Windows.Shapes, namespace XAMLMarkupExtension { / //
/// MainWindow.xaml interaction logic ///
public partial class MainWindow: Window { public MainWindow() { InitializeComponent(); } } public class MyMarkupExtension : MarkupExtension { public MyMarkupExtension() { } public String FirstStr { get;放; } public string SecondStr { 安语;放; } public override object ProvideValue(IServiceProvider serviceProvider) { return FirstStr + " " + SecondStr; } }}

Let's launch the application and you can see directly in our MainWindow what the markup extension successfully used as a button.

A dependency property is a specific type of property where the value is followed by a property system, which is also part of the Windows Runtime application. Classes that define dependency properties must inherit from the DependencyObject class.

Many user interface control classes used in XAML are derived from the DependencyObject class and support dependency properties. The following XAML code creates a button with some properties.

The x:Type markup extension in XAML has similar functionality to typeof() in C#. Use this when specifying a property that takes on an object type, e.g.

当你编译并执行上面的代码时，它会产生如下的MainWindow。当鼠标在按钮上时，会改变按钮的前景色。当鼠标离开按钮时，它会变回原来的颜色。

依赖属性和其他 CLR 属性之间的主要区别是 -

• CLR 属性可以通过使用直接从类的私有成员读取/写入吸气剂和二传手.在依赖属性的情况下，它不存储在本地对象中。

• 依赖属性存储在由 DependencyObject 类提供的键/值对字典中。

• 它还可以节省大量内存，因为它会在更改时存储属性。

• 它也可以绑定在 XAML 中。

在 .NET Framework 中，还可以定义自定义依赖属性。下面是在 C# 中定义自定义依赖属性的步骤。

• 使用系统调用寄存器声明并注册您的依赖属性。

• 为属性提供 setter 和 getter。

• 定义一个静态处理程序来处理全局发生的任何更改。

• 定义一个实例处理程序来处理该特定实例发生的任何更改。

下面给出的是 C# 中用于定义设置用户控件的 SetText 属性的依赖属性的代码。

使用系统；使用 System.Collections.Generic；使用 System.Linq；使用 System.Text；使用 System.Threading.Tasks；使用 System.Windows；使用 System.Windows.Controls；使用 System.Windows.Data；使用 System.Windows.Documents；使用 System.Windows.Input；使用 System.Windows.Media；使用 System.Windows.Media.Imaging；使用 System.Windows.Navigation；使用 System.Windows.Shapes；命名空间 WpfApplication3 { /// 
 /// 交互UserControl1.xaml 的逻辑 /// 
 public partial class UserControl1 : UserControl { public UserControl1() { InitializeComponent(); } public static readonly DependencyProperty SetTextProperty = DependencyProperty.Register("SetText", typeof(string), typeof(UserControl1), new PropertyMetadata("", new PropertyChangedCallback(OnSetTextChanged))); public string SetText { get {return(string) GetValue(SetTextProperty); } set {SetValue(SetTextProperty, value);} } private static void OnSetTextChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { UserControl1 UserControl1Control = d as UserControl1; UserControl1Control.OnSetTextChanged(e); } private void OnSetTextChanged(DependencyPropertyChangedEventArgs e) { tbTest.Text = e.NewValue.ToString(); } }}

下面是 XAML 文件，其中 TextBlock 被定义为用户控件，Text 属性将由 SetText 依赖属性分配给它。

以下 XAML 代码创建一个用户控件，并初始化其 SetText 依赖属性和一些其他属性。

   < /窗口>

让我们运行这个应用程序，您可以立即在我们的 MainWindow 中看到用户控件的依赖属性已成功用作文本。

资源通常是与您预计会多次使用的某个对象相关联的定义。它能够为控件或当前窗口在本地存储数据，或者为整个应用程序全局存储数据。

将对象定义为资源允许我们从另一个地方访问它。因此，它允许可重用​​性。资源在资源字典中定义，任何对象都可以定义为资源，有效地使其成为可共享的资产。为 XAML 资源指定了一个唯一键，使用该键，可以使用 StaticResource 标记扩展来引用它。

让我们再看一个简单的示例，其中创建了两个具有某些属性的文本块，并且它们的前景色定义在窗口资源.

    < StackPanel Orientation = "Vertical">    

上面的代码编译执行后，会产生如下的MainWindow。您可以看到两个前景色为蓝色的文本块。资源的好处是，如果有多个文本块，你想改变它们的背景颜色，那么你只需要在资源字典中改变它。

资源范围

资源是在资源字典中定义的，但是有很多地方可以定义资源字典。在上面的示例中，资源字典是在窗口/页面级别定义的。在什么词典中定义资源会立即限制该资源的范围。所以范围，即你可以在哪里使用资源，取决于你在哪里定义它。

• 在网格的资源字典中定义资源，该资源只能由该网格及其子元素访问。

• 在窗口/页面上定义它，该窗口/页面上的所有元素都可以访问它。

• App root 可以在 App.xaml 资源字典中找到。它是我们应用程序的根，因此此处定义的资源适用于整个应用程序。

就资源的范围而言，最常见的是应用程序级别、页面级别和特定元素级别，如 Grid、StackPanel 等。

资源字典

XAML 应用程序中的资源字典意味着单独文件中的资源字典。几乎所有 XAML 应用程序都遵循它。在单独的文件中定义资源可以具有以下优点 -

• 在资源字典中定义资源和 UI 相关代码之间的分离。

• 在单独的文件（如 App.xaml）中定义所有资源将使它们在整个应用程序中可用。

那么，我们如何在单独的文件中的资源字典中定义我们的资源呢？好吧，这很简单，只需通过以下步骤通过 Visual Studio 添加一个新的资源字典 -

• 在您的解决方案中，添加一个新文件夹并将其命名资源字典.

• 右键单击此文件夹，然后从“添加”子菜单项中选择“资源词典”并将其命名DictionaryWithBrush.xaml

  (Video) 🔥 C# GUI Tutorial using WPF | XAML | - Windows Presentation Foundation

让我们看一下同一个应用程序；现在只在应用程序级别定义了资源字典。

下面是 MainWindow.xaml 的 XAML 代码。

这是 DictionaryWithBrush.xaml 中的实现 -

这是 app.xaml 中的实现 -

当上面的代码被编译和执行时，它会产生以下输出 -

我们建议您执行上面的代码并尝试更多的资源，例如背景颜色等。

模板描述控件的整体外观和视觉外观。对于每个控件，都有一个与之关联的默认模板，它为该控件提供了外观。

在 XAML 中，当您想要自定义控件的视觉行为和视觉外观时，您可以轻松地创建自己的模板。逻辑和模板之间的连接可以通过数据绑定来实现。

样式和模板之间的主要区别是 -

• 样式只能更改具有该控件默认属性的控件的外观。

• 使用模板，您可以访问控件的更多部分而不是样式。您还可以指定控件的现有行为和新行为。

有两种最常用的模板。

• 控制模板
• 数据模板

控制模板

控件模板定义或指定控件的视觉外观和结构。所有 UI 元素都具有某种外观和行为，例如，按钮具有外观和行为。单击事件或鼠标悬停事件是响应单击和悬停而触发的行为，还有按钮的默认外观，可以通过控件模板更改。

让我们再看一个简单的例子，其中创建了两个具有某些属性的按钮。一个是与模板另一个是默认按钮。

              Grid>                           

当上面的代码被编译和执行时，它会产生下面的 MainWindow -

当您将鼠标悬停在带有自定义模板的按钮上时，它也会更改颜色，如下所示 -

数据模板

数据模板定义并指定数据集合的外观和结构。它提供了在任何 UI 元素上格式化和定义数据表示的灵活性。它主要用于与数据相关的 Item 控件，例如 ComboBox、ListBox 等。

让我们看一个简单的数据模板示例。以下 XAML 代码创建一个带有数据模板和文本块的组合框。

              网格> 窗口>

这是 C# 中的实现，其中将员工对象分配给 DataContext -

使用系统；使用 System.Windows；使用 System.Windows.Controls；命名空间 XAMLDataTemplate { /// 
 /// MainWindow.xaml 的交互逻辑 /// 
 public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); DataContext = Employee.GetEmployees(); } }}

这是 Employee 类在 C# 中的实现 -

使用系统；使用 System.Collections.Generic；使用 System.Collections.ObjectModel；使用 System.ComponentModel；使用 System.Linq；使用 System.Runtime.CompilerServices；使用系统文本；使用 System.Threading.Tasks；命名空间 XAMLDataTemplate { public class Employee : INotifyPropertyChanged { private string name; public string Name { get { 返回名称； } 设置 { 名称 = 值； RaiseProperChanged(); } } 私有字符串标题； public string Title { get { 返回标题； } 设置 { 标题 = 值; RaiseProperChanged(); } } public static Employee GetEmployee() { var emp = new Employee() { Name = "Waqas", Title = "Software Engineer" };返回 emp； } 公共事件 PropertyChangedEventHandler PropertyChanged; private void RaiseProperChanged( [CallerMemberName] string caller = ""){ if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(caller)); } } public static ObservableCollection GetEmployees() { var employees = new ObservableCollection(); employees.Add(new Employee() { Name = "Ali", Title = "Developer" }); employees.Add(new Employee() { Name = "Ahmed", Title = "Programmer" }); employees.Add(new Employee() { Name = "Amjad", Title = "Desiner" }); employees.Add(new Employee() { Name = "Waqas", Title = "Programmer" }); employees.Add(new Employee() { Name = "Bilal", Title = "Engineer" }); employees.Add(new Employee() { Name = "Waqar", Title = "Manager" });返岗员工； } }}

当上面的代码被编译和执行时，它会产生如下输出。它包含一个组合框，当您单击该组合框时，您会看到在 Employee 类中创建的数据集合被列为组合框项。

我们建议您执行上面的代码并进行试验。

XAML 框架提供了多种策略来个性化和自定义应用程序的外观。样式使我们能够灵活地设置对象的某些属性，并在多个对象之间重用这些特定设置以获得一致的外观。

• 在样式中，您只能设置对象的现有属性，例如高度、宽度和字体大小。

• 只能指定控件的默认行为。

• 可以将多个属性添加到一个样式中。

样式用于为一组控件提供统一的外观。隐式样式用于将外观应用于给定类型的所有控件并简化应用程序。

想象一下，我们有三个按钮，它们都必须看起来相同——相同的宽度和高度、相同的字体大小和相同的前景色。我们可以在按钮元素本身上设置所有这些属性，这对所有按钮来说仍然很好，如下图所示。

但在现实生活中的应用程序中，您通常会有更多需要看起来完全相同的应用程序。当然不仅是按钮，您通常还希望您的文本块、文本框和组合框等在您的应用程序中看起来相同。当然必须有更好的方法来实现这一点——它被称为造型.您可以将样式视为将一组属性值应用于多个元素的便捷方式，如下图所示。

让我们看一下包含三个按钮的示例，这些按钮是在 XAML 中创建的，具有一些属性。

查看上面的代码时，您会发现所有按钮的高度、宽度、前景色、字体大小和边距属性都保持不变。编译并执行上述代码时，将显示以下输出 -

现在让我们看一下同一个例子，但这一次，我们将使用风格.

     
Styles are defined in source dictionaries and each style has a unique key ID and target type. consists
In the example above, all the public properties for each button are now set in the style, and the style property is then set via the StaticResource markup extension, assigning the style to each button with a unique key. 
When the above code is compiled and executed, it produces the following window, which is the same output. 
The benefits of this are obvious. We can reuse this style anywhere within its scope, and if we need to change it, we only need to change it once in the style definition, not once in every element. 
The level at which a style is defined immediately limits the scope of that style. So the scope, i.e. where you can use the style, depends on where you define it. Styles can be defined at the following levels: 
Composite number
Level and description
1< / td>
Control level
Control level styling can only be applied to that specific control. 
2
formatting levels
Set at each formatting level The styles it is accessible only from this layout and its child layouts. 
3
Window level
Window level style definition can be opened through all the elements in the window. 
4 
Application level
 Defining styles at the application level Access for the entire application. 
Basically, a tag line allows you to make changes or take action based on the value of a property. So in principle you can dynamically change the look and/or behavior of a control without creating a new control. 
A tag rule is used to change the value of a property when certain conditions are met. Tag rules are usually defined in the styles applied to the specific control or document root. There are three types of rules: 
Property triggers
Data triggers
Event triggers
< h2>Property trigger  h2>< p>In a property tag line, when a property changes, another property changes immediately or dynamically. For example, if you want to change the appearance of a button when you hover over it, you can use a property tag line. 
Example
The following example shows how to change the foreground color of a button when the mouse enters the button area. 
  < /Window.Resources>  
When you compile and run the above code, it produces the following output −
When the mouse enters the button area, the foreground color changes to green.
data activation
Data triggers perform certain actions when the bound data meets certain conditions. Let's look at the following XAML code, which creates a check box and a text block with some properties. When the check box is selected, the foreground color changes to red.
        
When you compile and run the above code, it produces the following output −
When the check box is selected, the foreground color of the text block changes to red.
event trigger
Event triggers perform certain actions when certain events are triggered. It is usually used to complete some animations such as DoubleAnimation, ColorAnimation, etc. The following block of code creates a simple button. When the click event is triggered, the button becomes wider and taller.
               < LinearDoubleKeyFrame value = "40" KeyTime = "0:0:1" />         
When you compile and run the above code, it produces the following output −
Now click on this button and you will notice that it starts to expand in two dimensions.
If you are familiar with debugging a procedural language (such as C#, C/C++, etc.) and knowrest ofAnd expect the same type of debugging in XAML, you will be surprised that it is not currently possible to debug XAML code like any other procedural language code. Debugging an XAML application means trying to find errors.
(Video) WPF Tutorial - Introduction In 30 Minutes (Binding, XAML & Data Context)
With datalock your data is not shown on the screen and you don't know why
Or a problem has to do with a complex layout.
Or alignment issues or issues with margin colors, overlays, etc., and some elaborate templates like ListBox and ComboBox.
Debugging XAML is mostly about checking if the binding works and if not, what went wrong. Unfortunately there is no way to set breakpoints on XAML bindings outside of Silverlight, but we can use the output window to check for data binding errors. Let's look at the XAML code below to find the data binding error.
   < TextBlock Text = "Name: " Margin = "10" Width = "100"/>       
The text properties of two text blocks are statically set to "First Name" and "Title", while the text properties of the other two text blocks are bound to "First Name" and "Title". But the class variables are intentionally taken as Name and Title in the Employee class, which are incorrect variable names. Now let's try to understand where to find this type of error when the desired output is not displayed.
with System, with System.Collections.Generic, with System.Linq, with System Text, with System.Threading.Tasks, namespace DataBindingOneWay { public class Employee { public string Name { get; put down? } public string title { get; put down? } public static Employee GetEmployee() { var emp = new Employee() { Name = "Ali Ahmed", Title = "Developer" }; return emp; } }}
Here is the implementation of the MainWindow class in C# code
with System, with System.Windows, with System.Windows.Controls, namespace DataBindingOneWay { ///
/// MainWindow.xaml interaction logic ///
public partial class MainWindow: Window { public MainWindow() { InitializeComponent(); DataContext = Employee.GetEmployee(); } }}
Let's run this application and you can see right away in our main window that we have successfully bound the title of the Employee object, but the name is not bound.
To check what's going on with the name, let's look at the output window which generates several log files.
The easiest way to find errors is to just search for errors and you will find the errors below"Bad BindingExpression-pad: 'FirstName'"property not found"object" "employee"
System.Windows.Data Error: 40: BindingExpression path error: Could not find property "FirstName" on "object" "Employee" (HashCode=11611730). BindingExpression: Path = FirstName; DataItem = 'Employee' (HashCode = 11611730), Target Element is 'TextBlock' (Name = ''), Target Attribute is 'Text' (Type 'String')
This clearly shows that FirstName is not a member of the Employee class, so it helps solve such problems in the application.
when you changenamereachNameAgain, you will see the desired output.
UI debugging for XAML
Visual Studio 2015 introduces the XAML UI Debugger for inspecting XAML code at runtime. Using these tools, the XAML code is presented in the form of a visual tree of the current WPF application, along with the various properties of the UI element. Follow the steps below to enable this tool.
step 1− Go to the "Tools" menu and select "Options" in the "Tools" menu.
step 2− You will see the following dialog box.
step 3− Go to General under Debug on the left.
step 4− Select the highlighted option, e.g. "Enable UI debugging tools for XAML"
step 5− Press the OK button.
Now run any XAML application or use the following XAML code −
   < ComboBoxItem Content = "Geel" IsSelected = "True"/>    
While the application is running, a real-time visual tree is displayed with all the items displayed in the tree.
This live visual structure shows the entire layout structure to help you understand where UI elements are placed. But this option is only available in Visual Studio 2015. If you are using an older version of Visual Studio, this tool is not available, but there is another tool that integrates with Visual Studio, such as XAML Spy for Visual Studio. you can download it fromhttp://xamlspy.com/download.If you are using an older version of Visual Studio, we recommend downloading this tool.
XAML has one of the most powerful features available for creating custom controls, making it very easy to create feature-rich and customizable controls. Use custom controls when none of Microsoft's built-in controls meet your standards or you don't want to pay for 3awayparty control.
In this chapter, you learn how to create custom controls. Before we look at custom controls, let's take a look at user controls.
control by the user
User controls provide a technique for collecting and combining several built-in controls and packaging them in reusable XAML. User controls are used in the following scenarios −
If a control is composed of existing controls, you can use multiple existing controls to create a single control.
If the control does not need theme support. User controls do not support complex customizations, control templates, and are difficult to configure.
If a developer prefers to write controls using a code-behind model, where an event handler view is written, followed by direct code.
You don't share your control over all apps.
Let's take User Control as an example and follow the steps below −
step 1- Create a new WPF project, right click on your solution and select Add > New project...
step 2− The following dialog box opens, now selectUser Control (WPF)and was calledmy user control.
step 3- Click the Add button and you will see two new files (MyUserControl.xaml and MyUserControl.cs) added to your solution.
Below is the XAML code that creates a button and a text box using some properties from the MyUserControl.xaml file.
    
Below is the C# code for the button click event in the MyUserControl.cs file that updates the text box.
use System, use System.Windows, use System.Windows.Controls, namespace XAMLUserControl { ///
/// Interactielogica van MyUserControl.xaml ///
public partial class MyUserControl: UserControl { public MyUserControl() { InitializeComponent(); } private void button_Click(Object sender, RoutedEventArgs e) { txtBox.Text = "You just clicked the button"? } }}
This is the implementation in MainWindow.xaml to add the user controls.
   
When you compile and run the above code, it produces the following output −
Now click on the "Click Me" button and you will see that the text of the text box has been updated.
custom control
A custom control is a class that provides its own styles and templates, usually defined inallgemeen.haml.Custom controls are used in the following scenarios:
If the control doesn't exist and you need to create it from scratch.
If you want to extend or add functionality to an existing control by adding additional properties or additional functions that fit your specific scenario.
If your control needs to support themes and styles.
If you want to share your control over all apps.
Let's take custom controls as an example and follow the steps below.
step 1- Create a new WPF project, right click on your solution and select Add > New project...
step 2− The following dialog box opens. choose nowCustom Controls (WPF)and was calledmy custom check.
step 3- Click the Add button and you will see two new files (Themes/Generic.xaml and MyCustomControl.cs) added to your solution.
Below is the XAML code to format the custom control in the Generic.xaml file.
 
Below is the C# code of the MyCustomControl class, which inherits from the Button class and overrides the metadata in the constructor.
Use System · Use System.Windows? Use System.Windows.Controls? Namespace xamlcustomControls { public class myCustomControl: button { static myCustomControl() { defaultStyleKeProperty.OverrideMetAdata(myCustomControl)}
Below is the implementation of the custom check-click event in C# that updates the text of the text block.
use System, use System.Windows, use System.Windows.Controls, namespace XAMLCustomControls { ///
/// MainWindow.xaml interaction logic ///
public partial class MainWindow: Window { public MainWindow() { InitializeComponent(); } private void customControl_Click(Object sender, RoutedEventArgs e) { txtBlock.Text = "You just clicked your custom control"; } }}
Below is the implementation in MainWindow.xaml to add custom controls and TextBlock.
    
When you compile and run the above code, it produces the following output. The monitoring output contains a custom control that is a custom button.
Now click on the Customize button. You will see the text of the text block updated.
 
 
 
Remark
 
 
 
Remark
 
(Video) Visual Studio 2022 for .NET XAML developers