How to show images to fullscreen in Windows Phone 8? [duplicate] - c#

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);
}

Related

How can I retrieve coordinates on a mouse click with ViewportPointToLocation?

I'm using Bing map WPF control SDK to try retrieving coordinates and printing them
I've managed to retrieve the coordinates of the center of the current LocationRect using an EventHandler associated with pressing the arrows
I've tried employing the same concept with mouse clicking event handlers but it didn't work, first I've registered the event using the += notation as follows:
public MainWindow()
{
InitializeComponent();
MainMap.Mode = new AerialMode(true);
MainMap.Focus();
MainMap.Culture = "ar-sa";
MainMap.MouseDoubleClick += new MouseButtonEventHandler(MapWithPushpins_MouseDoubleClick);
}
private void MapWithPushpins_MouseDoubleClick(object sender, MouseButtonEventArgs e)
{
e.Handled = true;
Point mousePosition = e.GetPosition(this);
Location pinLocation = MainMap.ViewportPointToLocation(mousePosition);
Pushpin pin = new Pushpin();
pin.Location = pinLocation;
Coordinates.Text = pinLocation.Longitude.ToString();
MainMap.Children.Add(pin);
}
And here's the XAML file:
<Window x:Class="Ornina.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:m="clr-namespace:Microsoft.Maps.MapControl.WPF;assembly=Microsoft.Maps.MapControl.WPF"
xmlns:local="clr-namespace:Ornina"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<Grid VerticalAlignment="Top" >
<m:Map CredentialsProvider="AqCitpgSjIz_Sxd6AyI9Zm1rs1uRSG_G3Y7ebfok69ufB8W8uRdUtvheaRbz_10t" x:Name="MainMap" Center="36,38" ZoomLevel="16" Mode="AerialWithLabels" HorizontalAlignment="Center" VerticalAlignment="Top" Height="300" Width="500">
</m:Map>
</Grid>
<TextBlock x:Name="Coordinates">Coordinations</TextBlock>
</Grid>
</Window>
The program isn't responding with any thing, no exceptions, no errors
Your TextBlock is in front of your map, so the map doesn't receive the MouseDoubleClick event.
You can change the TextBlock to:
<TextBlock x:Name="Coordinates"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Text="Coordinations" />
So it's only in the top left corner and not in front of the whole map.
Or you can move it outside of the map entirely, in a different grid row or column.

C# WPF - Popup which doesn't get focused

Im simply trying to make a little popup which shows a message in the corner. This Popup shuld be at the top of every other Window which I achieved with "TopMost", but I can't seem to get the unfocusable thing to work...
My PopUp XAML:
<Window x:Class="message.Popup"
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:message"
mc:Ignorable="d"
Title="Popup" Height="129.808" Width="300" Focusable="False" Topmost="True">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="179*"/>
<ColumnDefinition Width="113*"/>
</Grid.ColumnDefinitions>
<Label x:Name="label" Content="" HorizontalAlignment="Left" Margin="10,40,0,0" VerticalAlignment="Top" Width="272" Grid.ColumnSpan="2"/>
</Grid>
How I call it (from annother Window):
private void textBox_TextChanged(object sender, TextChangedEventArgs e)
{
new Popup(textBox.Text).Show();
}
PopUp code:
public Popup(string text)
{
InitializeComponent();
label.Content = text;
}
you must define your Mainwindow as Owner of the Popup and center the StartupLocation Property. Something like this:
PopUpWindow.Owner = MainWindow;
PopUpWindow.WindowStartupLocation = WindowStartupLocation.CenterOwner;
Or if you are calling it from another window:
PopUpWindow.Owner = this;
PopUpWindow.WindowStartupLocation = WindowStartupLocation.CenterOwner;
However I must say: this is not MVVM, since you are storing text in the Window class, and I strongly recommend you start reading about MVVM.

Show image in Full screen

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);
}

Make a UserCOntrol on a Page the same size as the MainWindow in WPF

