Расстояние между элементами ListBox

Желаемый результат выглядит так:
XAML:
C#: mass = new Rectangle[100]; for (int i = 0; i < Mass.Length; i++) < mass[i] = new Rectangle(); mass[i].VerticalAlignment = VerticalAlignment.Bottom; mass[i].Width = SList.ActualWidth / Mass.Length; mass[i].Height = (SList.ActualHeight - 100) * (i / 100.0); mass[i].Fill = Brushes.Green; mass[i].StrokeThickness = 1; mass[i].Stroke = Brushes.Black; SPName.Children.Add(mass[i]); >

При реализации через ListBox получается это:
XAML:
C#: Panel parent = ((sender as Button).Parent as Panel).Parent as Panel; mass = new Rectangle[100]; for (int i = 0; i < Mass.Length; i++) < mass[i] = new Rectangle(); mass[i].VerticalAlignment = VerticalAlignment.Bottom; mass[i].Width = parent.ActualWidth / Mass.Length; mass[i].Height = (parent.ActualHeight - 100) * (i / 100.0); mass[i].Fill = Brushes.Green; mass[i].StrokeThickness = 1; mass[i].Stroke = Brushes.Black; >OnPropertyChanged("Mass");
Как реализовать первый вариант с помощью ListBox?
Отслеживать
задан 27 фев 2018 в 20:53
лалала лала лалала лала
145 9 9 бронзовых знаков
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Возможно, вам нужно это:
" Stroke="Black" StrokeThickness="1"/>
При этом ваш Mass имеет тип double[] или там IEnumerable и содержит нужные высоты прямоугольников.
Получается вот такой результат:

Если вам нужен ListView , вам придётся ещё подправить стиль контейнера:
" Stroke="Black" StrokeThickness="1"/>
ListBox
Элемент управления ListBox предоставляет пользователям список для выбора элементов.
На следующем рисунке показан типичный пример ListBox.
Типичный элемент управления ListBox
В этом разделе
Ссылка
Связанные разделы
Совместная работа с нами на GitHub
Источник этого содержимого можно найти на GitHub, где также можно создавать и просматривать проблемы и запросы на вытягивание. Дополнительные сведения см. в нашем руководстве для участников.
.NET Desktop feedback
Обратная связь
Отправить и просмотреть отзыв по
Как сделать переключение между listbox c wpf
Кроме прямого добавления элементов в коллекцию Items компонентов ListBox и ComboBox мы также можем использовать механизм привязки данных.
Привязка данных в ListBox и ComboBox реализуется с помощью следующих свойств:
- DataSource : источник данных — какой-нибудь массив или коллекция объектов
- DisplayMember : свойство объекта, которое будет использоваться для отображения в ListBox / ComboBox
- ValueMember : свойство объекта, которое будет использоваться в качестве его значения
public partial class Form1 : Form < public Form1() < InitializeComponent(); Listphones = new List < new Phone < Name="Samsung Galaxy Ace 2", Year=2012>, new Phone < Name="Samsung Galaxy S4", Year=2013>, new Phone < Name="iPhone 6", Year=2014>, new Phone < Name="Microsoft Lumia 435", Year=2015>, new Phone < Name="Xiaomi Mi 5", Year=2015>>; listBox1.DataSource = phones; listBox1.DisplayMember = "Name"; listBox1.ValueMember = "Id"; listBox1.SelectedIndexChanged += listBox1_SelectedIndexChanged; > void listBox1_SelectedIndexChanged(object sender, EventArgs e) < // получаем id выделенного объекта int // получаем весь выделенный объект Phone phone = (Phone)listBox1.SelectedItem; MessageBox.Show(id.ToString() + ". " + phone.Name); >> class Phone < public int Id < get; set; >public string Name < get; set; >public int Year < get; set; >>
Итак, на форме у нас есть список ListBox с именем listBox1. В коде имеется класс Phone с тремя свойствами, объекты которого мы хотим выводить в список. В отличие от предыдущих тем эта задача сложнее, так как раньше мы выводили обычные строки, тут же у нас сложные объекты.
Для вывода используем механизм привязки. Сначала устанавливаем список телефонов в качестве источника данных:
listBox1.DataSource = phones;
Затем устанавливаем в качестве отображаемого свойства свойство Name класса Phone, а в качестве свойства значения — свойство Id:
listBox1.DisplayMember = "Name"; listBox1.ValueMember = "Id";
Значение отображаемого свойства мы затем увидим в списке. Оно будет представлять каждый отдельный объект Phone.
С помощью же свойства значения, которым является свойство Id, мы можем упростить работу с источником данных. В данном случае оно не играет большой роли. Но если бы мы использовали в качестве источника данных некоторый набор объектов из базы данных, то с помощью id нам было проще удалять, обновлять и взаимодействовать с базой данных.
И теперь если мы выделим какой-то объект, то свойство SelectedItem элементы ListBox будет содержать объект Phone, у которого мы можем получить значения свойств:
Phone phone = (Phone)listBox1.SelectedItem; string name = phone.Name;
А выделенное значение, то есть значение свойства Id выделенного телефона, будет находиться в свойстве SelectedValue .
И если мы запустим приложение, то увидим все отображаемые телефоны:

