Is it possible to blend SVG images that use FFImageLoadingSVG.
I need to blend a SVG image that I loaded to make up a whole image but I cannot use Opacity as it doesn't do what I need it to do. Blending is required and I don't think this is possible.
Is there a way to combine Blending from Skia sharp and FFImageLoading together inside XAML so I do not have to write any back code and have a re-usable XAML code for this?
Current XAML code.
<svg:SvgCachedImage Source="resource://uCue_Silver.Resources.SVGs.star_m.svg"
WidthRequest="200"
HeightRequest="200"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
BackgroundColor="Transparent"
Scale="1">
<svg:SvgCachedImage.Transformations>
<fftransformations:TintTransformation HexColor="#FFFFFF"
EnableSolidColor="True" />
</svg:SvgCachedImage.Transformations>
</svg:SvgCachedImage>
<svg:SvgCachedImage Source="resource://uCue_Silver.Resources.SVGs.star_m.svg"
WidthRequest="200"
HeightRequest="200"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
BackgroundColor="Transparent"
Scale="0.8">
<svg:SvgCachedImage.Transformations>
<fftransformations:TintTransformation HexColor="#FFFF00"
EnableSolidColor="True" />
</svg:SvgCachedImage.Transformations>
</svg:SvgCachedImage>
<svg:SvgCachedImage Source="resource://uCue_Silver.Resources.SVGs.s2.svg"
WidthRequest="200"
HeightRequest="200"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
BackgroundColor="Transparent"
ScaleX="-0.8"
ScaleY="0.8">
<svg:SvgCachedImage.Transformations>
<fftransformations:TintTransformation HexColor="#FFFFFF"
EnableSolidColor="True" />
</svg:SvgCachedImage.Transformations>
</svg:SvgCachedImage>
Unfortunately, I do not believe there's a way to achieve this in Xamarin.
However, you could use Illustrator, or even a free software like gimp, to open your multiple path/svg images, and then combine then into a single path (Merge Visible Paths).
At that point you could then have multiple svg in your Xamarin app of the separate svg, and the combined one as well.
Related
I created a solution (see code here) from a blank Xamarin Forms template, running the latest stable version of Xamarin Forms. I added the experimental Shapes and SwipeView as required into my native projects, and I have a list of rows just saying "Hello" inside a Collection View.
I attempted to add a semicircle shape to the right swipe item's Grid, so it looks like the row has a rounded edge instead of rectangular shape.
But as you can see in the image below, the Shape just disappears after swiping to the right the second time. And occasionally the shape won't even appear in the row's swipe item.
Please note that the label always displays though, its just the shape going away. Also tested in Android & noticed the same behaviour. Do you know what the issue might be and if there's a work around?
Edit: Posted this and got a response to create an issue. Still looking for a workaround though
You can use Frame with CornerRadius to achieve the result:
<StackLayout Orientation="Horizontal" Padding="0" Margin="0" Spacing="0">
<Label
Text="Left"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand" />
<!--<Path HorizontalOptions="EndAndExpand" Fill="White" Stroke="White" Aspect="Fill" Data="m0.19956,-0.20844l14.43749,0l0,0c7.97347,0 14.43748,6.51981 14.43748,14.56254c0,8.04265 -6.464,14.5625 -14.43748,14.5625l-14.43749,0l0,-29.12504z" >
<Path.RenderTransform>
<RotateTransform CenterX="14.637"
CenterY="14.3541"
Angle="180" />
</Path.RenderTransform>
</Path>-->
<Frame BackgroundColor="Yellow" CornerRadius="30" IsClippedToBounds="True" HeightRequest="30" WidthRequest="30" HorizontalOptions="End" Margin="0,0,-51,0">
</Frame>
</StackLayout>
I notice that Android is a lot slower than iOS when it comes to drawing out forms.
Can anyone tell me is there any difference in the speed taken to draw these three:
<Grid ColumnSpacing="{DynamicResource TemplateColumnSpacing}"
HeightRequest="{DynamicResource DefaultGridHeight}"
Padding="{DynamicResource GridGridPadding}">
</Grid>
<Grid ColumnSpacing="10"
HeightRequest="50"
Padding="5">
</Grid>
I want to design as attached screenshot
I tried using RelativeLayount and AbsoluteLayout but Still not successful to have the required result. Can you help
<RelativeLayout HorizontalOptions="Center">
<Image Source="XX.png" />
<Image Source="YY.png"/>
<Image Source="WW.png"/>
</RelativeLayout>
These are the three images
You can use AbsoluteLayout and specify image positions to make them overlap:
<AbsoluteLayout>
<Image Source="aa.png" Aspect="Fill" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds=".5,.5,1,1"/>
<Image Source="bb.png" Aspect="Fill" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds=".5,.5,1,1"/>
</AbsoluteLayout>
But in your case, it will be difficult to adjust the positions since your images are of different scale, and are not symmetrical, it's recommended that you make some adjustment on your images first so that it will be easier for you to put them into the screen.
For more information about AbsoluteLayout, see Xamarin.Forms AbsoluteLayout
Option 1 - Use grid with same Row and Column
Option 2 - Use AbsoluteLayout
I have a problem making my ImageButton's width fixed and the Height will be changed with the size of the image that I use in the ImageButton, I use the ImageButton multiple times in a Scrollview, I use Visual Studio to create a Cross-Platform App using Xamarin, So what I used to solve my problem are here and here, But I wasn't able to solve it using anything, And this is a picture that describes what I want:-
And please don't make it duplicate if there's answers for my question because I am new to Xamarin Forms And I didn't find any answer exactly to my question, And this is my code:-
<Frame CornerRadius="10" OutlineColor="#fce9cc" Padding="4" Margin="15" VerticalOptions="StartAndExpand"
HasShadow="True" x:Name="ViewLayout" x:FieldModifier="public" BackgroundColor="Black">
<StackLayout>
<Label x:Name="filmNameLabel_1" HorizontalOptions="Center" FontSize="Large" TextColor="White"
Margin="0,15,0,15"/>
<StackLayout Orientation="Vertical">
<ImageButton x:Name="imageWidget_1" BackgroundColor="Black" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Aspect="AspectFill"/>
</StackLayout>
</StackLayout>
</Frame>
First time I set the StackLayout or the parent of the ImageButton's HeightRequest to a number and it would make the ImageButton's Height a fixed number but I dont want that I want the ImageButton's Height to change with the Image's size Ratio bye the width which is fixed next to
the parent layout.
I like to put a Border in a Grid using Xaml.
I found these code
`<Border BorderBrush="Black" BorderThickness="2">
<Grid>
<!-- Grid contents here -->
</Grid>
</Border>`
But it doesn´t work.
I'm a novice yet in this, I want to do a Table with some information.
There is no Border control in Xamarin.Forms, however you can use a Frame
<Frame OutlineColor="YourColor" BackgroundColor="Transparent" Padding="0">
<Grid>
</Grid>
</Frame>
Note the OutlineColorproperty, and the Padding, sometimes people forget that Frame as a default Padding that can overlap their childs.