Owner draw controls Windows Phone-Windows Store app - windows-phone-8

I started developing a Windows 8 (Metro style)-Windows Phone 8 application that will have (between the other things) a multilayer image editor. The problem is that this thing would be pretty easy with owner draw controls...but i can't find anything like that :O
I searched everywhere, but there is not something like the OnPaint/OnDraw/OnRender/OnXXXX or things like that! Am i missing something?
Thanks to everybody!
Side Note:
For my use case I founded a workaround, a Canvas with a WritableBitmap, this way I can have a "raster" surface instead of the list of items. Other than this I use the WritableBitmapEx that wraps the WritableBitmap with all the various APIs like DrawLine, Ellipse, etc..

You are right there is no OnPaint/OnDraw/OnRender in Windows Phone App.
If you want to keep it strictly XAML the best thing you can do is make your custom control
from the Canvas object like this.
<Canvas x:Name="my_canvas">
<Rectangle Fill="Red" Width="100" Height="100" Canvas.Top="100" Canvas.Left="100" />
<Rectangle Fill="Orange" Width="100" Height="100" Canvas.Top="100" Canvas.Left="200" />
<!-- more ui elements -->
</Canvas>
You can programmatically add in items using C# by doing this (it can get really tedious if you're drawing a lot of objects... like say drawing a fine stock chart)
this.my_canvas.Children.Add(my_ui_element);
There is also Windows Phone XNA which I used for a game I have uploaded to the store. In there you will have to deal with a gaming loop and content pipeline which is not easy.

Related

Map in Xamarin ListView

I have a ListView in my Xamarin Android app where I have over 100 list items. Each item has a Google Maps component showing a map of an area. I have realized that this causes the vertical scrolling of the ListView to lag (due to each component is pretty computational heavy I suppose). Each area is about Width x 128 pixels.
I am now thinking of how I can show the map of the area and still have good performance in the scrolling. One idea is to generate a small image of each area and bind it to the ListView item instead. However, as far as I understand, it is not technically possible to generate images from the Google Maps API (map + marker).
How would you recommended to solve this? Do you think I have some other bottleneck rather than the 100 instances? In my tests its pretty obvious it started to lag when I added the component. However, the component is hidden (IsVisible="False") unless you expand the List Item, but still its "there" and the lag persist. Is it normal to have so many components first of all?
My map is part of a Grid and looks like this:
<Frame Grid.Row="4" x:Name="expandArea" BackgroundColor="Transparent" IsVisible="False" Padding="0" Margin="0" HasShadow="True">
<maps:Map x:Name="userMap" MinimumHeightRequest="128" HeightRequest="128" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"/>
</Frame>

Create Layered Image in TVML (tvOS)

I'd like to create a layered image for use on tvOS 9.0 using TVML markup.
This seems like it should be a relatively common problem, but there doesn't seem to be any way to do this (as of tvOS Beta 3). In the Apple TVML demo app it accomplishes this by using multi-layer images that are pre-compiled into a single .lsr file, rather than in markup with each layer separately noted.
It is possible to script the creation of .lsr files using the layerutil CLI program, but this would be a huge hassle for the app I'm trying to build where the images will be user-generated-content.
Instead it would be great to be able to do something like this (note the src-layer1 property for adding an extra layer above the base src):
<lockup>
<img src="https://i.ytimg.com/vi/dQw4w9WgXcQ/mqdefault.jpg" src-layer1="https://server.com/path/to/overlay.png" height="180" width="320"/>
<title>Rick Astley - Never Gonna Give You Up</title>
</lockup>
Is there any other efficient way to do this other than scripting a lot of back and forth to a server to generate a .lsr file?
Update - Oct 21 2015: At the bottom of this documentation page Apple provides a checkmark overlay image that would be perfect for this use called resource://button-play. But there still seems to be no way to use this icon overlay in TVML. :-/
You can use overlay for layering images in lockups.
https://developer.apple.com/library/tvos/documentation/LanguagesUtilities/Conceptual/ATV_Template_Guide/CoumpoundDisplayElements.html#//apple_ref/doc/uid/TP40015064-CH18-SW3
<lockup>
<img src="https://i.ytimg.com/vi/dQw4w9WgXcQ/mqdefault.jpg" height="180" width="320"/>
<title>Rick Astley - Never Gonna Give You Up</title>
<overlay style="padding:0;">
<badge src="resource://overlay-checkmark" />
</overlay>
</lockup>
If you continue to have trouble positioning the check mark overlay, try padding it with transparency so that it is the same aspect ratio as the video thumbnail.

