I have 4 buttons arranged in a grid. I want each button to display an image exactly the size of that button, but am at a loss as to how to do this. I'm trying the following method right now, but am given the error "cannot set the content of button as it does not have a content property attribute" when I include the line.
I tried adding an image to the first button in the grid, but the image is far too large. I want the image to perfectly overlay the size of the button, regardless of the size of the phone I'm using.
This is my code:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.ColumnSpan="2" Text="Welcome," HorizontalOptions="Center" FontSize="Large" TextColor="Aqua"/>
<Label Grid.Row="1" Grid.ColumnSpan="2" Text="User" HorizontalOptions="Center" FontSize="Large" TextColor="Aqua"/>
<Button Grid.Row="2" Grid.Column="0" Image="iris_light" Text="Student
Directory" TextColor="Aqua"/>
<Button Grid.Row="2" Grid.Column="1" Text="Executive
Directory" TextColor="Aqua"/>
<Button Grid.Row="3" Grid.Column="0" Text="Voting" TextColor="Aqua"/>
<Button Grid.Row="3" Grid.Column="1" Text="Map" TextColor="Aqua">
<Image Source="iris_light"/>
</Button>
</Grid>
If you want that (meaning that the Image property is not flexible enough for you), you must write a custom renderer.
Unlike Windows, iOS and Android are not based on the XAML so content of their controls is not editable that way as it is not supported by the underlying OS.
Solved my problem:
<Grid BackgroundColor="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.ColumnSpan="2" Text="Welcome," HorizontalOptions="Center" FontSize="Large" TextColor="Aqua"/>
<Label Grid.Row="1" Grid.ColumnSpan="2" Text="User" HorizontalOptions="Center" FontSize="Large" TextColor="Aqua"/>
<Image Grid.Row="2" Grid.Column="0" Source="iris_light"/>
<Button Grid.Row="2" Grid.Column="0" BackgroundColor="Transparent" Text="Student
Directory" TextColor="Aqua"/>
<Image Grid.Row="2" Grid.Column="1" Source="iris_light"/>
<Button Grid.Row="2" Grid.Column="1" BackgroundColor="Transparent" Text="Executive
Directory" TextColor="Aqua"/>
<Image Grid.Row="3" Grid.Column="0" Source="iris_light"/>
<Button Grid.Row="3" Grid.Column="0" BackgroundColor="Transparent" Text="Voting" TextColor="Aqua"/>
<Image Grid.Row="3" Grid.Column="1" Source="iris_light"/>
<Button Grid.Row="3" Grid.Column="1" BackgroundColor="Transparent" Text="Map" TextColor="Aqua"/>
</Grid>
Related
have a ListView in which for each element of the List you have 3 buttons for 3 different options, when you enter the screen there are no overflow problems in the images of the ImageButton, but when you do the first scroll the sources start to overflow as shown in the following image
The images lose the center and are misaligned as you scroll up or down, this problem does not occur in iOS, only occurs in Android (version 6,7,8 and 9), apparently it is a problem like Android render the images
I tried, changing the ImageButton control to Button and the problem persists, also trying to assign the "Aspect" property to the ImageButton, but I'm not getting successful results, any help how to fix this? then my code XAML
<ListView
ItemsSource="{Binding ListaRecintos}"
SelectionMode="None"
IsRefreshing="{Binding IsRefreshing, Mode=TwoWay}"
RowHeight="80"
HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout
Margin="0,4,0,0"
Orientation="Vertical">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="3.9*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label
Text="{Binding Code}"
HorizontalOptions="Start"
FontSize="Small"
WidthRequest="40"
HeightRequest="30"
FontAttributes="Bold"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
TextColor="{StaticResource das.color.texto}"
VerticalOptions="CenterAndExpand"
Grid.Column="0">
</Label>
<StackLayout Orientation="Vertical"
Grid.Column="1">
<Label
Text="{Binding Name}"
HorizontalOptions="Start"
FontSize="Small"
HeightRequest="32"
MaxLines="2"
TextColor="{StaticResource das.color.texto}"
VerticalOptions="Center"
VerticalTextAlignment="Center">
</Label>
</StackLayout>
</Grid>
<!--STACK BUTTON-->
<StackLayout
Orientation="Horizontal"
HorizontalOptions="EndAndExpand"
Margin="0,1,1,0">
<!--BUTTON 1-->
<ImageButton
Source="ic_check_wt"
Aspect="AspectFit"
CornerRadius="0"
BackgroundColor="{StaticResource das.color.estado_success}"
HorizontalOptions="End"
VerticalOptions="Center"
HeightRequest="35"
WidthRequest="50"
CommandParameter="2"
Command="{Binding ControlAuditoriaCommand}"
IsEnabled="{Binding EnabledButton}"/>
<!--BUTTON 2-->
<ImageButton
Source="ic_hammer"
BackgroundColor="{StaticResource das.color.estado_primary}"
HorizontalOptions="End"
CornerRadius="0"
Aspect="AspectFit"
VerticalOptions="Center"
HeightRequest="35"
WidthRequest="50"
CommandParameter="1"
Command="{Binding ControlAuditoriaCommand}"
IsEnabled="{Binding EnabledButton}"/>
<!--BUTTON 3-->
<ImageButton
Source="ic_arrow_up"
BackgroundColor="{StaticResource das.color.estado_success}"
HorizontalOptions="End"
CornerRadius="0"
Aspect="AspectFit"
VerticalOptions="Center"
HeightRequest="35"
WidthRequest="50"
CommandParameter="3"
Command="{Binding ControlAuditoriaCommand}"
IsEnabled="{Binding EnabledButton}"/>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
How can I avoid this behavior? Any help for me?
I suggest you use (Frame + image ) instead of ImageButton , and add tapgesture on it .
We are updating a Xamarin project from Android 8.0 to 9.0 (API 26 -> API 28).
We detect a different behavior on a layout: we have a button above which we display labels and icons inside a StackLayout.
With the old Android 8.0 version, we could correctly click on the button.
With the new Android 9.0 version, we note that we can correctly click on the button, but when we click the button is brought to the front and hides the StackLayout labels and icons.
When we return to this screen, the button remains in the foreground and the StackLayout labels and icons no longer appear.
How can we force the StackLayout labels and icons to stay on the button even if the button is clicked?
Thanks
<StackLayout Orientation="Vertical" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
<ctrl:TitleBarControl x:Name="titleBar" Title="Menu Trasporto Valori"></ctrl:TitleBarControl>
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Style="{StaticResource standardGrid}">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="btnProssimo" Image="MondoConPinPoint_48x48.gif" Text="Prossimo" HorizontalOptions="Fill" VerticalOptions="Fill" Grid.Row="0" Grid.Column="0" Style="{StaticResource menuButton}" Command="{Binding ProssimoCommand}"></Button>
<StackLayout Orientation="Horizontal" Grid.Row="0" Grid.Column="0" HorizontalOptions="Center" VerticalOptions="End">
<Label Text="Da eseguire:" HorizontalOptions="Center" VerticalOptions="Center" Style="{StaticResource lightLabel}"></Label>
<Label Text="{Binding DaEseguire}" HorizontalOptions="Center" VerticalOptions="Center" Style="{StaticResource boldLabel}"></Label>
</StackLayout>
<Button x:Name="btnProssimoI" Image="Cacciavite_48x48.gif" Text="Prossimo I" HorizontalOptions="Fill" VerticalOptions="Fill" Grid.Row="1" Grid.Column="0" Style="{StaticResource menuButton}" Command="{Binding ProssimoICommand}"></Button>
<StackLayout Orientation="Horizontal" Grid.Row="1" Grid.Column="0" HorizontalOptions="Center" VerticalOptions="End">
<Label Text="Da eseguire:" HorizontalOptions="Center" VerticalOptions="End" Grid.Row="1" Grid.Column="0" Style="{StaticResource lightLabel}"></Label>
<Label Text="{Binding IDaEseguire}" HorizontalOptions="End" VerticalOptions="End" Grid.Row="1" Grid.Column="0" Style="{StaticResource boldLabel}"></Label>
<Image x:Name="imgSveglia" Grid.Row="1" Grid.Column="0" VerticalOptions="End" HorizontalOptions="End" Source="Sveglia_24x24.gif" WidthRequest="26" IsVisible="{Binding IsI}"></Image>
</StackLayout>
</Grid>
</StackLayout>
As from Xamarin.Forms 4.0 onwards, all applications targeting FormsAppCompatActivity will use the Fast Renderers by default.
If you want to workaround this issue, you can disable the FastRenderers. See: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/internals/fast-renderers#backwards-compatibility
add the following to your MainActivity.OnCreate before the global::Xamarin.Forms.Forms.Init(this, savedInstanceState) call:
global::Xamarin.Forms.Forms.SetFlags("UseLegacyRenderers");
Please use an ImageButton instead. This should solve your problem.
I'm trying to make an app using Xamarin.forms. The problem is that in Android version, button border are displayed, and I would like to remove them. I tried BorderColor="Transparent" but it didn't work.
Also, I've some problems with Text. In fact, I would like to have some padding between Icons and text (for example between F and Facebook). Is there a way to do that ? And how can I handle problems about the size of the text on, for example, iPhone 5 and "Fa...ook" ? I tried to put a smaller police but I guess there is a best solution ?
Here is my Xaml code:
<Grid Margin="0,20,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Label Text="Waka'Lokos" Margin="0,20,0,0" HorizontalOptions="Center" FontSize="22.5" TextColor="White" Grid.Row="0" Grid.Column="1"/>
<Button BackgroundColor="Transparent" FontSize="10" ContentLayout="Top" HorizontalOptions="Center" VerticalOptions="Center" x:Name="fb" Text="Facebook" Grid.Row="1" Grid.Column="0" Image="fb.png" TextColor="#FEF4CA"/>
<Button BackgroundColor="Transparent" FontSize="10" ContentLayout="Top" HorizontalOptions="Center" VerticalOptions="Center" x:Name="contact" Text="Contact" Grid.Row="1" Grid.Column="1" Image="call.png" TextColor="#FEF4CA"/>
<Button BackgroundColor="Transparent" FontSize="10" ContentLayout="Top" HorizontalOptions="Center" VerticalOptions="Center" x:Name="insta" Text="Insta" Grid.Row="1" Grid.Column="2" Image="insta.png" TextColor="#FEF4CA"/>
<Button BackgroundColor="Transparent" FontSize="10" ContentLayout="Top" HorizontalOptions="Center" VerticalOptions="Center" x:Name="chants" Text="Chants" Grid.Row="2" Grid.Column="0" Image="micro.png" TextColor="#FEF4CA"/>
<Button BackgroundColor="Transparent" FontSize="10" ContentLayout="Top" HorizontalOptions="Center" VerticalOptions="Center" x:Name="communaute" Text="Team" Grid.Row="2" Grid.Column="1" Image="team.png" TextColor="#FEF4CA"/>
<Button BackgroundColor="Transparent" FontSize="10" ContentLayout="Top" HorizontalOptions="Center" VerticalOptions="Center" x:Name="youtube" Text="Youtube" Grid.Row="2" Grid.Column="2" Image="yt.png" TextColor="#FEF4CA"/>
<Button BackgroundColor="Transparent" FontSize="10" ContentLayout="Top" HorizontalOptions="Center" VerticalOptions="Center" x:Name="partenaires" Text="Partner" Grid.Row="3" Grid.Column="0" Image="partner.png" TextColor="#FEF4CA"/>
<Button BackgroundColor="Transparent" FontSize="10" ContentLayout="Top" HorizontalOptions="Center" VerticalOptions="Center" x:Name="plans" Text="Bons Plans" Grid.Row="3" Grid.Column="1" Image="money.png" TextColor="#FEF4CA"/>
<Button BackgroundColor="Transparent" FontSize="10" ContentLayout="Top" HorizontalOptions="Center" VerticalOptions="Center" x:Name="agenda" Text="Agenda" Grid.Row="3" Grid.Column="2" Image="agenda.png" TextColor="#FEF4CA"/>
</Grid>
For buttons that contain both text and images, I've always found it easiest to just use a stacklayout with an image and a label and then add a tap gesture to it. That way you have way more control over the positioning and scaling of the image as well as the text (and it takes care of your border problem). So something like:
XAML:
<StackLayout x:Name="buttonStack" WidthRequest="50">
<Image Source="fb.png" Aspect="AspectFit" HorizontalOptions="CenterAndExpand"/>
<Label Text="Facebook" HorizontalOptions="CenterAndExpand" HorizontalTextAlignment="Center"/>
</StackLayout>
XAML.CS
...
TapGestureRecognizer tap = new TapGestureRecognizer();
tap.Tapped += HandleClickEvent;
buttonStack.GestureRecognizers.Add(tap);
}
private void HandleClickEvent(object sender, EventArgs e)
{
//some code here
}
if you want to fake a button tap animation you can try this instead. You can tweak the 250 milliseconds to something else to get the feel right:
private async void HandleClickEvent(object sender, EventArgs e)
{
await buttonStack.FadeTo(0,250);
buttonStack.FadeTo(1,250);
//some code here
}
I want make ui like this image.
but I don't know how can I make expandable listview in grid.
<?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="ElronWebtoon_Test.myLibrary.LibTab" BackgroundColor="White">
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition x:Name="TopGrid"/>
<RowDefinition />
<RowDefinition x:Name="menuRow"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" x:Name="GlobalLayout" >
<Grid.RowDefinitions>
<RowDefinition x:Name="TopBtn_Grid"/>
<RowDefinition x:Name="menu_Grid"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" VerticalOptions="Start" >
<Label x:Name="labelBox1" Text="LabelBox1" Font="Bold, 16" TextColor="Black" HorizontalOptions="Start" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" VerticalOptions="Center" Grid.Column="0" BackgroundColor="#A8D2F1">
<Label.GestureRecognizers>
<TapGestureRecognizer/>
</Label.GestureRecognizers>
</Label>
<Label x:Name="LabelBox2" Text="LabelBox2" Font="Bold, 16" TextColor="Black" HorizontalOptions="End" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" VerticalOptions="Center" Grid.Column="0" BackgroundColor="#A8D2F1">
<Label.GestureRecognizers>
<TapGestureRecognizer />
</Label.GestureRecognizers>
</Label>
</Grid>
<Grid Grid.Row="1" x:Name="libMenu" RowSpacing="0" HorizontalOptions="CenterAndExpand">
<Grid Grid.Column="0" x:Name="menuGrid_1" HorizontalOptions="Center">
<Button BorderRadius="30" BorderColor="Black" BorderWidth="2" BackgroundColor="White" VerticalOptions="Center"/>
<Label x:Name="BtnText1" Text="BtnText1" TextColor="Black" VerticalOptions="Center" HorizontalOptions="Center" VerticalTextAlignment="Center"/>
</Grid>
<Grid Grid.Column="1" x:Name="menuGrid_2" HorizontalOptions="Center">
<Button BorderRadius="30" BorderColor="Black" BorderWidth="2" BackgroundColor="White" VerticalOptions="Center"/>
<Label x:Name="BtnText2" Text="BtnText2" TextColor="Black" VerticalOptions="Center" HorizontalOptions="Center" VerticalTextAlignment="Center"/>
</Grid>
<Grid Grid.Column="2" x:Name="menuGrid_3" HorizontalOptions="Center">
<Button BorderRadius="30" BorderColor="Black" BorderWidth="2" BackgroundColor="White" VerticalOptions="Center"/>
<Label x:Name="BtnText3" Text="BtnText3" TextColor="Black" VerticalOptions="Center" HorizontalOptions="Center" VerticalTextAlignment="Center"/>
</Grid>
</Grid>
</Grid>
<Grid Grid.Row="1" VerticalOptions="Fill" x:Name="inner_Content">
</Grid>
<Grid Grid.Row="2" >
<Grid>
<Button Text="BTN1" Grid.Column="0" />
<Button Text="BTN2" Grid.Column="1"/>
<Button Text="BTN3" Grid.Column="2"/>
<Button Text="BTN4" Grid.Column="3"/>
<Button Text="BTN5" Grid.Column="4"/>
</Grid>
</Grid>
</Grid>
</ContentPage>
this is my sample code.
I want insert expandable listview in Grid, named inner_Content in this code.
but if I searching expandable listview, that only in contentPage.
not in grid.
can you help me?
I guess you are looking something like an accordion control to be used in Xamarin.
Check the URL below:
https://www.codeproject.com/Articles/1088093/Simple-Accordion-User-Control-in-Xamarin-Forms
Hope this helps, mark this as an answer if you think this meets your requirement.
Regards,
N Baua
I am looking to create a xamarin cross platform dashboard page with some buttons. Each button have an icon image and a text. I tried two approaches 1. with using inbuilt property of Icon of Button control and another with separate StackLayout
But my output needs some optimization on xaml
The xaml i tried is like this
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="150" ></RowDefinition>
<RowDefinition Height="150"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" BackgroundColor="#3094d2" >
<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
<Image Source="#drawable/announcement.png" VerticalOptions="Center" HorizontalOptions="Center" />
</StackLayout>
<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
<Button Text="Announcement" TextColor="White" VerticalOptions="Center" HorizontalOptions="Center" />
</StackLayout>
</StackLayout>
<Button Text="News & Events" Grid.Row="0" Grid.Column="1" BackgroundColor="#287cbe" Image="#drawable/announcement.png" TextColor="White" Clicked="Button_NewsHome_Clicked" />
<Button Text="Messages" Grid.Row="1" Grid.Column="0" BackgroundColor="#5153a9" Image="#drawable/announcement.png" TextColor="White" Clicked="Button_SMSHome_Clicked" />
<Button Text="SMS Alers" Grid.Row="1" Grid.Column="1" Image="#drawable/announcement.png" BackgroundColor="#a434a6" TextColor="White" Clicked="Button_SMSHome_Clicked" />
</Grid>
What adjustments i have to do on Vertical and Horizontal align to make my ouput looks like that on the left side
You can use XLabs Extended Button to get desired output