TOC

This article has been localized into Ukrainian by the community.

Користувацькі & спеціальні елементи керування:

Створення & використання користувацьких елементів керування

Користувацькі елементи керування у WPF представлений класом UserControl. Його суть полягає у групуванні розмітки та коду в контейнер, який можна повторно використовувати. Тобто він може бути використаний у кількох місцях в застосунку і навіть в кількох застосунках.

Користувацький елемент управління поводиться схоже на вікно у WPF. Він містить простір, у який можна вмістити інші елементи керування та код, що дає можливість взаємодіяти з ними. Файл, що містить користувацький елемент керування має розширення .xaml, а код - .xaml.cs. Так само, як і у вікна. Хоча базова розмітка дещо відрізняється:

<UserControl x:Class="WpfTutorialSamples.User_Controls.LimitedInputUserControl"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     mc:Ignorable="d"
     d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
   
    </Grid>
</UserControl>

Однак тут немає нічого дивного: корінний елемент UserControl, замість Window, та властивості DesignHeight і DesignWidth, що визначають розмір елемента під час розробки (при запуску розмір елементу задається контейнером). Те саме й у C# коді: клас успадковується від UserControl, а не від Window.

Створення користувацького елементу керування

Користувацький елемент управління додається до проєкту так само, як вікно. Просто виберіть відподівний пункт у контекстному меню проєкту чи папки, куди ви хочете додати елемент. Все, як показано на скріншоті (хоча вигляд може відрізнятися, в залежності від версії Visual Studio):

Для цієї статті ми сто=воримо досить корисний користувацький елемент. Він двстановлює ліміт кількості символів у TextBox, а також показує користувача кількість використаних символів та їх ліміт. Це досить просто зробити. Такий елемент керування використовується в багатьох WEB-додатках, наприклад в Twitter. Можна просто додати цю функціональність до вікна, однак краще загорнути її в елемент, який можна повторно використовуввти.

Перш ніж переходити до коду, погляньмо на кінцевий результат:

Ось код самого користувацького елемента керування

<UserControl x:Class="WpfTutorialSamples.User_Controls.LimitedInputUserControl"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     mc:Ignorable="d"
     d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>      
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Content="{Binding Title}" />
<Label Grid.Column="1">
    <StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding ElementName=txtLimitedInput, Path=Text.Length}" />
<TextBlock Text="/" />
<TextBlock Text="{Binding MaxLength}" />
    </StackPanel>
</Label>
<TextBox MaxLength="{Binding MaxLength}" Grid.Row="1" Grid.ColumnSpan="2" Name="txtLimitedInput" ScrollViewer.VerticalScrollBarVisibility="Auto" TextWrapping="Wrap" />
    </Grid>
</UserControl>
using System;
using System.Windows.Controls;

namespace WpfTutorialSamples.User_Controls
{
    public partial class LimitedInputUserControl : UserControl
    {
public LimitedInputUserControl()
{
    InitializeComponent();
    this.DataContext = this;
}

public string Title { get; set; }

public int MaxLength { get; set; }
    }
}

Розмітка тут нехитра; контейнер Grid з двома рядками та колонками. Верхня частина контейнеру містить два написи. Перший містить заголок, а другий показники. Для показу інформації вони обидва використовують прив'язку, а саме властивості Title та MaxLength, визначені у C# коді.

Поточну кількість символів ми отримуємо, прив'язуючи властивість Text.Length на елементі TextBox, розміщеному знизу. Результат показано на скріншоті вище. Зверніть увагу на те, що завдяки прив'язкам нам не потрібен жоден C# код для оновлення написів.

Використання користувацьких елементів керування

Тепер, після створення користувацького елементу керування ми можемо використати його всередині вашого вікна. Для цього потрібно підключити простір імен, у якому знаходиться наш елемент. Ось так:

xmlns:uc="clr-namespace:WpfTutorialSamples.User_Controls"

Після цього ми можемо використовувати перфікс "uc ", щоб додати елемент керування до нашого вікна, так само як і будь-який інший елемент керування.

<uc:LimitedInputUserControl Title="Enter title:" MaxLength="30" Height="50" />

Запам'ятайте, як ми використали властивості Titleта MaxLength безпосередньо у XAML. Ось весь код нашого вікна:

<Window x:Class="WpfTutorialSamples.User_Controls.LimitedInputSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:uc="clr-namespace:WpfTutorialSamples.User_Controls"
Title="LimitedInputSample" Height="200" Width="300">
    <Grid Margin="10">
<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>

<uc:LimitedInputUserControl Title="Enter title:" MaxLength="30" Height="50" />
<uc:LimitedInputUserControl Title="Enter description:" MaxLength="140" Grid.Row="1" />

    </Grid>
</Window>

Тепер ми можемо повторно використовувати весь набір функцій всього одним рядком кожу. Як це показано на прикладі з двома обмеженими полями для вводу тексту. як уже показано, результат виглядає ось так:

Підсумок

Рекомендую розмішувати часто вживані інтерфейси та набори функцій в користувацьких елементах керування, оскільки їх дуже легко створювати та використовувати.

This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!