Play a selected song in MediaLibrary WP8 - windows-phone-8

Here is my problem : I have a LongListSelector which list songs from MediaLibrary and a SelectionChanged event. When the user taps on a song from the LongListSelector, it plays the song once, but then then it stops. But I'd like to play next song from the MediaLibrary once the selected song is finished
Here is my LongListSelector :
<phone:LongListSelector x:Name="llsSongs" SelectionChanged="llsSongs_SelectionChanged" Margin="0,-30,0,0">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Margin="5,5,5,5">
<TextBlock Text="{Binding Name}" FontSize="20" Foreground="Black"/>
<TextBlock Text="{Binding Artist}" FontSize="15" Opacity="0.75" Foreground="Black"/>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
and the SelectionChanged method
private void llsSongs_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
Song _selectedSong = llsSongs.SelectedItem as Song;
MediaPlayer.Play(_selectedSong);
}

Take a look at those articles
http://msdn.microsoft.com/en-us/library/windowsphone/develop/hh394039(v=vs.105).aspx
http://developer.nokia.com/community/wiki/Audio_recording_and_playback_options_in_Windows_Phon
EDIT:
Based on your usage of the MediaLibrary and MediaPlayer XNA.Framework.Media namespace classes, you could take advantage of MediaPlayer's MediaStateChanged event.
private void MediaPlayerOnMediaStateChanged(object sender, EventArgs e)
{
if (MediaPlayer.State == MediaState.Stopped)
{
MediaPlayer.Play(nextSong);
}
}
Since your collection holds the Song's returned from MediaLibrary.Songs, SongCollection the nextSong will be the next index in your data bound collection.

Related

Binding listbox in listbox on Windows Phone 8

I want to bind AnswerList in QuestionList. When I run code, only have question list on the screen.
<ListBox x:Name="listques" ItemsSource="{Binding QuestionList }">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock x:Name="quesdetail" Text="{Binding QuestionContent.que_detail}" HorizontalAlignment="Left" Margin="27.669,34.338,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="252.564" Width="419.534" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto">
</TextBlock>
<ListBox>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock x:Name="ansdetail" Foreground="Blue" Text="{Binding Answer.ans_detail}">
</TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
You should have a property AnswerList inside your Question object. Assign that as the itemsSource of the inner ListBox. So for each question you will have a list of answers.
<ListBox x:Name="InnerListBox" ItemsSource = "{Binding QuestionContent.AnswerList}">
#Bells is right. To elaborate his answer a little more, let me explain by an external example.
Example:-
// MainPage.xaml page
// eg. we have a nested ListBox for questions and answers
<ListBox x:Name="lbxRoot">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding que}" FontSize="30" />
<ListBox ItemsSource="{Binding lstAns}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding}" Margin="20 0 0 0" FontSize="30"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
To assign ItemsSource to the RootListBox let's define one model class which contains one question and a list of answers of that question.
// MainPage.xaml.cs file add one class named Model as below
public class Model
{
public string que { get; set; }
public List<string> lstAns { get; set; }
}
Now, we are going to assign ItemsSource to root ListBox in Loaded event of the page so declare the event handler in the MainPage's Constructor.
this.Loaded += MainPage_Loaded;
and then define the Loaded event handler as below.
// MainPage.xaml.cs file
// Loaded event handler
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
Model m1 = new Model()
{
que = "Question 1",
lstAns = new List<string>()
{
"que 1 - ans 1", "que 1 - ans 2", "que 1 - ans 3"
}
};
Model m2 = new Model()
{
que = "Question 2",
lstAns = new List<string>()
{
"que 2 - ans 1", "que 2 - ans 2", "que 3 - ans 3"
}
};
List<Model> lstModels = new List<Model>();
lstModels.Add(m1);
lstModels.Add(m2);
lbxRoot.ItemsSource = lstModels;
}
It will give output like below image:
And there you go..!!
Try to relate your scenario with this example, and you're done..!
Hope that helps..
A ListBoxItem will try to find the binding inside the properties of its current item in the ItemSource. So the first ListBox will try to find the properties on its ItemSource and the inner ListBox will try to find its bindings on its ItemSource.
If you want to bind the inner ListBox's ListBoxItem you have to specify the relativeSource (To make it clear prop1 means a property, no matter which one):
<ListBox ItemSource="{Binding list1}"
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding propList1}"/>
<ListBox ItemsSource="{Binding list2}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding DataContext.propList1,
RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ListBox}}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
With this line
<TextBlock Text="{Binding DataContext.propList1,
RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ListBox}}"/>
wpf will look for a parent of type ListBox in its visualtree, and use its DataContext, and its DataContext is the ListBoxItem of the outter ListBox.

How to handler click item from string inside of listview Windows Phone 8.1

I've been reading this article about Navigation Drawer and i Succeed, but how can i create a Click Event to each item i have inside of mu ListView?
i have that Array and bind all this to listview!
string[] menuItems = new string[5] { "Item1", "Item2", "Item3", "Item4", "Item5" };
ListMenuItems.ItemsSource = menuItems.ToList();
XAML.....
<Grid x:Name="ListFragment" Background="#F4F4F4">
<ListView x:Name="ListMenuItems" SelectedItem="true" SelectionChanged="ListMenuItems_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" Margin="10" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="18" Foreground="Black" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
Thanks!
Define an event handler for ItemClick event of ListView. You also need to set IsItemClickEnabled property to true.
<ListView x:Name="listview"
IsItemClickEnabled="True"
ItemClick="listView_ItemClick">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
..
..
private void listView_ItemClick(object sender, ItemClickEventArgs e) {
// Code here
}

