Использование данных времени разработки с помощью средства предварительного просмотра XAML

Мақала
03/11/2024

Некоторые макеты трудно визуализировать без данных. Используйте эти советы, чтобы получить большую часть предварительного просмотра страниц с большим количеством данных в средстве предварительного просмотра XAML.

Предупреждение

Средство предварительного просмотра XAML устарело в Visual Studio 2019 версии 16.8 и Visual Studio для Mac версии 8.8 и заменено функцией XAML Горячая перезагрузка в Visual Studio 2019 версии 16.9 и Visual Studio для Mac версии 8.9. Дополнительные сведения о XAML Горячая перезагрузка см. в документации.

Примечание.

Если вы используете Windows Presentation Foundation (WPF) или UWP, см. раздел "Использование данных времени разработки" с конструктором XAML для классических приложений

Основы данных времени разработки

Данные времени разработки — это поддельные данные, которые позволяют упростить визуализацию элементов управления в средстве предварительного просмотра XAML. Чтобы приступить к работе, добавьте следующие строки кода в заголовок страницы XAML:

xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"

После добавления пространств имен можно поместить d: перед любым атрибутом или элементом управления, чтобы отобразить его в средстве предварительного просмотра XAML. Элементы со d: средой выполнения не отображаются.

Например, можно добавить текст в метку, которая обычно связана с данными.

<Label Text="{Binding Name}" d:Text="Name!" />

В этом примере без d:Textэтого средства предварительного просмотра XAML не будет отображаться ничего для метки. Вместо этого в нем показано "Имя!", где метка будет иметь реальные данные во время выполнения.

Вы можете использовать d: любой Xamarin.Forms атрибут для элемента управления, таких как цвета, размеры шрифтов и интервалы. Его можно даже добавить в сам элемент управления:

<d:Button Text="Design Time Button" />

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

Предварительный просмотр изображений во время разработки

Вы можете задать источник времени разработки для изображений, привязанных к странице или загруженных динамически. В проекте Android добавьте изображение, которое нужно отобразить в средстве предварительного просмотра XAML, в папку Resources > Drawable . В проекте iOS добавьте изображение в папку Resources . Затем можно отобразить это изображение в средстве предварительного просмотра XAML во время разработки:

<Image Source={Binding ProfilePicture} d:Source="DesignTimePicture.jpg" />

Данные времени разработки для ListViews

ListViews — это популярный способ отображения данных в мобильном приложении. Однако их сложно визуализировать без реальных данных. Чтобы использовать данные времени разработки с ними, необходимо создать массив времени разработки для использования в качестве ItemsSource. Средство предварительного просмотра XAML отображает то, что находится в этом массиве в ListView во время разработки.

<StackLayout>
    <ListView ItemsSource="{Binding Items}">
        <d:ListView.ItemsSource>
            <x:Array Type="{x:Type x:String}">
                <x:String>Item One</x:String>
                <x:String>Item Two</x:String>
                <x:String>Item Three</x:String>
            </x:Array>
        </d:ListView.ItemsSource>
        <ListView.ItemTemplate>
            <DataTemplate>
                <TextCell Text="{Binding ItemName}"
                          d:Text="{Binding .}" />
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

В этом примере будет отображаться ListView из трех TextCell в средстве предварительного просмотра XAML. Вы можете изменить x:String существующую модель данных в проекте.

Можно также создать массив объектов данных. Например, общедоступные свойства Monkey объекта данных можно создать в виде данных времени разработки:

namespace Monkeys.Models
{
    public class Monkey
    {
        public string Name { get; set; }
        public string Location { get; set; }
    }
}

Чтобы использовать класс в XAML, необходимо импортировать пространство имен в корневом узле:

xmlns:models="clr-namespace:Monkeys.Models"

<StackLayout>
    <ListView ItemsSource="{Binding Items}">
        <d:ListView.ItemsSource>
            <x:Array Type="{x:Type models:Monkey}">
                <models:Monkey Name="Baboon" Location="Africa and Asia"/>
                <models:Monkey Name="Capuchin Monkey" Location="Central and South America"/>
                <models:Monkey Name="Blue Monkey" Location="Central and East Africa"/>
            </x:Array>
        </d:ListView.ItemsSource>
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="models:Monkey">
                <TextCell Text="{Binding Name}"
                          Detail="{Binding Location}" />
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

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

Альтернатива: жесткий код статического представленияModel

Если вы не хотите добавлять данные времени разработки в отдельные элементы управления, можно настроить макет хранилища данных для привязки к странице. Обратитесь к записи блога Джеймса Монтемагно о добавлении данных во время разработки, чтобы узнать, как привязаться к статической версии ViewModel в XAML.

Устранение неполадок

Требования

Для данных времени разработки требуется минимальная версия Xamarin.Forms 3.6.

IntelliSense отображает скользячие линии в соответствии с данными времени разработки

Эта известная проблема и будет исправлена в предстоящей версии Visual Studio. Проект по-прежнему будет создаваться без ошибок.

Средство предварительного просмотра XAML перестало работать

Попробуйте закрыть и снова открыть XAML-файл, а также очистить и перестроить проект.

Бөлісу құралы: