I have a xaml page where I set Background Image to some Image and it works good on Emulator(API 27) and Android 9.0 real device. When I deploy the same app to another device (Android 8.1 and 7.0), the background Image does not show in these devices.
I have created a new page and added just the background image property and it turns out the same. Worked well on Android 9.0 and Emulator but not on Android 8.1 and lower versions of android. I have also changed the target framework version of my project to API 27 and the minimum to allow Android 7.0 and that didn't help either.
I expect the background image to show across all the devices I deploy on.
This is how I am defining my image in my xaml page:
<AbsoluteLayout>
<Image Source="Mop3.jpg" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" Aspect="AspectFill"></Image>
<StackLayout AbsoluteLayout.LayoutBounds="0.5,0.4,1,0.3" AbsoluteLayout.LayoutFlags="All" Spacing="10">
<Label Text="Cleanliness" TextColor="White" HorizontalTextAlignment="Center" FontSize="Medium" FontAttributes="Italic"></Label>
<Label Text="Starts with us" TextColor="White" HorizontalTextAlignment="Center" FontSize="40" FontAttributes="Bold"></Label>
<Button x:Name="Learnbtn" Text="Learn more" TextColor="White" BackgroundColor="Purple" BorderColor="Purple" CornerRadius="40" BorderWidth="1"
HorizontalOptions="Center" HeightRequest="50" WidthRequest="130" Clicked="GotoHowPage"></Button>
</StackLayout>
<StackLayout AbsoluteLayout.LayoutBounds="0,0.99,1,0.05" AbsoluteLayout.LayoutFlags="All"
Padding="0">
<Button Text="Get Started" BackgroundColor="Transparent" TextColor="White" FontAttributes="Bold" FontSize="Large" BorderRadius="5" Clicked="GotoBothPage"></Button>
</StackLayout>
</AbsoluteLayout>
The Mop3.jpg is the image not showing on other real devices (Android 8.1 and below )
PS: I tried another image and turned out the same, I also created another page in the project and tried setting the image Control and background image property to some image and didn't work too. But worked well when I created a new project and deployed to these devices so I suspect it is something wrong with the current project.
So I found a solution to it.. it turned out the image I was using is large in size and in dimension too and couldn't display properly on Android 8.1 and lower. So I compressed the image at tinypng.com and re added to the drawable folder and it worked well.
Related
I have been dipping my toes in the .NET Maui framework, but unfortunately so far it has been quite disappointing. There seem to be multiple errors related to Shell (title view not working properly) and controls themselves. I have the following main page xaml file:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiApp1.MainPage">
<StackLayout Background="#111111" >
<Frame HasShadow="True" Margin="10" CornerRadius="10" BackgroundColor="#222222">
<StackLayout Spacing="30">
<Grid ColumnDefinitions="30,*">
<Label Text="R" FontSize="Medium" TextColor="White" />
<Slider GridLayout.Column="1" MinimumTrackColor="Red" ThumbColor="Red" MaximumTrackColor="#AAAAAA" />
</Grid>
<Grid ColumnDefinitions="30,*">
<Label Text="G" FontSize="Medium" TextColor="White" />
<Slider GridLayout.Column="1" MinimumTrackColor="#7FFF00" ThumbColor="#7FFF00" MaximumTrackColor="#AAAAAA" />
</Grid>
</StackLayout>
</Frame>
</StackLayout>
</ContentPage>
which is just a stack layout with a single frame that houses two sliders with labels. However, the two sliders seem to have a predefined width, as they are not filling the remaining space:
As soon as I add anything to any of the controls in the xaml while the app is running, for example a green background to the first grid, both sliders resize to the correct size:
However, when I reload the application with this change, the sliders go back to the wrong size:
There are additional issues that I encountered as well, when placing this content page as a flyout item in the shell where android behaviour was as described here, but additionally the Sliders are not interactable in Windows version. In this example with a clean project they do work in Windows version.
Try with any third-party packages like syncfusion, etc. to meet your requirements.
So I have an odd thing happening with last Xamarin update and I am not sure what to do about it.
I have a view
<ContentView.Content>
<AbsoluteLayout WidthRequest="100" HeightRequest="100">
<Button x:Name="BackgroundButton" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" />
<Image x:Name="Icon" InputTransparent="True" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" Margin="20,15,20,25"/>
<Label x:Name="CountLabel" Style="{StaticResource HubButtonLabel}" HorizontalTextAlignment="End" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" />
<Label x:Name="ButtonLabel" Style="{StaticResource HubButtonLabel}" HorizontalTextAlignment="Center" VerticalTextAlignment="End" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" />
</AbsoluteLayout>
</ContentView.Content>
</ContentView>
Is basically just a button wrapper, with some extra icons, and text. I have a few of these in the project of different layouts and styles. Until the last update they worked fine. Now the button renders overtop of everything else. I can confirm that by setting the button color to something semi transparent.
This only happens on Android, it still works as expected on ios
Anyone have a fix for that? or do I need to rework all these views?
Update - So while this isn't really a fix, but also kind of is. If I swap out the Button for an ImageButton - they work again as expected on both platforms.
Bug perhaps with button on Android?
Got an answer on another forum. - Apparently it is a known bug with an easy fix, https://forums.xamarin.com/discussion/comment/394729
Put
global::Xamarin.Forms.Forms.SetFlags("UseLegacyRenderers");
Before the xamarin init in Main Activity Oncreate.
I am trying to create a user interface where a user can drag an image around the screen atop a background image. Currently the DraggableImage is being moved around with some sliders that change DraggableBounds in the view model.
<AbsoluteLayout>
<Image Source="{Binding DraggableImage, Mode=TwoWay}" AbsoluteLayout.LayoutBounds="{Binding DraggableBounds}" />
<Image Source="{Binding FrameImage, Mode=TwoWay}" Aspect="AspectFit" WidthRequest="1300" HeightRequest="500"/>
</AbsoluteLayout>
I've tried using the Pan Gesture that's on Microsofts Xamarin docs with little success. I'm not trying to pan within an image but move a smaller image over a larger. Is there an existing pattern to solve this?
I am trying xamarin forms for the first time so that I can build my app fro android and Iphone
I need to add an image to my layout MainPage.xaml and have this layout.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:ReassuredMobileApp"
x:Class="ReassuredMobileApp.MainPage">
<StackLayout
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<StackLayout
VerticalOptions="Start"
HorizontalOptions="FillAndExpand"
AutomationId="TitleBar">
<Label
Text="Hello, world!"></Label>
<Image
WidthRequest="200"
HeightRequest="50"
VerticalOptions="Start"
HorizontalOptions="Start"
Source="reassured_text.png" />
</StackLayout>
</StackLayout>
But the image "reassured_text.png" is not being displayed when I run the app in the emulator. I can see the Hello, World! text just fine (still cant see the image when I remove this)
My image is under my project as "reassured_text.png"
I've tried to follow tutorials online, but don't understand what is being said, and the ones I could understand didn't work. I've also tried to format the tag like
<Image
####Stuff here>
</Image>
but that didn't have an effect.
Directory tree:
Solution 'MyApp'
c# - MyApp
Dependencies
App.xaml
App.xaml.cs
MainPage.xaml
MainPage.xaml.cs
reassured_text.png
MyApp.Android
drawable
reassured_text.png
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
layout
values
MyApp.Ios
//I haven't touched anything here
1.Put the image reassured_text.png in Android project i.e in Resource/Drawable folder.
or
2.Put the image reassured_text.png in portable project & set build action to "Embedded Resource" & in .cs file do like this:
imagecontrol.FromResource="reassured_text.png";
I am working on a Xamarin.Forms project and am having issues with the scaling of images with Windows Phone. Windows and Android
I'm using a Grid to display all of the icons, here is the code I used for 1 image button.
<Button Image="cam.png"
VerticalOptions="Center"
Grid.Row="0" Grid.Column="0"
BorderColor="Transparent"
BackgroundColor="Transparent"
Clicked="OnTrafficClicked"/>
I've found a couple similar posts about this, but I don't understand how I would implement scaling on platform when there are multiple images.
I tried this, but am unable to run the program
<Image.Scale>
<OnPlatform x:TypeArguments="Scale"
WinPhone="1.5" />
</Image.Scale>
https://forums.xamarin.com/discussion/19525/image-source-with-onplatform-in-xaml
I was able to figure it out, in case anyone has this same issue this is what I did:
<ContentPage.Resources>
<ResourceDictionary>
<OnPlatform x:Key="stdScaling" x:TypeArguments="x:Double"
iOS="1.0"
Android="1.0"
WinPhone="2.5" />
</ResourceDictionary>
</ContentPage.Resources>
then for the button, I put
Scale= "{StaticResource stdScaling}"