I have a requirement like adding more number of Tabs in TabbedPage .Initially it was 5 in numbers and working fine .While I am adding one more tab (say 6th ) the android version of the App is triggering a 'illegalArgumentException'
The IOS version is not triggering any error instead it loads tab from 5th position to a new listview for which the appearance is not so great.
Appreciating any solution for this .
How about using buttons and icon fonts instead of tabbedPage ?
You can show buttons 6 or more .
xaml
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- Put contents here -->
<StackLayout Grid.Row="0"
Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="End"
>
<Button FontFamily="{DynamicResource MaterialFontFamily}"
Text="" FontSize="Large" TextColor="Blue"
HorizontalOptions="CenterAndExpand" BackgroundColor="Transparent" />
<Button FontFamily="{DynamicResource MaterialFontFamily}"
Text="" FontSize="Large" TextColor="Blue"
HorizontalOptions="CenterAndExpand" BackgroundColor="Transparent" />
<Button FontFamily="{DynamicResource MaterialFontFamily}"
Text="" FontSize="Large" TextColor="Blue"
HorizontalOptions="CenterAndExpand" BackgroundColor="Transparent" />
<Button FontFamily="{DynamicResource MaterialFontFamily}"
Text="" FontSize="Large" TextColor="Blue"
HorizontalOptions="CenterAndExpand" BackgroundColor="Transparent" />
<Button FontFamily="{StaticResource MaterialFontFamily}"
Text="" FontSize="Large" TextColor="Blue"
HorizontalOptions="CenterAndExpand" BackgroundColor="Transparent" />
<Button FontFamily="{DynamicResource MaterialFontFamily}"
Text="" FontSize="Large" TextColor="Blue"
HorizontalOptions="CenterAndExpand" BackgroundColor="Transparent"/>
</StackLayout>
</Grid>
Related
For example if we have a button on the mobile screen when we click on that button it will display dropdown menu,in that dropdown,clickable buttons will be displayed.
<Grid Grid.Row="1">
<Button Grid.Column="0" ClassId="Dropdowns" Text="Aktionen" Style="{DynamicResource topActBtnStyle}" FontSize="22" HorizontalOptions="StartAndExpand" xct:SideMenuView.MenuAppearanceType="SlideInOut"/>
<RelativeLayout IsVisible="True" Grid.Column="0" ClassId="Dropdowns">
<Button Text="Reset" Style="{DynamicResource topActBtnStyle}" FontSize="22" HorizontalOptions="StartAndExpand"/>
<Button Text="Exit" Style="{DynamicResource topActBtnStyle}" FontSize="22" HorizontalOptions="StartAndExpand"/>
<Button Text="Logout" Style="{DynamicResource topActBtnStyle}" FontSize="22" HorizontalOptions="StartAndExpand"/>
</RelativeLayout>
<Button Grid.Column="1" Text="{Binding UserNameText}" Style="{DynamicResource topActBtnStyle}" HorizontalOptions="EndAndExpand"/>
</Grid>
But all the buttons are displaying at the same place in row.column="0"
i want those buttons in drop down (Reset,Exit,Logout)
But all the buttons are displaying at the same place in row.column="0"
That's because you used RelativeLayout and didn't set the position for them.
But you can also use StackLayout to achieve this.
Please refer to the following code:
<StackLayout>
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="60" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" ClassId="Dropdowns" Text="Aktionen" Clicked="Button_Clicked" FontSize="22" HorizontalOptions="StartAndExpand" xct:SideMenuView.MenuAppearanceType="SlideInOut"/>
<StackLayout x:Name="mStackLayout" Orientation="Vertical" IsVisible="false" Grid.Column="0" Grid.Row="1" ClassId="Dropdowns" >
<Button Text="Reset" FontSize="22" HorizontalOptions="StartAndExpand"/>
<Button Text="Exit" FontSize="22" HorizontalOptions="StartAndExpand"/>
<Button Text="Logout" FontSize="22" HorizontalOptions="StartAndExpand"/>
</StackLayout>
<Button Grid.Column="1" Text="UserNameText" HorizontalOptions="EndAndExpand"/>
</Grid>
</StackLayout>
And function Button_Clicked
private void Button_Clicked(object sender, EventArgs e)
{
mStackLayout.IsVisible = !mStackLayout.IsVisible;
}
Note:
I used StackLayout to achieve this function. Of course, you can also use RelativeLayout to achieve it. But for your requirement, I think StackLayout is a simpler way.
For more about RelativeLayout, you can check RelativeLayout .
I asked a developer to create something like this:
Here solution is here:
<?xml version="1.0" encoding="UTF-8"?>
<StackLayout
HorizontalOptions="Center"
VerticalOptions="Center"
x:Class="J.Templates.CardButtonTemplate2"
x:Name="this"
xmlns ="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" >
<t:TextLabel
HorizontalOptions="CenterAndExpand"
HorizontalTextAlignment="Center"
Text="3 pts"
TextColor="Black"
VerticalOptions="Start" />
<Frame
BackgroundColor="Blue"
CornerRadius="10"
HasShadow="False"
Padding="0"
VerticalOptions="FillAndExpand" >
<Grid RowSpacing="0" VerticalOptions="FillAndExpand" >
<Grid.RowDefinitions>
<RowDefinition x:Name="firstRow" Height="35"/>
</Grid.RowDefinitions>
<Label
HorizontalOptions="CenterAndExpand"
HorizontalTextAlignment="Center"
Text="Easy"
TextColor="White"
VerticalOptions="CenterAndExpand"
VerticalTextAlignment="Center"
x:Name="textA" />
<Grid.GestureRecognizers>
<TapGestureRecognizer Command="{Binding TapCommand, Source={x:Reference this}}" NumberOfTapsRequired="1" />
</Grid.GestureRecognizers>
</Grid>
</Frame>
</StackLayout>
What I would like to know are two things:
a) Is this the only way I can set the height using the RowDefinition or is there another cleaner way to do this?
b) I have five of these buttons in a row and the width expands so they touch each other. How can I limit the width of the button?
Here is a simple example:
<StackLayout>
<Label Text="3 pts"/>
<Button HeightRequest="35" WidthRequest="50" CornerRadius="10"
Command="{Binding TapCommand, Source={x:Reference this}}" Text="Easy"/>
</StackLayout>
for all your HorizontalOptions and VerticalOptions, use Center. That should give you what you're looking for and simplify your code quite a bit.
As for question B, you can set the Spacing(if using a StackLayout) or ColumnSpacing(if using a Grid) to force separation between the buttons.
a) Is this the only way I can set the height using the RowDefinition or is there another cleaner way to do this?
It is easier to use a StackLayout as parent layout(manually set its HorizontalOptionsandVerticalOptions) , then you could set HeightRequest on control.
For example
<StackLayout HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand">
<Label Text="3 pts" HorizontalTextAlignment="Center"/>
<Button HeightRequest="50" CornerRadius="10" BackgroundColor="Blue" Text="Easy" TextColor="White"/>
</StackLayout>
b) I have five of these buttons in a row and the width expands so they touch each other. How can I limit the width of the button?
You could wrap Grid inside stackLayout , and create ColumnDefinitions to control their width .
<StackLayout HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand">
<Grid ColumnSpacing="0" HeightRequest="50">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Button HeightRequest="50" Grid.Column="0" CornerRadius="10" BackgroundColor="Blue" Text="Easy" TextColor="White"/>
<Button HeightRequest="50" Grid.Column="1" CornerRadius="10" BackgroundColor="Red" Text="Easy" TextColor="White"/>
<Button HeightRequest="50" Grid.Column="2" CornerRadius="10" BackgroundColor="Green" Text="Easy" TextColor="White"/>
<Button HeightRequest="50" Grid.Column="3" CornerRadius="10" BackgroundColor="Purple" Text="Easy" TextColor="White"/>
<Button HeightRequest="50" Grid.Column="4" CornerRadius="10" BackgroundColor="Orange" Text="Easy" TextColor="White"/>
</Grid>
</StackLayout>
I'm working on a Xamarin Forms project using Visual studio 2017 , I want to add a border to the web view . with black color . how to do that view xaml is below .
<StackLayout Orientation="Vertical" BackgroundColor="White" HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal" HeightRequest="60" HorizontalOptions="FillAndExpand" BackgroundColor="DarkBlue" Padding="5">
<Label x:Name="lblUserNewOnBoarding" WidthRequest="340" Text="New User Onboarding" FontAttributes="Bold" FontFamily="Roboto" FontSize="Large" TextColor="White"
HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand"></Label>
<Button x:Name="bntCancel" Text="Cancel" HeightRequest="40" BackgroundColor="#4184f3"
TextColor="White" HorizontalOptions="EndAndExpand" VerticalOptions="CenterAndExpand" Clicked="HandleCancle_Clicked" FontFamily="Roboto" FontSize="Small" FontAttributes="Bold">
<Button.Image>
<FileImageSource File="baseline_cancel_white_18dp.png" ></FileImageSource>
</Button.Image>
</Button>
</StackLayout>
<StackLayout Orientation="Vertical" HorizontalOptions="CenterAndExpand" >
<Label Text="Please agree to the following terms and conditions…" FontFamily="Roboto-Medium" FontSize="30"
HorizontalOptions="CenterAndExpand" WidthRequest="927" HeightRequest="168" Margin="5"
TextColor="Black"></Label>
<WebView x:Name="wvAgree" HeightRequest="300" WidthRequest="400" Margin="50" BackgroundColor="White" ></WebView>
<Button x:Name="btnAgree" Text="Agree" WidthRequest="190" HeightRequest="50" AnchorX="417" AnchorY="604"
BackgroundColor="#4184f3" TextColor="White" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" Clicked="HandleAgree_Clicked" FontFamily="Roboto" FontSize="Small" FontAttributes="Bold">
<Button.Image >
<FileImageSource File="Agree.png"></FileImageSource>
</Button.Image>
</Button>
<Button x:Name="btnDisAgree" Text="Disagree" WidthRequest="190" HeightRequest="50" AnchorX="417" AnchorY="673" BackgroundColor="#4184f3"
TextColor="White" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" Clicked="HandleDisAgree_Clicked" FontFamily="Roboto" FontSize="Small" FontAttributes="Bold">
<Button.Image>
<FileImageSource File="baseline_delete_48.png" ></FileImageSource>
</Button.Image>
</Button>
</StackLayout>
</StackLayout>
Wrap your WebView around Frame. So:
<Frame OutlineColor="Black">
<WebView x:Name="wvAgree" HeightRequest="300" WidthRequest="400" Margin="50" BackgroundColor="White"/>
</Frame>
Also you dont have to write a Additional closing Tag if you dont put anything between it. Pay attention how I closed that WebView tag.
This is what I'm trying to acheive. The green blob is a button(Or a stacklayout or a frame).I was able to change the the colors of the selected and unselected tabs. But I'm just not able to implement this. Any help would be appreciated.
Update
I've thrown away the TabbedPage and implemeted tabs using frames and a grid. I'm now using a RelativeLayout to get the button over the Grid. The Xaml is below
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Grid
Margin="0"
Padding="0"
ColumnSpacing="0"
HorizontalOptions="FillAndExpand"
IsClippedToBounds="False"
RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="70" />
</Grid.RowDefinitions>
<Frame
x:Name="Explore"
Grid.Row="0"
Grid.Column="0"
AutomationId="Explore"
BackgroundColor="{Binding BgColorExplore}"
ClassId="Explore"
OutlineColor="Transparent">
<Frame.GestureRecognizers>
<TapGestureRecognizer Command="{Binding TapTabCommand}" CommandParameter="{x:Reference Explore}" />
</Frame.GestureRecognizers>
<StackLayout
HorizontalOptions="FillAndExpand"
Style="{StaticResource NoSpaceStack}"
VerticalOptions="FillAndExpand">
<Image
HeightRequest="29"
HorizontalOptions="CenterAndExpand"
Source="exploreiconwhite.png"
VerticalOptions="Start"
WidthRequest="30" />
<customRenderers:ExtendedLabel
HorizontalTextAlignment="Center"
Style="{StaticResource TabbedTitle}"
Text="Explore" />
</StackLayout>
</Frame>
<Frame
x:Name="MyAccount"
Grid.Row="0"
Grid.Column="1"
AutomationId="MyAccount"
BackgroundColor="{Binding BgColorMyAccount}"
ClassId="MyAccount"
OutlineColor="Transparent">
<Frame.GestureRecognizers>
<TapGestureRecognizer Command="{Binding TapTabCommand}" CommandParameter="{x:Reference MyAccount}" />
</Frame.GestureRecognizers>
<StackLayout
HorizontalOptions="FillAndExpand"
Style="{StaticResource NoSpaceStack}"
VerticalOptions="FillAndExpand">
<Image
HeightRequest="27"
HorizontalOptions="CenterAndExpand"
Source="Myaccounticonwhite.png"
VerticalOptions="Start"
WidthRequest="30" />
<customRenderers:ExtendedLabel
HorizontalTextAlignment="Center"
Style="{StaticResource TabbedTitle}"
Text="My Account" />
</StackLayout>
</Frame>
</Grid>
<RelativeLayout BackgroundColor="Yellow" HorizontalOptions="Center">
<Frame
BorderRadius="50"
HeightRequest="67"
HorizontalOptions="Center"
OutlineColor="Transparent"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Y,
Constant=-140}"
WidthRequest="67">
<Frame.GestureRecognizers>
<TapGestureRecognizer Command="{Binding CreatePlanCommand}" />
</Frame.GestureRecognizers>
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Image
HeightRequest="32"
Source="createplaniconwhite.png"
WidthRequest="39" />
<Label
FontFamily="{StaticResource SofiaProSemiBold}"
FontSize="10"
HorizontalTextAlignment="Center"
Text="Create Plan"
TextColor="White" />
</StackLayout>
</Frame>
</RelativeLayout>
</StackLayout>
But now when I click on part of the frame which is over the tabs, the tab's tapped event fires :(...How do I make the GreenFrames tapped event fire?
I want to design a ui page in xaml wherein i want to keep the image ballotInfo.png at the top of the page and the button Next at the bottom. The user should be able to scroll through the rest of the contents. I have tried making the table view scrollable by using scrollview but it ain't working as expected. Kindly help.
Following is the XAML code that am working on.
<AbsoluteLayout>
<RelativeLayout>
<Image Source = "ballotInfo.png" Aspect="Fill" x:Name="headerImage"
RelativeLayout.WidthConstraint = "{ConstraintExpression
Type=RelativeToParent,
Property=Width,
Factor = 1}"
RelativeLayout.HeightConstraint = "{ConstraintExpression
Type = RelativeToParent,
Property=Height,
Factor=0.35}"/>
<StackLayout x:Name="entryLayout" VerticalOptions="FillAndExpand" Padding="0"
RelativeLayout.YConstraint = "{ConstraintExpression
Type=RelativeToView,
ElementName=headerImage,
Property=Height,
Factor=1}">
<TableView Intent="Form" HasUnevenRows = "true" >
<TableView.Root>
<TableSection Title="Local Admin: Ajay" >
<ViewCell>
<StackLayout Orientation="Horizontal" Padding="10,0,10,0" >
<Label Text="Ballot Title" VerticalOptions="Center" TextColor="#a2a1b8" />
<Entry HorizontalOptions="FillAndExpand" FontAttributes="Bold" HorizontalTextAlignment="End" TextColor="#151431" />
</StackLayout>
</ViewCell>
<ViewCell Height="200" >
<StackLayout Orientation="Horizontal" Padding="10,0,10,0">
<Label Text="Ballot Description" VerticalOptions="Center" TextColor="#a2a1b8"/>
<Editor VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" FontSize="Small" TextColor="#151431" />
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal" Padding="10,0,10,0">
<Label Text = "Ballot End Date" HorizontalOptions="Center" VerticalOptions="Center" TextColor="#a2a1b8" />
<StackLayout HorizontalOptions="EndAndExpand" >
<DatePicker Date="{x:Static sys:DateTime.Today}" TextColor="#151431" />
</StackLayout>
</StackLayout>
</ViewCell>
<ViewCell >
<StackLayout Orientation="Horizontal" VerticalOptions="Fill" Padding="10,0,10,0" >
<Label Text="No. of Candidates" VerticalOptions="Center" TextColor="#a2a1b8" />
<Entry HorizontalOptions="FillAndExpand" Keyboard="Numeric" HorizontalTextAlignment="End" TextColor="#151431" />
</StackLayout>
</ViewCell>
</TableSection>
</TableView.Root>
</TableView>
</StackLayout>
</RelativeLayout>
<Grid
AbsoluteLayout.LayoutBounds="0.5, 1, 1,AutoSize"
AbsoluteLayout.LayoutFlags="PositionProportional,WidthProportional">
<Button Text="Next"
VerticalOptions="End"
TextColor="White"
FontSize="15"
BackgroundColor="#ff2d55"/>
</Grid>
</AbsoluteLayout>
Replacing the AbsoluteLayout/RelativeLayout for a Grid is a cleaner solution. Here's a template for you:
<Grid
ColumnSpacing="0"
RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Grid.Row="0" />
<ScrollView Grid.Row="1">
<StackLayout
Padding="0"
x:Name="entryLayout">
</StackLayout>
</ScrollView>
<Button
Grid.Row="2"
HorizontalOptions="Center"
Text="Next"
/>
</Grid>
I am new to xaml but it seems that ScrollView is not available in xaml, but is available in xamarin. I tried this solution with no success. However, I used ScrollViewer instead which did the job.