How to access Front-Facing Camera through CameraCaptureTask in Windows Phone 8

I am developing a Selfie Cam App for Windows Phone 8, I don't want to use the PhotoCamera library and Video Brush etc... to manually get the front facing cam.
I want to use the CameraCaptureTask to show the camera. As all know better, that when we launch the CameraCaptureTask, it shows the Primery(Back) camera, but I need that when the Task launch it shows the Front Facing Cam first.
Plz help in this regards.
CameraCapture task don't have option to select front-facing camera.
you've to write your own code to Launch front-facing camera by default.
Possibilities:
CameraCaptureTask is WP8 API, and i don't think that Microsoft is going to provide any option in future with CameraCaptureTask.
But in WP8.1 (wp Store apps), there are no alternative for CameraCaptureTask yet, so in future Microsoft might come out with something similar to CameraCaptureTask which might contain option to launch front-facing camera by default.
Edit:
Capture Image/Video with exact orientation:-
If you're facing issue of image capture orientation while capturing image or recording video, you should have to rotate the VideoBrush to 90 degree. So that the recorded video/Image will be captured as you wish.
Check the code for this function.
You need to edit the XAML code where you've created the VideoBrush control.
<Canvas x:Name="CanvasLayoutRoot" Background="Transparent">
<!--Camera viewfinder >-->
<Rectangle x:Name="viewfinderRectangle"
Width="{Binding ActualHeight, ElementName=CanvasLayoutRoot}"
Height="{Binding ActualWidth, ElementName=CanvasLayoutRoot}"
RenderTransformOrigin="0.5 0.5" Margin="-144 145" >
<Rectangle.RenderTransform>
<CompositeTransform Rotation="90"/>
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
Here main thing to notice is <Rectangle.RenderTransform> part and two tags RenderTransformOrigin="0.5 0.5" and Margin="-144 145" of control.
after setting the UI, assign VideoCaptureDevice to rectangle and you're done..!!
Hope that helps..

How to display an animated GIF in a Windows Phone 8.1 (RT) application?

