C# — Солнечная система в ListBox (WPF)

Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

Дополнительная лабораторная работа № 3

C# -- Солнечная система в ListBox (WPF)



Содержание

Вводная часть

1. Создание приложения Windows Foundation Presentation

2. Модификация приложения Windows Foundation Presentation: добавление ресурсов

3. Модификация приложения Windows Foundation Presentation: добавление исходного кода

4. Модификация приложения Windows Foundation Presentation: оформление элемента ListBox

Завершающая часть

О приложении к данной работе



Вводная часть

Целью данной лабораторной работы станет создание новой функциональности для элемента управления ListBox (списка) средствами Windows Foundation Presentation. В качестве конечной цели выберем отображение орбит и планет в элементе и полностью перерисуем оформление. Сделаем фон списка чёрным и изменим отображение каждого элемента. Элементы будут являться изображениями, при наведении мышки на элементы будут всплывать подсказки. Также до границ ListBox от каждого элемента будет отходить окружности (орбиты планет). Элементы будут располагаться на этих окружностях.

управление listbox presentation приложение



1. Создание приложения Windows Foundation Presentation

Запускаем Visual Studio 2010, откроется Начальная страница:

Для начала, надо создать проект, для этого выполним последовательно: Файл -> Создать -> Проект… (также можно просто нажать сочетание клавиш Ctrl+Shift+N или пункт «Создать проект…» на Начальной странице):

Рис. 2. 1. Создание нового проекта

Выберем слева в пункте Установленные шаблоны язык Visual C#, далее найдём в списке Приложение WPF. Также здесь можно выбрать какой использовать «фреймворк» (набора компонентов для написания программ, конечную платформу). В нашем случае выберем .NET Framework 4.



Рис. 2. 2. Окно создания нового проекта

В поле Имя вводим NewListBox -- это название программы (выбрано по названию лабораторного практикума, номеру и названию работы). В поле Расположение указана конечная директория, где будет находиться весь проект. Выберем расположение удобное для быстрого поиска. В поле Имя решения вводится либо название программы «по умолчанию» из поля Имя автоматически, либо можно ввести своё собственное. Под этим именем будет создана конечная папка проекта (если Имя и Имя решения разные).

Рис. 2. 3. Вводим данные нового проекта приложений WPF

После нажатия кнопки ОК мы увидим сформированный проект и исходный код приложения WPF (не пустого изначально). Среда разработки сформировала исходный код в двух файлах (не считая стандартного AssemblyInfo.cs). Один из файлов отвечает за программу в целом (это файл App.xaml.cs), а второй за формирование окна приложения -- инициализацию конструктора формы и всех её элементов (это файл MainWindow.xaml.cs). Как видим, исходный код, например файла App.xaml.cs не отличается от шаблонного:

using System;

using System.Collections.Generic;

using System.Configuration;

using System.Data;

using System.Linq;

using System.Windows;

namespace NewListBox

{

/// <summary>

/// Логика взаимодействия для App.xaml

/// </summary>

public partial class App : Application

{

}

}

XAML-код App.xaml выглядит так:

<Application x:Class="NewListBox.App"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

StartupUri="MainWindow.xaml">

<Application.Resources>

</Application.Resources>

</Application>

Файл MainWindows.xaml.cs содержит следующий исходный код:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Navigation;

using System.Windows.Shapes;

namespace NewListBox

{

/// <summary>

/// Логика взаимодействия для MainWindow.xaml

/// </summary>

public partial class MainWindow : Window

{

public MainWindow()

{

InitializeComponent();

}

}

}

XAML-код MainWindows.xaml выглядит так:

<Window x:Class="NewListBox.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="MainWindow" Height="350" Width="525">

<Grid>

</Grid>

</Window>

Рис. 2. 4. Обозреватель решений: состав проекта приложения WPF сформированного средой разработки

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

Рис. 2. 5. Макет формы MainWindows.xaml: отображение конструктора формы (сверху) и представление этой формы в качестве рамзетки XAML (внизу)

