Getting noise when playing sound windows phone 7 emulator - windows-phone-7

I have a .wav music file.
When I tried to play using SoundEffect.Play();
mus1.Play(); I am getting noise rather than music.
The same is played well in PCs music player.
How to resolve this issue?
How to make sure that it will play good in Windows Phone 7 too?

It sounds like there's content in the .wav file that WP7 doesn't understand. Why don't you try converting it to .wav (yes I know it's already in .wav) as this may remove the unknown data.
Audacity (http://audacity.sourceforge.net/) is free and will do this for you. Just drag the .wav file into it and click file --> export...

Try the following Code
MainPage.xaml.cs
namespace MediaSample
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
progress.DataContext = this;
this.Loaded += new System.Windows.RoutedEventHandler(MainPage_Loaded);
mediaplayer.BufferingProgressChanged += new System.Windows.RoutedEventHandler(mediaplayer_BufferingProgressChanged);
mediaplayer.CurrentStateChanged += new RoutedEventHandler(mediaplayer_CurrentStateChanged);
}
public double Duration { get; set; }
void mediaplayer_CurrentStateChanged(object sender, RoutedEventArgs e)
{
if (mediaplayer.CurrentState == MediaElementState.Playing)
{
Duration = mediaplayer.NaturalDuration.TimeSpan.TotalSeconds;
ThreadPool.QueueUserWorkItem(o =>
{
while (true)
{
Dispatcher.BeginInvoke(new Action(() => Progress = mediaplayer.Position.TotalSeconds * 100 / Duration));
Thread.Sleep(0);
}
});
}
}
void mediaplayer_BufferingProgressChanged(object sender, System.Windows.RoutedEventArgs e)
{
MediaElement mediaplayer = sender as MediaElement;
if (mediaplayer.BufferingProgress == 1)
Debug.WriteLine(mediaplayer.NaturalDuration);
}
void MainPage_Loaded(object sender, System.Windows.RoutedEventArgs e)
{
mediaplayer.Source = new Uri("/Oru nalum..mp3", UriKind.Relative);
mediaplayer.Play();
}
public double Progress
{
get { return (double)GetValue(ProgressProperty); }
set { SetValue(ProgressProperty, value); }
}
// Using a DependencyProperty as the backing store for Progress. This enables animation, styling, binding, etc...
public static readonly DependencyProperty ProgressProperty =
DependencyProperty.Register("Progress", typeof(double), typeof(PhoneApplicationPage), new PropertyMetadata(0.0));
}
}
MainPage.xaml
<phone:PhoneApplicationPage
x:Class="MediaSample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="Media Application" Style="{StaticResource PhoneTextNormalStyle}"/>
</StackPanel>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<MediaElement x:Name="mediaplayer"/>
<ProgressBar Height="40" x:Name="progress" Value="{Binding Path=Progress}"/>
</Grid>
</Grid>
</phone:PhoneApplicationPage>
Add Mp3 file as follows,
Like that you can add .wav files. Working good. Tested codes above.
Thank you.

Use MeadiaElement Rather than using SoundEffect Class.
try this one
MediaElement

Related

Xamarin: Binding a ContentView content not working, wrong implementation

I need help understanding how I can bind a ContentView's Content's to my Xamarin page. I have tried maybe 20 different methods and I can only get the binded contentview to render when I don't use bindings and set the property directly.
<ContentPage.Content>
<Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" x:Name="GridLayout" RowSpacing="0" ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="60" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<nav:NavView Grid.Row="0" Grid.Column="0" Padding="0,0,0,0" Margin="0,0,0,0" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand"
HeightRequest="60" x:Name="nav"/>
<ContentView BindingContext="{Binding MainView}" Grid.Row="1" Grid.Column="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
</Grid>
</ContentPage.Content>
and then below is my code behind
public partial class DetailLayoutView : ContentPage, INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string name)
{
if (this.PropertyChanged != null)
this.PropertyChanged(this, new PropertyChangedEventArgs(name));
}
private ContentView mainView;
public ContentView MainView
{
get { return mainView; }
set
{
mainView = value;
OnPropertyChanged("MainView");
}
}
public DetailLayoutView()
{
InitializeComponent ();
MainView = new PyxusChatView();
BindingContext = MainView;
}
}
Can someone help guide me to the right direction? I dont have the bandwidth to implement an entire MVVM refactor at this time I would just like to know how I can achieve this w/ minimal code.
DETECT WHEN A UI IS RENDERED IOS & ANDROID BELOW...
public DetailLayoutView()
{
InitializeComponent ();
MainContentArea.LayoutChanged += MainContentArea_LayoutChanged;
}
private void MainContentArea_LayoutChanged(object sender, EventArgs e)
{
Device.BeginInvokeOnMainThread(() => {
//UI Is now visible, send a msg to let everyone subscribed to "UpdateDetailView" event now that the
//detail page was changed and it is now okay to make API calls!
MessagingCenter.Send<ContentView, string>(MainView, "UpdateDetailView", "From BlePairingViewModel");
});
}
YOU HAVE SENT MSG NOW YOU CAN MAKE API CALLS & YOUR UI IS VISIBLE W/O MVVM... ALTHOUGH MVVM WOULD BE A BETTER PRACTICE TO INDIVIDUALS W/ MORE TIME TO CODE..
MessagingCenter.Subscribe<ContentView, string>("Pyx", "UpdateDetailView", (sender, arg) =>
{
if (sender == this)
{
Task.Run(async () =>
{
await OnAppearing();
});
}
});
I AM NOT ADVISING THIS AS BEST PRACTICE BUT IT DOES ANSWER THE QUESTION

