We Keep Coding

Binding label to selected listbox value

Relatively new to WPF and binding. I have a Listbox filled with values. When a user selects a certain value I want to display details of that value over several labels and a textbox. The current LINQ query that fills my listbox list gets the whole table, so the data is inside that list. How do I go around passing the details of the selected value inside of a label?
My current code for the listbox is :
<ListBox x:Name="LBController" Grid.Column="1" HorizontalAlignment="Left" Grid.RowSpan="6" Grid.Row="1"
ItemsSource ="{Binding AllControllers}" SelectedValue="{Binding SelectedControllerID}"
SelectedValuePath="Id" DisplayMemberPath="Name" >
</ListBox>
If a value inside of the listbox is selected, I would like its name to be displayed on a seperate label
<Label x:Name="lbl_controllername"
Content="Controller Naam" HorizontalAlignment="Left" VerticalAlignment="Top"
Grid.Row="1" Grid.Column="2" FontFamily="Corsiva" FontSize="11" Margin="40,0,0,0"/>
EDIT : Thanks for the answers everyone. This does however seem to prove difficult when doing the same thing with a control that has a function behind it.
<TextBox x:Name="txt_CodeDetail"
TextWrapping="Wrap"
AcceptsReturn="True"
FontFamily="Corsiva"
FontSize="11"
Text="{Binding ControllerCode, Mode=TwoWay}"/>
For example I have a textbox, the text inside of it is converted into a string for a function the app does. This string is called ControllerCode. This was done by copy-pasting the code before but I want the textbox to be filled with a selected property from the value inside the listbox.
I can't use
Text="{Binding SelectedItem.Property Elementname=LBController}"
as that would get rid of Controllercode and ruin the function. How can I bind the textbox text to the selecteditem as well as maintain the string that is formed with controllercode?

If you need to display several properties of an element in some area of the window, then it is easier in this area to set a panel in which the data context is bound to the selected element.
And inside this panel, set a set of elements to represent the properties of the selected element.
Example:
<StackPanel DataContext="{Binding SelectedItem, ElementName=LBController}">
<TextBlock Text="{Binding FirstProperty}"/>
<TextBlock Text="{Binding SecondProperty}"/>
<!--Other elements-->
</StackPanel>

Empty LongListSelector causes infinite ScrollViewer

This is the situation:
I have a datasource that gets filtered by certain attribute (lets call it Checked), into two lists on the viewmodel. Call it New and Old.
New one needs to be displayed into one list, Old one needs to be displayed into the list right under it.
Oh and they need to scroll in unison. So if Old is currently out of screen, it will swim into visibility as the list is swiped up.
I've currently solved this with LongListSelectors like this:
<ScrollViewer VerticalAlignment="Top" VerticalScrollBarVisibility="Auto">
<StackPanel>
<phone:LongListSelector x:Name="NewList" Margin="0,0,0,0" ItemsSource="{Binding New}" SelectionChanged="NewList_SelectionChanged">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17">
<TextBlock Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" Foreground="{Binding Color}" />
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
<phone:LongListSelector x:Name="OldList" Margin="0,0,0,0" ItemsSource="{Binding Path=Old}" Padding="0,20,0,0">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17">
<TextBlock Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" FontStyle="Italic" Foreground="{Binding Color}"/>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</StackPanel>
</ScrollViewer>
Two longlistselectors inside a stackpanel inside a scrollviewer. Now it all works absolutely fab while there's something in both of those lists.
However, when one of them has no content whatsoever, it immediately expands to fill the entire height of its parent. In this case... the infinite scrollviewer. Which means that if there's nothing in the New list, there will be absolutely nothing visible on the screen whatsoever and if there's nothing on the New list... I can pretty much scroll infinitely after getting past the New list items.
Do I have any options here? Without programmatically creating a ton of Text fields and then trying to attach events to it, or worse, write my own list control? Standard listboxes don't work because they both scroll separately.
Any ideas?

Having two list controls under each other is a genrally a bad idea, because of ScrollViewers inside ScrolViewers.
I would advise you to use a single LongListSelector without any ScrollViewer around it.
Then create a single collection with old an new items and use an ItemTemplateSelector to style them differently.

