I'm working in a small piece of UI in Xamarin just a "card" with some labels and two buttons in the right side as a column. Here you can see my Xaml:
<Grid BackgroundColor="White" RowSpacing="0" ColumnSpacing="0" Margin="10,10,10,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="80"/>
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="1"
Spacing="0"
BackgroundColor="PaleGoldenrod">
<Button Text="OPEN" Margin="0"
VerticalOptions="FillAndExpand"
HeightRequest="70"/>
<Button Text="RESET" Margin="0"
VerticalOptions="FillAndExpand"
HeightRequest="70"/>
</StackLayout>
<Label TextColor="Black" Margin="5">Relojes</Label>
<Label HorizontalTextAlignment="End"
TextColor="Black"
Margin="5">Sin Tocar</Label>
</grid>
And here you can see a picture of what I've got:
I want to remove the space between the two buttons so they are evenly spaced all around. I tried setting the bottom margin in the upper button as -2.5 and the upper margin of the bottom button as -2.5 and looks Ok but .. There must be a cleaner option.
Any idea ??
Use Spacing in StackLayout to reduce space between controls. Here Spacing in minus.
<StackLayout Grid.Column="1"
Spacing="-8"
BackgroundColor="PaleGoldenrod">
<Button Text="OPEN" Margin="0"
VerticalOptions="FillAndExpand"
HeightRequest="70"/>
<Button Text="RESET" Margin="0"
VerticalOptions="FillAndExpand"
HeightRequest="70"/>
</StackLayout>
Related
I have XF checkbox that displays with too much right padding. Here is what it looks like in iOS (BackgroundColor="Red" to highlight the padding issue).
How can I remove the right padding to match the padding on the left? Or is this even possible?
XAML
<StackLayout Grid.Row="2" Grid.Column="1"
Orientation="Horizontal">
<CheckBox IsChecked="{Binding HasEnd}"
Margin="0"
BackgroundColor="Red" />
<Label Style="{StaticResource FormLabel}"
Margin="0"
Text="Has Ending Date" />
</StackLayout>
There is 2 ways of doing this with workarounds.
1º
Overlapping the Label and the Checkbox with an Grid and give the Label the correct margin needed like this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<CheckBox Grid.Row="0" Grid.Column="0" IsChecked="{Binding HasEnd}"
Margin="0"
BackgroundColor="Red" />
<Label Grid.Row="0" Grid.Column="0" Style="{StaticResource FormLabel}"
Margin="10,0,0,0" <- The Margin needed
Text="Has Ending Date" />
</Grid>
2º
Not a graceful one, but you can give negative Margin to the Label
<Label Style="{StaticResource FormLabel}"
Margin="-10,0,0,0"
Text="Has Ending Date" />
You can also try the Input Kit Nugget package if you want more controll over your inputs.
I am working on xamarin. form application, where I need to add a image side to the
back button in the navigation bar.
I have tried
1. <NavigationPage.TitleView><image/></NavigationPage.TitleView> -here the view is away from the back button. the space between back button and image is more.
2. created a custom navigation as following.
<Grid BackgroundColor="{Binding ActionbarColor}">
<StackLayout Orientation="Horizontal" Spacing="0" HeightRequest="60" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Image Source="back.png" HeightRequest="20" WidthRequest="20" HorizontalOptions="Start" VerticalOptions="CenterAndExpand">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding MoveBackCommand}"></TapGestureRecognizer>
</Image.GestureRecognizers>
</Image>
<Imge Source="defaultUser.png">
<Label />
<Label x:Name="TitleLabel" VerticalTextAlignment="Center" VerticalOptions="CenterAndExpand" TextColor="White" FontAttributes="Bold" FontSize="Medium" HorizontalOptions="FillAndExpand"/>
</StackLayout>
</Grid>
with 2nd, the view is blinking while navigating to the back view.
Apart of these two are there any ways to display the image in the navigation bar side the back button
Use Grid to Change
<Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<BoxView BackgroundColor="Aqua" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="5"/>
<Button Image="BackIcon" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="1" Command="GoBack"/>
<Image Source="Logo" Aspect="AspectFit" BackgroundColor="Transparent" Grid.Column="2" Grid.Row="0" Grid.ColumnSpan="1"/>
</Grid>
It not works follow this - if it works let me know
Is it possible to create a `ListView' like the attached screen shot using Xamarin Forms.
Try this:
<ListView x:Name="listView">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding image}" WidthRequest="50" HeightRequest="50" Grid.Column="0" VerticalOptions="Center"/>
<StackLayout Grid.Column="1">
<Label Text="{Binding property1}" TextColor="#f35e20" HorizontalTextAlignment="Center"/>
</StackLayout>
<StackLayout Grid.Column="2">
<Label Text="{Binding property2}" HorizontalTextAlignment="Center" TextColor="#503026"/>
</StackLayout>
<StackLayout Grid.Column="3">
<Label Text="{Binding property3}" HorizontalTextAlignment"Center" TextColor="#503026"/>
</StackLayout>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
You can use https://github.com/jamesmontemagno/ImageCirclePlugin to create circular image for the first column.
To design something like this, you can take a Grid layout with 1 row and 4 column.
In 1st column: you can draw shape like this:How To Draw a circle with a text in the center using Xamarin Forms C# Without using custom-renderer?
<Frame HeightRequest="40" WidthRequest="40" CornerRadius="20" HorizontalOptions="Start" VerticalOptions="Start" Margin="0" Padding="0" BackgroundColor="Maroon">
<Label Text="7" TextColor="White" HorizontalOptions="Center" VerticalOptions="Center" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
In other columns, you can have Stacklayout with padding 1 and BackgroundColor black applied in it, containing Label with BackgroundColor Blue and text in it.
Hope this may solve your issue.
I am making a page where there is a top title, an image in the middle and some text under it and then two buttons at the bottom for yes or no. As you can see the buttons are getting pushed down too much and getting cut off. I can't figure out how to move the text up a little or reduce the spacing between the image and the title and text. I know I probably could do this with absolute layouts but I am not sure how it would work with larger/smaller screens.
Here is my XAML for the image.
<ContentPage BackgroundColor="#FF233D">
<ContentPage.Content>
<StackLayout Padding="10,10,10,10">
<StackLayout VerticalOptions="Start">
<Label TextColor = "White" Text="You're having trouble sleeping." FontSize="Large" HorizontalTextAlignment="Center"></Label>
<Image Scale=".65" Source="bed" >
</Image>
</StackLayout>
<StackLayout VerticalOptions="CenterAndExpand">
<Label TextColor = "White" Text="When the kidneys aren't filtering properly, toxins stay in the blood rather than leaving the body through the urine. This can make it difficult to sleep. There is also a link between obesity and chronic kidney disease, and sleep apnea is more common in those with chronic kidney disease, compared with the general population." HorizontalTextAlignment="Center"></Label>
</StackLayout>
<StackLayout Orientation="Horizontal" VerticalOptions="EndAndExpand" >
<Button Text="Yes" Clicked="YesClicked" ClassId="1Yes" x:Name="Yes1" HorizontalOptions="FillAndExpand" BackgroundColor="#27ae60" TextColor="White" BorderRadius="0">
</Button>
<Button Text="No" Clicked="NoClicked" ClassId="1No" x:Name="No1" HorizontalOptions="FillAndExpand" BackgroundColor="#c0392b" TextColor="White" BorderRadius="0" >
</Button>
</StackLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Any help is much appreciated.
It will be easier if you use a Grid with 4 rows and two columns
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label TextColor = "White" Text="You're having trouble sleeping." FontSize="Large" HorizontalTextAlignment="Center" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" />
<Image Scale=".65" Source="bed" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" >
<Label TextColor = "White" Text="When the kidneys aren't filtering properly, toxins stay in the blood rather than leaving the body through the urine. This can make it difficult to sleep. There is also a link between obesity and chronic kidney disease, and sleep apnea is more common in those with chronic kidney disease, compared with the general population." HorizontalTextAlignment="Center" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"/>
<Button Text="Yes" Clicked="YesClicked" ClassId="1Yes" x:Name="Yes1" HorizontalOptions="FillAndExpand" BackgroundColor="#27ae60" TextColor="White" BorderRadius="0" Grid.Row="3" Grid.Column="1" />
<Button Text="No" Clicked="NoClicked" ClassId="1No" x:Name="No1" HorizontalOptions="FillAndExpand" BackgroundColor="#c0392b" TextColor="White" BorderRadius="0" Grid.Row="3" Grid.Column="0" />
Try to adjust rows Hheight and width if the result is different from your needs.
For more information about grids : Microsoft docs
I'm trying to add three button images on the same row inside a StackLayout.
The first button image doesn't show any error, but the problem is with two other buttons.
Here is the code:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1.5*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="auto"/>
<RowDefinition Height ="auto"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" HorizontalOptions="Center" VerticalOptions="Center">
<Image HorizontalOptions="Center" VerticalOptions="Center" Source="loginlogo.png"/>
</StackLayout>
<StackLayout Padding="5" Spacing="5" Grid.Row="1">
<StackLayout>
<Label Text ="editor is used for collecting text that is expected to take more than one line."
TextColor="Black" BackgroundColor="White" HeightRequest="100" />
</StackLayout>
<StackLayout HorizontalOptions="Center" VerticalOptions="Center"
Orientation="Horizontal">
<Button x:Name="facebook" WidthRequest="50" HeightRequest="50" Image="Fb.png">
<Button.Image Aspect="AspectFit" />
</Button>
<Button WidthRequest="50" HeightRequest="50" Image="LINKEDIN.png">
<Button.Image Aspect="AspectFit" />
</Button>
<Button x:Name="YB" WidthRequest="50" HeightRequest="50" Image="YOUTUBE.png">
<Button.Image Aspect="AspectFit" />
</Button>
</StackLayout>
</StackLayout>
<StackLayout Grid.Row="4" HorizontalOptions="Center" VerticalOptions="End" Orientation="Horizontal" Margin="1" >
<Label Text="sample text" TextColor="Gray" HorizontalOptions="Center" HorizontalTextAlignment="Center"/>
</StackLayout>
</Grid>
This is the exact error I receive:
Position 35:18. Can not set the content of Button as it doesn't have a
ContentPropertyAttribute
Position 35 is the third button named YB
I don't understand where the problem is.
Any advice will be helpful.
Thanks
Xamarin.Forms.Button.Image is an FileImageSource and thus there is no Aspect property to it. This abstract control is converted to a platform native one and full image control of how it appears within that button on each platform is not exposed.
But on Xamarin.Forms.Image there is an Aspect property.
If you need to control the aspect ratio, you could created a custom button renderer and handle it at the platform level, or just use a Xamarin.Forms.Image and set a tab gesture on them.