Adding a List of Songs to a ListBox - c#

i am trying to make my own mediaplayer for Windows Phone 7 and for the first step, i want to display a List of all songs in my media library to select them.
As i understood the ListBox, i just have to name the texblocks like the attributes of my class, which would be "Song"
<ListBox FontSize="30" Name="songListGUI" Height="330" Margin="0,120,0,0">
<Button Width="430" Height="60" BorderThickness="0" Margin="0" >
<Button.Content>
<StackPanel Orientation="Horizontal" Width="420" Height="auto">
<TextBlock Name="Name" Text="{Binding Name}" FontSize="22"></TextBlock>
<TextBlock Text=" - " FontSize="22"></TextBlock>
<TextBlock Name="Artist" Text="{Binding Artist}" FontSize="22"></TextBlock>
</StackPanel>
</Button.Content>
</Button>
</ListBox>
And now i think, i should handle my list of songs to the GUI and i try to do that with:
songListGUI.ItemsSource = songs;
But then i get a "InvalidOperationException" - Items collection must be empty before using ItemsSource.
I found several problems like this, and they all created a new class, to display this content. But i would like to stick with the song class, as it comes in quite handy :/
Do you know what i am doing wrong here?
edit:
i just found the solution. Don´t know exactly why, but this change in the .xaml made my da :):
<ListBox FontSize="30" Name="songListGUI" Height="330" Margin="0,120,0,0">
<ListBox.ItemTemplate>
<DataTemplate>
<Button Width="430" Height="60" BorderThickness="0" Margin="0" >
<Button.Content>
<StackPanel Orientation="Horizontal" Width="420" Height="auto">
<TextBlock Name="Name" Text="{Binding Name}" FontSize="22"></TextBlock>
<TextBlock Text=" - " FontSize="22"></TextBlock>
<TextBlock Name="Artist" Text="{Binding Artist}" FontSize="22"></TextBlock>
</StackPanel>
</Button.Content>
</Button>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Anybody could explan this to me?

ListBox is an ItemsControl. The content of an ItemsControl maps to the Items property. So by doing this:
<ListBox>
<SomeContent/>
</ListBox>
you're setting the Items property to <SomeContent/>. Since you aren't allowed to set the Items property and the ItemsSource property you get an exception.
When you do this:
<ListBox>
<ListBox.ItemTemplate>...</ListBox.ItemTemplate>
</ListBox>
You're not setting the content you're setting an attribute of the ListBox so there's no conflict.

Related

Add an image/icon beside treenavigator items

I have a syncfusion treenavigator dropdown menu. Our client wants to add an icon per item in the first 2 drilldowned menus of the treenavigator. Given that the list of the items came from a deserialized json object, how do I map and inject the images without adding it in the json file? My colleague suggested to create an item template in code behind but I'm not sure how to do it.
P.S. Please do not put this on hold. It's hard to formulate a question if you can't fully understand what you need to ask. I'll try to answer any clarifications.
Thanks!
Please set the image paths in ViewModel only for the items you want to show images. You can try with the following code:
xmlns:navigation="using:Syncfusion.UI.Xaml.Controls.Navigation"
xmlns:primitives="using:Syncfusion.UI.Xaml.Primitives"
<navigation:SfTreeNavigator ItemsSource={Binding NavigatorItems}>
<navigation:SfTreeNavigator.ItemTemplate>
<primitives:HierarchicalDataTemplate ItemsSource="{Binding Models}" x:Key="Template">
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding ImageSource}" Width="18" Height="18"/>
<TextBlock Text="{Binding Header}" VerticalAlignment="Center" Margin="18 0 0 0"/>
</StackPanel>
</DataTemplate>
<primitives:HierarchicalDataTemplate.ItemTemplate>
<primitives:HierarchicalDataTemplate ItemsSource="{Binding Models}">
<DataTemplate>
<StackPanel Orientation="Vertical">
<Image Source="{Binding ImageSource}" Width="18" Height="18"/>
<TextBlock Text="{Binding Header}" VerticalAlignment="Center" Margin="18 0 0 0"/>
</StackPanel>
</DataTemplate>
<primitives:HierarchicalDataTemplate.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Image Source="{Binding ImageSource}" Width="18" Height="18"/>
<TextBlock Text="{Binding Header}" VerticalAlignment="Center" Margin="18 0 0 0"/>
</StackPanel>
</DataTemplate>
</primitives:HierarchicalDataTemplate.ItemTemplate>
</primitives:HierarchicalDataTemplate>
</primitives:HierarchicalDataTemplate.ItemTemplate>
</primitives:HierarchicalDataTemplate>
</navigation:SfTreeNavigator.ItemTemplate>
Note: Syncfusion.SfTreeNavigator.UWP and Syncfusion.SfSharedd.UWP assemblies are required.
Regards,
Jessie

Trouble with multiple selection of a list box in wp8

