Поделиться через

Пошаговое руководство: Добавление ссылки на начальной странице

  • Статья

В этом пошаговом руководстве рассматривается добавление ссылки DLL на пользовательскую начальную страницу. В примере в решение добавляется пользовательский элемент управления и выполняется его построение. Затем в XAML-файле начальной страницы создается ссылка на сборку. Пользовательский элемент управления, имеющий функции простого веб-браузера, размещается на новой вкладке.

Эти же действия можно выполнить для добавления любой сборки, которую можно вызвать из файла XAML.

Добавление пользовательского элемента управления WPF в решение

Вначале следует добавить пользовательский элемент управления Windows Presentation Foundation (WPF) в решение начальной страницы.

Добавление пользовательского элемента управления WPF в решение начальной страницы

  1. Создание домашней страницы с помощью шаблона проекта начальной страницы. Дополнительные сведения см. в разделе начальные страницы.

  2. Щелкните решение правой кнопкой мыши в Обозревателе решений и выберите команды Добавить и Новый проект.

  3. На левой панели диалогового окна Новый проект разверните узел Visual Basic или Visual C#, а затем щелкните элемент Windows. На средней панели выберите элемент Библиотека пользовательских элементов управления WPF.

  4. Назовите элемент управления WebUserControl и нажмите кнопку ОК.

Реализация пользовательского элемента управления

Чтобы реализовать пользовательский элемент управления WPF, выполните сборку пользовательского интерфейса в XAML-файле и создайте события с выделенным кодом на C# или на другом языке .NET.

Создание XAML-файла для пользовательского элемента управления

  1. Откройте XAML-файл пользовательского элемента управления в обозревателе решений.

  2. Добавьте следующие определения строк в элементе Grid пользовательского элемента управления.

    <Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="*" />
</Grid.RowDefinitions>

  3. В основном элементе Grid добавьте следующий элемент Grid, который содержит текстовое поле для ввода Интернет-адресов и кнопку для задания нового адреса.

    <Grid Grid.Row="0">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <TextBox x:Name="UserSource" Grid.Column="0" />
    <Button Grid.Column="1" x:Name="SetButton" Content="Set Address" Click="SetButton_Click" />
</Grid>

  4. Добавьте следующий фрейм в элемент верхнего уровня Grid сразу после элемента Grid, содержащего текстовое поле и кнопку.

    <Frame Grid.Row="1" x:Name="WebFrame" Source="https://www.bing.com" Navigated="WebFrame_Navigated" />

  5. В следующем примере показан полный код XAML-файла пользовательского элемента управления.

    <UserControl x:Class="WebUserControl.UserControl1"
             xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="https://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 Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <TextBox x:Name="UserSource" Grid.Column="0" />
            <Button Grid.Column="1" x:Name="SetButton" Content="Set Address" Click="SetButton_Click" />
        </Grid>
        <Frame Grid.Row="1" x:Name="WebFrame" Source="https://www.bing.com" Navigated="WebFrame_Navigated" />
    </Grid>
</UserControl>

Создание событий с выделенным кодом для пользовательского элемента управления

  1. Дважды щелкните добавленную в элемент управления кнопку Set Address в конструкторе XAML.

    В редакторе кода откроется файл UserControl1.cs.

  2. Заполните обработчик события SetButton_Click следующим образом.

    private void SetButton_Click(object sender, RoutedEventArgs e)
{
    try
    {
        this.WebFrame.Source = new Uri(this.UserSource.Text, UriKind.Absolute);
    }
    catch (Exception error)
    {
        MessageBox.Show(error.Message);
    }
}

    Этот код устанавливает введенный в текстовое поле веб-адрес в качестве целевого адреса веб-браузера. Если адрес недействителен, то код выводит ошибку.

  3. Выполните построение решения.

Добавление пользовательского элемента управления на начальную страницу

Чтобы сделать этот элемент доступным в проекте начальной страницы, добавьте ссылку на новую библиотеку элементов управления в файле проекта. Затем элемент управления можно добавить в разметку XAML-файла начальной страницы.

Добавление пользовательского элемента управления в проект

  1. В обозревателе решений перейдите к проекту начальной страницы, щелкните правой кнопкой элемент Ссылки и выберите команду Добавить веб-ссылку.

  2. На вкладке Проекты выберите элемент WebUserControl, после чего нажмите кнопку ОК.

  3. В меню Построение выберите Построить решение.

    Построение решения предоставляет пользовательский элемент управления в IntelliSense для других файлов решения.

Чтобы добавить элемент управления в разметку XAML начальной страницы, добавьте ссылку на пространство имен сборки, а затем разместите элемент управления на странице.

Добавление элемента управления в разметку

  1. Откройте XAML-файл начальной страницы в обозревателе решений.

  2. На панели XAML добавьте следующее объявление пространства имен в элемент верхнего уровня Grid.

    xmlns:vsc="clr-namespace:WebUserControl;assembly=WebUserControl"

  3. На панели XAML найдите раздел с комментарием <!—Center Content-->.

    Этот раздел содержит элемент TabControl в элементе Grid.

  4. Добавьте следующий элемент TabItem со ссылкой на пользовательский элемент управления в верхнюю часть элемента TabControl.

    <TabItem Header="Web" Height="Auto">
    <vsc:UserControl1 />
</TabItem>

Теперь можно протестировать элемент управления.

Тестирование пользовательской начальной страницы

  1. Нажмите клавишу F5.

    Экспериментальном экземпляре Visual Studio, открытых с пользовательской начальной устанавливанная но не выбранной страницей.

  2. В экспериментальном экземпляре Visual Studio Сервис меню выберите команду Параметры.

  3. в Параметры диалоговое окно вниз Средавыберите Запуск. Затем на Настройка начальной страницы выберите пользовательский xaml-файл, и нажмите кнопку ОК.

  4. Если начальная страница не отображается, то на Просмотреть меню выберите команду Начальная страница.

  5. Перейдите на вкладку Веб.

  6. Введите URL-адрес в поле поиск и нажмите кнопку Задать адрес кнопка.

    Загрузки страницы.

Следующие действия

Можно совместно использовать пользовательские начальной страницы с другими пользователями, передав файл vsix из папки /Bin/Debug/ в проект коллекция Visual Studio Веб-сайт или в другую общую папку веб-сайта или интрасети.

См. также

Задачи

Пошаговое руководство: Добавление пользовательского XAML на начальной странице

Ссылки

System.Windows.Controls

Другие ресурсы

Настройка начальной страницы в Visual Studio

WPF Container Controls