Develop Reference

Get value from selected databound listbox item

So I really don't know how to ask this question but this is what I am trying to achieve. I got a list box with this code:
<ListBox
x:Name="lb"
Margin="0,0,0,100"
Background="#212B34"
BorderThickness="0"
Padding="0"
SelectionChanged="lb_SelectionChanged">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
<Setter Property="Padding" Value="0,8,0,8"></Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Height="152" BorderThickness="10,0,0,0" BorderBrush="#2E66AA" Background="#161C22" Padding="8,8,8,8">
<Grid.RowDefinitions>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition Height="60"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*"></ColumnDefinition>
<ColumnDefinition Width="2*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Foreground="#2E66AA" Text="{Binding Location}" FontSize="18" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"></TextBlock>
<TextBlock Foreground="White" Text="{Binding Description}" FontSize="12" Grid.Row="1" Grid.RowSpan="3" Grid.Column="0" TextTrimming="WordEllipsis" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" TextWrapping="Wrap"></TextBlock>
<TextBlock Foreground="White" Text="{Binding Date}" FontSize="18" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Stretch" TextAlignment="Right"></TextBlock>
<TextBlock Foreground="White" Text="{Binding Time}" FontSize="18" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Stretch" TextAlignment="Right"></TextBlock>
<TextBlock Foreground="#2E66AA" FontSize="24" Grid.Row="3" Grid.Column="1" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" TextAlignment="Right">
<Run Text="$ "/>
<Run Text="{Binding Price}"/>
<Run Text=";"/>
</TextBlock>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
And use Azure App Service for my database. I bind the data to the listbox using itemsource:
private async void loadEvents_Click(object sender, RoutedEventArgs e)
{
IMobileServiceTable<eventTable> eventList = App.MobileService.GetTable<eventTable>();
MobileServiceCollection<eventTable, eventTable> events = await eventList
.Where(ProductTable => ProductTable.id != "")
.ToCollectionAsync();
lb.ItemsSource = events;
}
What I want to do is when a user selects a listbox item he needs to be redirected to a new page. But on this new page I need the id of the event (row in the database). So I can use this id to retrieve all further information of the event.
Maybe I need to bind the id to the listboxitem by using {Binding id} but what do I bind it to? A textblock wich I can make invisible? And if I bind it to something how do I retrieve it?
This is what I use to redirect the user to a new page:
private void lb_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
this.Frame.Navigate(typeof(eventPage));
}
If there is a different way to get al information about the selected event please tell.
I would really appreciate your help.

Get the SelectedItem from lb.SelectedItem and typecast to its corresponding class. From that, you can get the selected item's Ip. Now pass this value as the second parameter to Frame.Navigate.
private void lb_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
this.Frame.Navigate(typeof(eventPage), (eventTable)lb.SelectedItem);
}
To get this value on the next page
protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
var selectedItem = (eventTable)e.Parameter;
}

ListBox Selected Items are reset each time I switch tabs in may TabControl

I have the following TabControl:
<TabControl Name="tabControl" Grid.Row="0" MinWidth="270" HorizontalAlignment="Stretch" ItemsSource="{Binding Counters}" ContentTemplate="{StaticResource templateForTheContent}"
ItemTemplate="{StaticResource templateForTheHeader}">
</TabControl>
It uses this DataTemplate:
<Window.Resources>
<DataTemplate x:Key="templateForTheContent" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ListBox Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0"
ItemsSource="{Binding}"
SelectionMode="Multiple"
BorderThickness="1" BorderBrush="#FF8B8B8B" SelectionChanged="ListBox_SelectionChanged_1">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock>
<Run Text="{Binding CounterName, Mode=OneWay}" />
<Run Text="{Binding InstanceName, Mode=OneWay}" />
</TextBlock>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button Name="RAMSelectAllButton" Margin="0,10,0,0" Grid.Column="0" Grid.Row="1">
<TextBlock Text="SELECT ALL"/>
</Button>
<Button Name="RAMUnSelectAllButton" Margin="0,10,0,0" Grid.Column="1" Grid.Row="1">
<TextBlock Text="UNSELECT ALL"/>
</Button>
</Grid>
</DataTemplate>
<DataTemplate x:Key="templateForTheHeader" >
<TextBlock Text="{Binding CategoryName}"/>
</DataTemplate>
</Window.Resources>
It works as expected, binding works well, everything would be totally fine if this issue wasn't present:
Each time I switch a tab in my TabControl, selected items of a ListBox in my previous tab are reset - so when I go back to that tab - nothing is selected.
How to fix this?
//EDIT
here's my ListBox_SelectionChanged_1 method:
private void ListBox_SelectionChanged_1(object sender, SelectionChangedEventArgs e)
{
System.Windows.Controls.ListBox listBoxTemp = sender as System.Windows.Controls.ListBox;
PerformanceCounter counterTemp = (PerformanceCounter)listBoxTemp.Items[0];
if (!appData.SelectedCounters.ContainsKey(counterTemp.CategoryName))
appData.SelectedCounters.Add(counterTemp.CategoryName, new List<PerformanceCounter>());
appData.SelectedCounters[counterTemp.CategoryName].Clear();
foreach (PerformanceCounter counter in listBoxTemp.SelectedItems)
{
appData.SelectedCounters[counterTemp.CategoryName].Add(counter);
}
}
ListBox is bound to Counters, which is Observable Collection:
public ObservableCollection<ObservableCollection<PerformanceCounter>> Counters
{
get { return _Counters; }
}
ObservableCollection<ObservableCollection<PerformanceCounter>> _Counters = new ObservableCollection<ObservableCollection<PerformanceCounter>>();