The problem you are facing is that by the default when emty LLS is measured it's height as you see is 'infinite'. You are using StacPanel which means that second LLS is under infinite LLS.
The simples solution is to set the Height of LLS:
<phone:LongListSelector x:Name="NewList" Height="300" Margin="0,0,0,0" ItemsSource="{Binding New}" SelectionChanged="NewList_SelectionChanged">
If you can - use a Grid with defined rows instead of StacPanel. If you still want to use StackPanel, you can override the method MeasureOverride() in LLS and make extension.
It should work if you do it like this:
namespace Extensions
{
public class LongListSelectorEx : LongListSelector
{
protected override System.Windows.Size MeasureOverride(System.Windows.Size availableSize)
{
if (this.ItemsSource == null)
return new System.Windows.Size(this.Width, 0);
if (this.ItemsSource.Count <= 0)
return new System.Windows.Size(this.Width, 0);
return base.MeasureOverride(availableSize);
}
}
}
Watch out also if you haven't got width defined (the return value cannot be NaN - in that situation put 0 instead this.Width). Of course you will also need to check Height of LLS, bacause if you don't your controls can be pushed off the screen, when there are many items in LLS.
You can also read about this here

Correct approach to make a ListBox Page Navigation using MVVM on Windows Phone

I am building an app for Windows Phone, and in this app I have a list of Movies with Title, Plot and Picture.
I have this list bound to a ListBox with a custom DataTemplate for the items showing the data. I also created a second page to show the details of each movie.
My problem now is the navigation between these pages. I'm using MVVM to build the applications and most of the approaches I've found searching on internet is to use the OnSelectionChanged event in the code-behind, but it goes agains what I want, that is to use MVVM.
Other approach I've seen, which is the one I'm trying, is to bind the SelectedItem to a property in the ViewModel, but I can't make it change the property, it seems that I cannot select an item in the listbox. Also, I don't have the visual feedback when I press one of the items in my listbox, like the feedback we have in the settings menu of the phone for example.
The code I'm using in the listbox is:
<ListBox Margin="0,0,-12,0" ItemsSource="{Binding Movies}" SelectedItem="{Binding SelectedMovieItem}" SelectionMode="Single" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,0,0,17">
<!--Replace rectangle with image-->
<Rectangle Height="50" Width="50" Fill="#FFE5001b" Margin="12,0,9,0"/>
<StackPanel Width="311">
<TextBlock Text="{Binding Name}" TextWrapping="NoWrap" Style="{StaticResource PhoneTextExtraLargeStyle}" Foreground="#000" />
<!--<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>-->
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Another approach I've seen is to use the INavigationService to achieve this, I found this article: http://windowsphonegeek.com/articles/MVVM-in-real-life-Windows-Phone-applications-Part1
I read the parts one and two, but I couldn't understand this one works.
So, what I want to know is whether the approach I'm using is the correct to make a page navigation, or if there is a better way using MVVM to do this with visual feedback on the listbox.

Why is handling Event in the code behind against MVVM? Handling events interaction is part of the UI. Of course you won't all you code logic there. But you are trying just to go to the next page. I do something like this :
private void MainListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
// If selected index is -1 (no selection) do nothing
if (MainListBox.SelectedIndex == -1)
return;
// Navigate to the new page
NavigationService.Navigate(new Uri("/Views/detailsPage.xaml?selectedItem=" + MainListBox.SelectedIndex, UriKind.Relative));
// Reset selected index to -1 (no selection)
MainListBox.SelectedIndex = -1;
}

Use of DataTemplate

I'm quite new to C# and Windows Phone 7 for that sake, but none the less, I've thrown myself into trying to make a small app for myself. Here's my problem:
I'm trying to set up a DataTemplate that will position my Name and Drinks variables that I've declared in MainPage.xaml.cs. Here's my action when button1 is clicked:
private void button1_Click(object sender, RoutedEventArgs e)
{
string Name = participantName.Text;
int Drinks = 0;
listBox1.Items.Add(Name + Drinks);
}
And here is my DataTemplate from MainPage.xaml
<ListBox Height="Auto" HorizontalAlignment="Stretch" Margin="7,74,0,0" Name="listBox1" VerticalAlignment="Stretch" Width="Auto">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="132">
<TextBlock Text="{Binding Path=Name}" FontSize="35" />
<StackPanel Width="370">
<TextBlock Text="{Binding Path=Drinks}" FontSize="35" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The problem is that my data is not shown. It works perfectly without the DataTemplate, but as soon as I use it, my text simply doesn't get through. Your help is very much appreciated.

