Статьи

31 Дней Манго | День № 18: Использование образцов данных

Январь 9, 2019

Эта статья является частью серии под названием « 31 день манго» .

Day18-ExpressionBlendSampleData

Сегодня мы собираемся изучить еще одну замечательную функцию Expression Blend, создав несколько примеров данных, которые может использовать наше приложение. Много раз, когда вы начинаете создавать приложение, вы хотите увидеть, как будут выглядеть данные в пользовательском интерфейсе задолго до того, как база данных (или веб-служба) будет фактически готова. Для этого мы можем использовать Expression Blend.

Поскольку в прошлом я рассмотрел Expression Blend и многие его функции, я дам вам несколько рекомендованных к прочтению здесь:

Для сегодняшней статьи мы просто погрузимся прямо в.

Создание приложения для Windows Phone

Как и в большинстве моих постов в этой серии, я также создал видео, чтобы продемонстрировать, чего я пытаюсь достичь с помощью этой статьи. Я объясню все, что показано в видео, но если вы предпочитаете сначала посмотреть его, вот оно:

Мы начнем с создания нового проекта Windows Phone. Надеюсь, вы уже много раз делали это в Visual Studio 2010, поэтому на этот раз я расскажу вам, как это сделать в Expression Blend.

образ

Когда у вас будет новый проект с открытой страницей MainPage.xaml, мы добавим ListBox на нашу страницу. Для этого щелкните стрелку в левой части меню, выберите элементы управления и щелкните значок ListBox.

образ

После того, как вы выбрали ListBox, вы можете нажать и перетащить его на поверхность вашего дизайна.

образ