(i am not familiar with TabControls, or WPF for that matter, but i would suggest a solution like this:)
Backup the selected items of your ListBox in a Dictionary.
var selectionBackups = new Dictionary<ListBox, IEnumerable<ListBoxItem>>();
I'd keep this field updated in ListBox_SelectionChanged_1(). Whenever you enter a Tab, overwrite the concerned ListBox's selection.
void TabEnter(object sender, TabEventArgs e)
{
ListBox lb = ... //acquire the current Listbox
OverwriteSelection(lb, selectionBackups[lb]); //set the ListBox's selection
}
(You might want to prevent the ListBox_SelectionChanged_1() from triggering when you restore the selection. That could be done like this:
bool auto_select = false; //set this to true while editing selections
private void ListBox_SelectionChanged_1(object sender, SelectionChangedEventArgs e)
{
if(auto_select)
return;
...
}
)

Click event on an item template

I have this wpf code for my listbox item:
<ListBox x:Name="icTodoList" ItemsSource="{Binding ListControleMachine}" Grid.Column="3">
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="{Binding borderColor}" BorderThickness="2" Margin="0,0,0,1">
<Grid Margin="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="130"/>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="120"/>
</Grid.ColumnDefinitions>
<CheckBox x:Name="check_action" Content="" HorizontalAlignment="Left" VerticalAlignment="Top" IsChecked="{Binding ActionCheked,Mode=TwoWay}"/>
<Ellipse x:Name="E_Ping" HorizontalAlignment="Left" Fill="{Binding PingDotColor}" Height="10" Width="10" Margin="2,4,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.2,-1.182" Grid.Column="1"/>
<TextBlock Text="{Binding titlePing}" Grid.Column="2" MouseDown="TextBlock_MouseDown" Tag="{Binding ComputerName}"/>
<TextBlock Text="{Binding titlePing}" Grid.Column="2" MouseDown="TextBlock_MouseDown" Tag="{Binding ComputerName}"/>
<TextBlock Text="{Binding titleDcai}" Grid.Column="3" MouseDown="TextBlock_MouseDown" Tag="{Binding ComputerName}"/>
<TextBlock Text="{Binding titleAd}" Grid.Column="4" MouseDown="TextBlock_MouseDown" Tag="{Binding ComputerName}"/>
<TextBlock Text="{Binding FPACtitle}" Grid.Column="5" MouseDown="TextBlock_MouseDown" Tag="{Binding ComputerName}"/>
<TextBlock Text="{Binding titleMcAfee}" Grid.Column="6" MouseDown="TextBlock_MouseDown" Tag="{Binding ComputerName}"/>
<TextBlock Text="{Binding gkUser}" Grid.Column="7" MouseDown="TextBlock_MouseDown" Tag="{Binding ComputerName}"/>
<TextBlock Text="{Binding titleservicestat}" Grid.Column="8" MouseDown="TextBlock_MouseDown" Tag="{Binding ComputerName}"/>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
As you can see I have a "TextBlock_MouseDown" on each textbox
Then the c# code.
private void TextBlock_MouseDown(object sender, MouseButtonEventArgs e)
{
TextBlock t = sender as TextBlock;
DetailedView.DataContext = ListControleMachine.Where(x => x.ComputerName == t.Tag.ToString());
DetailedView.Visibility = System.Windows.Visibility.Visible;
}
Ok, so it does what I need basically it pop a view with data rebinded to it.
but I'm pretty sure its not a clean way to do it.
first I don't wont event on each textblock but on the listboxitem it self (but I don't know how to pass computername argument this way).
second and may bee my only problem I think I don't have to search my collection and rebind my new view with this:
DetailedView.DataContext = ListControleMachine.Where(x => x.ComputerName == t.Tag.ToString());
for be clear how to click an item template and pop a view that will contain actual listbox item binded data?

