Опубликован: 08.07.2011 | Уровень: для всех | Доступ: платный
Лекция 4:

Разработка приложений на базе WPF

< Лекция 3 || Лекция 4: 1234 || Лекция 5 >

Формирование начальной страницы приложения

В последнее время разработчики корпоративных приложений начали осознавать преимущества технологий веб-дизайна, которые базируются на качественном дизайне, четком и понятном интерфейсе. Технология WPF позволяет создавать страничную модель (приложения), с готовыми средствами навигации. Как правило, для каждой страницы приложения создается файл XAML и файл отдельного кода, например на языке C#. При компиляции такого приложения компилятор создает производный класс страницы, который объединяет написанный код с генерируемыми автоматически связующими элементами.

Страницы можно размещать внутри окон и внутри других страниц. В WPF при создании страничных приложений контейнером наивысшего уровня могут быть следующие объекты:

  • NavigationWindow, который представляет собой несколько видоизмененную версию класса Window ;
  • Frame, находящийся внутри другого окна или другой страницы;
  • Frame, обслуживаемый непосредственно в Internet Explorer.

Для вставки страницы внутрь окна будем использовать класс Frame ( рис. 4.4). Автоматически будет сгенерирован экземпляр класса Frame с фиксированными границами ( рис. 4.5).

Выбор класса Frame в панели инструментов

увеличить изображение
Рис. 4.4. Выбор класса Frame в панели инструментов
Фрейм с фиксированными границами

Рис. 4.5. Фрейм с фиксированными границами

В XAML-документ проекта будет добавлена следующая строка:

<Frame Height="100" HorizontalAlignment="Left" 
Name="frame1" VerticalAlignment="Top" Width="200" />

С учетом того, что создается страничное приложение размеры фрейма не нужно фиксировать, поэтому изменим описание свойств фрейма:

<Frame Name="frame1" Margin="3" />

В результате фрейм заполнит всё окно ( рис. 4.6):

Фрейм, заполняющий всё окно

увеличить изображение
Рис. 4.6. Фрейм, заполняющий всё окно

Созданный фрейм необходим для размещения в нем страницы WPF-приложения. Класс Page допускает наличие только одного вложенного элемента. Он не является элементом управления содержимым и наследуется от класса FrameworkElement. Класс Page имеет небольшой набор дополнительных свойств, которые позволяют настраивать его внешний вид, взаимодействовать с контейнером и использовать навигацию. Для перехода на другую страницу необходимо использовать навигацию.

Класс Page имеет следующие свойства:

  • Background – принимает кисть, которая устанавливает заливку для фона;
  • Content – принимает один элемент, который отображается на странице. Обычно в роли такого элемента выступает контейнер макета (элемент Grid или StackPanel );
  • Foreground, FontFamile, FontSize – определяет используемый по умолчанию внешний вид для текста внутри страницы. Значение этих свойств наследуется элементами внутри страницы.
  • WindowWidth, WindowHeight – определяет внешний вид окна, в которое упаковывается страница (не действуют, если страница обслуживается во фрейме);
  • NavigationService – возвращает ссылку на объект NavigationService, которую можно использовать для отправки пользователя на другую страницу программным путем;
  • KeepAlive – определяет, должен ли объект страницы оставаться действующим после перехода пользователя на другую страницу;
  • ShowsNavigationUI – определяет, должны ли в обслуживающем данную страницу хосте отображаться навигационные элементы управления;
  • Title – устанавливает имя, которое должно применяться для страницы в хронологии навигации;
  • Window Title – устанавливает заголовок окна, который отображается в строке заголовка.

Добавим в проект начальную страницу. Для этого в Обозревателе решений щелкнем правой кнопкой мыши на проекте WpfApplProject. В контекстном меню выберем пункт Добавить (1 – на рис. 4.8), а в раскрывающемся меню пункт Страница (2 на рис. 4.7).

В окне Добавления нового элемента необходимо выбрать шаблон " Страница (WPF) " (1) и задать имя страницы PageMain (2 на рис. 4.8).

Меню создания страницы

увеличить изображение
Рис. 4.7. Меню создания страницы
Окно  Добавления нового элемента

увеличить изображение
Рис. 4.8. Окно Добавления нового элемента

В дизайнере проекта сгенерируется страница PageMain.xaml ( рис. 4.9).

Дизайнер страницы PageMain.xaml

увеличить изображение
Рис. 4.9. Дизайнер страницы PageMain.xaml

В сгенерированной странице в качестве контейнера верхнего уровня используется Grid. Заменим Grid на контейнер StackPanel.

Объект StackPanel имеет свойство Background, которое предоставляет кисть для рисования фоновой области элемента. Данное свойство является сложным, т.е. должно задаваться в следующем виде:

<StackPanel.Background>
... 
</StackPanel.Background>

