Использовать данные времени разработки с помощью средства предварительного просмотра XAMLUse Design Time Data with the XAML Previewer

Некоторые раскладки трудно визуализировать без данных. Используйте эти советы для наиболее эффективно использовать предварительный просмотр страниц данных доступно в средстве предварительного просмотра XAML.Some layouts are hard to visualize without data. Use these tips to make the most out of previewing your data-heavy pages in the XAML Previewer.

Основные сведения о данных времени разработкиDesign time data basics

Данные времени разработки является фиктивными данными, которые устанавливаются для упрощения ваших элементов управления для визуализации в средстве предварительного просмотра XAML.Design time data is fake data you set to make your controls easier to visualize in the XAML Previewer. Чтобы начать работу, добавьте следующие строки кода в заголовок страницы XAML:To get started, add the following lines of code to the header of your XAML page:

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

После добавления пространств имен, можно поместить d: перед любой атрибут или элемент управления, он будет отображаться в средстве предварительного просмотра XAML.After adding the namespaces, you can put d: in front of any attribute or control to show it in the XAML Previewer. Элементы с d: не отображаются во время выполнения.Elements with d: aren't shown at runtime.

Например можно добавить текст к метке, обычно имеет связанные с ним данные.For example, you can add text to a label that usually has data bound to it.

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

Проектирование данных времени с текстом в меткуDesign time data with text in a Label

В этом примере без d:Text, средство предварительного просмотра XAML не будет указывать ничего для метки.In this example, without d:Text, the XAML Previewer would show nothing for the label. Вместо этого показывается «Name»!Instead, it shows "Name!" где метка будет иметь реальные данные во время выполнения.where the label will have real data at runtime.

Можно использовать d: с любой атрибут для элемента управления Xamarin.Forms, как цвета, размеры шрифтов и интервал.You can use d: with any attribute for a Xamarin.Forms control, like colors, font sizes, and spacing. Можно даже добавить к самим элементом управления:You can even add it to the control itself:

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

Проектирование данных времени с помощью управления "Кнопка"Design time data with a Button control

В этом примере кнопка отображается только во время разработки.In this example, the button only appears at design time. Этот метод позволяет размещать заполнитель в для пользовательского элемента управления, не поддерживается средством просмотра XAML.Use this method to put a placeholder in for a custom control not supported by the XAML Previewer.

Изображения для предварительного просмотра во время разработкиPreview images at design time

Можно задать время разработки источника для изображений, которые привязаны к странице или динамически загружаться.You can set a design time Source for images that are bound to the page or loaded in dynamically. В проект Android, добавьте образа, который нужно отобразить в средстве предварительного просмотра XAML для ресурсы > Drawable папки.In your Android project, add the image you want to show in the XAML Previewer to the Resources > Drawable folder. В проекте iOS, добавлении образа ресурсы папки.In your iOS project, add the image to the Resources folder. Для демонстрации этого образа в средстве предварительного просмотра XAML во время разработки:You can then show that image in the XAML Previewer at design time:

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

Проектирование времени данных с изображениямиDesign time data with images

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

ListViews — это популярный способ отображения данных в мобильном приложении.ListViews are a popular way to display data in a mobile app. Но их сложно представить, без реальных данных.However, they're difficult to visualize without real data. Чтобы использовать данные времени разработки с ними, необходимо создать массив времени разработки для использования в качестве ItemsSource.To use design time data with them, you have to create a design time array to use as an ItemsSource. Средство предварительного просмотра XAML отображает то, что в этот массив в вашей ListView во время разработки.The XAML Previewer displays what is in that array in your ListView at design time.

<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>

Проектирование данных времени с помощью ListViewDesign time data with a ListView

В этом примере показано ListView три TextCells в средстве предварительного просмотра XAML.This example will show a ListView of three TextCells in the XAML Previewer. Вы можете изменить x:String к существующей модели данных в проекте.You can change x:String to an existing data model in your project.

Ссылаться на Монтеманьо Hanselman.Forms приложения более сложный пример.Refer to James Montemagno's Hanselman.Forms app for a more complex example.

Альтернативный способ. Жестко задавать статические ViewModelAlternative: Hardcode a static ViewModel

Если вы не хотите добавить данные времени разработки на отдельные элементы управления, можно настроить в хранилище данных макетов для привязки к странице.If you don't want to add design time data to individual controls, you can set up a mock data store to bind to your page. Ссылаться на Монтеманьо записи блога о добавлении данных во время разработки чтобы узнать, как выполнить привязку к статическим ViewModel в XAML.Refer to James Montemagno's blog post on adding design-time data to see how to bind to a static ViewModel in XAML.

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

ТребованияRequirements

Данные времени разработки требуется Минимальная версия Xamarin.Forms 3.6.Design time data requires a minimum version of Xamarin.Forms 3.6.

IntelliSense отображает волнистые линии под данными времени разработкиIntelliSense shows squiggly lines under my design time data

Это известная проблема и будет устранена в последующих версиях Visual Studio.This is a known issue and will be fixed in an upcoming version of Visual Studio. Проект по-прежнему будет построен без ошибок.The project will still build without errors.

Средство предварительного просмотра XAML завершил свою работуThe XAML Previewer stopped working

Попробуйте закрыть и повторно открыть файл XAML и очистки и перестроения проекта.Try closing and reopening the XAML file, and cleaning and rebuilding your project.