Все то же самое характерно и для элемента ComboBox. Пусть кроме ListBoxa на форме есть ComboBox:
public partial class Form1 : Form < public Form1() < InitializeComponent(); Listphones = new List < new Phone < Name="Samsung Galaxy Ace 2", Year=2012>, new Phone < Name="Samsung Galaxy S4", Year=2013>, new Phone < Name="iPhone 6", Year=2014>, new Phone < Name="Microsoft Lumia 435", Year=2015>, new Phone < Name="Xiaomi Mi 5", Year=2015>>; comboBox1.DataSource = phones; comboBox1.DisplayMember = "Name"; comboBox1.ValueMember = "Id"; comboBox1.SelectedIndexChanged += comboBox1_SelectedIndexChanged; listBox1.DisplayMember = "Name"; listBox1.ValueMember = "Id"; > void comboBox1_SelectedIndexChanged(object sender, EventArgs e) < Phone phone = (Phone)comboBox1.SelectedItem; listBox1.Items.Add(phone); >> class Phone < public int Id < get; set; >public string Name < get; set; >public int Year < get; set; >>
Здесь также для комбобокса устанавливается привязка, а также отображаемое свойство и свойство значения. Кроме того, здесь обрабатывается событие выбора элемента в комбобоксе так, чтобы выбранный элемент попадал в ListBox.

В отличие от ListBoxa ComboBox имеет три свойства для обработки выделенного объекта:
- SelectedItem : выбранный элемент
- SelectedValue : значение свойства значения, в данном случае свойство Id
- SelectedText : значение свойства отображение, в данном случае свойство Name класса Phone
ListView

