This might be an easy solution but for some reason I couldn't find the solution online.
I have two views. One view is a grid and the other is a button. The Grid View is showing different views (boxview, label, etc..)
But underneath it is a button view. But this view is not included in the Grid View. I cannot put it inside the Grid View because of reasons. I just wanted to know if there's a possibility for it to be clickable without moving the views or even if there's a view on top of it?
Here's how it looks like:
<?xml version="1.0" encoding="UTF-8" ?>
<ContentView
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="PlayUIArea.NotificationConfirmView">
<ContentView.Content>
<Grid BackgroundColor="Blue">
<BoxView
WidthRequest="100"
VerticalOptions="Fill"
HorizontalOptions="Start"
BackgroundColor="Black" />
<Button Text="Confirm"
OnClick="Button_Click"
VerticalOptions="Start"
HorizontalOptions="Center" />
<Grid BackgroundColor="Red" Margin="100,0,0,0" Padding="-100,0,0,0">
<Label Text="Label Here"
HorizontalOptions="Center"
VerticalOptions="Center" />
</Grid>
</Grid>
</ContentView.Content>
</ContentView>
Is there anyway to make this clickable?
I am a bit late but I think I found a solution to this.
<Grid>
<WebView Grid.Row ="1" Source="[insert random embedded youtube source]"/>
<RelativeLayout Grid.Row ="1" InputTransparent="True" CascadeInputTransparent="False">
<Button CornerRadius="0" Command="{Binding GoToVideoFullscreen}"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.8}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.9}"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=Constant, Constant=17}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=Constant, Constant=17}"/>
</RelativeLayout>
</Grid>
I had a similar problem, where I wanted to overlap a WebView with a custom button. But my RelativeLayout, which I used to place the button was eating all the inputs and the WebView could not be used anymore.
So I added InputTransparent="True" and CascadeInputTransparent="False" to the RelativeLayout. The InputTransparent="True" makes it invisible to inputs, the CascadeInputTransparent="False" prevents the InputTransparent value from inheriting to the children (in this case my button).
Documentation:
https://learn.microsoft.com/de-de/dotnet/api/xamarin.forms.visualelement.inputtransparent?view=xamarin-forms
https://learn.microsoft.com/en-us/dotnet/api/xamarin.forms.layout.cascadeinputtransparent?view=xamarin-forms
Agree with #G.Mich , you should put all of elements in one layout . For example you can put them in a StackLayout
<ContentPage.Content>
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Button Onclick="Button_Clicked" /> <!-- This isn't clickable -->
<Grid>
your code here
</Grid>
</StackLayout>
</ContentPage.Content>
place the button on top of the Grid by placing it after the Grid in the XAML
<ContentPage.Content>
<Grid>
My code here
</Grid>
<Button Onclick="Button_Clicked" /> <!-- This isn't clickable -->
</ContentPage.Content>
Related
I'm working on a cross platform app on both iOS and Android.
Now I want to display some searched result in a big grid, every cell can be clicked. There should be 3 results in every row, and every cell in a same row should has a same height with a shadow frame. Every result may have a different height.
Here is a image demonstrated what I want (just like Excel):
Firstly, I tried to use a BindableLayout Grid, which has an indexed item list. Every item has a Row and a Col property to fill into a cell. But the Grid's height is different.
Here is the xaml.
<ContentPage.BindingContext>
<mvvm:GridViewModel />
</ContentPage.BindingContext>
<ContentPage.Content>
<StackLayout Margin="5,50,5,0" >
<Label Text="Result:" />
<ScrollView x:Name="scrollViewResult" VerticalOptions="StartAndExpand">
<Grid BindableLayout.ItemsSource="{Binding GridResult}" ColumnDefinitions="*,*,*" RowDefinitions="Auto" VerticalOptions="StartAndExpand">
<BindableLayout.ItemTemplate>
<DataTemplate>
<!-- Every cell is a nested Grid. Using grid is for the purpose of button.-->
<Grid x:Name="NestedGrid" Grid.Row="{Binding Row}" Grid.Column="{Binding Col}" RowDefinitions="Auto" ColumnDefinitions="*" >
<!-- Frame for the corner radius and shadow.-->
<Frame Grid.Row="0" Grid.Column="0" CornerRadius="5" Margin="1">
<!-- Label text is real display text.-->
<Label Text="{Binding Value}" Margin="-15" FontSize="Small" LineBreakMode="WordWrap" HorizontalOptions="Center" VerticalOptions="StartAndExpand" HorizontalTextAlignment="Center"/>
</Frame>
<!-- Here placing a hole-cell button for a better click gesture. -->
<Button Grid.Row="0" Grid.Column="0" BackgroundColor="Transparent" Clicked="Button_Clicked" Margin="5"/>
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</Grid>
</ScrollView>
</StackLayout>
</ContentPage.Content>
It likes below. emmmmm, not good (a BindableLayout Grid):
Then, I tried to use nested BindableLayout Grid(only one row) in a BindableLayout StackLayout. Every item in StackLayout is a list, every item in the list has a Col property to fill into a cell. Act a little better but not enough, for some short text will still hold large blank, and some has different height in a row.
<ContentPage.BindingContext>
<mvvm:GridInGridViewModel />
</ContentPage.BindingContext>
<ContentPage.Content>
<StackLayout Margin="5,50,5,0" >
<Label Text="Result:" />
<ScrollView x:Name="scrollViewResult" VerticalOptions="FillAndExpand">
<StackLayout BindableLayout.ItemsSource="{Binding GridResult}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<!-- Every Grid has one row and 3 columns.-->
<Grid x:Name="ARowGrid" Margin="5,5,5,0" ColumnSpacing="5" RowSpacing="15" RowDefinitions="Auto" ColumnDefinitions="30*,30*,30*" BindableLayout.ItemsSource="{Binding Items}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<!-- Every cell in ARowGrid is a nested Grid. Using grid is for the purpose of button.-->
<Grid x:Name="NestedGrid" Grid.Row="0" Grid.Column="{Binding Col}" RowDefinitions="Auto" ColumnDefinitions="*" >
<!-- Frame for the corner radius and shadow.-->
<Frame Grid.Row="0" Grid.Column="0" CornerRadius="5" Margin="0">
<!-- Label text is real display text.-->
<Label Text="{Binding Value}" Margin="-15" FontSize="Small" LineBreakMode="WordWrap" HorizontalOptions="Center" VerticalOptions="Start" HorizontalTextAlignment="Center"/>
</Frame>
<!-- Here placing a hole-cell button for a better click gesture. -->
<Button Grid.Row="0" Grid.Column="0" BackgroundColor="Transparent" Clicked="Button_Clicked" Margin="5"/>
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</ScrollView>
</StackLayout>
</ContentPage.Content>
It acts like this (a BindableLayout Grid in BindableLayout StackLayout):
So is there any way to adjust height of ever row of a grid to fit the content's height, with every cell in a row has the same height, the height is the max height of content(may be add some margin).
Added 1.======================
I tried the collection view. It not works well too.
The Xamarin as follows.
<ContentPage.BindingContext>
<mvvm:GridViewModel />
</ContentPage.BindingContext>
<ContentPage.Content>
<StackLayout Margin="5,50,5,0" >
<Label Text="Result:" />
<ScrollView x:Name="scrollViewResult" VerticalOptions="StartAndExpand">
<CollectionView ItemsSource="{Binding GridResult}" VerticalOptions="StartAndExpand">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical"
Span="3"
VerticalItemSpacing="5"
HorizontalItemSpacing="5" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<!-- Every cell is a nested Grid. Using grid is for the purpose of button.-->
<Grid x:Name="NestedGrid" RowDefinitions="Auto" ColumnDefinitions="*" VerticalOptions="Start">
<!-- Frame for the corner radius and shadow.-->
<Frame Grid.Row="0" Grid.Column="0" CornerRadius="5" Margin="1">
<!-- Label text is real display text.-->
<Label Text="{Binding Value}" Margin="-15" FontSize="Small" LineBreakMode="WordWrap" HorizontalOptions="Center" VerticalOptions="StartAndExpand" HorizontalTextAlignment="Center"/>
</Frame>
<!-- Here placing a hole-cell button for a better click gesture. -->
<Button Grid.Row="0" Grid.Column="0" BackgroundColor="Transparent" Clicked="Button_Clicked" Margin="5"/>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</ScrollView>
</StackLayout>
</ContentPage.Content>
Here is the result. Emm, not well.
CollectionView result
I did a test on myside and I found out that the RowDefinitions of inside grid is auto, if you set it as "*", the cells will have the same heigt.As microsoft document says about grid length:
The GridLength struct specifies a row height or a column width in terms of the GridUnitType enumeration, which has three members:
Auto – the row height or column width is autosized based on the cell
contents (Auto in XAML).
Star – leftover row height or column width is
allocated proportionally (a number followed by * in XAML).
Absolute – the row height or column width is a value in device-independent units (a number in XAML).
As what i mentioned above, adding a hidden label in a hidden frame can solve this problem. Also I set the Button's HeightRequest to a small value(just 1 row) and set Margin to a fixed value(just 5).
Here is the 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:mvvm="clr-namespace:RecForYou.Mvvm"
x:Class="RecForYou.GridInGridPage">
<ContentPage.BindingContext>
<mvvm:GridInGridViewModel />
</ContentPage.BindingContext>
<ContentPage.Content>
<StackLayout Margin="5,50,5,0" >
<Label Text="Result:" />
<ScrollView x:Name="scrollViewResult" VerticalOptions="FillAndExpand">
<StackLayout BindableLayout.ItemsSource="{Binding GridResult}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<!-- Every Grid has one row and 3 columns.-->
<Grid x:Name="ARowGrid" Margin="5,5,5,0" ColumnSpacing="5" RowSpacing="15" RowDefinitions="Auto" ColumnDefinitions="30*,30*,30*" BindableLayout.ItemsSource="{Binding Items}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<!-- Every cell in ARowGrid is a nested Grid. Using grid is for the purpose of button.-->
<Grid x:Name="NestedGrid" Grid.Row="0" Grid.Column="{Binding Col}" RowDefinitions="Auto" ColumnDefinitions="*" >
<!-- Frame for the corner radius and shadow.-->
<Frame Grid.Row="0" Grid.Column="0" CornerRadius="5" Margin="0">
<!-- Label text is real display text.-->
<Label Text="{Binding Value}" Margin="-15" FontSize="Small" LineBreakMode="WordWrap" HorizontalOptions="Center" VerticalOptions="Start" HorizontalTextAlignment="Center"/>
</Frame>
<Frame Grid.Row="0" Grid.Column="0" CornerRadius="5" Margin="0" BackgroundColor="Transparent">
<!-- Label text is real display text.-->
<Label Text="{Binding HiddenValue}" Margin="-15" FontSize="Small" LineBreakMode="WordWrap" HorizontalOptions="Center" VerticalOptions="Start" HorizontalTextAlignment="Center" TextColor="Transparent"/>
</Frame>
<!-- Here placing a hole-cell button for a better click gesture. -->
<Button Grid.Row="0" Grid.Column="0" BackgroundColor="Transparent" Clicked="Button_Clicked" Margin="5" HeightRequest="10"/>
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</ScrollView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
And the hole project is in github
Here is the result.
result
I don't know if there is any performance issues for another frame and another label.
Is there any better solution?
Hi i'm trying to place 2 image in xamarin forms using stackLayout.But it adds some space at the top of the form.I Used Blank Project.
my code is
<StackLayout>
<Image Source="review.jpg"
BackgroundColor="Transparent"
WidthRequest="300"
HeightRequest="100"
VerticalOptions="Start" HorizontalOptions="FillAndExpand"
FlexLayout.Grow="1">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="Navigate_review"/>
</Image.GestureRecognizers>
</Image>
<Image Source="upload.jpg"
BackgroundColor="Transparent"
WidthRequest="320"
HeightRequest="100"
VerticalOptions="Start" HorizontalOptions="FillAndExpand"
FlexLayout.Grow="1">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="Navigate_upload"/>
</Image.GestureRecognizers>
</Image>
</StackLayout>
i am getting this output:
Output Image 1
Output Image 2
It adds some extra space at the top of the page. how to set the layout to remove this space?
The code you post does not have any issue.
I reckon your app is created with Tabbed template. If that is the case, the empty space at the top is actually the tab. As shown in this image.
If you create a Blank project (not Tabbed nor MasterDetails), it will not have the empty spaces at the top. As shown in this image.
You can use the Margin attribute to remove the excess space on top, bottom, right or left. Let's assume, if we using a table view and it produces the 20 pixel excess space on top of the display. So we can reduce that excess space by using
<TableView Margin="0,-20,0,0" >
<TableVie/>
-20 using for reduce the excess 20pix😀
I think the problem is you are testing on emulators.Real devices will not show this issue I hope.
StackLayout and Grid have default spacing of 6. On StackLayout you can set Spacing. For more details, you can refer to this Document
Try this snippet:
<StackLayout
Spacing="0">
<Image
Source="hintsicon"
BackgroundColor="Transparent"
WidthRequest="300"
HeightRequest="100"
Aspect="Fill"
VerticalOptions="Start"
HorizontalOptions="FillAndExpand">
<Image.GestureRecognizers>
<TapGestureRecognizer
Tapped="Navigate_review" />
</Image.GestureRecognizers>
</Image>
<Image
Source="hintsicon"
BackgroundColor="Transparent"
WidthRequest="320"
HeightRequest="100"
Aspect="Fill"
VerticalOptions="Start"
HorizontalOptions="FillAndExpand">
<Image.GestureRecognizers>
<TapGestureRecognizer
Tapped="Navigate_upload" />
</Image.GestureRecognizers>
</Image>
</StackLayout>
I think you are using like below in your App.xaml.cs page:
MainPage = new NavigationPage(new MainPage());
When starting the app I get the UI as I want it. When returning to the same page I get the gap at the top. How can I fix this?
All navigation uses the Application.Current.MainPage = new SomePage(); shape.
The XAML is trivial:
<?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="ShipShapeMobile.LandingPage"
BackgroundImage="Gradient640x1136.png"
>
<ContentPage.Content >
<Grid
x:Name="grid"
>
<StackLayout
HorizontalOptions="Center"
VerticalOptions="Center"
>
<Image
HorizontalOptions="Center"
Source="ShipShapeShipA448x591.png"
VerticalOptions="Center"
Margin="50,15,50,15"
/>
<Image
HorizontalOptions="Center"
Source="TextOnlySS.png"
VerticalOptions="CenterAndExpand"
/>
<Image Source="hr7.png" Margin="20,10,20,10" />
<Button
x:Name="btnSignIn"
BackgroundColor="DodgerBlue"
BorderColor="White"
BorderWidth="1"
Clicked="BtnSignIn_OnClicked"
CornerRadius="15"
Image="Icon29.png"
Margin="50,10,50,10"
Text="SIGN UP"
TextColor="White"
/>
</StackLayout>
</Grid>
</ContentPage.Content>
It looks like in your LandingPage NavigationBar being displayed. Hide it in your xaml class itself.
NavigationPage.HasNavigationBar="false"
Use this in your top tag of ContentPage.
I am using Xamarin.Forms to build my app. In the Login Page, I have the following layout
<ScrollView>
<Grid
RowSpacing="{StaticResource MediumSpacing}"
ColumnSpacing="{StaticResource MediumSpacing}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--Two stackLayouts-->
<!--StackLayout 1-->
<StackLayout Spacing="0" Padding="0">
<!--Three stacklouts here-->
<!--First-->
<StackLayout>
<StackLayout.Spacing>
<OnPlatform x:TypeArguments="x:Double" Android="12" iOS="30" WinPhone="12"/>
</StackLayout.Spacing>
<StackLayout.Padding>
<OnPlatform x:TypeArguments="Thickness" Android="32,24,32,24" iOS="16,24,16,24" WinPhone="32,24"/>
</StackLayout.Padding>
<imagecircle:CircleImage
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="95" HeightRequest="95"
BorderColor="{StaticResource Primary}"
Aspect="AspectFill"
x:Name="CircleImageAvatar"/>
<Label HorizontalTextAlignment="Center"
HorizontalOptions="FillAndExpand"
StyleId="LoginPageIdentifier"
LineBreakMode="WordWrap"
FontSize="Large"
TextColor="{DynamicResource DetailTextColor}"
Text="Single Sign On">
<Label.FontSize>
<OnPlatform x:TypeArguments="x:Double" Android="15" iOS="15" WinPhone="15"/>
</Label.FontSize>
</Label>
</StackLayout>
<!--Second Stack Layout-->
<StackLayout>
<StackLayout.Padding>
<OnPlatform x:TypeArguments="Thickness" Android="32,0" iOS="32,0" WinPhone="32,0"/>
</StackLayout.Padding>
<StackLayout.Spacing>
<OnPlatform x:TypeArguments="x:Double" Android="0" iOS="15" WinPhone="10"/>
</StackLayout.Spacing>
<toolkit:EntryLine
Text="{Binding Email}"
Keyboard="Email"
HorizontalOptions="FillAndExpand"
Placeholder="Email Address"
x:Name="EntryEmail"
StyleId="EmailTextField"
BorderColor="#ECECEC">
<toolkit:EntryLine.HorizontalTextAlignment>
<OnPlatform x:TypeArguments="TextAlignment" iOS="Center"/>
</toolkit:EntryLine.HorizontalTextAlignment>
</toolkit:EntryLine>
<toolkit:EntryLine
Text="{Binding NamespaceUri}"
HorizontalOptions="FillAndExpand"
HorizontalTextAlignment="Center"
Placeholder="Namespace"
StyleId="EmailTextField"
Keyboard="Text"
BorderColor="#ECECEC">
<toolkit:EntryLine.HorizontalTextAlignment>
<OnPlatform x:TypeArguments="TextAlignment" iOS="Center"/>
</toolkit:EntryLine.HorizontalTextAlignment>
</toolkit:EntryLine>
</StackLayout>
<!--Third Stack Layout-->
<StackLayout>
<StackLayout.Padding>
<OnPlatform x:TypeArguments="Thickness" Android="32,16,32,0" iOS="32,25,32,0" WinPhone="32,16,32,0"/>
</StackLayout.Padding>
<StackLayout.Spacing>
<OnPlatform x:TypeArguments="x:Double" Android="0" iOS="16" WinPhone="10"/>
</StackLayout.Spacing>
<Button
Text="Sign In"
Command="{Binding LoginCommandSso}"
HorizontalOptions="FillAndExpand"
StyleId="SignInButton"
TextColor="White"
BackgroundColor="{StaticResource Primary}">
<Button.FontAttributes>
<OnPlatform x:TypeArguments="FontAttributes" iOS="Bold"/>
</Button.FontAttributes>
</Button>
</StackLayout>
</StackLayout>
<!--StackLayout 2-->
<!--Contains activity indicator and Corresponding label-->
<AbsoluteLayout>
<StackLayout
Grid.Row="1"
Padding="16,0"
VerticalOptions="Center"
Orientation="Horizontal"
HorizontalOptions="Center"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1"
IsVisible="{Binding IsBusy}">
<ActivityIndicator IsRunning="{Binding IsBusy}">
<ActivityIndicator.Color>
<OnPlatform x:TypeArguments="Color" Android="{StaticResource Primary}"/>
</ActivityIndicator.Color>
</ActivityIndicator>
<Label Text="{Binding Message}" VerticalOptions="Center" HorizontalOptions="Center" />
</StackLayout>
</AbsoluteLayout>
<!--Stack Layout 3-->
</Grid>
</ScrollView>
When run on Android Emulator I can input text in "EntryLine" and everything seems to work fine.
However, when I am trying to run it on IOS simulator, the text becomes ineditable i.e. readonly. Basically on IOS simulator everything inside StackLayout is becoming "ReadOnly"
I also tried using forms "Entry" instead of FormsToolKit.EntryLine, but no result.
I am facing an issue in above code itself, adding just a "Entry" in xaml and testing on IOS simulator works fine.
Have already asked the same question on Xamarin Forums, but haven't found any answer.
EDIT 1 - Added the complete stack layout.
Using -
Visual Studio 2017, Windows 10, Xamarin - 2.3.4.247
FormsToolKit - 1.1.18 IOS - MacBook Air 10.3
Your <AbsoluteLayout> overlaps your content and catches all input events. You'll have to try setting its IsVisible Property to false (or the InputTransparent property to try). At least as long as the Activity Indicator is not running.
(If that is not working you might try to handle it with an effect (or a custom renderer) that sets input transparancy on iOS specifically)
(You might also consider not placing it inside the scroll view, since it would get scrolled away eventually)
What i was trying to do is adding toolbar to a content page.
after adding this code under StackLayout
<ContentPage.ToolbarItems>
<ToolbarItem Icon="plus.png"/>
</ContentPage.ToolbarItems>
for additional info. if i put the upper code in same position as top StackLayout the toolbar just wont appear.
i faced an error and could't find same error any where else.
this is my xaml file content.
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage
xmlns:ic="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="EodiRoad.SocialPage">
<StackLayout>
<ContentPage.ToolbarItems>
<ToolbarItem Icon="plus.png"/>
</ContentPage.ToolbarItems>
<ListView x:Name="socialPostsListView" HasUnevenRows="true" IsPullToRefreshEnabled="true">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Vertical" Padding="5">
<StackLayout Orientation="Horizontal" Padding="5">
<ic:CircleImage
x:Name="userProfileImage"
HeightRequest="50"
WidthRequest="50"
Aspect="AspectFill"
Source="{Binding post.uploader.userProfile.userThumbnail}"
/>
<Label Text="{Binding post.uploader.username}"/>
</StackLayout>
<Image
x:Name="postImage"
Source="{Binding post.image}"
Aspect="AspectFill"
/>
<StackLayout Orientation="Horizontal">
<Button Text="like"/>
<Button Text="share"/>
</StackLayout>
<StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand">
<Label Text="{Binding post.content}"/>
<Label Text="{Binding post.uploadedTime}" TextColor="Gray"/>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
and this is the error.
No property, bindable property, or event found for 'ToolbarItems'
and the full error.
/Users/UZU/Google Drive/Apps/EodiRoad/EodiRoadXamarin/EodiRoad/EodiRoad/EodiRoad.Views.SocialPage.xaml(5,5): Error: Position 13:5. No property, bindable property, or event found for 'ToolbarItems' (EodiRoad)
what am i doing wrong here? and whats that error about, and how to fix it?!
i believe in you guys.
This snippet
<ContentPage.ToolbarItems>
<ToolbarItem Icon="plus.png"/>
</ContentPage.ToolbarItems>
can mean 2 things, depending on context:
Let's set the ToolbarItems property (or ToolbarItemsProperty BindableProperty) of this ContentPage (if the parent node is a ContentPage, or
Let's set the Attached BindableProperty ContentPage.ToolbarItemsProperty to the current BindableObject.
As you are using this in a StackLayout, this is interpreted as the 2nd, but such a property doesn't exists ! so it fails.
Place that directly in the ContentPage and it'll work like a charm
<ContentPage ...>
<ContentPage.ToolbarItems>
<ToolbarItem Icon="plus.png"/>
</ContentPage.ToolbarItems>
<StackLayout .../>
</ContentPage>
About the ToolbarItems not appearing, depending on the platform you are running on, it might require the ContentPage to be packed in a NavigationPage.
You need to add the ToolbarItems outside of the StackLayout Try this:
<ContentPage
xmlns:ic="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="EodiRoad.SocialPage">
<ContentPage.ToolbarItems>
<ToolbarItem Icon="plus.png"/>
</ContentPage.ToolbarItems>
<StackLayout>
<!-- Your Content -->
</StackLayout>
</ContentPage>