The template itself is ok. The bindings on the template, though, are currently incorrect.
When you add a new item to the list box, you are just adding a plain old string (which is currently missing a space, BTW.) Your bindings, though, expect the object in the list to have a Name property and a Drinks property, which of course the string class does not have.
The usual solution here is to logically separate your data model from your presentation, by creating a class to store the data itself (probably PersonDrink, with the appropriate Name and Drinks properties) and then adding those objects to the list.
You should read up on the MVVM pattern, as it provides an excellent way to ensure that changes in your data are reflected in your view, and visa versa.

http://amarchandra.wordpress.com/2011/12/18/binding-multiple-object-in-wp7-using-listbox/
Here is a sample for binding data using a datatemplate. I hope this might help you.

binding event handler to custom object

How can I bind event handler to the custom object that i created?
here is my XAML
<ListBox x:Name="ListData">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,30">
<Image VerticalAlignment="Top" HorizontalAlignment="Left" Source="{Binding Path=TileImage}" Width="175" Height="175" />
<TextBlock Margin="5" Width="200" TextWrapping="Wrap" VerticalAlignment="Top" HorizontalAlignment="Left" Text="{Binding Path=TileName}" FontSize="25"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Code Behind
// Create collection
ImageTiles = new ObservableCollection<ImageTile>();
// Create each object in the collection
ImageTile RSS= new ImageTile("RSS", "/Images/Hard.jpg");
ImageTile test= new ImageTile("test", "/Images/Hard.jpg");
ImageTile Exam= new ImageTile("Exam", "/Images/Hard.jpg");
ImageTile Settings = new ImageTile("Settings", "/Images/Hard.jpg");
ImageTiles.Add(RSS);
ImageTiles.Add(test);
ImageTiles.Add(Exam);
ImageTiles.Add(Settings);
this.ListData.ItemsSource = ImageTiles;
I would like to bind the event handler along with each ImageTile. Any idea how to do so? =)

Based on your code structure I'll answer assuming you're not using MVVM or the like, however I'd definitely recommend that pattern for Silverlight development.
Nevertheless, your datasource binding would be something like:
<ListBox x:Name="ListData" ItemsSource="{Binding ImageTiles}">
</ListBox>
You could create a single generic click handler in your code behind and assign the Image's click event to that handler.
<ImageButton VerticalAlignment="Top" HorizontalAlignment="Left" Source="{Binding Path=TileImage}" Width="175" Height="175" Click="imageButton_Click" />
You could then have a method on your object responsible for redirecting to whatever necessary place for that particular image tile. Then in your code behind handler would resemble this:
private void imageButton_Click(object sender, RoutedEventArgs e)
{
var imageTile = ((ImageButton)sender).DataContext as ImageTile;
imageTile.RedirectSomewhere();
}

In your ViewModel, add a property to capture selected item (e.g.)
private ImageTile _selectedItem;
public ImageTile SelectedItem
{
get {return _selectedItem;}
set
{
if(value != _selectedItem)
{
_selectedItem = value;
RaisePropertyChanged("SelectedItem");
}
}
}
Then, in your XAML, bind the SelectedItem:
<ListBox ItemsSource="{Binding ImageTiles}" SelectedItem="{Binding SelectedItem, Mode=TwoWay}">
</ListBox>
Use MVVM Light (or some other way) to bind the SelectionChanged event to a command, or wire up an event handler for the SelectionChanged event. In your Command (or event handler), get SelectedItem, and look at the first property (you didn't tell us what it was called, so I don't know what to call it).
Remember to make sure that SelectedItem is not null before you do anything, and, when you're done handling the command, set SelectedIndex to -1, so that they can select the same item twice, and still get the functionality to execute.