I need to insert an image inside a label in Xamarin forms.
Sample: "If you find this image <image.png> you win"
I tryied to convert my png to Font and use it as Span inside the label but I failed (I don't know how to use the ttf file in the span). Any other suggestion? I prefer to avoid html view
I would say the easiest solution is a GestureRecognizer
<StackLayout>
<Label Text="Click this image" />
<Image Source="tapped.jpg" />
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding TapCommand}" CommandParameter="Image1" />
</StackLayout.GestureRecognizers>
</StackLayout>
more info on https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/gestures/tap
Related
I need to display our app logo on the main page of the application but no matter what I do, nothing shows up.
<Image
Source="{StaticResource 'MystronicsWinder.Resources.AppIcon.appicon.svg'}"
Margin="20"
Aspect="AspectFill"
IsVisible="true"/>
UPDATE:
<Image
Source="{StaticResource 'MystronicsWinder.Resources.AppIcon.appicon.png'}"
Margin="20"
Aspect="AspectFill"
WidthRequest="300"
HeightRequest="300"
IsVisible="true"/>
I have the same issue with my png logo!
For displaying SVG images I use my library which you can find here: https://github.com/FreakyAli/Maui.FreakyControls
It uses Skia to display SVG images : https://github.com/FreakyAli/Maui.FreakyControls/wiki/FreakySvgImageView
Build action of all SVG images you want to use needs to be set to EmbeddedResource.
<freakyControls:FreakySvgImageView
Command="{Binding OnTapCommand}"
CommandParameter="{Binding OnTapCommandParam}"
Tapped="FreakySvgImageView_Tapped"
SvgAssembly="{x:Static samples:Constants.SvgAssembly}"
SvgMode="AspectFit"
ResourceId="{x:Static samples:Constants.DotnetBot}"/>
I'm creating an image gallery app using a collection view (thumbnail). I'm using FFloading to get the images from URL. When I click on the image, I want to navigate to another page using the shared Transaction library to view my image on fullscreen. I noticed, however, that when I navigate to the full-screen page the image re-downloads. Is there a way I can achieve this seamless transition? Think Instagram. Thanks
From: Page
Aspect="AspectFill"
HeightRequest="150"
RetryCount="5"
CacheDuration="30"
RetryDelay="450"
DownsampleToViewSize="True"
sharedTransitions:Transition.Name="PlaceImage"
sharedTransitions:Transition.Group="{Binding Id}"
Source="{Binding PhotoPath,Converter={StaticResource Key=path}}"/>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer
Command="{Binding Source={x:Reference browse},Path=BindingContext.NavigateToDetailsCommand}" CommandParameter="{Binding .}"/>
</StackLayout.GestureRecognizers>
To: <ffimageloading:CachedImage
Aspect="AspectFill"
DownsampleToViewSize="True"
RetryCount="5"
FadeAnimationEnabled="True"
CacheDuration="30"
Source="{Binding PhotoPath,Converter={StaticResource Key=path}}"
RetryDelay="450"
sharedTransitions:Transition.Name="PlaceImage"/>```
Found a solution, I needed to set a hightrequest on the second page
I have some code that looks like this:
<Frame CornerRadius="20" >
<Frame.Content>
<Grid x:Name="detailRowArea" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
<xaml:CardWordsFourRowsPlus IsVisible="{Binding FourRowsPlus}" />
<xaml:CardWordsFourRows IsVisible="{Binding FourRows}" />
<xaml:CardWordsThreeRows IsVisible="{Binding ThreeRows}" />
<xaml:CardWordsTwoRows IsVisible="{Binding TwoRows}" />
</Grid>
</Frame.Content>
</Frame>
I just now noticed that the developer had used Frame.Content
Can anyone tell me why this is used? The code seems to work without it so I am wondering what advantage it offers.
There really isn't any advantage other than I guess readability, but the Content tags really aren't needed. The Forms control in xaml will assume that any content that appears between the start and end tags is assumed to be assigned to the Content property.
If you want a more detailed explanation you can check out the Content Properties section in the docs.
If you want to not use the <Frame.Content> tag that is fine, bear in mind that Frame descends from ContentView thus you would ideally define the content of this view in the Content tag. This is more of a semantic decision as opposed to performative decision.
This being said, you would need to use the content tag if you wanted to implement any kind of OnPlatform code in your frame. For example (hand coded, could be wrong)
<Frame>
<Frame.CornerRadius>
<OnPlatform x:TypeArguments="x:Single">
<On Platform="iOS">50</On>
<On Platform="Android">75</On>
</OnPlatform>
</Frame.CornerRadius>
<Frame.Content>
<Label Text="Hello World"/>
</Frame.Content>
</Frame>
I am using the built in searchbar control in xamarin forms. It works fine for my implementation but I notice there is a small amount of whitespace on each side of the control. I see that i can modify margin to 0 but it does not change the whitespace. Here is what it looks like with a picker above it and a map below it:
Here is my xaml
<Picker x:Name="servicePicker" Title="Test" ios:Picker.UpdateMode="Immediately" HorizontalOptions="FillAndExpand">
</Picker>
<SearchBar Margin="0" Placeholder="Enter a zip code" TextChanged="Handle_TextChanged"></SearchBar>
<maps:Map Margin="0"
x:Name="MyMap"
IsShowingUser="true"
MapType="Hybrid"
/>
</StackLayout>
I dont see any option for padding, how can i get rid of the whitespace?
Maybe try setting your stacklayout spacing to zero?
<StackLayout Spacing="0">
...
</StackLayout>
I want to put the one image on left corner and another on right corner of Control(ex :button) and need click event for that.
please tell me....
What have you tried?
Something like this should work but it depends on exactly what you're after:
<Button Click="myClickHandler">
<Grid>
<Image Source="image1.jpg" HorizontalAlignment="Left" Stretch="None" />
<Image Source="image2.jpg" HorizontalAlignment="Right" Stretch="None" />
</Grid>
</Button>
Disclaimer: the above is untested and written freehand. I make no guarantees of it compiling, etc.