Can we play 2 videos simultaneously in windows phone 7 application.
I am using 2 media elements in 1 xaml page. But only one of the videos is getting displayed. How can I play videos. Please suggest some pointers.
You Can use only one MediaElement on a page. please refer MediaElement Design Guidelines First.
The reason you are seeing on video is because when we use MediaElement, all other playing audio video are stops.
The answer how can you play two videos using MediaElement or another option is CompositionTarget.Rendering Event.
CompositionTarget.Rendering actually renders a frame.
For details visit here.
Code in XAML
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel>
<MediaElement Name="ME1" Source="/Images/oceansclip1.mp4" Stretch="Fill" AutoPlay="False" VerticalAlignment="Top" Height="250"/>
<MediaElement Name="ME2" Source="/Images/oceansclip2.mp4" Stretch="Fill" AutoPlay="False" VerticalAlignment="Top" Margin="0,10" Height="250"/>
<Button Content="Play" Click="Button_Click_1"/>
</StackPanel>
</Grid>
Code behind XAML
private void Button_Click_1(object sender, RoutedEventArgs e)
{
CompositionTarget.Rendering += CompositionTarget_Rendering1;
}
private void CompositionTarget_Rendering1(object sender, EventArgs e)
{
mediaElement1.Play();
mediaElement2.Play();
}
But CompositionTarget.Rendering do not guarantee time between the calls, so you may get frames running faster or slower.
Related
Is there any option to play lottie starting at the end, playing backwards to the start of the animation in xamarin? From code behind in c#
<lottie:AnimationView x:Name="lottie" AutoPlay="False" Animation="heartreaction.json" />
Clicked
private void super_Clicked(object sender, EventArgs e)
{
lottie.PlayAnimation();
//Instead play it backwards
}
If you use SKLottieView, you could set RepeatMode="Reverse" to make it. You could add Skiasharp.Extended.UI.Forms Nuget first.
The following code is an example:
<skia:SKLottieView
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
x:Name="myanimatedview"
Source="dotnetbot.json"
HeightRequest="300"
WidthRequest="300"
RepeatCount="-1"
IsAnimationEnabled="True"
RepeatMode="Reverse"/>
Or set it in code behind cs file:
myanimatedview.RepeatMode = SKLottieRepeatMode.Reverse;
Hope it works for you.
For a xamarin project, I am using CrossMediaManager from https://github.com/Baseflow/XamarinMediaManager , it works fine for playing video and audio. I have a video view on the form which displays video for a video url, but for Audio it remains blank and black.
How can I set it source to some image file, so it looks bit better. Setting Source property doesnt work. The image file does exists in both the plateforms as we are using it for some reasons also.
I tried doing using code.
videoPlayer.Source = "SomeImageFile";
Thanks
You could use a image to cover the VideoView when it play the audio.
Xaml:
<StackLayout>
<Grid>
<mm:VideoView x:Name="video" ShowControls="True" />
<Image Source="pink.jpg" />
</Grid>
<Button Clicked="BtnPlayLocal_Clicked" Text="play local video" />
</StackLayout>
Code behind:
private void BtnPlayLocal_Clicked(object sender, EventArgs e)
{
//audio
CrossMediaManager.Current.Play("https://ia800806.us.archive.org/15/items/Mp3Playlist_555/AaronNeville-CrazyLove.mp3");
// video
//http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4
}
In my windows application, I want to implement tab view like android tab view.
For reference please see the below image.
How should I Implement that in Windows phone 7 or 8.
I'm looking forward for your reply.
Thanks in Advance.
By default, the Windows Phone 7 SDK doesn't have a TabControl. It is a quite useful component already available in Silverlight and although it doesn't quite follow the Metro style.
Using the TabControl on Windows Phone 7 gives you better idea. Here is good example using tab control in wp7
<ListBox x:Name="lstBoxRss" SelectionChanged="lstBoxRss_SelectionChanged_1">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,5">
<TextBlock x:Name="txtblkLink" Text="{Binding Title}" Foreground="Blue" TextDecorations="Underline" TextWrapping="Wrap" Tap="txtblkLink_Tap" />
<TextBlock Text="{Binding PubDate}" Foreground="Red"/>
<TextBlock Text="{Binding Description}" TextWrapping="Wrap" Foreground="Black"/>
<Button x:Name="btnOne" Content="ButtonOne" Click="btnOne_Click_1"/>
<Button x:Name="btnTwo" Content="Button Two" Click="btnTwo_Click_1"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
//Code behind
private void lstBoxRss_SelectionChanged_1(object sender, SelectionChangedEventArgs e)
{
//Listbox selection change
// do your work
if(lstBoxRss.SelectedIndex==-1)
return;
}
private void btnOne_Click_1(object sender, RoutedEventArgs e)
{
//First button click
//Do your work
}
private void btnTwo_Click_1(object sender, RoutedEventArgs e)
{
//button two click
//Do your work
}
There is no TabControl in the Windows Phone SDK 8. The closest equivalent is a Pivot control. You can put a row of clickable text or icons at the top of a Pivot and make it operate like a tab bar.
http://social.msdn.microsoft.com/Forums/en-US/wpdevelop/thread/1baf74fa-0ddd-4226-a02d-a7fc9f80374d
Pivot control instead of a TabControl for the WindowsPhone. the Pivot control follows the design guidelines for the phone and looks and feels much better.
For Windows phone 7 visit this Link:
http://developer.nokia.com/community/wiki/Tab_Control_in_Qt_and_Windows_Phone
I'm trying to get an element to fire the MouseUp event when the user clicks/taps outside of it, drags into it, then lets go. This type of functionality works in Silverlight, but not WP7. I can't figure out how to get it to work in WP7.
I created a simple app that demonstrates this. In a brand new WP7 app I added this to the content panel:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid x:Name="g1" MouseLeftButtonUp="Grid_MouseLeftButtonUp" Background="Green" />
<Grid x:Name="g2" Grid.Row="1" MouseLeftButtonUp="Grid_MouseLeftButtonUp" Background="Blue" />
</Grid>
Then the Grid_MouseLeftButtonUp handler in the codebehind:
private void Grid_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
System.Diagnostics.Debug.WriteLine("MouseUp in " + (sender as Grid).Name);
(sender as Grid).Background = new SolidColorBrush(Colors.Red);
}
Run this app and notice the MouseUp event fires fine if you release the button in the same cell you pressed down, however it doesn't fire if you drag from one cell to the other. How can I make the MouseUp event fire?
P.S. I also posted this on the app-hub forms, but no response yet: http://forums.create.msdn.com/forums/p/98004/584400.aspx
My solution is a bit like ShawnFeatherly's, but without TouchFrame.
Basically, as he says, if you call MouseCapture from the grid where the MouseDown event occured, the MouseUp will be triggered on the same grid. So we know how to be notified when MouseUp occurs, the only problem left is how to know in which grid the MouseUp actually occured.
For this, we're going to use the VisualTreeHelper.FindElementsInHostCoordinates method, as it returns all the elements at a specified coordinate.
So, first add a MouseLeftButtonDown event handler to each of your grids:
private void Grid_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
((Grid)sender).CaptureMouse();
}
Now in the MouseLeftButtonUp event handler of each of your grids, first release the mouse capture, then retrieve the Grid in which the MouseUp occured:
private void Grid_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
var grid = (Grid)sender;
grid.ReleaseMouseCapture();
var mouseUpGrid = VisualTreeHelper.FindElementsInHostCoordinates(e.GetPosition(this), this.ContentPanel)
.OfType<Grid>()
.FirstOrDefault();
if (mouseUpGrid != null)
{
Debug.WriteLine("MouseUp in " + mouseUpGrid.Name);
mouseUpGrid.Background = new SolidColorBrush(Colors.Red);
}
}
Note that a problem may occurs depending on your visual tree: if you have multiple grids and wants to detect the MouseUp only on some, you need a way to identify them. For this, I suggest to use the Tag property. Tag is an all-purpose field available on each control, that you can use however you need. It's especially useful for identification purposes.
Start by adding it to the grids that interest you:
<Grid x:Name="ContentPanel"
Grid.Row="1"
Margin="12,0,12,0"
MouseLeftButtonUp="ContentPanel_MouseLeftButtonUp">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid x:Name="g1"
Background="Green"
MouseLeftButtonDown="Grid_MouseLeftButtonDown"
MouseLeftButtonUp="Grid_MouseLeftButtonUp"
Tag="dragdrop" />
<Grid x:Name="g2"
Grid.Row="1"
Background="Blue"
MouseLeftButtonDown="Grid_MouseLeftButtonDown"
MouseLeftButtonUp="Grid_MouseLeftButtonUp"
Tag="dragdrop" />
</Grid>
Then use exactly the same logic in code-behind, but this time add a filter when browsing the visual tree:
private void Grid_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
var grid = (Grid)sender;
grid.ReleaseMouseCapture();
var mouseUpGrid = VisualTreeHelper.FindElementsInHostCoordinates(e.GetPosition(this), this.ContentPanel)
.OfType<Grid>()
.FirstOrDefault(element => element.Tag is string && (string)element.Tag == "dragdrop");
if (mouseUpGrid != null)
{
Debug.WriteLine("MouseUp in " + mouseUpGrid.Name);
mouseUpGrid.Background = new SolidColorBrush(Colors.Red);
}
}
And you're done! This code should be able to handle complex scenarios like:
<Grid x:Name="ContentPanel"
Grid.Row="1"
Margin="12,0,12,0"
MouseLeftButtonUp="ContentPanel_MouseLeftButtonUp">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid x:Name="g1"
Background="Green"
MouseLeftButtonDown="Grid_MouseLeftButtonDown"
MouseLeftButtonUp="Grid_MouseLeftButtonUp"
Tag="dragdrop" />
<Grid x:Name="DummyGrid" Grid.Row="1">
<Grid x:Name="g2"
Background="Blue"
MouseLeftButtonDown="Grid_MouseLeftButtonDown"
MouseLeftButtonUp="Grid_MouseLeftButtonUp"
Tag="dragdrop" />
</Grid>
</Grid>
One way to work around this is listening to the TouchFrame for a TouchAction.Up. You'll have to calculate the UIElement the ButtonUp cooresponds to using the TouchPoints' Position property as described here: http://forums.create.msdn.com/forums/p/98004/584465.aspx#584465
Another way is to capture the mouse in the ButtonDown UIElement. This will cause the ButtonUp to correctly fire, however the sender will be the original UIElement that caused the ButtonDown. You can track the elements the mouse moves through using MouseEnter and MouseLeave. The necessity for mouse capture is briefly touched on here: http://forums.create.msdn.com/forums/p/70785/431882.aspx
Last time I checked, my phone didn't have a mouse attached.
Use the Tap event instead of MouseLeftButtonUp. For more complicated gestures, use the Silverlight Toolkit GestureListener class.
Use MouseLeave event
http://vantsuyoshi.wordpress.com/2012/02/01/wp7-mouseleftbuttonup-not-fired-issue/
I'm developing a Windows Phone 7 app, and I have two xaml pages. From the first one, I embed two app bar links to select an image from gallery or capture an image using the camera. I would like the image chosen on the first page to be displayed on a second page, with the app bar buttons showing a confirm yes or no. As of now, I have an image control on the first page (barcodeImage) that gets updated with the choice.
MainPage.xaml
<controls:PanoramaItem Header="welcome">
<ScrollViewer Name="sv1" VerticalScrollBarVisibility="Auto">
<StackPanel Height="1100">
<TextBlock TextWrapping="Wrap">Random text here.
</TextBlock>
<Grid x:Name="Grid2" Grid.Row="1" Margin="12,0,12,0">
<Image Height="150" Margin="28,30,168,0" Name="barcodeImage" Stretch="Fill" VerticalAlignment="Top" d:LayoutOverrides="VerticalAlignment" />
</Grid>
</StackPanel>
</ScrollViewer>
</controls:PanoramaItem>
MainPage.xaml.cs
void cameraCaptureTask_Completed(object sender, PhotoResult e)
{
if (e.TaskResult == TaskResult.OK)
{
BitmapImage bmp = new BitmapImage();
bmp.SetSource(e.ChosenPhoto);
barcodeImage.Source = bmp;
}
}
Confirm.xaml
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Image Margin="64,36,57,100" x:Name="barcodeImageFinal" Stretch="Fill" />
</Grid>
I'd like barcodeImageFinal to display the final bitmap. How can I make this work? Thanks for looking :)
As I understand your question, you want to create a bitmap in a member of MainPage and then access it from Confirm. One approach would be to create a public static property of some class for your bitmap. For example, maybe create public static BitmapImage FinalBitmap in your App. Then you could set the value of the property in your cameraCaptureTask_Completed and then create a Loaded handler in your Confirm class that sets image source to the stored bitmap.
I think the answer to your question title is yes if you make the member static, although the other class isn't really "external". A normal class member won't be accessible because you don't have an instance of that class.