Display image from embedded resource - image

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}"/>

Related

Image inside label xamarin forms

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

How to re-use cached images in another view in Xamarin forms

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

XAML Load Image into Grid

I am new to UWP and try to learn a few basics, but i am currently struggling.
I have a button "To-Do" and want to Display a Image of a to-do-list above the button.
So i try this.. but that doesnt show me the Image. What did i wrong?
Thank you for your help!!!
<StackPanel Grid.Column="2" Margin="0,60,0,0">
<Grid>
<Image Source="/Bilder/todo.png" Width="100" Height="100" Grid.RowSpan="8" Grid.Row="1"/>
</Grid>
<Button x:Name="btnNaviZuToDo" Content="To-Do Liste" Height="86" Width="250" FontSize="40" Click="Button_NavigiereZuToDo" Margin="0,0,-2,0" HorizontalAlignment="Center" FontFamily="Calibri Light"/>
</StackPanel>
Please check your image path is correct.
Usually we will use ms-appx:/// as a prefix to define the root directory of the project. If the picture is in the Assets folder (which in the root of project), you can write: ms-appx:///Assets/todo.png, you can adjust your picture path accordingly.
Thanks.
you need to set todo.png's build action to Content.

ListboxItems containing image - memory issues

I have a design issue with my listbox on my view.
Currently it has following DataTemplate as ItemTemplate:
<DataTemplate x:Key="MovieItemTemplate">
<StackPanel>
<Border BorderBrush="{StaticResource PhoneForegroundBrush}" BorderThickness="5" Margin="3" Height="215" Width="140">
<Image x:Name="MovieCover"
toolkit:TiltEffect.IsTiltEnabled="True"
Margin="0"
HorizontalAlignment="Center"
Width="140"
Height="210">
<Image.Source>
<BitmapImage UriSource="{Binding Cover}" CreateOptions="BackgroundCreation"/>
</Image.Source>
<interactivity:Interaction.Triggers>
<interactivity:EventTrigger EventName="Tap">
<gsextra:EventToCommand Command="{Binding MainViewModel.MovieItemSelectedCommand, Source={StaticResource Locator}}"
PassEventArgsToCommand="True"
CommandParameter="{Binding MovieID}"
></gsextra:EventToCommand>
</interactivity:EventTrigger>
</interactivity:Interaction.Triggers>
</Image>
</Border>
</StackPanel>
</DataTemplate>
So as you can see, I have an image inside it that will download his content from the internet through an URI. Thanks to the new mango option BackgroundCreation ( cfr. http://blogs.msdn.com/b/slmperf/archive/2011/06/13/off-thread-decoding-of-images-on-mango-how-it-impacts-you-application.aspx ) it load in background.
But I have a very large collection and even though I do 'paged' binding of the Listbox Source, I notice my memory keeps on going up, until it has consumed everything and the app crashes.
Then, I noticed this http://blog.wpfwonderland.com/2011/01/17/images-and-memory-leaks-in-windows-phone-7/ so it would seem I need to cleanup the image itself, because of the image caching feature in wp7.
When I do this, everything works great in reference to memory, BUT now each time the user 'pages' through the listbox the images need to be redownloaded, resulting in an app that is almost not usable... because the user keeps on waiting for those images.
Any tips/tricks on how to go about this?
I also tried the DefferedLoadListBox

Put the two images in single control in wp7

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.

Resources