Теперь, можно откомпилировать созданную программу, нажав клавишу F5 ( Отладка -> Начать отладку или нажав на иконку . Тем самым мы запускаем приложение в режиме отладки (и производим компиляцию debug-версии программы) (Debug выбрано изначально).

Рис. 2. 6. Запуск приложения WPF по конфигурации Debug

2. Модификация приложения Windows Foundation Presentation: добавление ресурсов

Для начала добавим все необходимые ресурсы, ими станут картинки планет.

Выделим в обозревателе решений название проекта (), нажнём на нём правую кнопку мыши и далее во всплывающем меню выберем Добавить -> Создать папку:

Рис. 3. 1. Создание новой директории для файлов внутри проекта

Теперь введём Planets в названии и получим новую директорию в обозревателе решений:

Теперь добавим в эту директорию изображения планет. Выполним для иконки проекта в обозревателе решений Добавить -> Существующий элемент… или в верхнем меню Проект -> Существующий элемент… (Shift+Alt+A) для всех следующих изображений:

Солнце (Sun.jpg):

Меркурий (Mercury.gif):

Венера (Venus.gif):

Земля (Earth.gif):

Марс (Mars.gif):

Юпитер (Jupiter.gif):

Сатурн (Saturn.gif):

Уран (Uranus.gif):

Нептун (Neptune.gif):

Плутон (Pluto.gif):

Получим список изображений в обозревателе решений:

3. Модификация приложения Windows Foundation Presentation: добавление исходного кода

Добавим новый класс для работы с будущим элементом управления. Для начала поработаем с ресурсами изображений. Добавим новый файл класса C# с коллекцией элементов с именем SolarSystem.cs:

Исходный код добавленного файла изначально такой:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

namespace NewListBox.Planets

{

class SolarSystem

{

}

}

Модифицируем файл следующим образом:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Collections.ObjectModel;

namespace NewListBox

{

public class SolarSystem

{

// объявление коллекции динамических данных ObservableCollection<SolarSystemObject> и заполнение коллекции элементами

private ObservableCollection<SolarSystemObject> solarSystemObjects;

public ObservableCollection<SolarSystemObject> SolarSystemObjects // Свойство для работы с коллекцией элементов

{

get { return solarSystemObjects; }

}

public SolarSystem()

{

this.solarSystemObjects = new ObservableCollection<SolarSystemObject>();

/* Добавляем новые объекты типа SolarSystemObject(Название, число: удаление от солнца [а. е.], число: средний диаметр [км], ссылка на изображение внутри проекта, описание) */

this.solarSystemObjects.Add(new SolarSystemObject("Солнце", 0, 1380000, new Uri(@"Planets\Sun.jpg", UriKind.Relative), "Сомлнце -- единственная звезда Солнечной системы, вокруг которой обращаются другие объекты этой системы: планеты и их спутники, карликовые планеты и их спутники, астероиды, метеороиды, кометы и космическая пыль."));

this.solarSystemObjects.Add(new SolarSystemObject("Меркурий", 0.38, 4880, new Uri(@"Planets\Mercury.gif", UriKind.Relative), "Меркумрий -- самая близкая к Солнцу планета Солнечной системы, обращающаяся вокруг Солнца за 88 земных суток."));

this.solarSystemObjects.Add(new SolarSystemObject("Венера", 0.72, 12103.6, new Uri(@"Planets\Venus.gif", UriKind.Relative), "Венемра -- вторая внутренняя планета Солнечной системы с периодом обращения в 224,7 земных суток. Планета получила своё название в честь Венеры, богини любви из римского пантеона. Венера -- третий по яркости объект на небе Земли после Солнца и Луны и достигает видимой звёздной величины в ?4,6."));

this.solarSystemObjects.Add(new SolarSystemObject("Земля", 1, 12756.3, new Uri(@"Planets\Earth.gif", UriKind.Relative), "Землям -- третья от Солнца планета Солнечной системы, крупнейшая по диаметру, массе и плотности среди планет земной группы. Наша родная планета."));

this.solarSystemObjects.Add(new SolarSystemObject("Марс", 1.52, 6794, new Uri(@"Planets\Mars.gif", UriKind.Relative), "Марс -- четвёртая по удалённости от Солнца и седьмая по размерам планета Солнечной системы; масса планеты составляет 10,7 % массы Земли."));

this.solarSystemObjects.Add(new SolarSystemObject("Юпитер", 5.20, 142984, new Uri(@"Planets\Jupiter.gif", UriKind.Relative), "Юпимтер -- пятая планета от Солнца, крупнейшая в Солнечной системе. Наряду с Сатурном, Ураном и Нептуном Юпитер классифицируется как газовый гигант. Планета была известна людям с глубокой древности, что нашло своё отражение в мифологии и религиозных верованиях различных культур: месопотамской, вавилонской, греческой и других. Современное название Юпитера происходит от имени древнеримского верховного бога-громовержца."));

this.solarSystemObjects.Add(new SolarSystemObject("Сатурн", 9.54, 120536, new Uri(@"Planets\Saturn.gif", UriKind.Relative), "Сатумрн -- шестая планета от Солнца и вторая по размерам планета в Солнечной системе после Юпитера. Сатурн, а также Юпитер, Уран и Нептун, классифицируются как газовые гиганты. Сатурн назван в честь римского бога земледелия."));

this.solarSystemObjects.Add(new SolarSystemObject("Уран", 19.218, 51118, new Uri(@"Planets\Uranus.gif", UriKind.Relative), "Урамн -- седьмая по удалённости от Солнца, третья по диаметру и четвёртая по массе планета Солнечной системы. Была открыта в 1781 году английским астрономом Уильямом Гершелем и названа в честь греческого бога неба Урана, отца Кроноса (в римской мифологии Сатурна) и, соответственно, деда Зевса."));

this.solarSystemObjects.Add(new SolarSystemObject("Нептун", 30.06, 49532, new Uri(@"Planets\Neptune.gif", UriKind.Relative), "Нептумн -- восьмая и самая дальняя планета Солнечной системы. Нептун также является четвёртой по диаметру и третьей по массе планетой. Масса Нептуна в 17,2 раза, а диаметр экватора в 3,9 раза больше таковых у Земли. Планета была названа в честь римского бога морей."));

this.solarSystemObjects.Add(new SolarSystemObject("Плутон", 39.5, 2274, new Uri(@"Planets\Pluto.gif", UriKind.Relative), "Плутомн (134340 Pluto) -- крупнейшая по размерам, наряду с Эридой, карликовая планета Солнечной системы, транснептуновый объект (ТНО) и девятое/десятое по величине небесное тело, обращающееся вокруг Солнца. Первоначально Плутон классифицировался как планета, однако сейчас он считается одним из крупнейших объектов (возможно, самым крупным) в поясе Койпера."));

}

}

}

Теперь, добавим сам класс, обеспечивающий обработку и получение данных из коллекции элементов. Создаём новый класс с именем SolarSystemObject.cs:

Исходный код сделаем таким:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

namespace NewListBox

{

public class SolarSystemObject

{

// Название планеты

private string name;

public string Name

{

get { return name; }

set { name = value; }

}

// Орбита, в астрономических единицах (а. е)

private double orbit;

public double Orbit

{

get { return orbit; }

set { orbit = value; }

}

// Средний диаметр, в км

private double diameter;

public double Diameter

{

get { return diameter; }

set { diameter = value; }

}

// Относительная ссылка на изображение

private Uri image;

public Uri Image

{

get { return image; }

set { image = value; }

}

// Описание

private string details;

public string Details

{

get { return details; }

set { details = value; }

}

// Метод для работы с коллекцией элементов

public SolarSystemObject(string name, double orbit, double diameter, Uri image, string details)

{

this.name = name;

this.orbit = orbit;

this.diameter = diameter;

this.image = image;

this.details = details;

}

// Вместо new использован virtual-override

public override string ToString()

{

return this.name;

}

}

}

Немного о ключевом слове override в самом конце кода:

Рис. 4. 1. Разница между new и override (наследование и переопределение методов)

При использовании new метод класса Foo не перекрывает реализацию базового класса, а подменяет её своей (прячет её). Поэтому когда мы сохраняем переменную типа в переменной базового типа от класса Bar, мы не получим вызова override метода из класса Foo , так как не переопределяется, а подменяется метод используя new. При использовании virtual-override происходит виртуальный вызов и будет вызван переопределённый (overriden) метод из класса Bar.

Добавим последний необходимый класс для обработки положения окружностей орбит в элементе управления. Назовём его ConvertOrbit.cs:

using System;

using System.Collections.Generic;

using System.Text;

using System.Windows.Data;

using System.Globalization;

namespace NewListBox

{

public class ConvertOrbit : IValueConverter

{

public object Convert(object value, Type targetType, object parameter, CultureInfo culture)

{

double orbit = (double)value;

double factor = System.Convert.ToDouble(parameter, culture.NumberFormat); // Получаем форматирование для единиц измерения (зависит от настроек операционной системы по умолчанию, а именно от региона и региональных стандартов), parameter - получаем извне

return Math.Pow(orbit / 40, 0.4) * 700 * factor; // Возводим выражение за запятой в степень 0.4, необходимо для определения положения в элементе управления в пикселях? определяет значения для положения по X и Y, 700 - размер окна, factor - получаем извне (parameter)

}

public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)

{

throw new NotSupportedException("Этот метод не должен быть вызван");

}

}

}



