When i have one StackLayout inside another one, there is a faint border shadow around it.
I don't like the way it looks, is there a way to get rid of it ?
Here is XAML of the bottom pannel:
<StackLayout Orientation="Horizontal"
HorizontalOptions="Fill"
VerticalOptions="EndAndExpand">
<Button Text="⌂"
HorizontalOptions="StartAndExpand"/>
<StackLayout>
<Button Text="Kontrola"
VerticalOptions="Start"
HorizontalOptions="CenterAndExpand"/>
<Label Text="Autorem zadání je Cermat.cz"
FontSize="Micro"
HorizontalOptions="FillAndExpand"
VerticalOptions="EndAndExpand"/>
</StackLayout>
<Button Text="˃"
HorizontalOptions="EndAndExpand"
FontSize="Title"
BackgroundColor="Gray"
BorderColor="Gray"
IsEnabled="False"/>
</StackLayout>
In your Stacklayout:
<StackLayout Orientation="Horizontal"
HorizontalOptions="Fill"
VerticalOptions="EndAndExpand">
you are not setting the Spacing to 0, in the Microsoft Documentation for Stacklayout it says:
By default, StackLayout will add a 6px margin between views.
And that's why you se those lines, it's the spacing between the 3 elements you have inside horizontally. But it's weird why you even see those lines, because you are not setting the background color to white in those elements. i don't know if you ommited that, since i don't see you setting the border color to green too.
Related
I have a collection view like so:
<CollectionView ItemsSource="{Binding subCategories}" ItemsLayout="HorizontalGrid, 3" IsVisible="{Binding isCollection}" HeightRequest="250" SelectionMode="Single" SelectionChanged="CollectionView_SelectionChanged" HorizontalOptions="FillAndExpand">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Spacing="8" HorizontalOptions="FillAndExpand">
<Frame BorderColor="LightGray" HasShadow="True" HeightRequest="20" Margin="20" Padding="20">
<Label Text="{Binding name}" TextColor="#02cc9d" FontAttributes="Bold"></Label>
</Frame>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
And this is the result:
There are 2 things I am trying to do here, the first is center this collection view, I have tried all the HorizontalOptions on the StackLayout and on the CollectionView. The other thing that I bothering me is when an item is selected, the grey box that appears to indicate an item is selected is also not centered, how do I fix this collection view to make it look nicer?
A HorizontalGrid layout is one that grows horizontally as needed. It may be difficult to center horizontally, because it is prepared to grow horizontally if you add more items.
Try ItemsLayout="VerticalGrid, 3".
If necessary, test with different layout options.
(OP says in comment that this fixed both problems.)
I want to have a background image like the following for the header section of my navigation panel
I currently have an image to display the profile picture in a StackLayout. Instead of setting the BackgroundColor property to the StackLayout tag how can I add a background image?
<StackLayout>
<Image Source="profile.png" WidthRequest="75" HeightRequest="75" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
</Stacklayout>
You'll need to switch from Stacklayout to a something that allows it's views to overlap, like a Grid or Absolute layout.
To use a grid, simply put your image and your content in the same row:
<Grid>
<Image Grid.Row="0"
Aspect="AspectFill"
Source="airplane" />
<Label Grid.Row="0"
FontAttributes="Bold"
FontSize="Large"
HorizontalOptions="Center"
Text="Welcome to Xamarin.Forms!"
VerticalOptions="CenterAndExpand" />
</Grid>
Result:
:
Hi i'm trying to place 2 image in xamarin forms using stackLayout.But it adds some space at the top of the form.I Used Blank Project.
my code is
<StackLayout>
<Image Source="review.jpg"
BackgroundColor="Transparent"
WidthRequest="300"
HeightRequest="100"
VerticalOptions="Start" HorizontalOptions="FillAndExpand"
FlexLayout.Grow="1">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="Navigate_review"/>
</Image.GestureRecognizers>
</Image>
<Image Source="upload.jpg"
BackgroundColor="Transparent"
WidthRequest="320"
HeightRequest="100"
VerticalOptions="Start" HorizontalOptions="FillAndExpand"
FlexLayout.Grow="1">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="Navigate_upload"/>
</Image.GestureRecognizers>
</Image>
</StackLayout>
i am getting this output:
Output Image 1
Output Image 2
It adds some extra space at the top of the page. how to set the layout to remove this space?
The code you post does not have any issue.
I reckon your app is created with Tabbed template. If that is the case, the empty space at the top is actually the tab. As shown in this image.
If you create a Blank project (not Tabbed nor MasterDetails), it will not have the empty spaces at the top. As shown in this image.
You can use the Margin attribute to remove the excess space on top, bottom, right or left. Let's assume, if we using a table view and it produces the 20 pixel excess space on top of the display. So we can reduce that excess space by using
<TableView Margin="0,-20,0,0" >
<TableVie/>
-20 using for reduce the excess 20pix😀
I think the problem is you are testing on emulators.Real devices will not show this issue I hope.
StackLayout and Grid have default spacing of 6. On StackLayout you can set Spacing. For more details, you can refer to this Document
Try this snippet:
<StackLayout
Spacing="0">
<Image
Source="hintsicon"
BackgroundColor="Transparent"
WidthRequest="300"
HeightRequest="100"
Aspect="Fill"
VerticalOptions="Start"
HorizontalOptions="FillAndExpand">
<Image.GestureRecognizers>
<TapGestureRecognizer
Tapped="Navigate_review" />
</Image.GestureRecognizers>
</Image>
<Image
Source="hintsicon"
BackgroundColor="Transparent"
WidthRequest="320"
HeightRequest="100"
Aspect="Fill"
VerticalOptions="Start"
HorizontalOptions="FillAndExpand">
<Image.GestureRecognizers>
<TapGestureRecognizer
Tapped="Navigate_upload" />
</Image.GestureRecognizers>
</Image>
</StackLayout>
I think you are using like below in your App.xaml.cs page:
MainPage = new NavigationPage(new MainPage());
I have an background image that I have to set to my ContentPage however the image is zoomed in. I need it to be at Aspect="Fill" so it appears properly. I looked online and the solution was to have either an AbsoluteLayout or RelativeLayout with an image. But when adding this, an image which is supposed to be at the bottom of the page is no longer there.
<RelativeLayout Parent="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Image Source="Background.jpg" Aspect="Fill" RelativeLayout.WidthConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width}"
RelativeLayout.HeightConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Height}"></Image>
<StackLayout>
<Label Text="Timetable" TextColor="Silver" HorizontalOptions="EndAndExpand" Margin="0, 10, 20, 0">
</Label>
<Image Margin="15, 20" HorizontalOptions="Center" WidthRequest="350" Source="subtle-logo.png"></Image>
<Image HorizontalOptions="Center" x:Name="PlayPauseButton" Source="play.png" WidthRequest="75">
</Image>
<Image HorizontalOptions="Center" x:Name="shareButton" Source="share-button.png" WidthRequest="50"
VerticalOptions="End" Margin="0, 0, 0, 20">
</Image>
</StackLayout>
</RelativeLayout>
However, that share button should be at the bottom of the page because of the VerticalOptions="End" property. How do I fix this?
AbsoluteLayout is better for performance reasons. Plus you are asking about AbsoluteLayout, but using RelativeLayout in the code you shared.
Regardless, you need the VerticalOptions for that last image to be VerticalOptions="EndAndExpand" which will expand the area to fill the available space and then place the image at the vertical end of that area.
Basically the Start, Center, End, and Fill layout options say where to place the element in the available space or whether to enlarge the element to fill the available space, where StartAndExpand, CenterAndExpand, EndAndExpand, and FillAndExpand will expand the available space, if possible, and then set the item in that space to Start, Center, etc. AndExpand options are only applicable in a StackLayout
Here's the code if you want to use an AbsoluteLayout instead (recommended by the Forms engineering team):
<AbsoluteLayout>
<Image Source="Background.jpg" Aspect="AspectFill" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" />
<StackLayout AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
<Label Text="Timetable" TextColor="Silver" HorizontalOptions="EndAndExpand" Margin="0, 10, 20, 0">
</Label>
<Image Margin="15, 20" HorizontalOptions="Center" WidthRequest="350" Source="subtle-logo.png"></Image>
<Image HorizontalOptions="Center" x:Name="PlayPauseButton" Source="play.png" WidthRequest="75">
</Image>
<Image HorizontalOptions="Center" x:Name="shareButton" Source="share-button.png" WidthRequest="50"
VerticalOptions="EndAndExpand" Margin="0, 0, 0, 20">
</Image>
</StackLayout>
</AbsoluteLayout>
I'm using a frame tag to wrap a grid inside, but whenever I add corner radius to the frame, the background color of the said frame goes out from the rounded corners and is displayed as a sharp corner.
Can anyone help?
An image is also attached with the question to portray the problem correctly.
The code snippet is:
<Frame CornerRadius="15"
BackgroundColor="Aqua"
OutlineColor="Black"
MinimumHeightRequest="100"
MinimumWidthRequest="150"
HorizontalOptions="Center"
VerticalOptions="Center"
Grid.Column="2">
<Grid x:Name="MessageGrid"
HorizontalOptions="Fill"
VerticalOptions="Fill">
<Grid Margin="0,0,0,0"
HorizontalOptions="FillAndExpand"
InputTransparent="True"
VerticalOptions="FillAndExpand">
<Label x:Name="InfoText"
TextColor="Black"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
InputTransparent="True"
Text="Tooltip text goes here and this is to check if its responsive"/>
</Grid>
</Grid>
</Frame>
It's a bug in the implementation of the Frame element type. Although a frame won't contain it's own background, it will contain the backgrounds of other elements within it.
The work-around is to wrap one frame inside an identical sized frame. Use the outer frame to specify the CornerRadius, but leave out the BackgroundColor. The inner frame can specify the background color and it will be rounded off by the outer frame.
Be sure to include Padding="0,0,0,0" on both frames.
Simply set:
IsClippedToBounds = "True"
in frame. It will stop child element to go outside of container.
I solved this by using the FreshEssentials library. See
https://forums.xamarin.com/discussion/57546/how-can-i-achieve-this-effect-stacklayout-or-frame
and
http://michaelridland.com/xamarin/freshessentials-for-xamarin-forms-the-must-have-nuget-for-forms/
it is because you frame allows your grid to go out of its bound so you need to set is clip to bounds IsClippedToBounds = "True"
after applying this in to your code it will look like this
<Frame CornerRadius="15"
BackgroundColor="Aqua"
OutlineColor="Black"
MinimumHeightRequest="100"
MinimumWidthRequest="150"
HorizontalOptions="Center"
VerticalOptions="Center"
Grid.Column="2"
IsClippedToBounds = "True">
<Grid x:Name="MessageGrid"
HorizontalOptions="Fill"
VerticalOptions="Fill">
<Grid Margin="0,0,0,0"
HorizontalOptions="FillAndExpand"
InputTransparent="True"
VerticalOptions="FillAndExpand">
<Label x:Name="InfoText"
TextColor="Black"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
InputTransparent="True"
Text="Tooltip text goes here and this is to check if its responsive"/>
</Grid>
</Grid>
</Frame>
now when you set IsClippedToBounds = "True" it will tell your frame to not let its child elements go out of its bounds/borders so your issue will be resolved
I had the same problem, and it was hard to fix it. But, I found the solution:
I created a property called EntryBackgroundColorProperty and, inside Custom Renderer implementation, the color of gradientDrawabe was pointed to this new property.
To summarize: you must avoid use the default property "BackgroundColor", create another instead.