So basically what i have is a Frame, with a Horizontal StackLayout which has 2 Labels in it:
(Label has colored background, Frame is white)
My problem is, when i have a longer name label, the price label doesn't get enough space and gets cut:
Which property should i change in order to not cut price label?
Here is the portion of code that creates the frame:
Frame elementFrame = new Frame {
BackgroundColor = Xamarin.Forms.Color.White,
Padding = 20,
};
StackLayout elementStackLayout = new StackLayout {
Orientation = StackOrientation.Horizontal,
HorizontalOptions = LayoutOptions.Fill,
BackgroundColor = Xamarin.Forms.Color.Orange
};
Label elementName = new Label {
BackgroundColor = Xamarin.Forms.Color.Aqua,
Text = FinalProduct.GetAttribute("Nome"),
HorizontalOptions = LayoutOptions.Start,
};
Label elementPrice = new Label {
BackgroundColor = Xamarin.Forms.Color.Aqua,
LineBreakMode = LineBreakMode.NoWrap,
HorizontalOptions = LayoutOptions.EndAndExpand,
Text = "€" + ( Decimal.Parse(FinalProduct.GetAttribute("Prezzo")) * Int16.Parse(FinalProduct.GetAttribute("Quantita")) ).ToString("0.00"),
HorizontalTextAlignment = TextAlignment.End
};
elementStackLayout.Children.Add(elementName);
elementStackLayout.Children.Add(elementPrice);
elementFrame.Content = elementStackLayout;
I tried messing around with HorizontalOptions, Label's LineBreakMode but with no success.
StackLayout lacks a way to tell which item to "squeeze", unless you use a "hardcoded number" for both WidthRequest and MinimumWidthRequest on elementPrice.
Grid has a solution for this case, "Auto" vs "*":
<Grid ColumnDefinitions="*,Auto" HorizontalOptions="Fill">
<Label Grid.Column="0" ... />
<Label Grid.Column="1" x:Name="elementPrice" ... />
</Grid>
"Auto" in Column "1" will be given all the width it wants.
"*" in Column "0" gets what is left.
Related
i don't know if my title suits my question but the idea is that i want to create circular frames according to the number of items in a list and if the number of frames created is more than what the screen can fit, i want the frames to continue on another row. i managed to create the frames but i don't know how to arrange them as i said. i thought about using a grid but the thing is, if i use a grid then i'll have to define a static number of columns in each row. but what if the user uses a tablet, then the screen size will be bigger and more frames could fit in the row. this is the code i wrote till now:
main.xaml.cs
public MainPage()
{
InitializeComponent();
for(int i=0; i < 10; i++)
{
Frame circleImageFrame = new Frame
{
Margin = 10,
BorderColor = Color.Black,
CornerRadius = 50,
HeightRequest = 60,
WidthRequest = 60,
IsClippedToBounds = true,
HorizontalOptions = LayoutOptions.Start,
VerticalOptions = LayoutOptions.Start,
Content = new Image
{
Source = ImageSource.FromFile("user_profile.png"),
Aspect = Aspect.AspectFill,
Margin = -20,
HeightRequest = 100,
WidthRequest = 100
}
};
thislayout.Children.Add(circleImageFrame);
}
}
main.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="stdprofiles.MainPage">
<StackLayout x:Name="thislayout" Orientation="Horizontal">
</StackLayout>
</ContentPage>
in these pictures i am trying to illustrate my point.
what layout should i use? thanks in advance
I"m trying out the Xamarin Forms Collection View. It appears to have some extra padding around each item in the list. I can't see how to remove it.
Here is a picture of my view. The view has an aqua background. The 2 column grid in the template has labels set to red.
And here is the XAML/C#
<CollectionView
x:Name="BodyView"
SelectionMode="Single"
HorizontalOptions="FillAndExpand"
BackgroundColor="Aqua"
Grid.Row="2" />
BodyView.ItemTemplate = new DataTemplate(() =>
{
var converter = (IValueConverter) Application.Current.Resources["GridCellConverter"];
Grid grid = new Grid( );
grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
foreach (var col in _gridColumns)
{
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
var content = new Label();
content.Style = (Style)Application.Current.Resources["GridCellLabel"];
content.BackgroundColor = Color.Red;
Binding binding = new Binding("CellData", BindingMode.OneWay, converter, col.PageFieldId);
content.SetBinding(Label.TextProperty, binding);
grid.Children.Add(content, grid.ColumnDefinitions.Count - 1, 0);
}
return grid;
});
I zeroed everything I could find to zero.
I tried setting a negative margin on the grid but it won't move left.
Is there any way to remove the padding?
What you are looking for is the Grid's Row and Column Spacing!
Grid grid = new Grid( ){ ColumnSpacing= "0", RowSpacing="0" };
Also, this needs to be removed:
grid.Margin = new Thickness(-20, 0, 0, 0);
A quick question though are you using it in UWP?
Also since you are using CollectionView why not use a single item in DataTemplate that goes into a GridItemsLayout?
More information here: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/layout#vertical-grid
There is MinimumHeightRequest, but no MaximumHeightRequest for Views in Xamarin Forms. In its absence I'm trying to achieve the following:
I have two controls on my screen: a Signature and some legal-text. I would like the signature to take up much screen as possible, and for the legal-text to take the minimum space for itself but only up to half the parent height - and then to scroll if the text doesn't fit. I've tried StackLayout and Grid but neither quite do what I want in coping with all situations. If it existed simply setting a MaximumHeightRequest on the ScrollingLegal View would sort it out. But it doesn't. Here's what I've tried...
Controls defined as:
var Pad = new SignaturePadView() {
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
MinimumHeightRequest = Application.Current.MainPage.Height / 2,
};
// Put legal text in a scroll view in case it doesn't fit on the screen.
var ScrollingLegal = new ScrollView { VerticalOptions = LayoutOptions.End, Content = new Label { Text = caption } };
Arranged with StackLayout like this it looks great on an iPad - text at the bottom of the screen signature taking up all the other space. On a small iPhone though, the text takes up all the screen and the signature appears to ignore the MinimumHeightRequest (this might be a bug I suppose?).
Stack.Children.Add(Pad);
Stack.Children.Add(ScrollingLegal);
I can add a HeightRequest to the ScrollView but then it always takes up X height. With a small amount of text I don't want that.
I have also tried a Grid:
var GridLayout = new Grid
{
Padding = 1,
RowDefinitions = {
new RowDefinition { Height = new GridLength(1, GridUnitType.Star) },
new RowDefinition { Height = new GridLength(1, GridUnitType.Auto) },
},
ColumnDefinitions = {
new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) },
},
};
GridLayout.Children.Add(Pad, 0, 0);
GridLayout.Children.Add(ScrollingLegal, 0, 1);
But that too always gives too much space to the text.
Is there a way of setting a Max Height?
I tried to text wrap in a button inside a grid, but only the first line appears, the code is:
grid.Children.Add(new Button {
Text = la[0].Floor,
FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
BorderWidth = 1,
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.CenterAndExpand,
} , column, row );
You probably need to change your Grid.RowDefinitions's Height to Auto for what ever row that button is being placed on. Using Auto instead of GridUnitType.Star should give the Button as much height as it needs to show it's content.
That being said, if the text is super long, it still might not work.
If that button is on the first row, then your would change that row's Height to:
Grid grid = new Grid {
RowDefinitions = new RowDefinitions {
new RowDefinition { Height = GridLength.Auto }
}
}
If that does not help, please show your Grid's initialization code.
I'm trying to have a button contain both an image text. Ideally have the text left aligned, while the image is as far right as possible.
So i create a Grid, and add an Image and Textblock to it and set its alignment. For the life of me i cant get alignment to act as expected.
var gridPanel = new Grid();
gridPanel.ColumnDefinitions.Add(new ColumnDefinition());
var text = new TextBlock { Text = header, TextAlignment = TextAlignment.Left };
text.HorizontalAlignment = HorizontalAlignment.Left;
text.Margin = new Thickness(0);
text.SetValue(Grid.RowProperty, 0);
text.SetValue(Grid.ColumnProperty, 0);
var image = new Image();
image.Source = new BitmapImage(new Uri("../Images/Common/RedFlag.png", UriKind.Relative));
image.HorizontalAlignment = HorizontalAlignment.Right;
image.Height = 25;
image.Width = 25;
image.SetValue(Grid.RowProperty, 0);
image.SetValue(Grid.ColumnProperty, 1);
gridPanel.Children.Add(text);
gridPanel.Children.Add(image);
button.Content = gridPanel;
Both the Image and Text are center aligned for some reason...Is Grid the wrong way to go? I tried StackPanel and setting its orientation to Horizontal but it was the same thing..
by default the HorizontalContentAlignment of a button is set at "Center"... Just set it to "Stretch" like that :
button.HorizontalContentAlignment = System.Windows.HorizontalAlignment.Stretch;
Change the HorizontalContentAlignment from Centre to Stretch, like-
<Button Name="button" HorizontalContentAlignment="Stretch"/>
Edit-
I was originally doing this in the button style as I didn't know about the HorizontalContentAlignment property