Magnifying Video Brush in Windows Phone
This code example explains how to associate Magnifying functionality with Silverlight Video Brush in Windows Phone.
Article Metadata
Code Example
Tested with
Compatibility
Article
Contents |
Introduction
While working with the video brush API, I wanted to see an object in a magnified view and I realized that there is no such API which allows to do video stream zoom in and zoom out. However it is very easy to implement such kind of functionality using managed API in Windows Phone.
This article shows how to use the Silverlight VideoBrush API to magnify the video camera in Windows Phone application using manage API. Here is a video demonstration of what we wish to achieve:
The media player is loading...
Prerequisites
For Windows Phone 7.5,
- Windows 7 OS or above
- Windows Phone 7.5 SDK
- Visual Studio Express Edition 2010 for Windows Phone
For Windows Phone 8,
- Windows 8 OS
- Visual Studio 2012 or
- Windows Phone 8 SDK (If you have)
API used
The main APIs for this solution are:
Implementation
Step 1: Creating Windows Phone application using traditional way.
Create a Windows Phone 7 project, using traditional way using Microsoft Visual Studio -> File -> New Project -> Select template Silverlight for Windows Phone 7 and choose Windows Phone Application. Here I have named the application WmDev_Magnifier.
Step 2: Layout designing using XAML code; to build the basic functionality of magnifier application, it uses standard controls such as Canvas, Slider and TextBlock in MainPage.xaml.
XAML Code Snippet:
<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">
<TextBlock x:Name="ApplicationTitle" Text="WmDev's Magnifier" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="Magnifier" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="MagnifierLayout" Grid.Row="1" Margin="12,0,12,0" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Canvas x:Name="Magnifier" Width="460" Height="480" Grid.Row="0" Tap="Magnifier_Tap">
<Canvas.Background>
<VideoBrush x:Name="vBrush" >
<VideoBrush.RelativeTransform>
<CompositeTransform x:Name="viewCompositeTransform"
CenterX=".5"
CenterY=".5" />
</VideoBrush.RelativeTransform>
</VideoBrush>
</Canvas.Background>
</Canvas>
<!--ContentPanel - place additional content here-->
<StackPanel x:Name="ControlPanel" Grid.Row="1" Margin="0,0,0,0">
<Slider x:Name="MagnifierSlider" ValueChanged="MagnifierSlider_ValueChanged" Minimum="1" Maximum="4" IsEnabled="False" Orientation="Horizontal"></Slider>
<TextBlock x:Name="txtZoom" Text="Zoom Level:" />
</StackPanel>
</Grid>
</Grid>
Design output in below figure.
Step 3: Attaching two important event handlers to the specific components to get a specific functionality in the application. Tab event to Canvas, to set the Auto focus operation on specific points in the viewfinder and ValueChanged event to Slider, for Magnifying view using viewCompositeTransform and scale the x axis factor.
Step 4: Next initialize the PhotoCamera class' object in the OnNavigatedTo of page. And attaching Initialized event to PhotoCamera object and set the VideoBrush source to the CameraVideoBrushExtensions using set source method and also setting rotation property to the viewCompositeTransform from the PhotoCamera object Orientation. The following snippet illustrates this.
private PhotoCamera oCamera;
// Constructor
public MainPage()
{
InitializeComponent();
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
if (Camera.IsCameraTypeSupported(CameraType.Primary))
{
// Use standard camera on back of device.
this.oCamera = new PhotoCamera(CameraType.Primary);
// Event is fired when the PhotoCamera object has been initialized.
this.oCamera.Initialized += new EventHandler<CameraOperationCompletedEventArgs>(cam_Initialized);
//Set the VideoBrush source to the camera.
CameraVideoBrushExtensions.SetSource(this.vBrush, this.oCamera);
this.viewCompositeTransform.Rotation = this.oCamera.Orientation;
}
}
protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
{
if (this.oCamera != null)
{
this.oCamera.Dispose();
this.oCamera.Initialized -= new EventHandler<CameraOperationCompletedEventArgs>(cam_Initialized);
}
}
private void cam_Initialized(object sender, CameraOperationCompletedEventArgs e)
{
base.Dispatcher.BeginInvoke(delegate
{
this.MagnifierSlider.IsEnabled = true;
this.MagnifierSlider.Value = 1.0;
IEnumerable<Size> source = this.oCamera.AvailableResolutions;
int num = source.Count<Size>();
this.oCamera.Resolution = source.ElementAt<Size>(num - 1);
});
}
private void Magnifier_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
if (this.oCamera != null)
{
if (this.oCamera.IsFocusAtPointSupported)
{
try
{
Point position = e.GetPosition(this.Magnifier);
double num = position.X / this.Magnifier.Width;
double num2 = position.Y / this.Magnifier.Height;
this.oCamera.FocusAtPoint(num, num2);
}
catch { }
}
else if (this.oCamera.IsFocusSupported)
{
try
{
this.oCamera.Focus();
}
catch { }
}
}
}
private void MagnifierSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
if (this.MagnifierSlider != null)
{
this.viewCompositeTransform.ScaleX = this.MagnifierSlider.Value;
this.viewCompositeTransform.ScaleY = this.MagnifierSlider.Value;
this.txtZoom.Text = string.Format("Zoom level : {0:0.00}", this.MagnifierSlider.Value);
}
}
Step-5: Now run the application by hitting F5 Key.
Source code
You can download source codes here: File:WmDev Magnifier.zip
References
Happy Coding
Contents
Aady - How about making it a lens for WP8 ?
In WP8, a camera app can appear in the Windows Phone built-in camera app. This app sounds to be a good candidate for the same. Will be great if you can add that as well.
Just a thought. Btw a nice app.
Regards,
AadyAady 20:36, 10 February 2013 (EET)
Croozeus - Some comments
Hi Pavan,
Thanks for the article.
Some comments,
Looking forward to see more contributions from you!
Regards
Pankajcroozeus 08:52, 11 February 2013 (EET)
Pavan.pareta - Thank you Pankaj!
Hello Pankaj,
Good to see your comments, I have added the description in the Introduction section for the same requirement. Now the thing is that, in WP Silverlight VideoBrush API does not support zoom in and zoom out functionality at runtime when you on the video. Slider basically allow you to scale the ratio over the camera view.
Thank you once again!
Regards,
Pavan ParetaPavan Pareta 19:20, 12 February 2013 (EET)
Croozeus - Great thanks, minor edits
Hi Pavan,
Thanks for confirming this and adding the explanation to the introduction.
Minor edits in the introduction, please check if OK. Also moved the video to the top - so that readers can see upfront what the article achieves.
Regards
Pankajcroozeus 10:49, 13 February 2013 (EET)
Pavan.pareta - Seem Good!
Hello Pankaj,
I agreed with your modification, Thanks for modification.
- PavanPavan Pareta 06:49, 14 February 2013 (EET)