Windows Phone open ListPicker in Fullscreen mode on AppBarButton click

I want to open a ListPicker in Fullscreen mode on ApplicationBarButton click. The ListPicker should be opened as new popup and should not be visible in the page.
This was my try:
private void OnAppBarButtonClick(object sender, EventArgs e)
{
ListPicker listPicker = new ListPicker();
listPicker.ExpansionMode = ExpansionMode.FullScreenOnly;
this.ContentPanel.Children.Add(listPicker);
ListPickerItem item1 = new ListPickerItem() { Content = "Item1" };
ListPickerItem item2 = new ListPickerItem() { Content = "Item2" };
ListPickerItem item3 = new ListPickerItem() { Content = "Item3" };
listPicker.Items.Add(item1);
listPicker.Items.Add(item2);
listPicker.Items.Add(item3);
listPicker.Open();
}
You can accomplish this by defining the ListPicker in your xaml, setting the ExpansionMode to FullScreenOnly and making it Collapsed.
<Grid x:Name="Content"/>
<!-- other controls -->
<toolkit:ListPicker x:Name="Picker" ExpansionMode="FullScreenOnly"
Visibility="Collapsed"
FullModeHeader="SELECT"
ItemsSource="{Binding MyItems}"
SelectionChanged="OnPickerSelectionChanged">
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<TextBlock Margin="0,20" Text="{Binding Name}"/>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
</Grid>
Then in your code, you open the picker.
Picker.Open();
This samples assumes you have a DataContext with a MyItems property that is a collection of items that has a Name property.
this code works for me without the need of any base code,
<toolkit:ListPicker Header="State"
x:Name="State"
ExpansionMode="FullScreenOnly">
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"
Margin="0 24 24 24"
TextWrapping="Wrap"
Style="{StaticResource PhoneTextTitle2Style}" />
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
Just initialize State.ItemsSource with a list.

How to refresh LongListSelector after delete an item

I have a LongListSelector like that
<phone:LongListSelector Name="ListRecentFiles"
LayoutMode="Grid"
ItemsSource="{Binding}"
GridCellSize="140,140"
SelectionChanged="ListRecentFiles_SelectionChanged">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<Grid Background="Red" Margin="0,0,5,5">
<TextBlock Text="{Binding NoteTitle}" Style="{Binding PhoneTextNormalStyle}" />
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu x:Name="ContextMenu">
<toolkit:MenuItem x:Name="Delete" Header="Delete" Click="DeleteNote_Click" />
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</Grid>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
this is DataContext: public static ObservableCollection<Note> NoteItems;
And i try to delete an item from LongListSelector
private void DeleteNote_Click(object sender, RoutedEventArgs e)
{
Note selectedNote = (sender as MenuItem).DataContext as Note;
ListRecentFiles.ItemsSource.Remove(item);
NoteItems.Remove(selectedNote);
}
It's not work except i navigate to a other XAML page and return
I have visited this page but can't fix link
Without seeing more of the code, it's hard to be sure what's going wrong. But if you are setting
ListRecentFiles.DataContext = NoteItems;
that is incorrect. You want to set
ListRecentFiles.ItemsSource = NoteItems;
The XAML declaration:
ItemSource="{Binding}"
Could do that (depending on the rest of the code). Once .ItemsSource is set correctly, then the line:
NoteItems.Remove(selectedNote);
Should succeed in removing the visual item from the LongListSelector. In any case, you should not do the line:
ListRecentFiles.ItemsSource.Remove(item);
That would do the wrong thing when the list gets so big that it doesn't all fit in memory at once.

How to display flatlist using LongListSelector phone control of WP8

In toolkit LongListSelector, there used to be a property IsFlatList which needed to be set to true to display flat list without any grouping. But in the LongListSelector provided in phone control, this property is missing. Here is what I am doing
<phone:LongListSelector Name="myList" IsGroupingEnabled="False" LayoutMode="List" ItemsSource="{Binding Source ={StaticResource SortedList} }" CacheMode="BitmapCache" >
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<components:MyControl CacheMode="BitmapCache" MyItem="{Binding}"/>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
If I change the control to ListBox and remove LongListSelector specific property then it display my list.
Can someone please tell me what I am missing?
I am following this(Remarks) documentation of LongListSelector
In the Windows Phone 8 Version of the LongListSelector setting LayoutMode to List and IsGroupingEnabled to false should display your databound data as a flat list like in the WP7 Toolkit version of the control.
For example,
Given an Entity class
public class Entity
{
public string Name
{
get;
set;
}
public string Info
{
get;
set;
}
public int ID
{
get;
set;
}
}
All I need to do is create an ObservableCollection of Entity on my page and bind it to the itemsource of my LongListSelector (named list).
ObservableCollection<Entity> data = new ObservableCollection<Entity>();
list.ItemsSourdce = data;
Then I create the entities and add them to the collection.
Here is the XAML for my LongListSelector:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<phone:LongListSelector Name="list" HorizontalAlignment="Left" Height="609" VerticalAlignment="Top" Width="456" LayoutMode="List" IsGroupingEnabled="False" >
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel VerticalAlignment="Top">
<TextBlock FontWeight="Bold" Text="{Binding Name}" />
<TextBlock Text="{Binding Info}" />
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</Grid>
LayoutMode ="List" that's all you need.