how to get single string property of LongListSelector selectedItem - windows-phone-7

i have this LongListSelector bound to observerableCollection
<DataTemplate x:Key="ucItems" >
<Grid Margin="0,0,0,17">
<TextBlock Text="{Binding Title}" TextWrapping="Wrap"
Style="{StaticResource MyBigBoldPhoneTextStyle}" />
</Grid>
</DataTemplate>
and
<toolkit:LongListSelector x:Name="ucLongList" IsFlatList="True"
ItemsSource="{Binding UcItem}"
ItemTemplate="{StaticResource ucItems}"
ListHeaderTemplate="{StaticResource ucHeader}"
SelectionChanged="ListBox_SelectionChanged" />
UcItem has 3 property which are: Title, ImageUri, Link
I need to get the selected-ucItem-Link property to pass it to other methods.
how can i do that?
Im new to LongListSelector and i used to get a selected property from SelectedIndex from listbox. And there is no selectedIndex in LongListSelector so i have to use SelectedItem to get the single property on it.
please help thanks.

Here's the xaml for DateTemplate
<DataTemplate x:Key="ucItems" >
<Grid Margin="0,0,0,17">
<TextBlock Text="{Binding Title}" TextWrapping="Wrap"
Tag="{Binding}"
Style="{StaticResource MyBigBoldPhoneTextStyle}" />
</Grid>
</DataTemplate>
Now for codebehind. When you are looping through the selecteditems
var tbSender = (TextBlock)sender;
var theReference = (UcItem)tbSender.Tag;
Messagebox.Show(theReference.Link);
So that way the Tag attribute will reference to the instance of UcItem.

Related

Getting information from child element of stackpanel within listbox

I know there should be a simple solution to this question but I just cant seem to figure it out here is what my code looks like:
<ListBox HorizontalAlignment="Left"
x:Name="locationsNB"
VerticalAlignment="Top"
Height="563"
Width="455"
SelectionChanged="locationsNB_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal"
Margin="18,0,0,0"
x:Name="placeDetails">
<Image Source="{Binding icon}"
Height="40"
Width="40"
VerticalAlignment="Top"
Margin="0,10,8,0" />
<StackPanel Width="350">
<TextBlock Text="{Binding name}"
FontSize="35"
Foreground="#399B81"
TextWrapping="Wrap" />
<TextBlock Text="{Binding vicinity}"
FontSize="20"
Foreground="#888888"
TextWrapping="Wrap" />
<TextBlock x:Name="reference"
Text="{Binding reference}"
Visibility="Collapsed" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I want to get the stackpanel->reference text (Text="{Binding reference}") of the selected item I dont know what my C# should look like but any help will be greatly appreciated.
If the ItemsSource of your ListBox is bound to a collection of items then you can use the SelectedItem property of the ListBox
private void locationsNB_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
var listbox = (ListBox)sender;
var myObject = listbox.SelectedItem as MyCustomObject;
if (myObject == null) return;
// perform your custom logic with this item
}

Windows Phone 7 - dynamic items for a ListBox

I want to create the content of the each item inside a ListBox dynamically - think of it as a list of items. Or think of a phone book application with contacts and each contact has one or more phone numbers that are displayed beneath the name; the name is one field, the phone numbers is a second field. But the content of the phone number field would obviously depend on the number of phone number the contact has.
Like:
Andrew Adams <-- TextBlock for name
650-123-2222 <-- "Item" for numbers
490-222-3333
Benny Benjamin
650-123-3333
I have tried to solve this by creating a second ListBox for the numbers item inside the main ListBox item. But I don't know how I can populate this second ListBox with a model from C#.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel Height="Auto" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<ListBox Name="ContactResultsData" ItemsSource="{Binding Contacts}" Margin="24,0" Height="620">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Name="ContactName" Text="{Binding ContactName}" Style="{StaticResource PhoneTextLargeStyle}" />
<ListBox Name="NumbersList" ItemsSource="{Binding NumbersList}">
<TextBlock Name="Number" Text="{Binding Number}" Style="{StaticResource PhoneTextSmallStyle}" />
</ListBox>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>
</Grid>
Question would be: How can I set NumbersList ItemsSource from C#? Or can I solve my problem with some other better approach?
You need to set the ItemTemplate for your second ListBox. It should look like:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel Height="Auto" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<ListBox Name="ContactResultsData" ItemsSource="{Binding Contacts}" Margin="24,0" Height="620">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Name="ContactName" Text="{Binding ContactName}" Style="{StaticResource PhoneTextLargeStyle}" />
<ListBox Name="NumbersList" ItemsSource="{Binding NumbersList}">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Name="Number" Text="{Binding Number}" Style="{StaticResource PhoneTextSmallStyle}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>
On a side note, don't give your UI elements name (Name or x:Name) unless you need to use them in code behind or from xaml. This is especially true for items within an ItemTemplate.
The inner can't directly contain a
If NumbersList is an IList or similar, then you can't bind to "Number" - simply use {Binding} instead

ListBox Style Selected item on windows phone

i would like know how can i add a style when a item of the listbox is selected.
I have the following listbox:
<ListBox x:Name="ListBoxDays"
VerticalAlignment="Top"
ItemTemplate="{StaticResource WeekDayTemplate}"
ItemsSource="{Binding WeekDayList}" />
And i also have a DataTemplate to the listbox.
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="WeekDayTemplate">
<StackPanel x:Name="stackPanel" Orientation="Horizontal" Width="400" Margin="12,0,0,10" Height="100" >
<StackPanel VerticalAlignment="Center" Orientation="Vertical">
<TextBlock Text="{Binding WeekDayName}" Style="{StaticResource PhoneTextExtraLargeStyle}" TextWrapping="Wrap" TextTrimming="WordEllipsis" Foreground="{StaticResource PhoneRadioCheckBoxPressedBorderBrush}" UseLayoutRounding="True" />
<TextBlock Text="{Binding ShortDate}" Style="{StaticResource PhoneTextTitle2Style}" TextWrapping="Wrap" TextTrimming="WordEllipsis" Foreground="{StaticResource PhoneBorderBrush}" Margin="25,0,12,0" />
</StackPanel>
</StackPanel>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
At the moment when i select an item of the listbox no color change happens.
You have to change the style of the template ListBoxItem which the ListBox generates for each of the items that it renders. Your updated template needs to customise the Selected visual state. You can then associate this new template with your ListBox via the ListBox.ItemContainerStyle property.
There is a good tutorial, with sourcecode to download, here:
http://windowsphonegeek.com/tips/How-to-customize-the-WP7-ListBox-Selected-Item--Part1-Control-Template

getting information from a data binding listBox for a new page

I have a news section that consist of listBox binding from a ViewModel (listBox include)
<controls:PanoramaItem x:Name="News" Header="News">
<!--Double line list with image placeholder and text wrapping-->
<ListBox x:Name="News_ListBox" Margin="0,0,-12,0" ItemsSource="{Binding Items}"SelectionChanged="SelectNewsItem">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,0,0,17">
<!--Replace rectangle with image-->
<Rectangle Height="100" Width="100" Fill="#FFE5001b" Margin="12,0,9,0"/>
<StackPanel Width="311">
<TextBlock Name="NewsTitle" Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Name="NewsDetail" Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</controls:PanoramaItem>
I want to do that when some one click on a news item it takes him to a new page and view the full information. I did the selectionChanged event but I don't know How to get the news information from the binding?
Plz help me.
Thanks,
a typical SelectionChanged handler for these cases should look like this:
private void lstItems_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (lstItems.SelectedIndex == -1) return;
var item = lstItems.SelectedItem as MyClass;
// do navigation here
lstItems.SelectedIndex = -1;
}
This is a part of DataBound template in visual studio for WP7.

Container inside Datatemplate inside Listbox is null when list is too long

I have a listbox contains a datatemplate with Image and TextBlock control inside. I want to get the ImageControl out by first getting the Grid Container
<ListBox x:Name="NewsList" Margin="0,0,20,0" SelectionChanged="NewsList_SelectionChanged" />
<DataTemplate>
<Grid Width="400" Height="89">
<Image HorizontalAlignment="Left" Width="64" x:Name="ImageThumbnail" Height="64" VerticalAlignment="Top" Margin="0,10,0,0" Source="http://vnexpress.net/Files/Subject/3B/A2/3B/15/top.jpg"/>
<TextBlock Text="{Binding Title}" Margin="78,0,8,0" TextWrapping="Wrap" FontSize="26.667" Height="74" VerticalAlignment="Top"/>
</Grid>
</DataTemplate>
</ListBox>
for (int i = 0; i < feeds.Count; i++)
var containerItem = list.ItemContainerGenerator.ContainerFromIndex(i);
And when I set the NewsList.Items = Feeds with feeds.Count is more than 23, some of the containerItem is null. If it is less than 23, I never get a null container.
Does anyone know what is the cause and how I can fix it. If we can have another way to get the imageControl out
One thing I can see is that your xaml doesn't look right to me.
Shouldn't it look like this:
<ListBox x:Name="NewsList" Margin="0,0,20,0" SelectionChanged="NewsList_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Width="400" Height="89">
<Image HorizontalAlignment="Left" Width="64" x:Name="ImageThumbnail" Height="64" VerticalAlignment="Top" Margin="0,10,0,0" Source="http://vnexpress.net/Files/Subject/3B/A2/3B/15/top.jpg"/>
<TextBlock Text="{Binding Title}" Margin="78,0,8,0" TextWrapping="Wrap" FontSize="26.667" Height="74" VerticalAlignment="Top"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Beyond that I'm not sure if that will totally help you or not.
My answer is to write a new ImageConverter that we can put into the tag in the xaml file, I don't have to deal with VisualTree anymore, so it works

Resources