Binding in Nested List Boxes to multiple classes - windows-phone-7

I'm making a nested listed box , basically because I need to bind multiple classes in a single list box , which I'm not able to do and hence the nested listed box.
Here's what I do in the XAML page :
<ListBox Name="abcd" Margin="10,0,30,0" ItemsSource="{Binding Title}" SelectionChanged="ListBox_SelectionChanged" Height="486" Width="404" FontSize="20">
<ListBox.ItemTemplate>
<DataTemplate >
<StackPanel Margin="0,0,10,0" Width="380" Height="140">
<Grid >
<TextBlock Text="{Binding cdata}" TextWrapping="Wrap" FontSize="{StaticResource PhoneFontSizeLarge}" />
<ListBox Name="ab" ItemsSource="{Binding Description}" FontSize="14">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Width="380" Height="100">
<Grid>
<TextBlock Text="{Binding cdata}" TextWrapping="Wrap" FontSize="{StaticResource PhoneFontSizeLarge}" />
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
where ListBox "abcd" has to be bound with class title and "ab" to the class Description.Both the classes have just one string field , "cdata".
In the xaml.cs I do :
abcd.ItemsSource=from article in root.openfooty.news.article
select new Classes.Title
{
cdata = article.title.cdata
};
ab.ItemSource = from article in root.openfooty.news.article
select new Classes.Description
{
cdata = article.description.cdata
};
binding with "abcd" works fine but with "ab" it says "the nam ab doesnt exist in the current context"
Any help would be much appreciated. Thanks :D

Why don't you write a single class like this
public class TitleDescription
{
public string title { get; set; }
public string description { get; set; }
}
and try the databinding ?
abcd.ItemsSource=from article in root.openfooty.news.article
select new Classes.TitleDescription
{
title = article.title.cdata,
description = article.description.cdata
};
And have only one list box like this
<ListBox Name="abcd" Margin="10,0,30,0" SelectionChanged="ListBox_SelectionChanged" Height="486" Width="404" FontSize="20">
<ListBox.ItemTemplate>
<DataTemplate >
<StackPanel Margin="0,0,10,0" Width="380" Height="140">
<Grid >
<TextBlock Text="{Binding description}" TextWrapping="Wrap" FontSize="{StaticResource PhoneFontSizeLarge}" />
<TextBlock Text="{Binding title}" TextWrapping="Wrap" FontSize="{StaticResource PhoneFontSizeLarge}" />
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Related

How to Reference the ViewModel in the View

I am attempting to reference a class in my ViewModel within the xaml of my view, and I am getting an error saying Object reference not set to an instance of an object. THe error occurs when attemping to set the ViewModel as the Resource for a ListBox. Also, when attempting to set the ItemsSource property of my ListBox, another error results stating The resource "effects" could not be resolved.
MainPage.xaml
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.Resources>
//Error occurs here!
<vm:EffectItems x:Key="effects"/>
</Grid.Resources>
//The ItemsSource property thus contains an error as well
<ListBox Name="ListBoxEffects" SelectionMode="Single" ItemsSource="{StaticResource effects}" SelectionChanged="ListBox_SelectionChanged"
toolkit:TiltEffect.IsTiltEnabled="True"
ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Auto">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal" ItemWidth="152" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Margin="14,0,0,10" >
<Image Source="{Binding Thumbnail}" Width="128" Height="128" />
<TextBlock Text="{Binding Name}" FontSize="{StaticResource PhoneFontSizeNormal}" VerticalAlignment="Center" HorizontalAlignment="Center" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
I have also tried the following setup which results in the same errors on the same items
<ListBox Name="ListBoxEffects" SelectionMode="Single" ItemsSource="{StaticResource effects}" SelectionChanged="ListBox_SelectionChanged"
toolkit:TiltEffect.IsTiltEnabled="True"
ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Auto">
<ListBox.Resources>
<vm:EffectItems x:Key="effects"/>
</ListBox.Resources>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal" ItemWidth="152" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Margin="14,0,0,10" >
<Image Source="{Binding Thumbnail}" Width="128" Height="128" />
<TextBlock Text="{Binding Name}" FontSize="{StaticResource PhoneFontSizeNormal}" VerticalAlignment="Center" HorizontalAlignment="Center" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
ViewModel class
public class EffectItems : ObservableCollection<EffectItem>
{
public EffectItems()
{
Add(new EffectItem(new BlackWhiteEffect(), "data/icons/BlackWhite.png"));
Add(new EffectItem(new SepiaEffect(), "data/icons/Sepia.png"));
Add(new EffectItem(new TiltShiftEffect { UpperFallOff = 0.2f, LowerFallOff = 1.0f }, "data/icons/TiltShift.png"));
Add(new EffectItem(new PolaroidEffect { Tinting = 0.8f }, "data/icons/PolaYellow.png", "Pola"));
}
}
At the top of my page I have xmlns:vm="clr-namespace:AppName.ViewModels" which contains no errors.
You can bind your ViewModel to a View by setting the views DataContext. The straight forward way is to set it in the constructor of the code behind:
// Constructor
public MainPage()
{
InitializeComponent();
DataContext = new EffectItems();
}
Then you can set the ItemsSource of your List to the DataContext by using the default binding:
ItemsSource="{Binding}"

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
}

How to use Listbox in wp7?

