ViewFinder Orientation With Windows Phone 7 Mango PhotoCamera - camera

I am using the PhotoCamera control with the Windows Phone 7 Mango Beta 2 development tools.
The "ViewFinder" for the camera control is a rectangle object filled with a VideoBrush, as in the example here:
http://msdn.microsoft.com/en-us/library/hh202956%28v=VS.92%29.aspx
My problem is that when I run the app on my phone, the ViewFinder image is always showing up rotated 90 degrees counter-clockwise. This is the case no matter how the phone is positioned.
Does anyone know how I can orient the ViewFinder correctly?

Yes, the orientation is something you'll need to manage with a Relative Transform:
<!--Camera viewfinder >-->
<Rectangle Grid.Row="1"
x:Name="preview">
<Rectangle.Fill>
<VideoBrush x:Name="previewBrush">
<VideoBrush.RelativeTransform>
<CompositeTransform x:Name="previewTransform"
CenterX=".5"
CenterY=".5" />
</VideoBrush.RelativeTransform>
</VideoBrush>
</Rectangle.Fill>
</Rectangle>
Then you can use the PhotoCamera class to determine how you want to rotate it:
double cameraRotation = theCamera.Orientation;
// Use the orientation to determine how to transform
// the camera preview
previewTransform.Rotation = theCamera.Orientation + 90.0; // Landscape?
HTH

Adding more clarification to the answer: One thing the documentation describes that isn't mentioned here is that the relative transform is adjusted in the OnOrientationChanged event. Another difference is that the relative transform isn't specified in the XAML.
In the docs (How to: Create a Base Camera Application for Windows Phone), the rectangle is filled with the videobrush as follows:
<!--Camera viewfinder >-->
<Rectangle Width="640" Height="480"
HorizontalAlignment="Left"
x:Name="viewfinderContainer">
<Rectangle.Fill>
<VideoBrush x:Name="viewfinderBrush" />
</Rectangle.Fill>
</Rectangle>
Then, in the code-behind, the OnOrientationChanged event rotates the rectangle based on orientation:
// Ensure that the viewfinder is upright in LandscapeRight.
protected override void OnOrientationChanged(OrientationChangedEventArgs e)
{
if (e.Orientation == PageOrientation.LandscapeRight)
{
viewfinderBrush.RelativeTransform =
new CompositeTransform() { CenterX = 0.5, CenterY = 0.5, Rotation = 180 };
}
else
{
viewfinderBrush.RelativeTransform =
new CompositeTransform() { CenterX = 0.5, CenterY = 0.5, Rotation = 0 };
}
base.OnOrientationChanged(e);
}
The code in this topic (which corresponds to the sample) is configured to only use landscape orientation, maybe this is why you're only getting landscape images(?) At the beginning, the following attributes are added to the phone:PhoneApplicationPage element in MainPage.xaml:
SupportedOrientations="Landscape" Orientation="LandscapeLeft"
If you are still getting images orientated incorrectly, sync your images to your PC and see if they're oriented correctly while viewing them there (on your PC). It could be a bug with the Beta that is causing the image to not appear correctly on the device.
Hope that helps. Cheers

You do not need to do that much code, assuming you are in portrait mode, just call:
viewfinderBrush.RelativeTransform
= new CompositeTransform() { CenterX = 0.5, CenterY = 0.5, Rotation = 90 };
But of course, whatever orientation you use for the viewfinder, the resulting image IS still in landscape! Does anybody have an idea how to best fix this?

yes, I deleted the OnOrientationChanged-Eventhandler and just set the transform. In Xaml of course I changed the orientation to portrait.
Now, the viewfinder shows portrait and the page is portrait as well. But the image is saved as thumbnail to the camera roll, so I can see directly on device that the captured image has still landscape orientation.
Would be cool, if someone could verify that this is a Beta bug, or if we have just done some stupid code here ;)
Thanks.

Related