Я расширил свой ListBox, чтобы он занимал все пространство внутри моей ContentPanel Grid, которая была создана по умолчанию при создании проекта. (Это все пространство под текстом «название страницы» на экране.

Создание некоторых образцов данных

Если вы посмотрите в верхнем правом углу Expression Blend, вы должны увидеть вкладку со словом «Данные» на ней. Откройте эту вкладку.

образ

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

образ

Откроется диалоговое окно «Новые данные образца». Дайте вашим данным имя (я назвал мою Мебель, чтобы следовать примеру, который я использовал в видео.)

образ

Вы заметите, что у вас есть возможность определить эти данные в вашем проекте или на конкретной странице. Я рекомендую выбрать «Проект», потому что он создаст кучу полезных структур в вашем приложении, которые вы можете использовать на постоянной основе.

Нажав OK, вы вернетесь на вкладку «Данные» с несколькими добавленными новостями.

образ

Теперь у нас есть структура, которая должна выглядеть знакомой всем, кто раньше работал с базой данных. «Мебель» представляет нашу базу данных, а «Коллекция» представляет собой таблицу в этой базе данных. «Property1» и «Property2» — это поля в таблице «Коллекция».

Я собираюсь добавить два новых свойства в базу данных и переименовать существующие два, чтобы все было немного более наглядно. Коллекция станет «Стульями», и теперь у нас есть 4 свойства: SKU, Price, Description и Image.

образ

В правом конце каждого из свойств есть значок, указывающий, к какому типу данных это относится. Для Description я хочу, чтобы это была длинная строка слов. Вы можете сделать это, выбрав тип строки «Lorem Ipsum». Это даст нам случайные строки из 20 слов, причем ни одно слово не будет длиннее 8 символов.

образ

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

образ

Я быстро установлю для свойства Price значение типа String / Price, а для SKU — значение Number с 6 символьными значениями.

образобраз

Если вы нажмете кнопку «Просмотр образцов данных» справа от заголовка «Стулья», вам будет показана сетка данных, которая содержит рандомизированные данные для каждого из указанных нами свойств. Изменяя значение поля «Количество записей» внизу, вы можете определить, сколько записей данных вы хотели бы использовать.

SNAGHTML27ad8b6d

Так что у вас есть это. Мы создали несколько образцов данных. В этот момент вы, вероятно, смотрите на пример данных выше, пытаясь выяснить, как он знал, как использовать изображения стульев. Независимо от того, как вы называете свои структуры данных, если вы используете тип изображения и не указываете набор изображений, этот набор изображений стула всегда будет использоваться. Никакой магии, просто хитрая демонстрация.

Чтобы изменить изображения на что-то более подходящее для вашего проекта, вы можете заново открыть определение для свойства Image, которое я создал, и указать папку на вашем компьютере. Когда вы сделаете это, вы получите примерные значения, которые будут выглядеть примерно так (при условии, что вы использовали те же изображения, что и я).

SNAGHTML27b15a01

Теперь пришло время использовать эти данные.

Использование примеров данных в приложении Windows Phone

Во-первых, даже если это называется «Пример данных», «если у вас есть небольшой набор статических данных, которые вы собираетесь использовать в своем приложении, нет ничего плохого в том, чтобы сделать это постоянной частью вашего приложения. При этом, чтобы получить эти данные в нашем ListBox, который мы создали намного ранее в этой статье, вы можете просто перетащить узел «Стулья» со вкладки «Данные» прямо в элемент управления Listbox, как показано ниже (синее поле — моя мышь перетаскивая данные в ListBox… нажмите, чтобы увеличить):

образ

В тот момент, когда вы отпускаете свои данные, они сразу создают для вас две вещи:

  • DataTemplate для размещения отдельных элементов в ListBox.
  • Связывание между SampleData и вашим ListBox.

В этом примере DataTemplate хранится непосредственно на нашей странице MainPage.xaml и выглядит следующим образом:

<DataTemplate x:Key="ChairsItemTemplate">
    <StackPanel>
        <TextBlock Text="{Binding Description}"/>
        <Image Source="{Binding Image}" HorizontalAlignment="Left" Height="64" Width="64"/>
        <TextBlock Text="{Binding Price}"/>
        <TextBlock Text="{Binding SKU}"/>
    </StackPanel>
</DataTemplate>

Вы увидите, что наш ListBox содержит привязку ItemTemplate к этому DataTemplate, а ItemSource определяется как наши данные стульев:

<ListBox Margin="8,8,0,8" ItemTemplate="{StaticResource ChairsItemTemplate}" ItemsSource="{Binding Chairs}"/>

Чтобы отредактировать внешний вид DataTemplate, мы также можем использовать Expression Blend. Щелкните правой кнопкой мыши свой ListBox в Expression Blend и выберите

Изменить дополнительные шаблоны> Изменить сгенерированные элементы (ItemTemplate)> Изменить текущий

образ

Делая это, вы должны заметить, что некоторые вещи в нашем интерфейсе изменились. Во-первых, в верхней части нашей панели дизайна, теперь это означает, что мы работаем над ItemTemplate нашего ListBox.

образ

Во-вторых, взгляните на панель «Объекты и временная шкала». Теперь он специально ориентирован на содержимое ItemTemplate, которое содержит 3 TextBlocks и элемент управления Image.

образ

Теперь мы также можем манипулировать элементами нашего ItemTemplate непосредственно в области дизайна. Например, я только что увеличил первое изображение. Поскольку мы редактируем шаблон, вы заметите, что все изображения также стали больше.

образ

На следующем изображении вы заметите, что я переместил текстовый блок Description в нижнюю часть шаблона и выровнял все текстовые блоки по правому краю. В шрифте Price также увеличен размер шрифта, а цвет переднего плана теперь зеленый.

образ

На данный момент, если у вас нет необходимости делать это красивее, у вас есть работающее приложение. Запуск его в эмуляторе приведет к созданию приложения с прокруткой ListBox. Вот как это выглядит, основываясь на изменениях, которые я сделал:

образ

Где хранятся все эти данные?

Поскольку мы можем развернуть это приложение в эмуляторе, и данные появляются, и мы можем использовать их и манипулировать ими, вам может быть интересно, как это хранится в нашем приложении и как оно работает.

Если вы посмотрите на структуру вашего проекта, вы должны заметить новую папку с именем SampleData.

образ

Внутри этой папки у вас есть файл Furniture.xaml, который содержит ваши фактические сгенерированные данные. Его содержимое выглядит так:

<!--
      *********    DO NOT MODIFY THIS FILE     *********
      This file is regenerated by a design tool. Making
      changes to this file can cause errors.
-->
<SampleData:Furniture xmlns:SampleData="clr-namespace:Expression.Blend.SampleData.Furniture" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
  <SampleData:Furniture.Chairs>
    <SampleData:ChairsItem SKU="366413" Price="$100" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day1-EmulatorTools.png" Description="Nam aliquam sed dis cras class duis integer maecenas praesent" />
    <SampleData:ChairsItem SKU="420965" Price="$29.99" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day10-NetworkInformation.png" Description="Accumsan aenean quisque bibendum mauris curae nullam donec vivamus est aliquam" />
    <SampleData:ChairsItem SKU="727463" Price="$249.99" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day11-LiveTiles.png" Description="Nunc aliquet blandit aptent auctor hac congue dictumst eleifend amet etiam ante fusce leo commodo facilisi cursus conubia dictum" />
    <SampleData:ChairsItem SKU="549249" Price="$1000" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day12-BetaTesting.png" Description="Lectus cubilia libero arcu dapibus lorem mus faucibus diam habitant egestas" />
    <SampleData:ChairsItem SKU="829031" Price="$2.99" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day13-MarketplaceTestKit.png" Description="Euismod inceptos nec eget interdum non elit morbi feugiat nulla ligula gravida lobortis iaculis litora" />
    <SampleData:ChairsItem SKU="758558" Price="$300" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day14-OData.png" Description="Proin enim lacinia laoreet augue nascetur natoque erat dolor per posuere" />
    <SampleData:ChairsItem SKU="342996" Price="$10,999" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day15-ProgressBar.png" Description="Fames sed sem felis sit eros vel nam ipsum justo sed nibh" />
    <SampleData:ChairsItem SKU="604077" Price="$49.99" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day16-IsolatedStorageExplorer.png" Description="Nisi potenti pretium dis pharetra nisl placerat pulvinar luctus lacus est hac sagittis nunc lorem magnis rhoncus leo sodales" />
    <SampleData:ChairsItem SKU="673946" Price="$25.34" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day17-LocalDatabase.png" Description="Viverra odio orci mattis mus magna massa pede quam aliquam senectus metus nec morbi" />
    <SampleData:ChairsItem SKU="177653" Price="$100" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day17-WindowsAzure.png" Description="Non mauris sociosqu integer suscipit quisque torquent mollis quis per ultrices vehicula sed neque" />
    <SampleData:ChairsItem SKU="788040" Price="$100" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day18-ExpressionBlendSampleData.png" Description="Aenean nam cras maecenas duis class nunc aliquam sed amet praesent dis mauris" />
    <SampleData:ChairsItem SKU="547641" Price="$100" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day19-AddingTiltEffects.png" Description="Integer ante arcu diam accumsan bibendum est nullam dictumst eleifend curae aptent eget donec quisque elit facilisi faucibus" />
    <SampleData:ChairsItem SKU="401054" Price="$29.99" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day2-DeviceStatus.png" Description="Enim habitant vivamus auctor etiam fusce congue aliquam erat inceptos" />
    <SampleData:ChairsItem SKU="256092" Price="$249.99" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day20-Ringtones.png" Description="Interdum lobortis aliquet blandit commodo hac conubia lorem cubilia leo nascetur eros pharetra cursus" />
    <SampleData:ChairsItem SKU="852495" Price="$1000" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day21-Sockets.png" Description="Dapibus nibh placerat nisi mus nec morbi nulla nisl proin egestas non euismod" />
    <SampleData:ChairsItem SKU="657020" Price="$2.99" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day22-AppConnect.png" Description="Per pulvinar feugiat dictum sed gravida sem iaculis sagittis sit lectus lacinia nunc laoreet odio" />
    <SampleData:ChairsItem SKU="450567" Price="$300" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day23-ExecutionModel.png" Description="Augue senectus vel nam sed orci sociosqu dis libero dolor natoque pede ligula fames posuere felis est potenti quam" />
    <SampleData:ChairsItem SKU="546952" Price="$10,999" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day24-ProfilerTool.png" Description="Litora luctus hac ipsum suscipit magnis torquent pretium rhoncus leo quis justo sodales urna mus ultrices lacus lorem viverra nec" />
    <SampleData:ChairsItem SKU="481783" Price="$49.99" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day25-BackgroundAgents.png" Description="Mattis cras aliquam duis nunc amet magna mauris massa ante integer mollis non per sed quisque" />
    <SampleData:ChairsItem SKU="200702" Price="$25.34" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day26-BackgroundFileTransfers.png" Description="Metus morbi sem neque sit netus vel nam arcu vehicula sed volutpat nulla porta diam" />
    <SampleData:ChairsItem SKU="536695" Price="$100" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day27-MicrophoneAPI.png" Description="Dis purus montes vivamus eget maecenas aliquam elit nostra est risus velit" />
    <SampleData:ChairsItem SKU="275101" Price="$29.99" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day28-MediaLibrary.png" Description="Ornare vitae platea class aliquet hac curae primis praesent enim erat accumsan leo eros blandit bibendum donec nibh rutrum mus" />
    <SampleData:ChairsItem SKU="979319" Price="$249.99" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day29-Globalization.png" Description="Nec dictumst commodo nisi etiam nisl eleifend conubia cubilia nunc sapien fusce dapibus non semper sociis egestas" />
    <SampleData:ChairsItem SKU="234379" Price="$1000" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day3-Reminders.png" Description="Taciti odio euismod facilisi faucibus lorem habitant per tellus tempor sed orci inceptos feugiat pede morbi quam" />
    <SampleData:ChairsItem SKU="248085" Price="$2.99" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day30-ConnectionSettings.png" Description="Nulla tempus tortor proin interdum augue quis gravida iaculis lacinia turpis lobortis urna sem varius sit cras laoreet vel" />
    <SampleData:ChairsItem SKU="982403" Price="$300" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day31-PromotingYourApplication.png" Description="Nascetur nam sed aenean pharetra dis natoque posuere potenti mauris pretium dolor fames placerat nullam aptent" />
    <SampleData:ChairsItem SKU="106433" Price="$10,999" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day4-Compass.png" Description="Est pulvinar duis rhoncus sodales felis nunc hac viverra amet ante ipsum auctor congue" />
    <SampleData:ChairsItem SKU="203433" Price="$49.99" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day5-Gyroscope.png" Description="Leo cursus mus arcu dictum nec diam sagittis aliquam eget non integer lectus elit per enim erat senectus" />
    <SampleData:ChairsItem SKU="660918" Price="$25.34" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day6-Motion.png" Description="Libero justo ligula sed sociosqu sem eros lacus suscipit sit torquent litora quisque nibh nisi nisl lorem" />
    <SampleData:ChairsItem SKU="734363" Price="$100" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day7-RawCamera.png" Description="Nunc magna vel massa luctus odio nam orci ultrices vivamus sed" />
  </SampleData:Furniture.Chairs>
</SampleData:Furniture>

Фактическая структура данных в этом файле определяется файлом Furniture.xaml.cs, который содержит классы и свойства, которые мы определили при первом создании наших образцов данных. Вы можете видеть, что каждое из свойств показано здесь, а также ссылки на расположение наших образцов изображений.

//      *********    DO NOT MODIFY THIS FILE     *********
//      This file is regenerated by a design tool. Making
//      changes to this file can cause errors.
namespace Expression.Blend.SampleData.Furniture
{
    using System;

// To significantly reduce the sample data footprint in your production application, you can set
// the DISABLE_SAMPLE_DATA conditional compilation constant and disable sample data at runtime.
#if DISABLE_SAMPLE_DATA
    internal class Furniture { }
#else

    public class Furniture : System.ComponentModel.INotifyPropertyChanged
    {
        public event System.ComponentModel.PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged(string propertyName)
        {
            if (this.PropertyChanged != null)
            {
                this.PropertyChanged(this, new System.ComponentModel.PropertyChangedEventArgs(propertyName));
            }
        }

        public Furniture()
        {
            try
            {
                System.Uri resourceUri = new System.Uri("/Day18_BlendSampleData;component/SampleData/Furniture/Furniture.xaml", System.UriKind.Relative);
                if (System.Windows.Application.GetResourceStream(resourceUri) != null)
                {
                    System.Windows.Application.LoadComponent(this, resourceUri);
                }
            }
            catch (System.Exception)
            {
            }
        }

        private Chairs _Chairs = new Chairs();

        public Chairs Chairs
        {
            get
            {
                return this._Chairs;
            }
        }
    }

    public class ChairsItem : System.ComponentModel.INotifyPropertyChanged
    {
        public event System.ComponentModel.PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged(string propertyName)
        {
            if (this.PropertyChanged != null)
            {
                this.PropertyChanged(this, new System.ComponentModel.PropertyChangedEventArgs(propertyName));
            }
        }

        private double _SKU = 0;

        public double SKU
        {
            get
            {
                return this._SKU;
            }

            set
            {
                if (this._SKU != value)
                {
                    this._SKU = value;
                    this.OnPropertyChanged("SKU");
                }
            }
        }

        private string _Price = string.Empty;

        public string Price
        {
            get
            {
                return this._Price;
            }

            set
            {
                if (this._Price != value)
                {
                    this._Price = value;
                    this.OnPropertyChanged("Price");
                }
            }
        }

        private System.Windows.Media.ImageSource _Image = null;

        public System.Windows.Media.ImageSource Image
        {
            get
            {
                return this._Image;
            }

            set
            {
                if (this._Image != value)
                {
                    this._Image = value;
                    this.OnPropertyChanged("Image");
                }
            }
        }

        private string _Description = string.Empty;

        public string Description
        {
            get
            {
                return this._Description;
            }

            set
            {
                if (this._Description != value)
                {
                    this._Description = value;
                    this.OnPropertyChanged("Description");
                }
            }
        }
    }

    public class Chairs : System.Collections.ObjectModel.ObservableCollection<ChairsItem>
    {
    }
#endif
}

Наконец, у вас есть папка Furniture_Files, в которой содержатся все примеры изображений, которые мы используем. Поскольку мы использовали как изображения стульев по умолчанию, так и мою собственную коллекцию, вы обнаружите, что каждое из изображений находится внутри этой папки для вас. Как показывают комментарии, если вы планируете снова редактировать этот пример данных из Expression Blend, не делайте этого. Ваши изменения будут отклонены. Это сгенерированные файлы кода, и их следует рассматривать как таковые.

Резюме

Итак, вот оно. У вас есть приложение, которое использует Образец Данных, который вы создали в Expression Blend для заполнения ListBox, используя DataTemplate. Есть много мест, где вы можете найти эту технику удобной, поэтому имейте это в виду для статических наборов данных, а не используйте что-то более сложное, например, базу данных или веб-сервис.

Если вы хотите загрузить все это работающее приложение для Windows Phone, которое использует эти образцы данных, нажмите кнопку Загрузить код ниже:

скачать

Завтра Даг Мэйр вернется, чтобы обсудить добавление эффектов наклона к вашим элементам XAML, что даст некоторое взаимодействие с сенсорными жестами вашего пользователя. Увидимся позже!

toolsbutton

Источник: http://www.jeffblankenburg.com/2011/11/18/31-days-of-mango-day-18-using-sample-data/

34
Share: