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?
Related
I am working with a collectionview using GridItemsLayout orientation=“Vertical” Span=“2”.
When I click on a button that expands the lower part of my grid item. Currently only by using ItemSizingStrategy.MeasureAllItems I am able to get the lower part to expand. I was wondering if there is a way of controlling the item positioning on the image so the images always align and only the lower half expands evenly.
I am aware each item has its own layout, but this looks messy. I’ve read the documentation mention this type of sizing.
<ContentPage.Content>
<StackLayout>
<CollectionView x:Name="CollectionList"
VerticalOptions="FillAndExpand"
ItemsSource="{Binding Shares}"
IsGrouped="True"
ItemSizingStrategy="MeasureAllItems">
<!--HEADER-->
<CollectionView.GroupHeaderTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal"
Padding="5"
BackgroundColor="#f7f7fb">
<Label x:Name="labelname"
Text="{Binding GroupKey}"
/>
<Button Text=" More"
FontSize="16"
Clicked="OpenButton_Clicked"/>
</StackLayout>
</DataTemplate>
</CollectionView.GroupHeaderTemplate>
<!--TEMPLATING-->
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical" Span="2" />
</CollectionView.ItemsLayout>
<!--BODY-->
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="viewmodels:ShareViewModel">
<Grid Padding="5" Margin="1,0,1,0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ImageButton x:Name="image"
Source="{Binding ImageLink}"
WidthRequest="150"
Clicked="FullImageView"
Grid.ColumnSpan="2"
Aspect="AspectFill"
Grid.Row="0"
Grid.Column="0"/>
<Label FontSize="16"
Text="{Binding Name}"
Grid.Row="1"
Grid.Column="0"/>
<Label x:Name="label_more"
Text="More"
Grid.Row="1"
Grid.Column="1"
HorizontalTextAlignment="End"/>
<Label
Text="{Binding CreateDate}"
Grid.Row="2"
Grid.Column="0"/>
<ImageButton IsVisible="{Binding TVNImageSet}"
Command="{Binding BindingContext.ToggleTVNCommand, Source={x:Reference Name=sharepage}}"
CommandParameter="{Binding .}"
Source="addresscard.png"
Grid.Row="2"
Grid.Column="1">
</ImageButton>
<!--Lower Section if the card is tapped (EXPAND)-->
<StackLayout
IsVisible="{Binding TVNVisible}"
Grid.Row="3"
Grid.ColumnSpan="2">
<StackLayout Orientation="Horizontal"
IsVisible="{Binding PhoneVisible}"
ClassId="{Binding Phone}">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"
NumberOfTapsRequired="1"
/>
</StackLayout.GestureRecognizers>
<Image Source="call.png"
WidthRequest="15"/>
<Label
FontSize="12"
Text="{Binding Phone}" />
</StackLayout>
<Label
FontSize="12"
Text="{Binding Address}"
IsVisible="{Binding AddressVisible}">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_1" NumberOfTapsRequired="1"/>
</Label.GestureRecognizers>
</Label>
</StackLayout>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
All BindingContext.ToggleTVNCommand does is set TVNVisible to true which shows the lower half the "expanding potion". I don't need to use collection view if there is an easier way fo displaying this data, but CollectionVView seemed like the best choice for the layout and item source I wanted.
After digging around GitHub forums on bugs and updates for Xamarin, someone mentioned to just work with SyncFusion's sfListview the membership is not that bad and my company is willing to pay for it if it makes working with Xamarin easier.
That wasn't the solution I was hoping for, but it works and their customer support is great.
below is the reference
https://help.syncfusion.com/xamarin/listview/working-with-sflistview
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 have a problem. I want to make a custom header, so I created this stacklayout:
<StackLayout VerticalOptions="Start" HeightRequest="50" HorizontalOptions="CenterAndExpand">
<Image HorizontalOptions="Start" Source="Logo.png"/>
<Image HorizontalOptions="Start" Source="Title_Dark.png"/>
</StackLayout>
Now I want to put it above the following code:
<ContentPage.Content>
<ListView x:Name="ListViewMain" VerticalOptions="FillAndExpand" BackgroundColor="#212121" SelectionMode="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<Label HeightRequest="1" BackgroundColor="#E3E3E3" />
<Grid x:Name="GridMain">
<Grid.RowDefinitions>
<RowDefinition Height="40" x:Name="Row0_Height"/>
<RowDefinition Height="180" x:Name="Row1_Height"/>
<RowDefinition Height="180" x:Name="Row2_Height"/>
<RowDefinition Height="40" x:Name="Row3_Height"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40" x:Name="Column0_Width" />
<ColumnDefinition Width="*" x:Name="Column1_Width" />
<ColumnDefinition Width="40" x:Name="Column2_Width" />
</Grid.ColumnDefinitions>
<Label Text="{Binding Creator}" TextColor="White" FontSize="Body" FontAttributes="Bold" Grid.Column="1" Grid.Row="0" VerticalOptions="Center" HorizontalOptions="Start"/>
<Image Source="VoteUp.png" VerticalOptions="End" HorizontalOptions="Center" Grid.Row="1" Grid.Column="0">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="imgVoteUp_Clicked" />
</Image.GestureRecognizers>
</Image>
<Image Source="VoteDown.png" VerticalOptions="Start" HorizontalOptions="Center" Grid.Row="2" Grid.Column="0">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="imgVoteDown_Clicked" />
</Image.GestureRecognizers>
</Image>
<Image Source="{Binding ImageLocation}" Margin="0, 0, 20, 0" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="2" BackgroundColor="AliceBlue" VerticalOptions="Fill" HorizontalOptions="Fill"/>
<Image Source="Favorite.png" Grid.Row="3" Grid.Column="1" HorizontalOptions="Start">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="imgFavorite_Clicked" />
</Image.GestureRecognizers>
</Image>
<Image Source="Send_Dark.png" Grid.Row="3" Grid.Column="1" HorizontalOptions="End"/>
<Image Source="Save_Dark.png" Grid.Row="3" Grid.Column="2" HorizontalOptions="End"/>
</Grid>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage.Content>
But when I put it right under the <ContentPage.Content> tag, it gives the following error:
The property 'Content' is set more than once
When I put it above the <ContentPage.Content> tag, my whole screen is the header.
How can I fix this?
Content can only have ONE child element. If you want to have multiple child elements, you need to place them inside of a layout container (Grid, StackLayout, etc)
I have Xamarin Forms app. My page bottom should look like this:
Currently it looks like this:
Problem is that StackLayout doesn't expand to fill space. Here is my xaml:
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="End" Spacing="0" >
<Grid ColumnSpacing="0" RowSpacing="0" HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<StackLayout HorizontalOptions="CenterAndExpand" Grid.Column="0" Grid.Row="1" BackgroundColor="Blue" >
<Label Text="First" TextColor="#FFFFFF" HorizontalOptions="CenterAndExpand" />
</StackLayout>
<StackLayout HorizontalOptions="CenterAndExpand" Grid.Column="1" Grid.Row="1" BackgroundColor="Red" >
<Label Text="Second" TextColor="#FFFFFF" HorizontalOptions="CenterAndExpand" />
</StackLayout>
</Grid>
</StackLayout>
How can I expand StackLayout inside Grid? I would like that blue and red backgrounds touch in the middle.
You set the StackLayouts to CenterAndExpand, which means they will only take up as much room as they need. You should FillAndExpand them like:
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="End" Spacing="0" >
<Grid ColumnSpacing="0" RowSpacing="0" HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<StackLayout HorizontalOptions="FillAndExpand" Grid.Column="0" Grid.Row="1" BackgroundColor="Blue" >
<Label Text="First" TextColor="#FFFFFF" HorizontalOptions="CenterAndExpand" />
</StackLayout>
<StackLayout HorizontalOptions="FillAndExpand" Grid.Column="1" Grid.Row="1" BackgroundColor="Red" >
<Label Text="Second" TextColor="#FFFFFF" HorizontalOptions="CenterAndExpand" />
</StackLayout>
</Grid>
</StackLayout>
I know its an old thread - just stumbled on this as part of trying to solve the same problem.
"FillAndExpand" isn't the magic bullet however. You can see in this code that every nested element including the Grid is set to FillAndExpand, yet there's not expanding taking place.
<ScrollView
x:Name="rightScroll"
Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="1"
Margin="0"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
BackgroundColor="Yellow">
<FlexLayout
Margin="0"
Padding="0"
AlignContent="Start"
AlignItems="Start"
BindableLayout.ItemsSource="{Binding CurrentIncidentReport.Photos}"
Direction="Column"
HorizontalOptions="FillAndExpand"
JustifyContent="SpaceBetween"
VerticalOptions="FillAndExpand">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Grid HorizontalOptions="FillAndExpand" BackgroundColor="DarkOrange">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition x:Name="textColumn"/>
</Grid.ColumnDefinitions>
<Image
Grid.Column="0"
Aspect="Fill"
HeightRequest="{StaticResource IconSize}"
Source="{Binding Photo.Source}"
VerticalOptions="CenterAndExpand"
WidthRequest="{StaticResource IconSize}" />
<!-- The editor sizes in jumps matching text size. Have to size the image to the editor not the other way around -->
<Frame
Grid.Column="1"
Margin="0"
Padding="3"
BorderColor="Red"
HeightRequest="{StaticResource IconSize}"
HorizontalOptions="FillAndExpand">
<Frame.Triggers>
<DataTrigger
Binding="{Binding HasValidDescription}"
TargetType="Frame"
Value="True">
<Setter Property="BorderColor" Value="Transparent" />
</DataTrigger>
</Frame.Triggers>
<controls:CustomEditor
x:Name="descEditor"
Margin="0,4,0,4"
BackgroundColor="White"
HorizontalOptions="FillAndExpand"
Keyboard="Chat"
Placeholder="Enter description of photo"
PlaceholderColor="Gray"
Text="{Binding Description, Mode=TwoWay}"
TextColor="Black"
Unfocused="CustomEditor_Unfocused" />
</Frame>
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</FlexLayout>
</ScrollView>
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.