4. Модификация приложения Windows Foundation Presentation: оформление элемента ListBox

Теперь осталось нарисовать новый элемент для главного окна MainWindow.xaml. Отредактируем код следующим образом:

<Window x:Class="NewListBox.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="clr-namespace:NewListBox"

Title="WPF :: Солнечная система в ListBox (C#)" Height="700" Width="700">

<!-- Ресурсы окна -->

<Window.Resources>

</Window.Resources>

<Grid HorizontalAlignment="Center" VerticalAlignment="Center" ClipToBounds="True">

</Grid>

</Window>

Для начала мы объявили привязку окна в класс NewListBox при помощи строчки в свойства кона:

xmlns:local="clr-namespace:NewListBox"

Поменяли свойство Title, высоту (700) и ширину (700) окна. Для сетки (Grid) установили положение внутренних элементов по вертикали и по горизонтали (по центру), а также задали свойство отсечения лишнего у элемента, чтобы сетка помещалась в окне. И в конце объявили пространство объектов для ресурсов окна.

Перетащим с панели инструментов элемент ListBox и очистим его содержимое. Изменим для этого элемента свойство Focusable на False, и для свойство ItemsSource пропишем Binding:

<Grid HorizontalAlignment="Center" VerticalAlignment="Center" ClipToBounds="True">

