May 18 2011 at 09:59

Добавление копки управления в элементы списка WPF

Invite pending

В этой статье я покажу как создавать коллекции в WPF, управляющим элементом которой является кнопка удаления элемента из коллекции.

Создаём ObservableCollection

Добавим небольшой класс, который будет содержать в себе название сайта и линк на него.

public class Url
{
       public string Name { get; set; }
       public string Link { get; set; }
}

В конструкторе класса MainWindow создадим новую ObservableCollection сайтов и заполним её (после инициализации окна).

Urls = new ObservableCollection<Url>();
Urls.Add(new Url() { Name = "Хабрахабр", Link = "http://habrahabr.ru" });
Urls.Add(new Url() { Name = "Твиттер", Link = "https://twitter.com/" });
Urls.Add(new Url() { Name = "Weo", Link = "http://www.weo.fr/" });
Urls.Add(new Url() { Name = "Wiki", Link = "http://ru.wikipedia.org/" });

Создаём databound в ListBox

Добавляем ListBox в наше приложение с именем List и источник элементов которого связываем с DataContext.

<ListBox Name="List"  ItemsSource="{Binding}" >

Затем создаём ItemTemplate в котором будет визуализироваться каждый элемент коллекции.

            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid Height="70" Width="325">
                        <Label Content="{Binding Name}" Margin="8,0,95,30" FontSize="21.333" Height="Auto" VerticalAlignment="Stretch" Foreground="#FF5A5A5A"/>
                        <Label Content="{Binding Link}" Margin="8,29.333,95,17.667" Foreground="#FF6874BA" Cursor="Hand" FontSize="10.667"/>
                        <Button Content="Удалить" HorizontalAlignment="Right" Height="22.5" Margin="0,0,8,8" VerticalAlignment="Bottom" Width="67.833" Click="Button_Click"/>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

Теперь осталось только изменить DataContext и «перебросить» нашу коллекцию в ListBox:

List.DataContext = Urls;

Обработка удаления

Теперь осталось только написать EventHandler код, обработки.

Button cmd = (Button)sender;
if (cmd.DataContext is Url)
{

Url deleteme = (Url)cmd.DataContext;
Urls.Remove(deleteme);

}

Зная источник (элемент списка из которого был вызван обработчик), мы можем напрямую работать с ним. Только перед дальнейшими действиями нужно убедиться, что DataContext содержит именно Url (элемент списка).
Теперь любое изменение ObservableCollection нашего списка сайтов, приведёт к его автоматическому изменению в ListBox.

Исходный код

Tags:

Hubs:

Lumber room