I have one listbox control in my xaml par.My code for listbox is
<ScrollViewer Grid.Row="2" Name="ScrollGrid" VerticalScrollBarVisibility="Auto" VerticalAlignment="Top" Height="Auto" Width="450" Margin="0,100,0,0" >
<ListBox x:Name="TransactionList" Grid.Row="2" HorizontalAlignment="Center" Margin="0,0,0,0" Width="400" Height="Auto">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" Margin="0,-10,0,0" Height="120" Width="400" MouseLeftButtonUp="StackPanel_MouseLeftButtonUp">
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" Height="80" Width="300" Margin="0,0,20,0">
<TextBlock Height="Auto" Margin="20,0,0,0" VerticalAlignment="Center" Text="vodafone vas" FontSize="30" Foreground="Gray" Name="tbCitynameFavorite" />
</StackPanel>
<StackPanel Orientation="Vertical" Height="60" Width="60" Margin="0,0,0,30">
<Image Name="imgfevdlt" Width="50" Height="40" VerticalAlignment="Center" FlowDirection="LeftToRight" Source="/VodafoneAugmentedReality;component/Images/ArrowMoreSmall.png" />
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Height="10" Width="350" Margin="-360,60,0,0">
<Image Source="/VodafoneAugmentedReality;component/Images/SaperaterLine.png" Width="350" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
When i run application this will not display any data
But when i comment out this two tag than it will run perfectly
<ListBox.ItemTemplate>
<DataTemplate>
Here i have only static value so it will ok but when i have multiple value than it will create problem
So plase help me i can solve this problem?
You will have to set up a class (say ListBoxItem ) which contains all the properties of your DataTemplate members values
And then define a List of ListBoxItem 's and set it as the ItemSource of your ListBox
Example code
public class ListBoxItem
{
public string CityNameFavorite { set; get; }
// Other required properties follows here
}
List<ListBoxItem> listBoxItems = new List<ListBoxItem>();
listBoxItems.Add(new ListBoxItem() { CityNameFavorite = "Vodafone vas" });
//Add as many items you need
TransactionList.ItemsSource = listBoxItems;
This is just an overview of how it can be achieved, improvise based on your needs

get items in listboxitem

I have an xaml code about listbox object:
<ListBox x:Name="FirstListBox" Margin="0,0,-12,0" ItemsSource="{Binding Items}" SelectionChanged="FirstListBox_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<Grid>
<TextBlock Text="{Binding LineOne}" TextWrapping="NoWrap" Margin="50,0,0,0" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding LineTwo}" TextWrapping="NoWrap" Margin="12,60,0,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
<CheckBox VerticalAlignment="Top" Margin="0,-5,0,0"/>
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
i was get my listboxitem by the code :
ListBoxItem item = this.list.ItemContainerGenerator.ContainerFromIndex(2) as ListBoxItem;
but i don't know how to get all items in this listbox item (including textblock and checkbox option).
please help me. thanks all.
Ideally, you'd want to have your checkbox bound to a property of your item data model, so for example, you may have...
public string LineOne { get; set; }
public string LineTwo { get; set; }
public bool MyBooleanValue { get; set; }
and then
<ListBox x:Name="FirstListBox" Margin="0,0,-12,0" ItemsSource="{Binding Items}" SelectionChanged="FirstListBox_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<Grid>
<TextBlock Text="{Binding LineOne}" TextWrapping="NoWrap" Margin="50,0,0,0" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding LineTwo}" TextWrapping="NoWrap" Margin="12,60,0,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
<CheckBox Checked="{Binding MyBoolValue, Mode=TwoWay}" VerticalAlignment="Top" Margin="0,-5,0,0"/>
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Then you can pull back the DataContext for the item you are currently looking at (on a tap method or similar), or when you parse through your "Items" collection, all the checkbox states will be in the child objects for you already.

WP7 image binding

I have a Windows phone 7 application which contains a listbox. I want, for each item in the listbox to have a particular image.
<ListBox Height="606" HorizontalAlignment="Left" ScrollViewer.VerticalScrollBarVisibility="Visible"
Margin="20,20,0,0"
Name="listBox1" VerticalAlignment="Top" Width="414" ItemsSource="{Binding SubList, Mode=OneWay}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Height="50" Width="50"
VerticalAlignment="Top" Margin="0,10,8,0" Source="{Binding Image, Mode = OneWay}"/>
<StackPanel Orientation="Vertical">
<HyperlinkButton Content="{Binding Cathegory, Mode=OneWay}" NavigateUri="" HorizontalAlignment="Right">
</HyperlinkButton>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
And the property binded to the Source property of the Image control is an Uri.
My problem is that the image is not shown in the listbox.
I have tried using a string instead of the Uri but I get the same issue.
I kindly appreciate any help :).
This should work:
public class Item
{
public int Number { get; set; }
public Uri ImageUri { get; set; }
public Item(int number, Uri imageUri)
{
Number = number;
ImageUri = imageUri;
}
}
And the datatemplate:
<ListBox x:Name="Items">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Number}"></TextBlock>
<Image Source="{Binding ImageUri}"></Image>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Check out this other SO answer, I believe it contains the answer to your question:
Image UriSource and Data Binding
But the basics of it is that you need to convert your URI/string to a BitmapImage (either via viewmodel property, or converter)

Resources