I have a WPF application. It consists of:
A MainWindow which loads a Page which contains a UserControl.
The UserControl is simply a MediaElement with play/pause controls etc.
Here is the XAML for the UserControl:
<UserControl x:Class="InstallerToolkit.UserControls.UserControlVideoPlayer"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="464">
<Grid Margin="0,0,0,0" Background="Black">
<StackPanel Margin="0,0,0,0" VerticalAlignment="Bottom">
<MediaElement Name="MediaElement" MediaOpened="Element_MediaOpened" LoadedBehavior="Manual" UnloadedBehavior="Stop"/>
<StackPanel DockPanel.Dock="Bottom" Background="DarkGray" HorizontalAlignment="Center" Orientation="Horizontal">
<Image Source="/Images/control_play.png" MouseDown="OnMouseDownPlayMedia" Margin="5" />
<Image Source="/images/control_pause.png" MouseDown="OnMouseDownPauseMedia" Margin="5" />
<Image Source="/images/control_stop.png" MouseDown="OnMouseDownStopMedia" Margin="5" />
<TextBlock Foreground="White" Margin="5" VerticalAlignment="Center"><Run Text="Seek To"/></TextBlock>
<Slider x:Name="timelineSlider" Thumb.DragStarted="DragStarted" Thumb.DragCompleted="DragCompleted" Margin="5" ValueChanged="SeekToMediaPosition" Width="70"/>
<TextBlock x:Name="lblProgressStatus" Margin="5"><Run Text="00:00"/></TextBlock>
<TextBlock x:Name="lblSepatator" Margin="5"><Run Text="/"/></TextBlock>
<TextBlock x:Name="lblTotalLength" Margin="5" RenderTransformOrigin="3.607,0.455"><Run Text="00:00"/></TextBlock>
<Image Source="/images/control_stop.png" Margin="145,0,0,0" MouseLeftButtonDown="Image_MouseLeftButtonDown" />
</StackPanel>
</StackPanel>
</Grid>
Here is the positon of my UserControl normally:
I have added a button to the UserControl to try and make it go the full size of the MainWindow.
WHen I click the fullscreen button I have an event on my page which does the following:
private void VideoPlayer_FullScreenSelected(object sender, EventArgs e)
{
var parentWindowWidth = ((System.Windows.Controls.Panel)(Application.Current.MainWindow.Content)).ActualWidth;
var parentWindowHeight = ((System.Windows.Controls.Panel)(Application.Current.MainWindow.Content)).ActualHeight;
Thickness margin = new Thickness(0,0,0,0);
VideoPlayer.Margin = margin;
VideoPlayer.Width = parentWindowWidth;
VideoPlayer.Height = parentWindowHeight;
}
When I do this I see the VideoPlayer appearing larger like so:
Note how it is the size of my Page but not the MainWindow which I want ot to be.
So then I have added an event to my Page which triggers a function in my MainWindow that tries to grab the MediaElement from my Page and make it fullscreen. But I dont know how to grab my UserCOntrol from here and make it the size I need.
How can I do this??
You are grabbing window content height and width which is page instead and not your window.
Instead of
var parentWindowWidth = ((System.Windows.Controls.Panel)
(Application.Current.MainWindow.Content)).ActualWidth;
var parentWindowHeight = ((System.Windows.Controls.Panel)
(Application.Current.MainWindow.Content)).ActualHeight;
you should use MainWindow height and width:
var parentWindowWidth = Application.Current.MainWindow.ActualWidth;
var parentWindowHeight = Application.Current.MainWindow.ActualHeight;
I found another way around this problem.
I created a new Window and made its size to be 1200x750. On this window I placed my VideoPlayer Usercontrol and made it full screen.
Thwn when I click the 'fullscreen' button I simply launch this new window and pass it the current position of my video to make it appear like its continuing playing. When this window is closed I pass the current video positon back again and continue from there.
private void VideoPlayer_FullScreenSelected(object sender, EventArgs e)
{
VideoPlayer.Pause();
//Get the current media position
_currentMediaPosition = VideoPlayer.CurrentPosition;
VideoFullScreenWindow fullScreenVideo = new VideoFullScreenWindow(_currentMediaPosition, _videoFile);
fullScreenVideo.ShowDialog();
TimeSpan pos = fullScreenVideo.Position;
VideoPlayer.SeekToPosition(pos);
VideoPlayer.Play();
}

Capturing Photo from PhotocaptureDevice