I'm using ListBox to list a group of items and i want the user to select multiple items from the list. I tried it with the following code,
<ListBox x:Name="List" SelectionMode="Multiple" HorizontalAlignment="Left" Height="559" Margin="14,1,-1,0" VerticalAlignment="Top" Width="443" SelectionChanged="List_SelectionChanged_1">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Width="420" Height="60">
<TextBlock x:Name="tbName" Width="318" Foreground="{Binding color}" Height="35" FontSize="22" Text="{Binding Name}" Margin="-350,13,69,12" />
<Canvas x:Name="ContentPanelCanvas" Grid.Row="1" Background="Transparent" Margin="0,0,12,0">
<Line X1="0" Y1="00" X2="420" Y2="0" Stroke="Gray" StrokeThickness="0.3"/>
</Canvas>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
But still i didn't get a checkbox to select multiple items.
What is the problem?
I think it will be better if you use LongListMultiSelector from Windows Phone Toolkit
You can find code samples here. Also take a look of this question.

ItemRealized event does not fire

I wanna create a infinite longlistselector, but my event ItemRealized does not fire. i have create view model so i can generate an observable collection, and everything sees to be working fine when i monitoring the main class, i'm sure that it is not empty, but my problem is that i can not populate the longlistselector
<phone:PhoneApplicationPage.Resources>
<vm:GoogleView x:Key="viewModel"/>
</phone:PhoneApplicationPage.Resources>
longlistselector
<phone:LongListSelector ItemRealized="m_ListBoxGoogle_ItemRealized" Name="m_ListGoogle" HorizontalAlignment="Center" Height="410" Margin="0,120,0,0"
ItemsSource="{Binding GoogleCollection}"
DataContext="{StaticResource viewModel}">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<Button Tag="{Binding GoogleID}" Style="{StaticResource NoVisualTextButton }" toolkit:TiltEffect.IsTiltEnabled="True" Click="OnListBoxItemClick" Margin="-10,0,0,0">
<StackPanel Orientation="Horizontal" Margin="0,3,0,0" Height="auto" Width="450">
<Border BorderThickness="1" Width="62" Height="62" BorderBrush="#00aef0" Background="#00aef0">
<Image Height="60" Width="60" Source="{Binding GoogleImagePath}"/>
</Border>
<StackPanel Width="350" HorizontalAlignment="Center" Margin="12,0,0,0" >
<TextBlock Text="{Binding GoogleDisplayName}" TextWrapping="NoWrap" Style="{StaticResource PanoramaItemTextStyle }" FontSize="24" />
<TextBlock Text="{Binding GoogleObjectType}" TextWrapping="NoWrap" Style="{StaticResource PanoramaItemTextStyle }" FontSize="20" />
</StackPanel>
</StackPanel>
</Button>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
i'm really stuck guys, please help me
Try these things for I believe its a binding issue:
Debug and put a breakpoint in the GoogleView constructor and verify
it is being instantiated.
If it is being instantiated verify the data you are binding to exists within the class.
If everything instantiated, try binding to the collection as TwoWay binding mode.
If that doesn't work try binding to the data in another control to verify things are working properly.

Easiest way to access Texblock inside listbox itemtemplate

I have seen a lot of questions and answers with almost the same problem, but none of these answers arent working for me. Soo, my code is:
<ListBox ItemsSource="{Binding Avakuvaandmed}" x:Name="lboxandmed" HorizontalAlignment="Left" Height="552" VerticalAlignment="Top" Width="970" SelectionChanged="lboxandmed_SelectionChanged" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" x:Name="spanVärviSeda">
I HAVE TO GET VALUE OF THIS --> <TextBlock x:Name="IDbox" Width="50" Text="{Binding Id}"></TextBlock>
<TextBlock Width="130" Text="{Binding Nrmärk}"></TextBlock>
<TextBlock x:Name="txtKehtivus" Width="130" Text="{Binding Lõpp}"></TextBlock>
<TextBlock Width="130" Text="{Binding Eesnimi}"></TextBlock>
<TextBlock Width="130" Text="{Binding Perenimi}"></TextBlock>
<TextBlock Width="130" Text="{Binding Mark}"></TextBlock>
<TextBlock Width="130" Text="{Binding Mudel}"></TextBlock>
<TextBlock Width="130" Text="{Binding Aasta}"></TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
And I have to get the value of the textblock named "IDbox".
Please can someone help me, or atleast give me a clue how.
Your code looks correct. If you want to access the Value of IDbox in code behind then you can do it by Avakuvaandmed.ElementAt(rowno).Id because you are binding Id to the IDBox. If you want to access the BoxId value in xaml. Then use binding as follows:
{Binding Avakuvaandmed[rowno],Path=Id}
You can also access Textblock value by using VisualTreeHelper class. You will need to go traverse all elements in ListBox.

Add more than one item in a list view

I'm doing a program that i need to insert two items in the same line of the list view.
That's the XAML code:
<ListView Height="486" HorizontalAlignment="Left" Margin="12,12,0,0" Name="lvTimeline" VerticalAlignment="Top" Width="260">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding}" MaxHeight="48" MaxWidth="48" />
<TextBlock TextWrapping="Wrap" MaxWidth="250" Margin="2,0,2,0" Text="{Binding}" VerticalAlignment="Center" FontSize="14" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I have tried infinity ways to do that, but nothing work. What can I do?
The ListView needs an ItemsSource then you bind the Path on the two items. And you can also create columns with a GridView. I like GridView because it sizes columns with headers.

Categories