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
Related
In Windows Presentation Foundation, I can't seem to find a way of how to cut an image based on the shape of another image.
E.g. I'd like to display someone's photo in the shape of a heart.
There are answers like this one which crop an image into a rectangle or like this one which draw a radius to clip the image into a circle.
But is cropping really the only way?
Can WPF overlay the image on top of a shape and have the image be cut based on the shape dimensions?
The code that I have so far does the inverse of what I'm trying to do. What I have so far uses an overlay layer as a mask to cover the image:
<Image
Name="HeartOverlay"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Panel.ZIndex="2"
/>
<Canvas
Name="Canvas"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Image
Name="Image"
Stretch="Uniform"
Panel.ZIndex="1"
/>
/>
HeartOverlay.Source = new Bitmap(#"C:\heart.png");
Image.Source = new Bitmap(#"C:\image.png");
The problem here is that overlay is merged together with the image and saving/printing the image also shows the overlay.
See image below as an example. Note the white borders, which are especially evident when viewing the image in something like the Mac Preview app. I'm looking to save/print the image without the white borders.
Appreciate any pointers!
You could simply fill a Path with a heart-shaped Geometry with an ImageBrush:
<Path Width="100" Height="150" Stretch="Uniform"
Data="M1,2 L0,1 A0.5,0.5 1 1 1 1,0 A0.5,0.5 1 1 1 2,1 Z">
<Path.Fill>
<ImageBrush ImageSource="C:\image.png"/>
</Path.Fill>
</Path>
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="..."/>
Have a checkbox with custom control template which looks like this in design view:
XAML code:
<CheckBox IsChecked="{Binding Fareklasse21}" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="1" Grid.Column="1">
<CheckBox.Template>
<ControlTemplate>
<StackPanel Orientation="Vertical" VerticalAlignment="Center">
<Image Source="pack://application:,,,/Asd.WWs.Client.Wpf;component/Resources/ADR-M.png" Width="64" Height="64" SnapsToDevicePixels="True">
</Image>
<StackPanel Orientation="Horizontal">
<CheckBox IsChecked="{Binding IsChecked, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type CheckBox}}}"></CheckBox>
<TextBlock>2.1</TextBlock>
</StackPanel>
</StackPanel>
</ControlTemplate>
</CheckBox.Template>
When I start the application, the image (which is originally 64x64px) gets distorted (and enlarged?)
Could it be that the image inherits some value from the Prism wrapper? I can't really see anything interesting while doing live inspection:
Here are the properties of the specific image:
The WPF graphics system uses device-independent units to enable resolution and device independence. Each device independent pixel automatically scales with the system's dots per inch (dpi) setting. This provides WPF applications proper scaling for different dpi settings and makes the application automatically dpi-aware. See also wiki page.
This is the reason why if you even specify Stretch=None for an Image control, you may notice that the image does not appear at the expected number of pixels wide/high. This can happen if the image’s resolution (DPI) doesn’t match your current system DPI.
The conversion from physical pixels to DIPs uses the following formula.
DIPs = pixels / (SystemDPI / 96.0)
If you want to convert DIP to the "real" pixels you can use next formula:
Width (pixels) = Width (WPF Units) * (SystemDPI / 96)
Height (pixels) = Height (WPF Units) * (SystemDPI / 96)
You can specify element size in DIP, inches, centimeters or points. But it's better to use vectorized graphics if possible.
If you have SVG files you can use sharpvector framework via nuget:
Install-Package SharpVectors
So there is SvgViewbox to render SVG in XAML:
<UserControl ...
xmlns:svgc="http://sharpvectors.codeplex.com/svgc/"
...>
...
<svgc:SvgViewbox Margin="5" Height="20" Width="20" Stretch="Uniform" Source="/Resources/Icons/Sample.svg"/>
...
</UserControl>
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>
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>