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 a problem. I want created this ListView using the following code:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="MyApp.HomePage">
<ContentPage.Content>
<ListView x:Name="ListViewMain" VerticalOptions="FillAndExpand" BackgroundColor="#212121" SelectionMode="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<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}" 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>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage.Content>
</ContentPage>
But now I want to add a line above the first Label tag. To create the line I want I use this code:
<Label HeightRequest="1" BackgroundColor="#E3E3E3" />
But I don't know where to put it and how, because it is a Grid. I want to add it before the Grid, but that gives me the error:
The property 'View' is set more than once.
What am I doing wrong and how can I fix this?
I would use a BoxView instead of a Label. You could use this layout, placing the BoxView in the same Row as the Label, but vertically aligned
the other things you could try
add another row to the Grid for the BoxView
place the Grid inside of a StackLayout with the BoxView
We've got an simple collection view for horizontal items. See code below.
<CollectionView ItemsSource="{Binding Items}" ItemsLayout="HorizontalList" ItemSizingStrategy="MeasureFirstItem" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Grid.Row="1">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10">
<Grid.GestureRecognizers>
<TapGestureRecognizer Tapped="Item_Tapped" CommandParameter="{Binding .}"></TapGestureRecognizer>
</Grid.GestureRecognizers>
<Grid.RowDefinitions>
<RowDefinition Height="150" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>
<Image
Source="{Binding ImageUrl}"
HorizontalOptions="Fill"
VerticalOptions="Fill"
Aspect="AspectFill"
HeightRequest="60"
WidthRequest="60" />
<Label
HorizontalOptions="Center"
Grid.Row="1"
Text="{Binding Title}"
FontAttributes="Bold"
LineBreakMode="TailTruncation" />
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
On android this works great and I've got items stand neatly next to each other. On iOS the items are overlapping each other. Cannot find why this doesn't work on iOS.
I want to add navigation bar in cart icon with badge count.
I have added cart icon in navigation bar using toolbar item. and also created badge count circle view using plugin. if i am giving margin to set that badge icon to toolbar item it is hide behind tabbed page.
It is not displaying on cart icon.
Please help me out this.
As per above image i want to set badge count with tabbed page.
Below is my XAML Code.
<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:lang="clr-namespace:Conekto"
xmlns:controls="clr-namespace:Conekto.Controls;"
x:Class="ProjectName.Pages.SalePage">
<TabbedPage.Children>
<ContentPage Title="{lang:Translate PRODUCTLIST}">
<Grid Margin="10,10,10,0" BackgroundColor="White">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="0" Text="charge 15,123" Style="{StaticResource primaryButton}" />
<SearchBar x:Name="txtSearch" Grid.Row="1" Grid.Column="0" TextChanged="MySearchBarOnTextChanged" Placeholder="{lang:Translate Search}" SearchCommand="{Binding SearchCommand, Mode=TwoWay}" CancelButtonColor="Blue" Text="{Binding SearchText, Mode=TwoWay}" Style="{StaticResource labelgreycolour}" WidthRequest="50" HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand" />
<StackLayout Grid.Row="2" Grid.Column="0" VerticalOptions="StartAndExpand" HorizontalOptions="FillAndExpand">
<ListView x:Name="listView" ItemsSource="{Binding ProductList}" HasUnevenRows="True" IsPullToRefreshEnabled="true" RefreshCommand="{Binding RefreshCommand}" IsRefreshing="{Binding IsRefreshing}" ItemAppearing="listView_ItemAppearing" ItemSelected="listView_ItemSelected" SelectedItem="{Binding listView_ItemSelected, Mode=TwoWay}" BackgroundColor="White" HorizontalOptions="FillAndExpand">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Margin="0,5,0,5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10*" />
<ColumnDefinition Width="50*" />
<ColumnDefinition Width="40*" />
</Grid.ColumnDefinitions>
<Image Source="add" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Aspect="AspectFit" HeightRequest="30" WidthRequest="30" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding BindingContext.AddProductCommand, Source={x:Reference listView}}" CommandParameter="{Binding .}" NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
</Image>
<Label Grid.Row="0" Grid.Column="1" VerticalOptions="CenterAndExpand" VerticalTextAlignment="End" Text="{Binding ProductName,Mode=TwoWay}" Style="{StaticResource entrylogin}" />
<Label Grid.Row="1" Grid.Column="1" VerticalOptions="CenterAndExpand" VerticalTextAlignment="End" Text="{Binding Cost,Mode=TwoWay,StringFormat='XOF {0}'}" Style="{StaticResource listViewsublabel}" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</Grid>
<controls:FloatingActionButton Margin="0,0,20,20" Grid.Row="0" x:Name="FABCart" HorizontalOptions="End" VerticalOptions="End" WidthRequest="60" HeightRequest="60" Image="cart" ButtonColor="#09999A" Clicked="FabCart_Clicked" />
<controls:BadgeView Margin="0,0,32,52" Grid.Row="0" Text="{Binding TotalCartItem, Mode=TwoWay}" BadgeColor="White" HorizontalOptions="End" VerticalOptions="End" />
</Grid>
</ContentPage>
<ContentPage Title="{lang:Translate KEYPAD}">
<ContentPage.BackgroundColor>
<OnPlatform x:TypeArguments="Color">
<OnPlatform.Platforms>
<On Platform="iOS" Value="Black" />
<On Platform="Android" Value="#eee" />
</OnPlatform.Platforms>
</OnPlatform>
</ContentPage.BackgroundColor>
<Grid x:Name="controlGrid" Margin="0,0,0,0" Padding="0,0,0,0" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Grid.ColumnSpacing>
<OnPlatform x:TypeArguments="x:Double">
<OnPlatform.Platforms>
<On Platform="iOS" Value="1" />
<On Platform="Android" Value="0" />
</OnPlatform.Platforms>
</OnPlatform>
</Grid.ColumnSpacing>
<Grid.RowSpacing>
<OnPlatform x:TypeArguments="x:Double">
<OnPlatform.Platforms>
<On Platform="iOS" Value="1" />
<On Platform="Android" Value="0" />
</OnPlatform.Platforms>
</OnPlatform>
</Grid.RowSpacing>
<Grid.RowDefinitions>
<RowDefinition Height="74" />
<RowDefinition Height="80" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Text="charge 15,123" Margin="12,12,12,12" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Style="{StaticResource primaryButton}" />
<Label Text="Add note" FontSize="10" Grid.Column="0" Grid.Row="1" HorizontalTextAlignment="Center" VerticalTextAlignment="End" TextColor="Black" />
<Label x:Name="lblVal" Margin="0,0,16,0" Grid.Row="1" Grid.Column="1" HorizontalTextAlignment="End" VerticalTextAlignment="Center" TextColor="Black" FontSize="30" Grid.ColumnSpan="2" VerticalOptions="End" />
<Button Clicked="Button_Clicked" Text ="7" Grid.Row="2" Grid.Column="0" Style="{StaticResource plainButton}" />
<Button Clicked="Button_Clicked" Text = "8" Grid.Row="2" Grid.Column="1" Style="{StaticResource plainButton}" />
<Button Clicked="Button_Clicked" Text = "9" Grid.Row="2" Grid.Column="2" Style="{StaticResource plainButton}" />
<Button Clicked="Button_Clicked" Text = "4" Grid.Row="3" Grid.Column="0" Style="{StaticResource plainButton}" />
<Button Clicked="Button_Clicked" Text = "5" Grid.Row="3" Grid.Column="1" Style="{StaticResource plainButton}" />
<Button Clicked="Button_Clicked" Text = "6" Grid.Row="3" Grid.Column="2" Style="{StaticResource plainButton}" />
<Button Clicked="Button_Clicked" Text = "1" Grid.Row="4" Grid.Column="0" Style="{StaticResource plainButton}" />
<Button Clicked="Button_Clicked" Text = "2" Grid.Row="4" Grid.Column="1" Style="{StaticResource plainButton}" />
<Button Clicked="Button_Clicked" Text = "3" Grid.Row="4" Grid.Column="2" Style="{StaticResource plainButton}" />
<Button Clicked="ButtonClear_Clicked" Text = "C" Grid.Row="5" Grid.Column="0" Style="{StaticResource plainButton}" />
<Button Clicked="Button_Clicked" Text = "0" Grid.Row="5" Grid.Column="1" Style="{StaticResource plainButton}" />
<Button Clicked="Button_Clicked" Text = "+" Grid.Row="5" Grid.Column="2" Style="{StaticResource plainButton}" />
</Grid>
</ContentPage>
<ContentPage Title="{lang:Translate SCAN}">
</ContentPage>
</TabbedPage.Children>
And in .cs Page code i am adding cart icon in toolbar item.
ToolbarItems.Add(new ToolbarItem("Add Product", "floating", async () =>
{
//var page = new ContentPage();
//var result = await page.DisplayAlert("Title", "Message", "Accept", "Cancel");
await Navigation.PushAsync(new CreateProductPage() { Title = Helper.GetResxNameByValue("CreateProduct") });
//Debug.WriteLine("success: {0}", result);
}));
As per design i have added cart button as floating button. Please do not consider that.
To add badge on toolbar item you can hide the default tool bar by using NavigationPage.SetHasNavigationBar(this, false); then you can create your own tool bar with button having badge counter and hamburger to show and hide side menu.
On page in which hamburger button is clicked:
private void Button_Clicked(object sender, System.EventArgs e)
{
MessagingCenter.Send(this, "presnt");
}
On MasterDetail page:
MessagingCenter.Subscribe<YourPage>(this, "presnt", (sender) =>
{
IsPresented = true;
});
Also, Before making IsPresented=true, check for sliding menu is not all-ready presented.
you can check https://github.com/LeslieCorrea/Xamarin-Forms-Shopping-Cart this link for more information. But by using this method in android may make the nav bar appear below tabs, so you may need to create tabs using buttons.
<NavigationPage.TitleView>
<StackLayout Orientation="Horizontal">
<Label FontAttributes="Bold" TextColor="Black" FontSize="Medium" Text="Female Category" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"></Label>
<AbsoluteLayout Margin="0,0,5,0" HorizontalOptions="EndAndExpand">
<Frame BackgroundColor="White" BorderColor="Black" CornerRadius="50" WidthRequest="40"
Padding="0"
Margin="0,10,0,10">
<ImageButton Source="add_to_basket.png" BackgroundColor="Transparent" Clicked="ImageButton_Clicked" Padding="5"/>
</Frame>
<Frame BackgroundColor="Red" HeightRequest="30" BorderColor="Black" WidthRequest="20" CornerRadius="50" Padding="0,0,0,-10" Margin="25,5,0,0">
<Label HorizontalOptions="CenterAndExpand" Text="53" TextColor="White" />
</Frame>
</AbsoluteLayout>
</StackLayout>
</NavigationPage.TitleView>
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>