i my creating an image editing application. i want to give the option to user that he can also capture the image at run time and apply editing effects on that captured. at the moment i am following the instructions from Advanced Photo Capture for windows Phone 8.
there are 2 problems
First that i am facing is that when i hit the capture button the image captured will be an inverted image. if i put the phone in Landscape mode then it take the right picture.
When the app starts there is nothing on the screen in other words its totally black. I want the screen to show the camera view so that user knows that what he is going to capture.
Below is my code for Mainpage.xaml.cs file and MainPage.xaml file.
namespace CapturingPhoto {
public partial class MainPage : PhoneApplicationPage {
private MemoryStream imageStream;
private PhotoCaptureDevice captureDevice;
private CameraCaptureSequence seq;
// Constructor
public MainPage() {
InitializeComponent();
imageStream = new MemoryStream();
// Sample code to localize the ApplicationBar
//BuildLocalizedApplicationBar();
prepareResouceToCapture();
}
private async void prepareResouceToCapture() {
if((!PhotoCaptureDevice.AvailableSensorLocations.Contains(CameraSensorLocation.Back)) &&
(!PhotoCaptureDevice.AvailableSensorLocations.Contains(CameraSensorLocation.Front))){
return;
}
Windows.Foundation.Size size;
if(PhotoCaptureDevice.AvailableSensorLocations.Contains(CameraSensorLocation.Back)){
IReadOnlyList <Windows.Foundation.Size> avalaibleSizeList =
PhotoCaptureDevice.GetAvailableCaptureResolutions(CameraSensorLocation.Back);
size = avalaibleSizeList[0];
this.captureDevice = await PhotoCaptureDevice.OpenAsync(CameraSensorLocation.Back, size);
}
else{
IReadOnlyList<Windows.Foundation.Size> avalaibleSizeList =
PhotoCaptureDevice.GetAvailableCaptureResolutions(CameraSensorLocation.Front);
size = avalaibleSizeList[0];
this.captureDevice = await PhotoCaptureDevice.OpenAsync(CameraSensorLocation.Front, size);
}
// await this.captureDevice.SetCaptureResolutionAsync(size);
// await this.captureDevice.SetPreviewResolutionAsync(size);
// BackgroundVideoBrush.SetSource(this.captureDevice);
}
private async void onCaptureImage(object sender, RoutedEventArgs e) {
seq = captureDevice.CreateCaptureSequence(1);
captureDevice.SetProperty(KnownCameraPhotoProperties.FlashMode, FlashState.On);
captureDevice.SetProperty(KnownCameraGeneralProperties.PlayShutterSoundOnCapture, false);
captureDevice.SetProperty(KnownCameraGeneralProperties.AutoFocusRange, AutoFocusRange.Normal);
seq.Frames[0].CaptureStream = imageStream.AsOutputStream();
await captureDevice.PrepareCaptureSequenceAsync(seq);
CaptureImage();
}
public async void CaptureImage() {
await seq.StartCaptureAsync();
// Set the stream position to the beginning.
imageStream.Seek(0, SeekOrigin.Begin);
MediaLibrary library = new MediaLibrary();
Picture picture1 = library.SavePictureToCameraRoll("image1", imageStream);
}
}
}
Code for Xaml file
<phone:PhoneApplicationPage
x:Class="CapturingPhoto.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"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent" Height="768" VerticalAlignment="Bottom">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- LOCALIZATION NOTE:
To localize the displayed strings copy their values to appropriately named
keys in the app's neutral language resource file (AppResources.resx) then
replace the hard-coded text value between the attributes' quotation marks
with the binding clause whose path points to that string name.
For example:
Text="{Binding Path=LocalizedResources.ApplicationTitle, Source={StaticResource LocalizedStrings}}"
This binding points to the template's string resource named "ApplicationTitle".
Adding supported languages in the Project Properties tab will create a
new resx file per language that can carry the translated values of your
UI strings. The binding in these examples will cause the value of the
attributes to be drawn from the .resx file that matches the
CurrentUICulture of the app at run time.
-->
<!--ContentPanel - place additional content here-->
<Canvas x:Name="VideoCanvas" RenderTransformOrigin="0.5,0.5" Canvas.ZIndex="0">
<Canvas.RenderTransform>
<CompositeTransform/>
</Canvas.RenderTransform>
<Canvas.Background>
<!-- The background contains the camera view finder
encapsulated in VideoBrush. -->
<VideoBrush x:Name="BackgroundVideoBrush" >
<VideoBrush.RelativeTransform>
<CompositeTransform x:Name="VideoBrushTransform" CenterY="0.5" CenterX="0.5"/>
</VideoBrush.RelativeTransform>
</VideoBrush>
</Canvas.Background>
</Canvas>
<Button x:Name="btn_Edit" Content="Capture" HorizontalAlignment="Left"
Margin="23,691,0,0" VerticalAlignment="Top"
Width="400" Click="onCaptureImage"/>
<!--Uncomment to see an alignment grid to help ensure your controls are
aligned on common boundaries. The image has a top margin of -32px to
account for the System Tray. Set this to 0 (or remove the margin altogether)
if the System Tray is hidden.
Before shipping remove this XAML and the image itself.-->
<!--<Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Margin="0,-32,0,0" Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False" />-->
</Grid>
I see that string:
BackgroundVideoBrush.SetSource(this.captureDevice);
is comment.
You can't see camera view, if VideoBrush is empty.
To answer your first question use the "EncodeWithOrientation" property. Put the following switch statement at the top of your onCaptureImage(). This will ensure the saved image is in the correct orientation when taking a photo in portrait mode.
// Initialize variables.
int encodedOrientation = 0;
int sensorOrientation = (Int32)this._camera.SensorRotationInDegrees;
switch (this.Orientation)
{
// Camera hardware shutter button up.
case PageOrientation.LandscapeLeft:
encodedOrientation = -90 + sensorOrientation;
break;
// Camera hardware shutter button down.
case PageOrientation.LandscapeRight:
encodedOrientation = 90 + sensorOrientation;
break;
// Camera hardware shutter button right.
case PageOrientation.PortraitUp:
encodedOrientation = 0 + sensorOrientation;
break;
// Camera hardware shutter button left.
case PageOrientation.PortraitDown:
encodedOrientation = 180 + sensorOrientation;
break;
}
// Apply orientation to image encoding.
this._camera.SetProperty(KnownCameraGeneralProperties.EncodeWithOrientation, encodedOrientation);
Also see the following on MSDN: http://msdn.microsoft.com/EN-US/library/windowsphone/develop/windows.phone.media.capture.knowncamerageneralproperties.encodewithorientation(v=vs.105).aspx

Categories