Классы кистей наследуются от класса System.Windows.Media.Brush и обеспечивают различные эффекты при заполнении фона, переднего плана или границ элементов. Некоторые классы кистей приведены ниже:

  • LineaGradientBrush – рисует область, используя линейное градиентное заполнение, представляющее собой плавный переход от одного цвета к другому;
  • RadialGradientBrush – рисует область, используя радиальное градиентное заполнение, представляющее собой плавный переход от одного цвета к другому в радиальном направлении от центральной точки;
  • ImageBrush – рисует область, используя графическое изображение, которое может растягиваться, масштабироваться или многократно повторяться;
  • DrawingBrush – рисует область, используя объекты Drawing, которые могут быть пользовательскими фигурами или битовыми картами;
  • VisualBrush – рисует область, используя объекты Visual.

Создадим градиентную заливку созданной страницы. Для определения градиентной заливки необходимо создать объект LinearGradientBrush. Далее необходимо заполнить свойство LinearGradientBrush.GradientStops коллекцией объектов GradientStop. Каждый объект GradientStop имеет свойства Offset и Color, значение которых задаются в соответствии с синтаксисом " свойство - атрибут ". Свойство Offset может принимать значение от 0 до 1, определяя области заполнения градиентом от одного цвета к другому.

Далее приведен фрагмент XAML-документа для определения градиентной заливки страницы.

<StackPanel.Background>
    <LinearGradientBrush>
        <LinearGradientBrush.GradientStops>
            <GradientStop Offset="0.00" Color="#FF87A0DE"/>
            <GradientStop Offset="0.50" Color="Azure"/>
            <GradientStop Offset="1.00" Color="#FF009CFF"/>
        </LinearGradientBrush.GradientStops>
    </LinearGradientBrush>
</StackPanel.Background>

Добавим в страницу текстовую строку "Система внутреннего учета инвестиционной компании".

<TextBlock Margin="25,30,25, 5" FontSize="20">
          Система внутреннего учета инвестиционной компании
</TextBlock>

Подключим созданную страницу к фрейму. Для этого в разметке фрейма необходимо указать источник его заполнения Source, а также определим свойства Foreground, BorderBrush и Background.

<Frame Name="frame1" Margin="3"
   Source="PageMain.xaml" 
   Foreground="#FFE4D8D8" 
   BorderBrush="#FFF7F3F3" 
   Background="#FFB3D9E5"/>

Главная страница приложения в дизайнере представлена на рис. 4.10.

Главная страница WPF-приложения в дизайнере

Рис. 4.10. Главная страница WPF-приложения в дизайнере

Изменим свойство Title окна класса Window, присвоив ему значение "Информационная система ВУ". Результат компиляции и выполнения WPF-приложения приведен на рис. 4.11.

Главная страница WPF-приложения

Рис. 4.11. Главная страница WPF-приложения

Контейнером верхнего уровня главной страницы приложения является StackPanel. Для данной панели свойству Background, которое определяет кисть для рисования фоновой области, установлено сложное значение, определяющее градиентную заливку. С учетом того, что в приложении предполагается использовать аналогичную градиентную кисть и для других страниц, то целесообразным является сформировать значение для данной кисти в виде ресурса, разместив его на уровне приложения.

<Application.Resources>
    <LinearGradientBrush x:Key="BackgroundWindowResource">
    	<GradientStop Offset="0.00" Color="#FF87A0DE"/>
    	<GradientStop Offset="0.50" Color="Azure"/>
    	<GradientStop Offset="1.00" Color="#FF009CFF"/>
    </LinearGradientBrush>
</Application.Resources>

Сформированный ресурс для градиентной кисти имеет ключ BackgroundWindowResource. Введение в XAML описание приложения ресурса требует провести изменение свойства Background панели StackPanel, использую расширения разметки и ссылку на статический ресурс BackgroundWindowResource.

<StackPanel Background="{StaticResource BackgroundWindowResource}">
. . . 
</StackPanel>

На странице WPF-приложения можно размещать элементы пользовательского интерфейса (элементы управления) для обеспечения взаимодействия пользователя с бизнес-логикой системы.

< Лекция 3 || Лекция 4: 1234 || Лекция 5 >
Александр Петров
Александр Петров

При загрузке данных из БД возникает исключение InvalidOperationException с сообщением: Элемент коллекции должен быть пустым перед использованием ItemsSource. Знаю, что для заполнения DataGrid можно использовать коллекции Items или ItemsSource, но одновременно их использовать нельзя: если задано значение для свойства ItemsSource и в коде C# добавляется элемент в Items, возникает исключение. 
Вопрос, как отследить и отключить добавление элемента в Items?

Максим Спиридонов
Максим Спиридонов

В пятой лекции на второй странице в компиляторе выскакивает ошибка в строчке :

ObjectQuery<Employee> employees = DataEntitiesEmployee.Employees;

Ошибка CS0029

Не удается неявно преобразовать тип "System.Data.Entity.DbSet<WpfApplProject.Employee>" в "System.Data.Entity.Core.Objects.ObjectQuery<WpfApplProject.Employee>".

в using прописал все как положено, здесь похоже именно с преобразованием типов проблемы

Igor Chelyadinski
Igor Chelyadinski
Беларусь, Минск, №54, 2013
Валентина Алешина
Валентина Алешина
Россия