try set DataContext via binding to SelectedItem of ListBox
<DetailedView DataContext="{Binding Path=SelectedItem, ElementName=icTodoList, Mode=OneWay}"/>
or equivalent code
var binding = new Binding
{
Path = new PropertyPath("SelectedItem"),
ElementName = "icTodoList",
Mode = BindingMode.OneWay
};
BindingOperations.SetBinding(DetailedView, Control.DataContextProperty, binding);
another approach
ListBox has SelectionChanged event
<ListBox Name="icTodoList"
SelectionChanged="IcTodoList_OnSelectionChanged">
</ListBox>
event handler
private void IcTodoList_OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
DetailedView.DataContext = icTodoList.SelectedItem;
DetailedView.Visibility = System.Windows.Visibility.Visible;
}
Tag values and TextBlock_MouseDown handler will be not necessary

Switch from one DataTemplate to other

In my wpf application, there is View class where I've ListBox. I wrote the code for double click event of ListBox Item.so when I double click on any list Box Item that item will be posted in my Harvest account.Here is the event:
private void listBox1_MouseDoubleClick(object sender, MouseButtonEventArgs e)
{
//Submit clicked Entry
try
{
ListBoxItem item = (ListBoxItem)sender;
Harvest_TimeSheetEntry entryToPost = (Harvest_TimeSheetEntry)item.DataContext;
if (!entryToPost.isSynced)
{
//Check if something is selected in selectedProjectItem For that item
if (entryToPost.ProjectNameBinding == "Select Project" && entryToPost.ClientNameBinding == "Select Client")
MessageBox.Show("Please select you Project and Client");
else
Globals._globalController.harvestManager.postHarvestEntry(entryToPost);
MessageBox.Show("Entry posted");
}
else
{
//Already synced.. Make a noise or something
MessageBox.Show("Already Synced;TODO Play a Sound Instead");
}
}
catch (Exception)
{ }
}
My xaml code:
<DataTemplate x:Key="DefaultDataTemplate">
<StackPanel Orientation="Horizontal" Width="596">
<TextBox Text="{Binding ClientNameBinding}" Background="Transparent" Padding="0" Margin="0" BorderThickness="0" TextWrapping="Wrap" Width="145"/>
<TextBox Text="{Binding ApplicationNameBinding}" Background="Transparent" Padding="0" Margin="0" BorderThickness="0" TextWrapping="Wrap" Width="90"/>
<TextBox Text="{Binding StartTimeBinding}" Background="Transparent" Padding="0" Margin="0" BorderThickness="0" TextWrapping="Wrap" Width="100"/>
<TextBox Text="{Binding StopTimeBinding}" Background="Transparent" Padding="0" Margin="0" BorderThickness="0" TextWrapping="Wrap" Width="60"/>
<TextBox Text="{Binding ProjectNameBinding}" Background="Transparent" Padding="0" Margin="0" BorderThickness="0" TextWrapping="Wrap" Width="130"/>
<TextBox Text="{Binding TaskNameBinding}" Background="Transparent" Padding="0" Margin="0" BorderThickness="0" TextWrapping="Wrap" Width="71"/>
</StackPanel>
</DataTemplate>
<!-- Editable DataTemplate -->
<DataTemplate x:Key="EditableDataTemplate">
<StackPanel Orientation="Horizontal" Width="596">
<ComboBox x:Name="ClientComboBox" SelectionChanged="ProjectComboBoxChanged" ItemsSource="{Binding Path=clientList, ElementName=MainWin}" SelectedValuePath="_id" DisplayMemberPath="_name" SelectedItem="{Binding ClientNameBindingClass, Mode=OneWayToSource}" Background="Yellow" Padding="0" Margin="0" BorderThickness="0" Width="145"/>
<TextBox Text="{Binding ApplicationNameBinding}" Background="Yellow" Padding="0" Margin="0" BorderThickness="0" TextWrapping="Wrap" Width="90"/>
<TextBox Text="{Binding StartTimeBinding}" Background="Yellow" Padding="0" Margin="0" BorderThickness="0" TextWrapping="Wrap" Width="100"/>
<TextBox Text="{Binding StopTimeBinding}" Background="Yellow" Padding="0" Margin="0" BorderThickness="0" TextWrapping="Wrap" Width="60"/>
<TextBox Text="{Binding TaskNameBinding}" Background="Yellow" Padding="0" Margin="0" BorderThickness="0" TextWrapping="Wrap" Width="130"/>
<ComboBox x:Name="ProjectComboBox" SelectionChanged="ProjectComboBoxChanged" ItemsSource="{Binding Path=projectList, ElementName=MainWin}" SelectedValuePath="_id" DisplayMemberPath="_name" SelectedItem="{Binding ProjectNameBindingClass, Mode=OneWayToSource}" Width="71" Background="Yellow" BorderThickness="0"/>
</StackPanel>
</DataTemplate>
<!-- DataTemplate Selector -->
<l:DayViewListDataTemplateSelector x:Key="templateSelector"
DefaultDataTemplate="{StaticResource DefaultDataTemplate}"
EditableDataTemplate="{StaticResource EditableDataTemplate}"/>
I've timer in my class which generates that EditableDataTemplate with two comboBoxes. My problem is, when I select Client and Project in ComboBoxes and double click on the entry, it's posted in my account but at that time I want it to convert from editableDataTemplate to DefaultDataTemplate (i.e those two comboboxes should become textboxes likewise in DefaultDataTemplate). How should I achieve this result?

