Today on Silverlight forum one query was posted regarding deleting item from Listbox. In normal scenario if we have list of Items in Listbox and we want to delete any of the Items from the Listbox we select that Item and click on delete button which is outside the Listbox but he wanted to have delete button inside the Listbox with Textblock and Image. The best solution to this is ObservableCollection.One of the greatest advantage of ObservableCollection is it provides notifications when items get added, removed, or when the whole list is refreshed.
Here is what you have to do:
Xaml Code:
<ListBox x:Name="lstEmployee" Width="180" Height="250" HorizontalAlignment="Left" VerticalAlignment="Top">
<ListBox.ItemTemplate>
<DataTemplate>
<Canvas x:Name="LayoutRoot" Width="133.90" Height="26.50" Background="#F0F0F0"
HorizontalAlignment="Right">
<Border Canvas.Left="30.40" BorderThickness="0.1,0.2,0.2,0.2" Height="26.50" Width="89" BorderBrush="#FF6262FF">
<StackPanel Orientation="Vertical" HorizontalAlignment="Left" MaxWidth="133.90" Height="26.50" Width="120" Background="Transparent">
<StackPanel x:Name="stackPanelUserInfo" Orientation="Horizontal" MaxWidth="128.90">
<HyperlinkButton x:Name="hyperLinkButtonDisplayName" Content="{Binding Name}" IsTabStop="False"
Margin="2,0,0,0" FontFamily="Fonts/Fonts.zip#Segoe UI" FontSize="11" Foreground="#FF000099" FontWeight="Bold" VerticalAlignment="Top" Tag="{Binding Path=ID}"/>
</StackPanel>
<TextBlock x:Name="textBlockOccupation" Text="{Binding Occupation}" Padding="0,0,0,0" FontFamily="Fonts/Fonts.zip#Segoe UI" FontSize="9" Foreground="#FF999999" Margin="8,-3,0,0" HorizontalAlignment="Left" Height="13.90" Tag="{Binding Path=ID}"/>
</StackPanel>
</Border>
<Canvas x:Name="CanvasStatus" Height="26.50" Width="8.9" Canvas.Left="120" Canvas.Top="0" Background="#FF16E029" Tag="{Binding Path=ID}"/>
<Button x:Name="Closebtn" Height="25" Margin="133,2" Width="20" BorderThickness="1" Tag="{Binding Path=ID}" Click="btnRemove_Click">
<Path Fill="#444444" Stretch="Fill" StrokeThickness="1" Height="10" Width="10" Data="F1M525.79325,203.7591L522.590125,206.962225L525.79325,210.16535L524.73075,211.22785L521.527625,208.024725L518.340125,211.212225L517.277625,210.149725L520.465125,206.962225L517.262,203.7591L518.3245,202.6966L521.527625,205.899725L524.73075,202.6966L525.79325,203.7591" UseLayoutRounding="False" Canvas.Top="1" />
</Button>
</Canvas>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Code Behind:
public class Employee
{
public int ID { get; set; }
public string Name { get; set; }
public string Occupation { get; set; }
}
ObservableCollection
employee.Add(new Employee() { ID = 1, Name = "Nimish", Occupation = "CEO" });
employee.Add(new Employee() { ID = 2, Name = "Vikas", Occupation = "Module Leader" });
employee.Add(new Employee() { ID = 3, Name = "Pooja", Occupation = "Software Engg" });
employee.Add(new Employee() { ID = 4, Name = "Maya", Occupation = "Web Designer" });
employee.Add(new Employee() { ID = 5, Name = "Kiran", Occupation = "Jr Developer" });
employee.Add(new Employee() { ID = 6, Name = "Pragati", Occupation = "Software Engg" });
employee.Add(new Employee() { ID = 7, Name = "Lalit", Occupation = "Team Leader" });
employee.Add(new Employee() { ID = 8, Name = "Neha", Occupation = "HR" });
employee.Add(new Employee() { ID = 9, Name = "Sachin", Occupation = "Sr Developer" });employee.Add(new Employee() { ID = 10, Name = "Ishita", Occupation = "Module Leader" });
lstEmployee.ItemsSource = employee;
On Remove Button Click:
private void btnRemove_Click(object sender, RoutedEventArgs e)
{
var emp = employee.Where(a => a.ID.Equals(((System.Windows.FrameworkElement)(e.OriginalSource)).Tag)).ToList();
if (emp.Count == 1)
employee.Remove(emp.First());
}
Thats all we have to do. Download the Sample Code.
Happy coding :)