Binding not working on custom UserControl in Windows Phone 7

I have a XAML UserControl which defines a fairly basic button - I want to define a Bindable property HasMeasurements which will display an overlay image when HasMeasurements is false . However when I include it in my project and bind it to the ViewModel it does not update consistently.
I am sure the ViewModel is properly notifying the bindings since I have simultenously bound the same ViewModel property to another separate element and it updates as expected. Also it works in Blend when I update the mock data.
I have tried this solution which defines a callback where I change the Visibility programatically, however this callback is not called every time the ViewModel property changes, only sometimes. I have also tried binding the Visibility in the XAML using this solution and a non dependency property which also did not work. I have also tried implementing NotifyPropertyChanged out of desperation but no luck there either ...
Here is my XAML,
<UserControl x:Class="MyApp.View.Controls.ConversionBtn"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="480" d:DesignWidth="480">
<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">
<Grid x:Name="btnGrid" toolkit:TiltEffect.IsTiltEnabled="True" Height="115">
<Border Background="{StaticResource ImgOverlayColor}" BorderThickness="0" Padding="0" VerticalAlignment="Top" >
<TextBlock x:Name="titleTxtBlock" FontSize="{StaticResource PhoneFontSizeMedium}" Foreground="{StaticResource TileTxtColor}" Margin="6,0,0,0"/>
</Border>
<Image x:Name="notAvailableImg" Source="/Images/ConversionNotAvailableOverlay.png" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="None" />
</Grid>
</Grid>
</UserControl>
Here is the code behind,
// usings here ...
namespace MyApp.View.Controls
{
public partial class ConversionBtn : UserControl
{
public ConversionBtn()
{
InitializeComponent();
if (!TiltEffect.TiltableItems.Contains(typeof(ConversionBtn)))
TiltEffect.TiltableItems.Add(typeof(ConversionBtn));
//this.DataContext = this;
}
public string Title
{
get { return this.titleTxtBlock.Text; }
set { this.titleTxtBlock.Text = value; }
}
public static readonly DependencyProperty HasMeasurementsProperty =
DependencyProperty.Register("HasMeasurements", typeof(bool), typeof(ConversionBtn),
new PropertyMetadata(false, new PropertyChangedCallback(HasMeasurementsPropertyChanged)));
private static void HasMeasurementsPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
ConversionBtn cBtn = (ConversionBtn)d;
bool val = (bool)e.NewValue;
if (val)
{
cBtn.notAvailableImg.Visibility = Visibility.Collapsed;
}
else
{
cBtn.notAvailableImg.Visibility = Visibility.Visible;
}
cBtn.HasMeasurements = val;
}
public bool HasMeasurements
{
get { return (bool)GetValue(HasMeasurementsProperty); }
set { SetValue(HasMeasurementsProperty, value); }
}
}
}
You have a callback, that is called after HasMeasurment propetry was changed.
And in a callback you change it again. So, you have a logical misstake.
If you need to do something with this value - just save it in private field.
private static void HasMeasurementsPropertyChanged(DependencyObject d,
DependencyPropertyChangedEventArgs e)
{
ConversionBtncBtn = (ConversionBtn)d;
bool val = (bool)e.NewValue;
if (val)
{
cBtn.notAvailableImg.Visibility = Visibility.Collapsed;
}
else
{
cBtn.notAvailableImg.Visibility = Visibility.Visible;
}
cBtn.SetMeasurments(val);
}
private bool measurmentsState;
public void SetMeasurments(bool value)
{
measurmentsState = value;
}
Here you can get free e-Book by Charls Petzold about Windows Phone Development, there is a nice chapter about Dependency Properties.
Ah damnit, it was a combination of Anton's answer and the fact that I hadn't set my image as 'Content', hence it loaded in Blend but was not present in the deployed app.

Images inside a Pivot get downloaded and decoded more than once?

