I am simply displaying an Image on my Xamarin Forms page. The image is transparent and this is how it displaying on page:
How can I remove those white and grey background?
This is my source code:
<ContentPage.Content>
<StackLayout>
<Image x:Name="myimage" Aspect="Fill">
</Image>
</StackLayout>
</ContentPage.Content>
Code-behind
myimage.Source = ImageSource.FromResource("RailwayApp.bull.jpg");
My try:
I tried setting IsOpaque property to True/False neither worked. Also declared BackgroundColor="Transparent" on XAML page but not worked.
In this case you can't, the background is actually not transparent - it would have to be a transparent PNG or GIF to support this. This is a JPG, so the background is actually grey and white.
To make this work you will first have to actually make the image transparent by converting in one of the two transparent formats (and actually remove the background) and then it should display as transparent as expected.
Related
I tried to get the same large title behavior like the settings app on iOS when the user scrolls down. The transition between the large title and the small title is smooth. But on Xamarin Forms the header snaps.
In my NavigationPage i set PrefersLargeTitles="true". In the embedded content page i set LargeTitleDisplay="Always" and UseSafeArea="true". The content in the page looks like this:
<ContentPage.Content>
<AbsoluteLayout>
<ListView />
<Frame x:Name="LoadingFrame" /> <!-- Only visible until ListView is loaded -->
</AbsoluteLayout>
</ContentPage.Content>
I tried setting NavigationPage.IsNavigationBarTranslucent="True". Then it works, but only if i disable SafeArea (Page.UseSafeArea="False") in the ContentPage. Disabling SafeArea is not what i want, because now the content is behind the notch.
I had the same issue.
The trick was to change top constraint of list to superView instead of safe area which only works on Native.
extendedLayoutIncludesOpaqueBars = true;
On Xamarin.Forms, I tried these solutions:
Use a custom renderer to set the LayoutConstraints of the scrollable view (Doesn't work)
Create a UITableViewController in a custom renderer then convert the Xamarin TableView element to a UITableView and set it to the TableView property of the UITableViewController then PushViewController to the new UITableViewController. (work)
You can raise the problem on github for better support：
https://github.com/xamarin/Xamarin.Forms/issues
I am working an app that uses an image as its background, and I want it to fill the entire window regardless of size. The image source is square-ish, like this:
The simplest way to do this is using AspectFill like this:
<Image
Source="image_source.png"
Aspect="AspectFill"/>
But that results in the image being centered, like this:
When what I need is for the image to be left aligned, like this:
I almost had some success using this:
<AbsoluteLayout>
<Image
Source="image_source.png"
AbsoluteLayout.LayoutFlags="HeightProportional"
AbsoluteLayout.LayoutBounds="0,0,Autosize,1"/>
</AbsoluteLayout>
but the problem there became when I had a screen like a tablet or foldable which is wider horizontally, it ended up getting letterboxed like this:
When what I would want would just be a regular AspectFill like this:
Is there any way to get this behavior with the existing Aspect options? If not, is there a way to extend the Aspect enum and the Renderer to make the image perform the same as AspectFill, but locked to the left edge of the image instead of the center?
I'm using XAML with .NET Maui, so if there is a solution in C# I'm open to that too
Was able to get a solution from Reddit, so I'm posting it here for anyone who stumbles across this:
My final XAMl ended up being
<Grid>
<Image
x:Name="backgroundImage"
Source="image_source.png"
Aspect="AspectFill"
HorizontalOptions="Start"/>
</Grid>
And I added this to the code-behind:
protected override void OnSizeAllocated (double pageWidth, double pageHeight) {
base.OnSizeAllocated(pageWidth, pageHeight);
const double aspectRatio = 1600 / 1441.0; // Aspect ratio of the original image
backgroundImage.WidthRequest = Math.Max(pageHeight * aspectRatio, pageWidth);
}
I would like to create backdrop for pop up window.
By backdrop I mean semi transparent background which is behind popup and stretches on a whole application screen. This makes the popout window more dominant and blocks the possibility to click on anything else in the background.
It would be best if popup window xaml code is deep inside the structure of the view if possible. Not at the top of hierarchy or bottom.
My issue with this is that the backdrop size wont stretch over its parents size.
So if my view is
1000x1000
My content in view is
500x500
and my pop up window is in this 500x500 it wont stretch over this size.
I tried with Position absolute, relative, translatin x/y, adjusting margins to high values to get bigger size.
I just cant get it done.
Example
You can use the Plugin PopupPage .And set the layout of popup as you want
<?xml version="1.0" encoding="utf-8" ?>
<pages:PopupPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
x:Class="MyProject.MyPopupPage">
<!--You can set an animation in the xaml file or in the csharp code behind-->
<pages:PopupPage.Animation>
<animations:ScaleAnimation
PositionIn="Center"
PositionOut="Center"
ScaleIn="1.2"
ScaleOut="0.8"
DurationIn="400"
DurationOut="300"
EasingIn="SinOut"
EasingOut="SinIn"
HasBackgroundAnimation="True"/>
</pages:PopupPage.Animation>
<!--You can use any elements here which are extended from Xamarin.Forms.View-->
<StackLayout
VerticalOptions="Center"
HorizontalOptions="Center"
Padding="20, 20, 20, 20">
//...
</StackLayout>
</pages:PopupPage>
And for more details you can check https://github.com/rotorgames/Rg.Plugins.Popup/wiki/Getting-started
I want to setup a background image for a page. Right now I am using
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="M.LaunchPage"
Title ="M" BackgroundImage="Mars.jpg">
<ContentPage.Content>
<StackLayout Padding="10,0,10,10" >
<Button VerticalOptions="CenterAndExpand" Text="Sign Up" TextColor="White" Clicked="OnSignUp" BackgroundColor="Maroon" />
<StackLayout Padding="10,0,10,10" Orientation="Horizontal" VerticalOptions="EndAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
This works well but the image is being filled multiple times to fit the screen. Cn anyone suggest better code so that I can fit the image on the page perfectly?
Thanks.
This is platform dependent, for example on iOS the following is used in the Form's iOS's PageRender:
View.BackgroundColor = UIColor.FromPatternImage(UIImage.FromBundle(bgImage));
The View.BackgroundColor will end up tiling your image when it is smaller the UIController's View dimensions as FromPatternImage is designed to be used with a small repeating pattern (for memory and draw performance reasons) and not full screen/page images.
In order for this auto-tiling not to happen, you would be to assign the background image in code based upon the device's screen resolution and page size at runtime and not statically assign it in XAML.
Note: You could bind the BackgroundImage property in a ViewModel where the calculations of which image to use could be done.
You should use each platform specifications, for example in iOS you need to have Mars#2x.jpg and Mars#3x.jpg,in our platform project in Forms you can specify from "Mars" it will pick the correct one.
On Android set the image in the correct dpi folder.
I am working on a Windows Phone 7 project with a panorama on the MainPage and multiple simple pages. All my pages have a background set this way:
<local:PhoneApplicationPage>
<Grid Background="{StaticResource PageBackground}">
content here
</Grid>
</local:PhoneApplicationPage>
PageBackground is an application resource set in default.xaml and light.xaml this way:
<ImageBrush x:Key="PanoramaBackground" ImageSource="/Resources/PanoramaBackground01Dark.jpg" Stretch="None" />
<ImageBrush x:Key="PageBackground" ImageSource="/Resources/PageBackground01Dark.jpg" Stretch="None" />
The PageBackground01Dark.jpg picture is of size 800x800 px.
When a page is displayed in the Portrait orientation, the picture is centered correctly horizontaly and the picture height corresponds to the page height. This is fine.
When a page is displayed in the Landscape orientation, the picture width corresponds to the page width but the picture is then centered vertically.
I would like my background picture to be "topped" in the page.
The Background property of a Grid is a brush with no interesting options. I would like not to create 2 pictures for this. There should be an obvious solution. Here is the result I would like to have:
Oh, the solution is simple. The Background property is of type Brush but it's in fact an ImageBrush. So the solution is:
<ImageBrush x:Key="PageBackground"
ImageSource="/Resources/PageBackground01Dark.jpg"
AlignmentY="0" />