How to set a background image with XAML/.NET Maui that has AspectFill behavior but left aligned?

I am working an app that uses an image as its background, and I want it to fill the entire window regardless of size. The image source is square-ish, like this:
The simplest way to do this is using AspectFill like this:
<Image
Source="image_source.png"
Aspect="AspectFill"/>
But that results in the image being centered, like this:
When what I need is for the image to be left aligned, like this:
I almost had some success using this:
<AbsoluteLayout>
<Image
Source="image_source.png"
AbsoluteLayout.LayoutFlags="HeightProportional"
AbsoluteLayout.LayoutBounds="0,0,Autosize,1"/>
</AbsoluteLayout>
but the problem there became when I had a screen like a tablet or foldable which is wider horizontally, it ended up getting letterboxed like this:
When what I would want would just be a regular AspectFill like this:
Is there any way to get this behavior with the existing Aspect options? If not, is there a way to extend the Aspect enum and the Renderer to make the image perform the same as AspectFill, but locked to the left edge of the image instead of the center?
I'm using XAML with .NET Maui, so if there is a solution in C# I'm open to that too
Was able to get a solution from Reddit, so I'm posting it here for anyone who stumbles across this:
My final XAMl ended up being
<Grid>
<Image
x:Name="backgroundImage"
Source="image_source.png"
Aspect="AspectFill"
HorizontalOptions="Start"/>
</Grid>
And I added this to the code-behind:
protected override void OnSizeAllocated (double pageWidth, double pageHeight) {
base.OnSizeAllocated(pageWidth, pageHeight);
const double aspectRatio = 1600 / 1441.0; // Aspect ratio of the original image
backgroundImage.WidthRequest = Math.Max(pageHeight * aspectRatio, pageWidth);
}

How to switching between InkCanvas and Canvas in UWP

I'm struggling with new UWP InkCanvas for my apps.If you are familiar with the new InkCanvas in UWP, I would truly appreciate your help.
I have a UWP apps need to switching between InkCanvas and Canvas, which I wish to use InkCanvas for Drawing, Canvas for creating Contents such as RichEditbox, Image, etc...
My XAML is below
<Grid Margin="100,0,100,0" Background="White" x:Name="MainGrid" PointerMoved="MyCanvas_PointerMoved" PointerReleased="MyCanvas_PointerReleased" PointerPressed="MyCanvas_PointerPressed">
<Canvas x:Name="MyCanvas" />
<InkCanvas x:Name="inkCanvas" Canvas.ZIndex="0" />
<!-- End "Step 2: Use InkCanvas to support basic inking" -->
</Grid>
I tried to make my Canvas ZIndex greater than InkCanvas by using
private void AppBarButton_Click(object sender, RoutedEventArgs e)
{
if(Canvas.GetZIndex(MyCanvas) > 1)
{
Canvas.SetZIndex(MyCanvas, 0);
}
else
{
Canvas.SetZIndex(MyCanvas, 5);
}
}
However I can't make my Canvas come to the front, the InkCanvas keep Capturing my stroke if I Draw on it instead.
Does anyone know how to switch the Canvas and InkCanvas in my Grid without changing the Visibility of my InkCanvas to Collapsed?
By default the Canvas background is empty (null), so it will not capture pointer input and will pass it through to the InkCanvas.
If you want to prevent this, you could set its Background to Transparent.
However, when you start putting some controls on the Canvas itself, they should capture the pen input and not let it through to the InkCanvas.

Image translation is clipped (how to prevent)

