I am using Windows Server 2008 R2 with Windows Media Service. At the client side, I want to use Silverlight to play the media file. I am using VSTS 2008 + Silverlight 3 + ASP.Net + .Net 3.5. I want to know whether Silverlight supports play mms streaming file from Windows Media Service? If yes, any code samples that I can make a quick test?
The MediaElement in Silverlight supports streaming via mms. You should have a look at the MSDN audio and video overview for Silverlight.
Here is a very basic Silverlight app which can control a MediaElement and shows the media state / buffering status:
XAML
<UserControl x:Class="StreamingTest.MainPage"
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"
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
<Grid x:Name="LayoutRoot">
<StackPanel Orientation="Vertical">
<MediaElement x:Name="MediaElement" Width="640" Height="480" Source="mms://danarec:8080"/>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock x:Name="Status" Margin="0,5"/>
<TextBlock x:Name="Buffer" Margin="10,5"/>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Button x:Name="Play" Content="Play" Click="Play_Click"/>
<Button x:Name="Pause" Content="Pause" Click="Pause_Click"/>
<Button x:Name="Stop" Content="Stop" Click="Stop_Click"/>
</StackPanel>
</StackPanel>
</Grid>
</UserControl>
C#
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
this.MediaElement.CurrentStateChanged += (sender, e) =>
{
this.Status.Text = this.MediaElement.CurrentState.ToString();
this.Buffer.Visibility = this.MediaElement.CurrentState == MediaElementState.Buffering ? Visibility.Visible : Visibility.Collapsed;
};
this.MediaElement.BufferingProgressChanged += (sender, e) =>
{
this.Buffer.Text = string.Format("{0:0.0} %", this.MediaElement.BufferingProgress * 100);
};
}
private void Play_Click(object sender, RoutedEventArgs e)
{
this.MediaElement.Play();
}
private void Pause_Click(object sender, RoutedEventArgs e)
{
this.MediaElement.Pause();
}
private void Stop_Click(object sender, RoutedEventArgs e)
{
this.MediaElement.Stop();
}
}
Related
I am working on an interactive app that shows different video's based on different stages, I am using C# and WPF and I am trying to use a MediaElement and change it source but it only let me play 1 video file and will not change to the next video, it will keep playing the same file over and over again, I just can't seem to understand why is this happening, I also couldn't find a solution to this online, I have embedded both video files "Stage8.mp4" and "Stage12.mp4" in my solution explorer, Both video files are set to copy if newer and content, also I don't think there is something wrong in the path because if I switch between them it will play the correct file, it just won't change the source in real time.
here are my codes:
C#:
using System;
using System.Windows;
namespace WPF_Tester
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
string NameChecker;
byte stage = 0;
private void BTN1_Click(object sender, RoutedEventArgs e)
{
NameChecker = "Name: " + TXT1.Text + " Last: " + TXT2.Text;
if (testlistview.Items.Contains(NameChecker))
{
MessageBox.Show("The name already exists.");
}
else
{
testlistview.Items.Add(NameChecker);
}
if (stage == 0)
{
TestElement.Source = new Uri("Stage12.mp4", UriKind.Relative);
TestElement.Play();
stage = 1;
}
if (stage == 1)
{
TestElement.Source = new Uri("Stage8.mp4", UriKind.Relative);
TestElement.Play();
stage = 0;
}
}
}
}
XAML:
<Window x:Class="WPF_Tester.MainWindow"
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:local="clr-namespace:WPF_Tester"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="Name:" FontSize="20" Margin="20,40,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"></TextBlock>
<TextBox x:Name="TXT1" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="18" Margin="80,40,0,0" MinWidth="30"></TextBox>
<TextBlock Text="Last Name:" Grid.Column="0" Grid.Row="0" FontSize="20" Margin="20,80,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"></TextBlock>
<TextBox x:Name="TXT2" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="18" Margin="120,80,0,0" MinWidth="30"></TextBox>
<Button x:Name="BTN1" HorizontalAlignment="Left" VerticalAlignment="Top" Content="Add Name" FontSize="20" Margin="20,180,0,0" Click="BTN1_Click"></Button>
<!-- here we set controls for the second column.-->
<ListView x:Name="testlistview" Grid.Column="1" Margin="20,40,20,20" FontSize="20" ></ListView>
<MediaElement Name="TestElement" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,200,20,0" UnloadedBehavior="Manual" Source="/Stage12.mp4" LoadedBehavior="Play"></MediaElement>
</Grid>
Thanks in advance and have a great day!
There is an else missing. Your second if statement always resets the file to the first. Adding else should implement the desired toggling.
if (stage == 0)
{
TestElement.Source = new Uri("Stage12.mp4", UriKind.Relative);
TestElement.Play();
stage = 1;
}
//we need an else here, otherwise source is always "Stage12.mp4
else if (stage == 1)
{
TestElement.Source = new Uri("Stage8.mp4", UriKind.Relative);
TestElement.Play();
stage = 0;
}
I'm trying to implement an application that requests weather data from OWM (OpenWeatherMap) and displays the temperature as well as an weather icon fitting the weather outside. OWM provides icon ids for the fitting icon. You can then access those icons over a specific web path. Displaying those icons in my app worked well. Because the icons provided by OWM have got a low resolution I decided to use vector graphics, that I saved in the application directory. Displaying those vector graphics directly using this code
<Image Source="Assets/WeatherIcons/01d.svg" Height="300" HorizontalAlignment="Right"/>
works just fine. But I want to adjust the used source depending on the, by OWM provided, icon id.
My Code at the moment looks like this:
MainPage.xaml:
<Page
x:Class="starting.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:starting"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="Black"
PointerPressed="WakeUp">
<StackPanel x:Name="WeatherInformation"
Visibility="Collapsed">
<Image x:Name="WeatherIcon"
Height="300"
HorizontalAlignment="Right"/>
<TextBlock Foreground="White"
TextAlignment="Center">
<Run x:Name="Temperature" FontSize="90"/>
<LineBreak/>
<Run x:Name="WeatherDescription" FontSize="50"/>
</TextBlock>
</StackPanel>
</Grid>
</Page>
MainPage.xaml.cs:
using System;
using System.Globalization;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media.Imaging;
namespace starting
{
public sealed partial class MainPage : Page
{
private DispatcherTimer modeTimer = new DispatcherTimer();
public MainPage()
{
this.InitializeComponent();
updateWeather(this, this);
modeTimer.Tick += new EventHandler<object>(Sleep);
modeTimer.Interval = new TimeSpan(0, 1, 0);
DispatcherTimer updateWeatherTimer = new DispatcherTimer();
updateWeatherTimer.Tick += new EventHandler<object>(updateWeather);
updateWeatherTimer.Interval= new TimeSpan(0, 30, 0);
updateWeatherTimer.Start();
}
private void updateWeather(object sender, object e)
{
WeatherApp.WeatherAPI myWeatherApi = new WeatherApp.WeatherAPI("Friedrichshafen,de");
OpenWeatherMapType.WeatherStream data = myWeatherApi.GetForecast();
WeatherIcon.Source = new BitmapImage(new Uri("ms-appx:///Assets/WeatherIcons/" + data.Weather[0].Icon + ".svg"));
Temperature.Text = Math.Round(data.Main.Temp).ToString() + "°C";
WeatherDescription.Text = data.Weather[0].Description;
}
private void Sleep(object sender, object e)
{
StandByTime.Visibility = Visibility.Visible;
ActiveTime.Visibility = Visibility.Collapsed;
WeatherInformation.Visibility = Visibility.Collapsed;
modeTimer.Stop();
}
private void WakeUp(object sender, PointerRoutedEventArgs e)
{
StandByTime.Visibility = Visibility.Collapsed;
ActiveTime.Visibility = Visibility.Visible;
WeatherInformation.Visibility = Visibility.Visible;
modeTimer.Start();
}
}
}
When I start the application there is no sign of an weather icon showing up. How's that possible?
It seems to be working fine like this:
MainPage.xaml:
<Page>
<Grid>
<Image Height="300">
<Image.Source>
<SvgImageSource x:Name="WeatherIconSource"/>
</Image.Source>
</Image>
</Grid>
</Page>
MainPage.xaml.cs:
private void updateWeather(object sender, object e)
{
WeatherApp.WeatherAPI myWeatherApi = new WeatherApp.WeatherAPI("Friedrichshafen,de");
OpenWeatherMapType.WeatherStream data = myWeatherApi.GetForecast();
WeatherIconSource.UriSource = new Uri("ms-appx:///Assets/WeatherIcons/" + data.Weather[0].Icon + ".svg");
}
I am working on Windows Phone 8 app and have a Image view like this in XAML:
<Image Name="Image"
Grid.Row="0"
Visibility="Collapsed"
Width="Auto"
Height="Auto"
Tap="Image_tap"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="1,1,1,1"/>
Now i have this event called Tap="Image_tap", when i tap on the image i want to show the same image in full screen without any bar on top and bottom, how to acheive this ?
An alternative approach, without passing the image details between pages, is to display a Popup:
private void HandleTapImage(object sender, GestureEventArgs e)
{
var myPopup = new Popup
{
Child = new Image
{
Source = ((Image) sender).Source,
Stretch = Stretch.UniformToFill,
Height = Application.Current.Host.Content.ActualHeight,
Width = Application.Current.Host.Content.ActualWidth
}
};
myPopup.IsOpen = true;
}
(Select Strech value best suited for your needs).
With this approach however you have to manually hide ApplicationBar and SystemTray, if present, in the HandleTapImage method. You also have to take care of hiding the Popup and showing the bars again.
Bottom bar is ApplicationBar and top bar is SystemTray. If you create a new page without the ApplicationBar and with SystemTray.IsVisible to false, you have a fullscreen page. Now, instead of having a Grid at the root, place just one Image and you can use that page as a fullscreen viewer.
<phone:PhoneApplicationPage
x:Class="SimpleApp.FullScreenPage"
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"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="False">
<Image Name="myImage" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Stretch="Uniform"/>
</phone:PhoneApplicationPage>
In MainPage where you tap image:
private void myImg_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
string context = ((sender as Image).Source as BitmapImage).UriSource.ToString();
NavigationService.Navigate(new Uri(String.Concat("/Page1.xaml?context=", context), UriKind.RelativeOrAbsolute));
}
In Fullscreenpage:
protected override void OnNavigatedTo(NavigationEventArgs e)
{
string context = this.NavigationContext.QueryString["context"];
myImage.Source = new BitmapImage(new Uri(context, UriKind.RelativeOrAbsolute));
base.OnNavigatedTo(e);
}
I'm finding that when I tap the ScrollViewer, the PointerPressed and PointerExited events fires as expected. But, if I scroll in any direction after touching the screen and lift my finger, no event fires except for PointerCaptureLost which prematurely fires as soon as I scroll.
When I capture the pointer ID and poll the status of the PointerPoint with a timer, the IsInContact flag remains true, even after I lift my finger after scrolling. It works as expected when I simply tap the screen.
ManipulationCompleted has the same effect as above, and I cannot use the ViewChanged event since this fires before I lift my finger.
Is this a bug or am I missing something here? Is there another way I can detect when a user has lifted their finger off the screen? This is driving me bananas.
Sample code below. You'll need to use the simulator in touch-mode or have a touch capable screen to test:
Code:
using System;
using Windows.UI.Input;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;
namespace App1
{
public sealed partial class MainPage : Page
{
private readonly DispatcherTimer pointerTimer = new DispatcherTimer();
private uint? CurrentPointerID; //container for the current pointer id when user makes contact with the screeen
public MainPage()
{
this.InitializeComponent();
scrollviewer.PointerPressed += scrollviewer_PointerPressed;
scrollviewer.PointerMoved += scrollviewer_PointerMoved;
scrollviewer.PointerExited += scrollviewer_PointerExited;
scrollviewer.PointerReleased += scrollviewer_PointerReleased;
scrollviewer.PointerCaptureLost += scrollviewer_PointerCaptureLost;
scrollviewer.PointerCanceled += scrollviewer_PointerCanceled;
pointerTimer.Tick += pointerTimer_Tick;
pointerTimer.Interval = TimeSpan.FromMilliseconds(300);
pointerTimer.Start();
}
#region ScrollViewer Events
void scrollviewer_PointerMoved(object sender, PointerRoutedEventArgs e)
{
EventCalledTextBlock.Text = "Pointer Moved";
}
void scrollviewer_PointerExited(object sender, PointerRoutedEventArgs e)
{
EventCalledTextBlock.Text = "Pointer Exited";
}
void scrollviewer_PointerPressed(object sender, PointerRoutedEventArgs e)
{
CurrentPointerID = e.Pointer.PointerId;
EventCalledTextBlock.Text = "Pointer Pressed";
}
void scrollviewer_PointerCanceled(object sender, PointerRoutedEventArgs e)
{
EventCalledTextBlock.Text = "Pointer Canceled";
}
void scrollviewer_PointerCaptureLost(object sender, PointerRoutedEventArgs e)
{
EventCalledTextBlock.Text = "Capture Lost";
}
void scrollviewer_PointerReleased(object sender, PointerRoutedEventArgs e)
{
EventCalledTextBlock.Text = "Pointer Released";
}
#endregion
void pointerTimer_Tick(object sender, object e)
{
if (!CurrentPointerID.HasValue)
{
PollingTextBlock.Text = string.Empty;
return;
}
try
{
var pointerPoint = PointerPoint.GetCurrentPoint(CurrentPointerID.Value);
PollingTextBlock.Text = pointerPoint.IsInContact ? "Is In Contact" : "Not in Contact";
}
catch (Exception ex)
{
//This exception is raised when the user lifts finger without dragging.
//assume finger is not in contact with screen
PollingTextBlock.Text = "Not in Contact";
}
}
}
}
XAML:
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Name="grid">
<Grid.RowDefinitions>
<RowDefinition Height="113*"/>
<RowDefinition Height="655*"/>
</Grid.RowDefinitions>
<ScrollViewer x:Name="scrollviewer" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Visible" Grid.Row="1" >
<Rectangle Fill="#FF3783CF" Height="100" Stroke="#FF33D851" Width="{Binding ElementName=grid, Path=ActualWidth}" Margin="100" StrokeThickness="4" />
</ScrollViewer>
<StackPanel Orientation="Vertical" Margin="45,25,0,0">
<StackPanel Orientation="Horizontal">
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Event Called:" VerticalAlignment="Top" FontSize="24" Margin="0,0,20,0"/>
<TextBlock x:Name="EventCalledTextBlock" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="24"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Polling Value:" VerticalAlignment="Top" FontSize="24" Margin="0,0,20,0"/>
<TextBlock x:Name="PollingTextBlock" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="24"/>
</StackPanel>
</StackPanel>
</Grid>
</Page>
I stumbled upon this question since I was struggling with a similar problem. I have a ScrollViewer which has several images in it and I wanted to know what images are shown at the moment the ScrollViewer stops moving...
In the end I did used the ScrollViewer.ViewChanged event. This event keeps triggering untill it has finished with scrolling.
I actually am only interested in the last of these events, but since there is no event that triggers only on that particular moment I need to respond to this one and check for myself if this is the appropriate moment to take actions.
I hope this helps.
ScrollViewer.ViewChanged event: https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.scrollviewer.viewchanged?f=255&MSPPError=-2147217396
I think you need to use the PointerReleased event.
Refer to the following link: https://msdn.microsoft.com/library/windows/apps/br208279
I am trying to implement the lockablePivot control found in the Windows Phone Toolkit - August 2011 (7.1 SDK) release.
When I add an itemtemplate to the control every time i change the isLocked property during runtime it throws a InvalidCastException. Are there any workarounds to this?
Need help. Thanks
<Grid x:Name="LayoutRoot" Background="Transparent">
<toolkit:LockablePivot Name="Pages" SelectionChanged="Pivot_Changed" ItemsSource="{Binding}">
<toolkit:LockablePivot.ItemTemplate>
<DataTemplate>
<Grid VerticalAlignment="Stretch">
<Button Content="Lock" Click="Button_Click"/>
<Image Stretch="Uniform" local:WP7ImageZoomer.IsZoomingEnabled="True" ManipulationStarted="Image_ManipulationStarted" ManipulationCompleted="Image_ManipulationCompleted" ManipulationDelta="Image_ManipulationDelta" CacheMode="BitmapCache">
<Image.Source>
<BitmapImage x:Name="Bit" UriSource="{Binding Img}" DownloadProgress="BitmapImage_DownloadProgress" CreateOptions="BackgroundCreation"/>
</Image.Source>
</Image>
</Grid>
</DataTemplate>
</toolkit:LockablePivot.ItemTemplate>
</toolkit:LockablePivot>
</Grid>
C#:
private void Image_ManipulationStarted(object sender, System.Windows.Input.ManipulationStartedEventArgs e)
{
this.Pages.IsLocked = true;// Throws InvalidCastException here
}
private void Image_ManipulationCompleted(object sender, System.Windows.Input.ManipulationCompletedEventArgs e)
{
this.Pages.IsLocked = false;
}
private void Image_ManipulationDelta(object sender, System.Windows.Input.ManipulationDeltaEventArgs e)
{
//this.Pages.IsLocked = true;
}
There is an open ticket for that bug. See http://silverlight.codeplex.com/workitem/10793. Please don't forget to vote.