I set my Pivot's ItemsSource property to a list of 3 URL strings.
Odd things that happen:
With the template below, the ImageOpened event gets called 6 times instead of 3.
If I set the BitmapImage's CreateOptions to 'BackgroundCreation', the ImageOpened event can be called hundreds of times for no apparent reason
If I place the Pivot inside a UserControl and use the 'BackgroundCreation' option for the BitmapImage, then the Images don't render at all inside the Pivot, despite the ImageOpened event getting called (hundreds of times).
The same behaviour happens on WP7 and WP8. I am quite surprised as I was just creating an ImageGallery UserControl that is using a Pivot underneath and I wanted to make use of BackgroundCreation option to offload decoding work to the background thread but with such symptoms it seems quite pointless :(.
1) Pivot
<phone:PhoneApplicationPage
x:Class="WP7.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
shell:SystemTray.IsVisible="True">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<Button Tap="UIElement_OnTap">press</Button>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<controls:Pivot x:Name="gallery">
<controls:Pivot.ItemTemplate>
<DataTemplate>
<Image>
<Image.Source>
<BitmapImage ImageOpened="BitmapImage_OnImageOpened" ImageFailed="BitmapImage_OnImageFailed" UriSource="{Binding}" CreateOptions="DelayCreation"></BitmapImage>
</Image.Source>
</Image>
</DataTemplate>
</controls:Pivot.ItemTemplate>
</controls:Pivot>
</Grid>
</Grid>
2) Codebehind
public partial class MainPage : PhoneApplicationPage
{
int c = 0;
List<string> list = new List<string>()
{
"http://d24w6bsrhbeh9d.cloudfront.net/photo/6298284_460s.jpg", "http://d24w6bsrhbeh9d.cloudfront.net/photo/6291760_460s.jpg", "http://d24w6bsrhbeh9d.cloudfront.net/photo/6298282_460s.jpg",
};
// Constructor
public MainPage()
{
InitializeComponent();
}
private void UIElement_OnTap(object sender, GestureEventArgs e)
{
c = 0;
gallery.ItemsSource = list;
}
private void BitmapImage_OnImageOpened(object sender, RoutedEventArgs e)
{
c++;
Debug.WriteLine("opened - {0}", c);
}
private void BitmapImage_OnImageFailed(object sender, ExceptionRoutedEventArgs e)
{
Debug.WriteLine("failed");
}
}
To give you a better idea of what is happening, you can check this snippet:
private void BitmapImage_OnImageOpened(object sender, RoutedEventArgs e)
{
BitmapImage image = (BitmapImage)sender;
Debug.WriteLine("opened - {0}", image.UriSource.ToString());
}
At the very beginning, when you press the button, you will notice what it seems like the first image from your list is loaded twice:
Even if you remove the DelayCreation flag, you will still get the same result because this flag is set by default.
Now, what happens if we inspect this with WireShark, the phone connected to an ad-hoc network:
(NOTE: I am using a different image URL here)
The image is only downloaded once, so per-se you do not need to worry about extra data. The reason why you see it triggered twice seems to be the fact that it is once triggered for the source, and another one for the Image.
Technically, the same if you would do this:
List<BitmapImage> list = new List<BitmapImage>();
// Constructor
public MainPage()
{
InitializeComponent();
BitmapImage image = new BitmapImage();
image.UriSource = new Uri("http://timenerdworld.files.wordpress.com/2012/08/new-microsoft-logo.jpg");
image.ImageOpened += image_ImageOpened;
list.Add(image);
}
void image_ImageOpened(object sender, RoutedEventArgs e)
{
Debug.WriteLine("opened image from bitmap");
}
private void UIElement_OnTap(object sender, GestureEventArgs e)
{
gallery.ItemsSource = list;
}
private void BitmapImage_OnImageOpened(object sender, RoutedEventArgs e)
{
Image image = (Image)sender;
Debug.WriteLine("opened - {0}", ((BitmapImage)image.Source).UriSource.ToString());
}
So no, the image is not downloaded twice.

Displaying image at runtime on click of list box item in windows phone 7