How can I force a UI object to NOT be clipped when it's partly outside the screen. I have an image that doesn't fit inside the screen completely. When I drag it (TranslateY) it moves like it's supposed to but the problem is that the part that was outside the screen doesn't appear so the image is abruptly cut. The only part of the image that is visibly moving is the part that originally fit to the screen.
Ps. Please do not recommend scollviewer as this is about a gesture to do a specific thing on the UI and ScrollViewer is not ok for that.
This is basically the XAML (The image is twice the height of the display)
<Grid x:Name="GestureScreen" ManipulationMode="TranslateY" RenderTransformOrigin="0.5,0.5">
<Image x:Name="GestureImage" CacheMode="BitMapCache" Source="Assets/bg/draggable.png" />
</Grid>
This is the C# (not really relevant, but still)
void GestureScreen_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
move.Y += e.Delta.Translation.Y;
}
Specify a row and column for the image which directly specifies Auto for both. That way the image will size to its actual size and not the current size of the * defaults of the screen size. Hence you will have the whole image as dragged.

Resizeing image (png) in windowsphone xaml without losing quality

In a listbox , i show flag icon for every row . and i use xaml image control in template of listbox item.
after resizing the png files ( flag icons ) , they lose their quality and they are not smooth any more ... what should i do with this problem ? for example in wpf there is a property RenderOptions.BitmapScalingMode for managing the quality . but i did not see anything in windows phone ... i was wondering if you guide me how can i fix this issue.
Thanks a lot
<Image Source="{Binding Icon}" Height="50" Width="50" Stretch="Fill" Margin="0,10,0,0"/>
RenderOptions.BitmapScalingMode does not exist in Windows-Phone.
But if you really want to do this code wise without vector images you can do it using Phone 8.1 SDK
Check out BitmapEncoder class. BitmapEncoder as part of the Windows.Graphics.Imaging Namespace.
BitmapEncoder.BitmapTransform.InterpolationMode is what you're looking for.
You could use the Bitmap to deliver the image with the same quality:
Image image = new Image();
Uri uri = new Uri(“images/single-pink-rose.png”, UriKind.Relative);
ImageSource img = new System.Windows.Media.Imaging.BitmapImage(uri);
image.SetValue(Image.SourceProperty, img);
Refer here for more: How to Reduce Size of Image in windows phone
How do I resize a BitmapImage to 50x50 on Windows Phone 7?
Hope it helps!

Zooming in and out in Grid, Images on WinRT (Metro style app)

I'm trying to implement something in my app, I need to show an image, and let the user pinch in and out of the images.
I think its possible using the ScrollViewer, but I couldnt get it to work, help?
I hate to oversimplify this, but the WinRT XAML ScrollViewer has gesture manipulation built in.
You can see what I mean here. This might not be what you want. But it's sure a simple approach and might fit a certain % of scenarios. Maybe even yours.
Controls that incorporate a ScrollViewer in compositing often set a value for ZoomMode in the default template and starting visual states, and it is this templated value that you will typically start with. Controls with a ScrollViewer as part of their composition typically use template binding such that setting the attached property at the level of the control will change the scroll behavior of the ScrollViewer part within the control. Otherwise, it may be necessary to replace the template in order to change the scroll behavior of a ScrollViewer part.
Check out Morten Nielsen's article on Building A Multi-Touch Photo Viewer Control. It's for Silverlight/Windows Phone, but if you just enable manipulations on the image and change a few types in manipulation events - it should work great.
A simple solution that might be enough for you is to just put the image in a ScrollViewer, although to see it working - you need a touch screen or run it in a simulator (use the pinch tool, then drag and scroll on the image to zoom in/out).
You can also zoom it with code:
<Grid
Background="{StaticResource ApplicationPageBackgroundBrush}">
<ScrollViewer
x:Name="myScrollViewer">
<Image
Source="/Assets/SplashScreen.png" />
</ScrollViewer>
</Grid>
.
public BlankPage()
{
this.InitializeComponent();
myScrollViewer.ZoomMode = ZoomMode.Enabled; // default
Test();
}
private async void Test()
{
while (true)
{
for (double x = 0; x < 2 * Math.PI; x += Math.PI / 30)
{
await Task.Delay(1000 / 30);
float factor = (float)(1.0 + Math.Sin(x) / 10);
myScrollViewer.ZoomToFactor(factor);
}
}
}