Класс ListView — это специализированный класс спискового типа, предназначенный для отображения различных представлений одних и тех же данных. Он особенно удобен, когда требуется создать представление, состоящее из множества столбцов и отображающее о каждом элементе данных несколько различных фрагментов информации.
Класс ListView унаследован от ListBox и дополняет его одной единственной деталью: свойством View. Свойство View представляет собой еще одну точку для создания многофункциональных списковых представлений. Если это свойство не установлено, элемент ListView ведет себя просто точно так же, как и его менее мощный предок — класс ListBox. Однако он становится гораздо более интересным, когда разработчик предоставляет объект представления, указывающий, каким должно быть форматирование и стили у элементов данных.
Формально свойство View указывает на экземпляр любого класса, унаследованного от ViewBase (который представляет собой абстрактный класс). Класс ViewBase удивительно прост: в действительности это не более чем оболочка, объединяющая вместе два стиля. Один из этих стилей применяется к элементу управления ListView (и указывается в свойстве DefaultStyleKey), в то время как другой применяется элементам внутри ListView (и указывается в свойстве ItemContainerDefaultStyleKey). Свойства DefaultStyleKey и ItemContainerDefaultStyleKey фактически стиль не предоставляют, а вместо этого они просто возвращают указывающий на него объект ResourceKey.
Сейчас наверняка интересно узнать, а зачем тогда вообще нужно свойство View — в конце концов, класс ListBox (как и все классы, унаследованные от ItemsControl) уже предлагает такие мощные возможности, как шаблоны данных и стили. Целеустремленные разработчики могут переделывать внешний вид элемента управления ListBox, предоставляя другой шаблон данных, другую панель компоновки и другой шаблон элемента управления.
Вообще говоря, для создания настраиваемых списков с множеством столбцов использовать класс ListView со свойством View необязательно. Точно такого же эффекта можно добиться и самостоятельно с помощью поддерживаемых классом ListBox шаблонов и стилей. Однако свойство View является полезной абстракцией. Ниже перечислены некоторые основные преимущества:
Представления, пригодные для многократного использования
ListView выделяет все касающиеся представления детали в один объект. Это упрощает создание представлений, не зависящих от данных и пригодных для применения с более чем одним списком.
Отделение элемента управления ListView от объектов View также упрощает переключение между множеством различных представлений в одном и том же списке. (Например, именно такая технология применяется в проводнике Windows для получения различных представлений файлов и папок пользователя.) Точно такую же функциональную возможность можно создать и за счет динамического изменения шаблонов и стилей, но построить единственный объект, инкапсулирующий все детали представления, все-таки гораздо легче.
Более удобная организация
Объект представления упаковывает два стиля: один для корневого элемента управления ListView и еще один — для отдельных элементов в списке. Поскольку эти стили упаковываются вместе, очевидно, что эти два фрагмента связаны между собой и могут разделять определенные детали и взаимозависимости. Например, для основанного на столбцах элемента управления ListView это имеет большой смысл, поскольку ему необходимо, чтобы размещение заголовков столбцов совпадало с размещением предназначенных для этих столбцов данных.
Применение этой модели открывает замечательные возможности для создания ряда полезных готовых представлений, которыми бы могли пользоваться все разработчики. К сожалению, в настоящее время в состав WPF входит пока только один объект представления — объект GridView. Хотя его можно и удобно использовать для построения списков с множеством столбцов, при наличии каких-то других потребностей придется создавать собственное специальное представление. В последующих разделах будет показано, как делать то и другое.
Элемент GridView будет замечательным выбором, если нужно, чтобы отображаемые данные можно было конфигурировать, а представление в стиле сетки было одной из доступных для пользователя опций. Но если требуется, чтобы в сетке дополнительно поддерживались расширенная стилизация, выбор или редактирование, придется перейти к использованию полнофункционального элемента управления DataGrid.
Создание столбцов с помощью GridView
— это класс, который наследуется от ViewBase и предоставляет списковое представление с множеством столбцов. Определяются эти столбцы путем добавления в коллекцию GridViewColumns объектов GridViewColumn.
GridView и GridViewColumn предлагают небольшой набор полезных методов, которые разработчик может использовать для настройки внешнего вида своего списка. Чтобы создать самый простой прямолинейный список (вроде Details (Список) в проводнике Windows), потребуется установить для каждого объекта GridViewColumn всего лишь два свойства: Header и DisplayMemberBinding. Свойство Header отвечает за размещаемый в верхней части столбца текст, а свойство DisplayMemberBinding содержит привязку, извлекающую из каждого элемента данных подлежащий отображению фрагмент информации.
Ниже приведен код разметки, необходимый для определения трех используемых в этом примере столбцов:

Здесь есть несколько важных моментов, на которые стоит обратить внимание. Во-первых, размер ни одного из столбцов не является жестко закодированным. Вместо этого GridView устанавливает размер столбцов в соответствии с размером самого широкого видимого элемента (или столбца заголовка, если тот занимает больше места в ширину), что вполне логично для основанного на гибкой компоновке мира WPF. (Конечно, при наличии огромных значений столбцов это немного усложняет дело. В таком случае можно попробовать упаковать текст).
Во-вторых, свойство DisplayMemberBinding устанавливается с использованием полнофункционального выражения привязки, которое поддерживает все возможности, в том числе форматирование строк и конвертеры значений.
Изменение размера столбцов
Изначально GridView делает каждый столбец настолько широким, насколько необходимо для того, чтобы в нем могло уместиться самое больше видимое значение. Однако размер любого столбца можно легко изменить, щелкнув и перетащив край его заголовка. Дважды щелкнув на крае заголовка столбца, можно заставить GridViewColumn изменить свой размер самостоятельно на основании какого-либо видимого в нем в текущий момент содержимого.
Например, в случае обнаружения при прокрутке списка вниз элемента, усеченного из-за несоответствия его размера ширине столбца, можно просто дважды щелкнуть на правом крае заголовка этого столбца, и столбец автоматически расширится должным образом.
Для более точного управления размером столбца при его объявлении можно указать конкретную ширину:
Это просто определяет начальный размер столбца. На возможность пользователя изменять размер столбца описанными выше способами это никак не влияет. К сожалению, свойства вроде MaxWidth и MinWidth класс GridViewColumn не поддерживает, так что ограничить пределы, до которых пользователь может изменять размеры столбцов, нельзя. Единственный вариант — предоставить новый шаблон для заголовка GridViewColumn и вообще отключить возможность изменения его размера.