<!-- Устанавливаем сам элемент ListBox по сетке Grid -->

<ListBox ItemsSource="{Binding Source={StaticResource solarSystem}, Path=SolarSystemObjects}" Focusable="False" />

</Grid>

Для ресурсов окна сделаем следующее:

<!-- Ресурсы окна -->

<Window.Resources>

<!-- Переопределяем класс и подключаем объекты класса -->

<local:SolarSystem x:Key="solarSystem" />

<local:ConvertOrbit x:Key="convertOrbit" />

<!-- Устанавливаем шаблон для данных -->

<DataTemplate DataType="{x:Type local:SolarSystemObject}">

<Canvas Width="20" Height="20">

</Canvas>

</DataTemplate>

</Window.Resources>

Внутри поставлен элемент Canvas с размерами высоты и ширины в 20. Заполним элемент Canvas, элементом окружности и элементом изображения, тем самым создаём шаблон данных для элемента внутри ListBox (элемента списка):

<Canvas Width="20" Height="20">

<!-- Окружность орбиты (элемент Ellipse) -->

<!-- Через Binging конвертируем число типа Double Orbit из класса SolarSystemObject? Left для отступа по левому края элемента Ellipse; Top для отступа сверху -->

<Ellipse

Canvas.Left="{Binding Path=Orbit, Converter={StaticResource convertOrbit}, ConverterParameter=-1.707}"

Canvas.Top="{Binding Path=Orbit, Converter={StaticResource convertOrbit}, ConverterParameter=-0.3}"

Width="{Binding Path=Orbit, Converter={StaticResource convertOrbit}, ConverterParameter=2}"

Height="{Binding Path=Orbit, Converter={StaticResource convertOrbit}, ConverterParameter=2}"

Stroke="AliceBlue"

StrokeThickness="1" />

<!-- Через Binding получаем путь до изображения для элемента Image -->