I don't think the DataTemplateSelector offers a method of changing the data template on request, it is merely used to choose different templates for different types of data (not data states).
I think probably the best way would be to add a property, lets call it IsInEditMode, to your data model. You could then add both the TextBlock and the Combobox to your data template and toggle their visibility according to the value of IsInEditMode.
By the way: if you use the ListBox.SelectedItem property in your DoubleClick-eventhandler you can directly access the data model element without having to first get the ListBoxItem and then access
its data context.
private void listBox1_MouseDoubleClick(object sender, MouseButtonEventArgs e)
{
//Submit clicked Entry
try
{
if(listBox1.SelectedItem is Harvest_TimeSheetEntry)
{
Harvest_TimeSheetEntry entryToPost = (Harvest_TimeSheetEntry)listBox1.SelectedItem;
if (!entryToPost.isSynced)
{
//Check if something is selected in selectedProjectItem For that item
if (entryToPost.ProjectNameBinding == "Select Project" && entryToPost.ClientNameBinding == "Select Client")
MessageBox.Show("Please select you Project and Client");
else
Globals._globalController.harvestManager.postHarvestEntry(entryToPost);
MessageBox.Show("Entry posted");
entryToPost.IsInEditMode = true; //set edit mode!
}
}
else
{
//Already synced.. Make a noise or something
MessageBox.Show("Already Synced;TODO Play a Sound Instead");
}
}
catch (Exception)
{ }
}

How to remove a custom item from a listBox and ObservableCollection when click on a button

I have the listBox and a ObservableCollection. The listBox.ItemSource (listNotify.ItemSource) is set to that ObservableCollection (errosList).
The problem that i have is that i don`t know how to remove the correct element from errorsList when the user click on the button with content x from listBox. For the item of the listBox i use a ItemTemplate, inside a stackPanel and in stackPanel i have a button.
Bellow is the XAML code:
<ListBox x:Name="listNotify">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="35">
<Image Height="16" Source="/Template;component/Resources/error.png" Stretch="Fill" VerticalAlignment="Top" Width="16"/>
<StackPanel Orientation="Vertical">
<HyperlinkButton Content="{Binding ErrorHeader}" HorizontalAlignment="Left" Height="16" Width="125"/>
<TextBlock Text="{Binding ErrorMessage}" HorizontalAlignment="Left" Width="405" d:LayoutOverrides="VerticalAlignment" />
</StackPanel>
<Button Content="x" Width="20" Height="20" Click="removeError_Click"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The code is from a silverlight 4 project.
Thanks.

private void removeError_Click(object sender, RoutedEventArgs e) {
FrameworkElement fe = sender as FrameworkElement;
if (null != fe) {
_observableCollection.Remove((YourType)fe.DataContext);
}
}
Should do what your looking for. Replace YourType with the type you declared in the ObservableCollectiion.

Don't you have an ID-like property in your Items of the errorsList-Collection? Then you could use the Tag-Property of the Button to archieve this:
<Button Content="x" Width="20" Height="20" Tag="{Binding ID}" Click="Button_Click" />
and in the click-event of the button:
string id = ((Button) sender).Tag.ToString();
var itemToRemove = errorsList.Where(x => x.ID == id).First();
errorsList.Remove(itemToRemove);
Hope that helps