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>
Related
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.
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.
I'm using Xamarin.Forms and I haven't found out how to have a multiline label for UWP. In my real project I have the label in a Grid on a ViewCell in a ListView. For the below example I've put it into a StackLayout:
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Label x:Name="titleLabel" Text="some long text" LineBreakMode="WordWrap" />
<Label x:Name="valueLabel" Text="perhaps a much, much, much, much, much, much, much, much, much longer text" LineBreakMode="WordWrap" />
</StackLayout>
The code is working on iOS and Android, but not on UWP. Here the text gets cut off. If only one label and no StackLayout is used it appears correctly on UWP with the multiline text.
I also tried to use a custom renderer with a multiline TextBlock as label, but the result was the same - the text is cut off.
Is this a bug or am I missing something?
Edit:
Now I made a UWP project
<StackPanel Orientation="Horizontal">
<TextBlock Text="oh this is a label" TextWrapping="Wrap" />
<TextBlock Text="and this should be a very, very, very, very, very, very, very, very, very, very long text" TextWrapping="Wrap" />
</StackPanel>
and here the text is also cut off. It seems it isn't possible in UWP. Are there any other solutions/workarounds?
If you set a WidthRequest for each label, the multiline label is correctly displayed (by growing in height).
An alternative solution is e.g. putting the label into a Grid and use a fixed column width.
The reason for that behavior could be that StackLayout has a default width of Auto (if nothing explicitly set) and the label doesn't know how big it could be. If you set a width, the label can grow up to that size.
This post brought me on the idea.