<Image Source="{Binding Path=Image}" Width="20" Height="20">

<!-- Вставка элемента изображения для планет и размер изображения для вывода -->

<Image.ToolTip>

<!-- Подсказка при наведении мыши на элемент в ListBox -->

<StackPanel Width="250" TextBlock.FontSize="12">

<!-- Устанавливаем размер подсказки по ширине и размер шрифта -->

<!-- Используем элемент типа StackPanel для организации одной строки и вставки TextBlock -->

<TextBlock FontWeight="Bold" Text="{Binding Path=Name}" />

<StackPanel Orientation="Horizontal">

<TextBlock Text="Орбита: " />

<TextBlock Text="{Binding Path=Orbit}" />

<TextBlock Text=" а. е." />

</StackPanel>

<TextBlock Text="{Binding Path=Details}" TextWrapping="Wrap"/>

</StackPanel>

</Image.ToolTip>

</Image>

</Canvas>

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

Класс ConvertOrbit организовывает связь положения со значением орбиты.

Теперь установим связь шаблона данных и стиля одного элемента, а также добавим событие выделения элемента в списке через Trigger, для этого добавим новый стиль одного элемента (после закрывающего тэга </DataTemplate> и до закрывающего тэга </Window.Resources>):

</DataTemplate>

<!-- Стиль одного элемента в ListBox -->

<Style TargetType="ListBoxItem">

<Setter Property="Canvas.Left" Value="{Binding Path=Orbit, Converter={StaticResource convertOrbit}, ConverterParameter=0.707}"/>

<!-- Отступ для элемента слева -->

<Setter Property="Canvas.Bottom" Value="{Binding Path=Orbit, Converter={StaticResource convertOrbit}, ConverterParameter=0.707}"/>

<!-- Отступ для элемента снизу -->

<Setter Property="Template">

<!-- Меняем шаблон -->

<Setter.Value>

<ControlTemplate TargetType="{x:Type ListBoxItem}">

<Grid>

<!-- Вставляем в элемент ListBoxItem сетку -->

<!-- Вставляем окружность выделения -->

<Ellipse x:Name="selectedPlanet" Margin="-10" StrokeThickness="4"/>

<!-- Устанавливаем радиус окружности (-10, -10, -10, -10) и толщину пера (4) -->

<!-- ContentPresenter сообщает что окружность должна отрисовывать не поточечное, с горизонтальным положением и вертикальным положением в зависимости от шаблона первоначального элемента -->

<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

</Grid>

<ControlTemplate.Triggers>

<!-- Событие "если выделен элемент" для ListBoxItem -->

<Trigger Property="IsSelected" Value="true">

<!-- Устанавливаем цвет и тип пера "штрих" -->

<Setter Property="Stroke" TargetName="selectedPlanet" Value="Green"/>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</Window.Resources>

В окне конструктора для MainWindow.xaml отобразится следующее:



Рис. 5. 1. Незаконченное изменения стиля элемента управления ListBox

Попробуем откомпилировать и запустить. Увидим что элементы (планеты) выделяются, появляется зелёное выделение и подсказка с полным описанием.

Наконец, изменим главный стиль ListBox (добавим XAML-код после закрывающего тэга </Style>:

</Style>

<!-- Стиль элемента управления ListBox -->

<Style TargetType="ListBox">

<Setter Property="ItemsPanel">

<Setter.Value>

<ItemsPanelTemplate>

<!-- Конечный размер ListBox, фон -->

<Canvas Width="590" Height="590" Background="Black" />

</ItemsPanelTemplate>

</Setter.Value>

</Setter>

</Style>

</Window.Resources>

Готово. В конструкторе изменится вид представления окна…

Завершающая часть

Компилируем приложение (Release) и запускаем. Результат работы показан ниже (Рис. 6. 1):

Рис. 6. 1. Модифицированное приложение Windows Foundation Presentation (Выделена планета и высвечена подсказка)



О приложении к данной работе

Получившуюся программу (NewListBox.exe), собранную из кусков кода приведённых в данной работе, можно загрузить по ссылке в конце этого материала.

Приложение: Исходный код программы и всех сопровождающих файлов с кодом приведён по ссылке в конце этого материала.

Размещено на Allbest.ru

...