I want to place some child controls inside a button in my xamarin form application.I tried the following code but the child controls are not showing.
<Button>
<StackLayout Orientation="Horizontal">
<Image Source="updatesite.png" HeightRequest="25" WidthRequest="25"/>
<Label VerticalOptions="Center" Text="Update Site and Settings" FontSize="16"/>
</StackLayout>
</Button>
Please help me.
You should wrap all the content into a layout such as Grid. Then place the transparent button onto grid. like this.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="updatesite.png" />
<Label Grid.Row="1" VerticalOptions="Center" Text="Update Site and Settings" FontSize="16"/>
<Button Grid.Row="0" Grid.RowSpan="2" x:Name="buttonDo"
BackgroundColor="Transparent" TextColor="Transparent"
/>
</Grid>
This Grid will act like a button that have chidren.
You can have image and text in the button like this,
<Button BackgroundColor="Transparent" Image="updatesite.png" Text="Update Site and Settings" TextColor="Gray" ContentLayout="Top,0"/>
Related
So basically I have an annoying thing when I'm trying to adjust my frame inside an AbsoluteLayout such:
<AbsoluteLayout Grid.Column="4">
<Frame CornerRadius="20"
Padding="0"
BorderColor="#9f6b34"
Background="Transparent">
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="fourthButton_Clicked"/>
</Frame.GestureRecognizers>
<Label Text="Classic and traditional"
Padding="35"
FontSize="40"
FontFamily="font2"
HorizontalTextAlignment="Center"
TextColor="#211717">
</Label>
</Frame>
When the code is like this it's fine but when I try to adjust the frames' position with .LayoutBounds it just won't click. I've tried changing it to a StackLayout and click event fires sometimes in various different positions inside the frame. I've put ImageButton, regular button and also tried using my label's GestureRecognizer but it just won't click when I made adjustments.
here is a gif of the situtation. the top frame isn't adjusted the bottom one is
When the code is like this it's fine but when I try to adjust the frames' position with .LayoutBounds it just won't click.
I try your code, and it works fine, having no problem, please take a look the following code:
<StackLayout>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<AbsoluteLayout>
<Frame
Padding="0"
AbsoluteLayout.LayoutBounds="0, 10, 300, 200"
BorderColor="#9f6b34"
CornerRadius="20">
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="fourthButton_Clicked" />
</Frame.GestureRecognizers>
<Label
Padding="35"
FontFamily="font2"
FontSize="40"
HorizontalTextAlignment="Center"
Text="Classic and traditional"
TextColor="#211717" />
</Frame>
</AbsoluteLayout>
<StackLayout Grid.Row="1">
<Frame
Padding="0"
BorderColor="#9f6b34"
CornerRadius="20">
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="fourthButton_Clicked" />
</Frame.GestureRecognizers>
<Label
Padding="35"
FontFamily="font2"
FontSize="40"
HorizontalTextAlignment="Center"
Text="Classic and traditional"
TextColor="#211717" />
</Frame>
</StackLayout>
</Grid>
</StackLayout>
I put Frame in AbsoluteLayout and also use AbsoluteLayout.LayoutBounds to adjust Frame poaition, I also put frame in StackLayout, it also works fine.
I have a xamarin.forms app. A screen has many controls, and I use ScrollView to let the user ability to see all the controls. I have a button outside of the ScrollView, because I want it to be easily accessible without scrolling down the screen. But some of our customers have vision issues, so they enlarge the text size on their phones. Then the button disappears from the screen. I wonder what I can do to fix this... I guess I would agree with the scrolling only for those with the large text size, if there is no better solution.
Here is my code:
<ContentPage.Content>
<StackLayout>
<ScrollView>
<StackLayout Margin="30">
... Many controls are here
</StackLayout>
</ScrollView>
<StackLayout
x:Name="Validation"
HeightRequest="150"
IsVisible="{Binding ValidationResult.IsValid, Converter={converters:InverseBoolConverter}}">
<Label Text="Please fix the following errors:" TextColor="Red" Margin="0,0,0,10" />
<Label Text="{Binding Errors}" TextColor="Red" />
</StackLayout>
<Button
Text="Calculate"
Command="{Binding CalculateCommand}"
Style="{StaticResource ButtonStyle}"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
ADDED:
I did not mention that the content of the page is within a ControlTemplate:
<ControlTemplate x:Key="MainPageTemplate">
<Grid>
<Label Text="{Binding ErrorMessage}" TextColor="Red" />
<ContentPresenter Margin="10, 0, 10, 120" />
<StackLayout VerticalOptions="End" BackgroundColor="LightGray" Padding="20" >
<Label Text="{Binding Source={x:Static sys:DateTime.Now}, StringFormat='© {0:yyyy} Company Name, Inc.'}" />
<Label Text="All trademarks shown are the intellectual properties of their respective owners." />
</StackLayout>
</Grid>
</ControlTemplate>
Agree with #Jason , StackLayout will not fit the size of its child Elements . So you could use Grid with three Rows
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.9*" />
<RowDefinition Height="150" />
<RowDefinition Height="0.1*" />
</Grid.RowDefinitions>
<ScrollView Grid.Row="0" Orientation="Both">
<StackLayout Margin="30" BackgroundColor="LightBlue" HeightRequest="300">
</StackLayout>
</ScrollView>
<Grid HeightRequest = "150" Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label Grid.Row="0" Text="Please fix the following errors:" TextColor="Red" Margin="0,0,0,10" />
<Label Grid.Row="1" Text="{Binding Errors}" TextColor="Red" />
</Grid>
<Button
Grid.Row="2"
Text="Calculate"
HorizontalOptions="CenterAndExpand" />
</Grid>
So I've run into a problem with Imagebuttons in XAML.
I usually render a background image from photoshop and then use this button everywhere and just add a label ontop that says what it does:
enter image description here
This here for isntance comes from this code (partially):
<!--Grid for button-->
<Grid Grid.Row="1" >
<ImageButton
x:Name="btn_register_mainpage"
Source="btn_emptydummy.png" BackgroundColor="#00000000"/>
<Label
FontFamily="arial"
TextColor="#272727"
Text="Profil erstellen"
HorizontalOptions="Center"
VerticalOptions="Center"/>
</Grid>
Now, this works just fine, unless you want to click on it.
As you can see I gave the button a name, I can now catch that name in code and delegate a click to it:
btn_register_mainpage.Clicked += async delegate
{
await Navigation.PushAsync(new Screen_EditInformation());
};
However, this only works when the user clicks on the button - but NOT on the label since this is on top and has no click assigned to it.
So, what I could do is just assign the same click event to both objects (the label and the image button) but that seems rather unusual.
What is the best way to have a custom image as a button with a label ontop that is clickable?
You can add GestureRecognizers to any control in Xamarin.Forms. In your case you could add one to the Grid layout
YourView.xaml
<Grid Grid.Row="1" >
<Grid.GestureRecognizers>
<TapGestureRecognizer
Tapped="OnTapGestureRecognizerTapped"
NumberOfTapsRequired="1" />
</Grid.GestureRecognizers>
<ImageButton
x:Name="btn_register_mainpage"
InputTransparent="True"
Source="btn_emptydummy.png" BackgroundColor="#00000000"/>
<Label
FontFamily="arial"
TextColor="#272727"
Text="Profil erstellen"
HorizontalOptions="Center"
VerticalOptions="Center"/>
</Grid>
YourView.xaml.cs
private void OnTapGestureRecognizerTapped(object sender, EventArgs e)
{
Navigation.PushAsync(new Screen_EditInformation());
}
You could add a TapGestureRecognizer on the label .
<Grid Grid.Row="1" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<ImageButton
Clicked="Button_Clicked"
Grid.Row="0"
x:Name="btn_register_mainpage"
BackgroundColor="LightBlue"/>
<Label
Grid.Row="0"
FontFamily="arial"
TextColor="#272727"
Text="Profil erstellen"
HorizontalOptions="Center"
VerticalOptions="Center">
<Label.GestureRecognizers>
<TapGestureRecognizer
Tapped="Button_Clicked"
NumberOfTapsRequired="1" />
</Label.GestureRecognizers>
</Label>
</Grid>
I'm learning Xamarin and I want to display an image as background with some texto over this image...
Just that, I manage to acomplish, but the text is displayed at the top left corner of the image.
I'd like the text to be placed at the vertical center of the image, but stick to the left side of it.
My code so far XAML:
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="20*" ></RowDefinition>
<RowDefinition Height="65*"></RowDefinition>
<RowDefinition Height="15*"></RowDefinition>
</Grid.RowDefinitions>
<RelativeLayout Grid.Row="0">
<Image Source="login.png" Aspect="Fill" />
<Label Text="Bem vindo" TextColor="White" FontSize="22"></Label>
</RelativeLayout>
<Label Grid.Row="1" Text="linha 2" BackgroundColor="Coral"></Label>
<Button Grid.Row="2" Text="linha 3" BackgroundColor="DarkRed"></Button>
</Grid>
I've tried verticalOptions and such, but with no effect.
One thing that kind of worked is settin a Maring property to the label, but that way, the label would be centered only to the device I'm testing on. Other devices, smaller or greater, the label could (and probably would) be placed at the wrong place.
Any help?
You don't need a RelativeLayout inside the Grid. The Grid itself already is able to handle views overlay besides let your code clearer.
It may works:
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="20*"></RowDefinition>
<RowDefinition Height="65*"></RowDefinition>
<RowDefinition Height="15*"></RowDefinition>
</Grid.RowDefinitions>
<Image Grid.Row="0" Grid.Column="0"
Source="login.png"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Aspect="Fill" />
<Label Grid.Row="0" Grid.Column="0"
Text="Bem vindo"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
HorizontalTextAlignment="Start"
VerticalTextAlignment="Center"
TextColor="White"
FontSize="22"/>
<Label Grid.Row="1"
Text="linha 2"
BackgroundColor="Coral"/>
<Button Grid.Row="2"
Text="linha 3"
BackgroundColor="DarkRed"/>
</Grid>
I have using AppCompact Themes in xamarin forms android when keyboard popup its hide last row of grid
Before Keyboard Popup see Image
Below is my code. I've created the grid having title, description. I want to show the camera icon and its bar above the keyboard when it comes and go back to the bottom of the screen when the keyboard hides.
<Grid RowSpacing="0" VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="80" />
<RowDefinition Height="*" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<StackLayout
Grid.Row="0"
Padding="10,8"
BackgroundColor="White"
HorizontalOptions="FillAndExpand"
Orientation="Horizontal">
<Entry
x:Name="GeneralPostTitle"
Margin="10,10,10,0"
FontSize="20"
HorizontalOptions="FillAndExpand"
Placeholder="Title"
PlaceholderColor="Gray"
TextColor="Black"
VerticalOptions="End" />
</StackLayout>
<StackLayout
Grid.Row="1"
Padding="10,0"
BackgroundColor="White"
HorizontalOptions="FillAndExpand"
Spacing="0"
VerticalOptions="FillAndExpand">
<StackLayout Padding="0" VerticalOptions="Fill">
<customRenderer:PlaceholderEditor
x:Name="EditorDescription"
Margin="10,10,10,0"
FontSize="22"
HeightRequest="130"
HorizontalOptions="Fill"
Placeholder="Add Description"
PlaceholderTextColor="Gray"
TextColor="Gray" />
</StackLayout>
<ScrollView Padding="10" Orientation="Horizontal">
<StackLayout
x:Name="Images"
HorizontalOptions="FillAndExpand"
Orientation="Horizontal"
Spacing="5" />
</ScrollView>
</StackLayout>
<StackLayout
Grid.Row="2"
Padding="20,0"
BackgroundColor="#FAFAFA">
<Image
Aspect="AspectFit"
HeightRequest="40"
HorizontalOptions="StartAndExpand"
WidthRequest="30">
<Image.Source>
<OnPlatform
x:TypeArguments="ImageSource"
Android="camera"
WinPhone="Icons/camera.png"
iOS="Icons/camera.png" />
</Image.Source>
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="ImagePost_OnTapped" />
</Image.GestureRecognizers>
</Image>
</StackLayout>
</Grid>
After Keyboard Popup see Image
You need to set SoftInput to AdjustResize in order for Android to resize the views so they stay visible. In Forms, you can do this with the platform specifics feature in Forms 2.3.3.
Check out this Gist on how to do this in OnCreate(). Note the workaround that's needed to remove an underlay added to the status bar in API 21+.