I have List box in which I am displaying values at runtime. But i want to show an image in list box only when i selected an item from list box.Currently I am using DataTemplate and ItemTemplate in list box for displaying values at runtime (In short data binding).Thanks
One solution is to add a dependency property IsSelected to your item view model, and toggle that when you tap on an item. This would mean that you can select multiple items, i.e. show images from several rows at once.
using some xaml like this:
<phone:PhoneApplicationPage.Resources>
<convert:BooleanToVisibilityConverter x:Key="booltovisibility" />
</phone:PhoneApplicationPage.Resources>
<phone:PhoneApplicationPage.DataContext>
<vm:MainViewModel/>
</phone:PhoneApplicationPage.DataContext>
<Border Grid.Row="1" BorderThickness="1" BorderBrush="Red">
<ListBox ItemsSource="{Binding Items}">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="1" BorderBrush="Green">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<i:Interaction.Triggers>
<i:EventTrigger EventName="Tap">
<i:InvokeCommandAction Command="{Binding ToggleSelected}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<TextBlock Grid.Row="0" Text="{Binding Text}"/>
<Image Grid.Row="1" Source="{Binding Image}" Visibility="{Binding IsSelected, Converter={StaticResource booltovisibility}}"/>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Border>
Note that this xaml uses the System.Windows.Interactivity dll from the Silverlight SDK. It also uses a custom BooleanToVisibilityConverter, which is a IValueConverter that converts a boolean to a Visibility enum value.
Further more, we can define an ItemViewModel like the one below, and have an "Items" property in the MainViewModel
private readonly ObservableCollection<ItemViewModel> items;
public ObservableCollection<ItemViewModel> Items { get { return items; } }
which is populated from code.
using System;
using System.Windows;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using Test.Commands;
namespace Test.ViewModels {
public class ItemViewModel : DependencyObject {
private ICommand toggleCommand;
public ItemViewModel(string title) {
Text = title;
Image = new BitmapImage(new Uri("graphics/someimage.png", UriKind.Relative));
}
public static readonly DependencyProperty TextProperty =
DependencyProperty.Register("Text", typeof(string), typeof(ItemViewModel), new PropertyMetadata(default(string)));
public static readonly DependencyProperty IsSelectedProperty =
DependencyProperty.Register("IsSelected", typeof(bool), typeof(ItemViewModel), new PropertyMetadata(default(bool)));
public static readonly DependencyProperty ImageProperty =
DependencyProperty.Register("Image", typeof(ImageSource), typeof(ItemViewModel), new PropertyMetadata(default(ImageSource)));
public string Text {
get { return (string)GetValue(TextProperty); }
set { SetValue(TextProperty, value); }
}
public bool IsSelected {
get { return (bool)GetValue(IsSelectedProperty); }
set { SetValue(IsSelectedProperty, value); }
}
public ImageSource Image {
get { return (ImageSource)GetValue(ImageProperty); }
set { SetValue(ImageProperty, value); }
}
public ICommand ToggleSelected {
get { return toggleCommand ?? (toggleCommand = new RelayCommand(o => IsSelected = !IsSelected)); }
}
}
}
where RelayCommand is similar to the one found at WPF Apps With The Model-View-ViewModel Design Pattern article. The main difference is that CommandManager is not available in the Windows Phone SDK.
By using this model you can tap on rows to select them, using the ToggleSelected command in the view model, and deselect them by tapping them again, in effect showing or hiding the image.

view gif image in image UI control windows phone 7

I want to display the gif image in the UI image control.
I have Image image1;
image1.source = new BitmapImage(new Uri(link, UriKind.Absolute));
but the link in Uri is a .gif image.
I have read this: imagetool however I still not get it how to use the library. I did download the library and add references, then from that I'm stuck, I want to set source in code.
Can you help explains it a little bit more?
My code currently like this:
<UserControl.Resources>
<imagetools:ImageConverter x:Key="ImageConverter" />
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid HorizontalAlignment="Right" Width="69">
<Border BorderBrush="White" BorderThickness="3" CornerRadius="7" Background="Black">
<Image Width="69" Height="69" Name="canvasImage" Stretch="UniformToFill" HorizontalAlignment="Center" VerticalAlignment="Center" ImageFailed="canvasImage_ImageFailed" />
</Border>
<Border BorderBrush="White" BorderThickness="3" CornerRadius="7" Background="Black">
<imagetools:AnimatedImage Name="canvasGifImage" Width="69" Height="69" Stretch="UniformToFill" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</Grid>
</Grid>
In my MainPage.xaml.cs, because I don't know whether it is an png/jpg or a gif, so I have it try to load png/jpg first, if failed then try load gif in the imagetools control name canvasGifImage:
private void DisplayImage(int index, string link)
{
try
{
control1.canvasImage.Source = new BitmapImage(new Uri(link, UriKind.Absolute));
}
catch //if fail to load image as normal, do this
{
//but I dont know how to set Source for the canvasGifImage, help me here:
control1.canvasGifImage.Source = *new BitmapImage(new Uri(link, UriKind.Absolute));*
}
}
Replace the use of the ManualResetEvent for async code.
using (var resetEvent = new ManualResetEvent(false))
{
ImageTools.IO.Decoders.AddDecoder<GifDecoder>();
var extendedImage = new ExtendedImage();
extendedImage.LoadingCompleted += (s, e) => resetEvent.Set();
extendedImage.LoadingFailed += (s, e) => resetEvent.Set();
extendedImage.SetSource(gifStream);
resetEvent.WaitOne(TimeSpan.FromSeconds(5));
// Check for timeout or error
var enc = new JpegEncoder();
var jpegStream = new MemoryStream();
enc.Encode(extendedImage, jpegStream);
...
}

Resources