Drop shadow effect in Windows Phone 8.1 Runtime? - c#

I'm looking for a way to add a Drop Shadow Effect to the multiple kind of elements in my Windows Phone 8.1 Runtime (not Silverlight!) application. The main problem is that.. there's no offical API for it. The main problem is that I need to mimic this effect not only to the basic shapes (like rectangle or a line), but also a path, like here:
Picture is borrowed from this question: path-with-broken-shadow-effect - I hope the owner won't mind ;) Now, he has achieved this effect because it was done in WPF. I'm working on a Universal App (so WinRT), and there's no Effects extension.
I've searched the web multiple times, and found some kind of workarounds, but they all miss something. For example this one:
http://www.silverlightshow.net/items/Simple-Xaml-Drop-Shadows-in-Silverlight-2.aspx <- I can't work on Canvas, the content has to be a Grid.
Do you any idea how can I achieve satisfying results on faking Drop Shadow Effect in Windows Phone 8.1 Runtime?

Apply a RenderTransform to the shadow shape. Set the scale to make it bigger:
<Grid Style="{StaticResource LayoutRootStyle}" Background="#FF803535" >
<Rectangle Width="100" Height="100" Opacity="0.3" RenderTransformOrigin="0,0" StrokeThickness="16" StrokeDashCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" StrokeStartLineCap="Round" Stroke="Black" >
<Rectangle.RenderTransform>
<CompositeTransform ScaleX="1.07" ScaleY="1.07" />
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Width="100" Height="100" Fill="Blue"></Rectangle>
</Grid>

Related

Only a certain Pattern of Geometry data is being rendered on Canvas in WPF application

I am trying to Display some Geometry Resources in a Canvas
I have Placed the required data inside a canvas and I noticed that only a certain type of data is being rendered in the View (path with negative values do not get rendered) .
Any Idea why I might be facing this problem and any suggestions ?
A Canvas does not resize its child elements, hence the coordinates of your Paths are used as-is. Obviously the coordinates of the FolderIcon Path are far outside any visible region of your application.
Instead of using a Canvas, you may want to directly use the Path elements as resources. Then also make them stretch automatically by setting Stretch="Uniform", and take care that they can be re-used multiple times by setting x:Shared="False".
<Path x:Key="FileIcon" x:Shared="False" Width="12" Height="12"
Stretch="Uniform" Stroke="Black" x:Shared="False" Fill="White" Data="..."/>
<Path x:Key="FolderIcon" x:Shared="False" Width="12" Height="12"
Stretch="Uniform" Stroke="Black" Fill="White" Data="..."/>

How to draw paths in Xamarin.Forms XAML

Coming from Windows Phone Silverlight, WPF and UWP world I'm now looking into Xamarin.Forms to port an app to iOS and Android. All of the icons and logos of that app up until now are Path elements in the App.xaml file. For example:
<DataTemplate x:Key="ImageAdd">
<Path Width="30"
Height="30"
Stretch="Fill"
Fill="{StaticResource TsColorWhite}"
Data="F1 M 35,19L 41,19L 41,35L 57,35L 57,41L 41,41L 41,57L 35,57L 35,41L 19,41L 19,35L 35,35L 35,19 Z "/>
</DataTemplate>
With this the app does not need scaled graphics for different screen resolutions.
Path is in System.Windows.Shapes namespace and therefore not available in XF.
So the question is: How can I load and show such paths in Xamarin.Forms?
Starting from Xamarin.Forms 4.7.0 Shapes were introduced, you can draw your paths directly in your xaml. Aspect property is the equivalent of Stretch property in Xamarin.Forms. Shapes (including Paths) are in Xamarin.Forms.Shapes namespace.
<DataTemplate x:Key="ImageAdd">
<Path Width="30"
Height="30"
Aspect="Fill"
Fill="{StaticResource TsColorWhite}"
Data="F1 M 35,19L 41,19L 41,35L 57,35L 57,41L 41,41L 41,57L 35,57L 35,41L 19,41L 19,35L 35,35L 35,19 Z "/>
</DataTemplate>
Related documentation
Microsoft Blog: Drawing UI with Xamarin.Forms Shapes and Paths.
Microsoft Official documentation: Xamarin.Forms Shapes.
GitHub: Specifications: Shapes & Paths

Media Capture WinRT SetPreviewRotation working but causing display issue.

I've downloaded the sample here: https://code.msdn.microsoft.com/windowsapps/Media-Capture-Sample-adf87622
I have compiled and everything runs perfectly. However I want to rotate the camera so that it is in portrait mode. After consulting the documentation I found the following code:
MediaCapture.SetPreviewRotation(VideoRotation.Clockwise270Degrees)
and
MediaCapture.SetRecordRotation(VideoRotation.Clockwise270Degrees).
I have added the two lines above and it has indeed rotated the output which is exactly what I am after. The only issue is the preview now has an orange and blue distortion running through it. The Recording one worked perfectly.
Any ideas?
I ended up using the following code for the preview:
<Canvas x:Name="previewCanvas1" Width="576" Height="720" Background="Gray">
<CaptureElement x:Name="previewElement1" Width="720" Height="576" RenderTransformOrigin=".5,.5" >
<CaptureElement.RenderTransform>
<RotateTransform Angle="270" CenterX="0.5" CenterY="0.5" />
</CaptureElement.RenderTransform>
</CaptureElement>
</Canvas>

WPF XAML clipping ellipse on canvas when using TranslateTransform

When I run this code in WPF it gives me 1/4 of a circle. When removing the ClipToBounds tag, i get my whole circle.
1. Why is it clipping before rendering?
2. How to i fix that, while keeping clipping?
<Canvas ClipToBounds="True">
<Ellipse Canvas.Left="-10"
Canvas.Top="-10"
Width="20"
Height="20"
Fill="LightSeaGreen"/>
<Canvas.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="4.8"
ScaleY="4.8"
CenterX="0"
CenterY="0"/>
<TranslateTransform X="48"
Y="48"/>
</TransformGroup>
</Canvas.RenderTransform>
</Canvas>
Why is it clipping before rendering?
It's not.
As you can see from here:
Your Ellipse is rendered perfectly. The ClipToBounds="True" is what ruins is as you can see from your Canvas:
How to i fix that, while keeping clipping?
This is quite a broad question. Your problem comes from the fact you are putting your Ellipse outside the Canvas (Canvas.Left="-10" Canvas.Top="-10") and then you clip it. Explain what is your goal and I can try to help you out.
This behaviour is by design. The authors of the textbook (Computer Graphics: Principles and Practice - Third Edition) have confusingly introduced ClipToBounds in a way that makes it seem like it is a part of the examples that follow in the book. In fact, they are not using ClipToBounds="True". You can verify that by downloading their lab package from http://sklardevelopment.com/graftext/ChapWPF2D/ .
To illustrate, here is the actual source code for one of their examples:
<Canvas
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Name="ClockCanvas" >
<Ellipse
Width="20.0" Height="20.0"
Canvas.Left="-10.0" Canvas.Top="-10.0"
Fill="lightgray"/>
</Canvas>
Note that there is no ClipToBounds="True" on the canvas.

How to combine images?

WP7 application.
I have some images (that I get from some URIs on the internet) and I want to combine them (one on top of the other, the second at a certain x and y on top on the first). Can this be done in WP7? What library should I use?
Just place two Images in a Canvas:
<Canvas>
<Image Source="uri1" Canvas.Top="10" Canvas.Left="20"/>
<Image Source="uri2" Canvas.Top="30" Canvas.Left="40"/>
</Canvas>

Categories

Resources