I am trying to display a GIF file stored in a Windows Phone 8.1 (RT) application's local folder. Until now, I have tried several approaches:
Load the GIF in a WebView control. This is not a solution since I want to display the images in a FlipView control (I cannot flip to another image). Also, it is quite slow.
Get the GIF frames using the BitmapDecoder class and animate them using a storyboard.
The code is as follows:
using (var stream = await storageFile.OpenReadAsync())
{
//I don't specify the type since I would like to load other type of images also
//It doesn't make any difference if I would use "BitmapDecoder.GifDecoderId"
var decoder = await BitmapDecoder.CreateAsync(stream);
uint frameCount = decoder.FrameCount;
for (uint frameIndex = 0; frameIndex < frameCount; frameIndex++)
{
var frame = await decoder.GetFrameAsync(frameIndex);
var writableBitmap = new WriteableBitmap((int)decoder.OrientedPixelWidth,
(int)decoder.OrientedPixelHeight);
var pixelDataProvider = await frame.GetPixelDataAsync
(BitmapPixelFormat.Bgra8,
decoder.BitmapAlphaMode, new BitmapTransform(),
ExifOrientationMode.IgnoreExifOrientation,
ColorManagementMode.DoNotColorManage);
var pixelData = pixelDataProvider.DetachPixelData();
using (var pixelStream = writableBitmap.PixelBuffer.AsStream())
{
pixelStream.Write(pixelData, 0, pixelData.Length);
}
_bitmapFrames.Add(writableBitmap);
}
}
The problem is that the frames I get from the GIF image are messed up
Am I doing something wrong in this approach? What should I modify in order to get good results?
I wouldn't like to use SharpDX since it seems to be very complicated and I am a beginner.
ImageTools is available only for Silverlight
I made a very basic GifImage control that you can start from. This is a starting point, you'll have to improve it to make it more usable as a reusable control. Check it out here.
EDIT
Do you have any idea how to improve the loading speed (parallelization, etc.)?
I assume you're referring to the process of preparing the frames. From what I tested, it seems to load instantly anyway, so there shouldn't be a need for drastic performance improvements. However, if perhaps the animation has hundreds of frames, then it could be a bottleneck maybe? More testing needs to be done to assess whether or not optimisations are necessary.
I also don't think it can be paralleled easily since each frame needs to be rendered in sequence from the previous frame. My only suggestion would be to run the loading code on a background thread so the UI thread doesn't block for large images.
If I have this control as a FlipViewItem, how can I release the memory after the item is flipped away?
I'm not sure whether or not you're using MVVM or not, but anyway, here's some suggestions:
Set the Source of the GifImage to null if it's not currently visible (inspect the SelectedIndex of the flip view). Note that currently the code in my repo doesn't handle setting Source to null. Like I said before, it needs lots of improvements. You'll have to make sure that the control doesn't hold any references to the frames so that the garbage collector can free them from memory (that is, call animation.KeyFrames.Clear() to clear all references to the frames).
Use a VirtualizingStackPanel inside the flip view. This will ensure that only the previous, current, and next flip view items are created in memory. You set it like this:
<FlipView>
<FlipView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</FlipView.ItemsPanel>
</FlipView>
I had a similar problem. I was trying to display an animated GIF loaded from an external source inside a ScrollViewer for Windows Phone 8.1 app. Since the web control takes over the events the scrolling did not work.
I used this trick: I placed the web control inside a grid and put another grid over the webcontrol. The grid over the web control was set to be the exact same size and I set the background to transparent. This way the grid receives the events and the scrolling works again.
<ScrollViewer Visibility="Visible" HorizontalAlignment="Left" VerticalAlignment="Top" Width="380">
<Grid>
<StackPanel>
<!--
Some items ...
-->
<Grid >
<WebView x:Name="animationWebView" HorizontalAlignment="Left" Height="315" Width="390" Visibility="Visible" />
<Grid Width="390" Height="315" Background="Transparent" />
</Grid>
<!--
Some other items ...
-->
</StackPanel>
</Grid>
</ScrollViewer>

External images not smooth in BitmapImage as3

What I'm doing
Hello Im having problems loading external images into my flash (builder) application.
To show the image I use a BitmapImage with smoothing enabled like this:
<s:BitmapImage id="image" smooth="true" smoothingQuality="high" width="100%" height="100%" fillMode="clip" />
I also show thumbnails using the new flex4.6 scaleMode ZOOM like this:
<s:Image id="thumbnail" scaleMode="zoom" smooth="true" smoothingQuality="default" />
I preload the external image using a SWFLoader because I need to store the original image width and height
The problem
When I test my application locally everything works fine! But when I run it from my web domain I see its showing problems. For images running on the same domain and images from Flickr = no problem. But other images like from imageshack show the following problems:
The larger BitmapImage is not smooth.
The thumbnail is not scaled like its supposed to. It's showing minuscule in the upper left corner of the thumnail Image. When I hover my mouse over it, the thumnail is shown but like it would be shown with the default scalemode and fillmode CLIP
Cause?
Im not really sure whats causing the problem, but the only difference I see in the image sources is in the domain policy. The crossdomain.xml for Flickr allows all http://farm1.static.flickr.com/crossdomain.xml unlike imageshack.us http://www.imageshack.us/crossdomain.xml
If this would be the cause then I dont understand why the image is still being loaded but crappy. Does anybody know what's going on exactly? Any solutions? Thnx.
There are certain limitation to loading images cross domain without the correct policy enabled. Flash will load the data, but not allow any manipulation, including smoothing.
There are a number of ways around this. You could use a server-side proxy, loading the image via a local php or asp page. It's not the fastest solution, but it will work.
You could also try loading the image with LoadBytes, then passing the byte-array into a Loader object. It's not as pretty as using the Flex component, but it should restore some control to you.