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>
Related
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>
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 have the PageView which is defined like this
<?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:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
xmlns:view="clr-namespace:Fuse.ViewTemplates;assembly=Fuse"
prism:ViewModelLocator.AutowireViewModel="True"
x:Class="Fuse.Views.JoinPage">
<StackLayout Orientation="Vertical">
<Label Text="Games near your area .. "
VerticalOptions="Start"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
BackgroundColor="Transparent"
HorizontalOptions="CenterAndExpand" />
<ListView x:Name="listView" SelectedItem="{Binding SelcetedItem,Mode=TwoWay}"
RowHeight="150"
ItemsSource="{Binding CardList}" HasUnevenRows="True" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<view:CardViewTemplate/>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
and the CardTemplateView defined like this
<?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="Fuse.ViewTemplates.CardViewTemplate"
xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"
xmlns:local="clr-namespace:Fuse"
xmlns:viewmodel="clr-namespace:Fuse.ViewModels"
x:Name="CardView"
>
<Frame IsClippedToBounds="True"
HasShadow="True"
BackgroundColor="White" >
<Frame.OutlineColor>
<OnPlatform x:TypeArguments="Color"
Android="Gray"
iOS="Gray"/>
</Frame.OutlineColor>
<Frame.Margin>
<OnPlatform x:TypeArguments="Thickness"
Android="7" iOS="7"/>
</Frame.Margin>
<Frame.Padding>
<OnPlatform x:TypeArguments="Thickness"
Android="10" iOS="5"/>
</Frame.Padding>
<StackLayout Orientation="Horizontal">
<Grid Grid.Row="3">
<Button Text="Join"
BackgroundColor="LawnGreen" BorderRadius="10" BorderWidth="10" HorizontalOptions="EndAndExpand">
</Button>
</Grid>
</StackLayout>
</Frame>
</ContentView>
What i want to do is bind the Button to a Command in viewmodel and pass the commandParameter to get the Item in the ListView corresponding to the Grid (aka Button) . This is a custom List Template which the ListView uses , it has a Button inside of it which when clicked should return the SelectedItem in the parent .
I hope I was clear .
Any Ideas ?
The shortest way would be to paste the ContentView into your ContentPage. Then your page needs a name and you can bind:
<Button Text="Join" Command="{Binding ElementName=PageName, Path=ViewModel.Command}" CommandParameter="{Binding}"
BackgroundColor="LawnGreen" BorderRadius="10" BorderWidth="10" HorizontalOptions="EndAndExpand">
</Button>
The other way is to put the command in your CardViewModel (or whatever class you store in CardList) and just assing the command from ContentPageViewModel.
Another way is to add DependencyPropery to your ConentView to store your command.
I want to be able to display LessonView.xaml within MainPage.xaml.
Here is my attempt below.
Am i missing something important that it wont display ?
MainPage.xaml
<?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:local="clr-namespace:KanjiStudy"
x:Class="KanjiStudy.MainPage"
xmlns:views="KanjiStudy.View.LessonView">
<ContentPage.Content>
<StackLayout Orientation="Vertical">
<Label Text="Welcome to Xamarin.Forms!"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
<views:View.LessonView>
</views:View.LessonView>
<StackLayout Margin="0,0,0,20" Padding="20,0,20,0" VerticalOptions="End" HorizontalOptions="Center" Orientation="Horizontal">
<Button Margin="20,0,50,20" FontSize="Large" HorizontalOptions="Start" Text="Study" >
</Button>
<Button Margin="50,0,20,20" FontSize="Large" Text="Test" Clicked="Button_Clicked">
</Button>
</StackLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>
LessonView.xaml
<?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="KanjiStudy.View.LessonView">
<ContentView.Content>
<StackLayout>
<Label Text="i am a view" />
</StackLayout>
</ContentView.Content>
</ContentView>
The namespace declaration in MainPage.xaml should only include the namespace of where the view view:
xmlns:views="KanjiStudy.View">
Then when displaying the view, use the xmlns name and C# class name (but not the C# namespace name), as such:
<views:LessonView>
</views:LessonView>
The way to think about it is that the XAML parser will create an instance of the class for the view by taking the namespace path from the xmlns declaration, and finding the classname in there.
In other words, in the original code, it will attempt to look in the namespace KanjiStudy.View.LessonView. Since the full namespace + class name for your view is KanjiStudy.View.LessonView, put the namespace parts in the xmlns, and the classname on the XML tag where you want the view.
I was able to find a wpf tutorial this did something similar here http://blog.scottlogic.com/2012/02/06/a-simple-pattern-for-creating-re-useable-usercontrols-in-wpf-silverlight.html
MainPage.xaml
This needed to use the following namespace
xmlns:local="clr-namespace:KanjiStudy.View">
instead of
xmlns:views="KanjiStudy.View.LessonView">
Then in the body i can pull in multiple lessonView objects so
<?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="KanjiStudy.MainPage"
xmlns:local="clr-namespace:KanjiStudy.View">
<ContentPage.Content>
<StackLayout Orientation="Vertical">
<StackLayout Orientation="Vertical" VerticalOptions="StartAndExpand">
<Label Margin="0,20,0,0" Text="Grade 1"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
<StackLayout HorizontalOptions="CenterAndExpand" Orientation="Horizontal">
<local:LessonView Margin="10,10,10,10">
</local:LessonView>
<local:LessonView Margin="10,10,10,10">
</local:LessonView>
<local:LessonView Margin="10,10,10,10">
</local:LessonView>
</StackLayout>
</StackLayout>
<StackLayout Margin="0,0,0,20" Padding="20,0,20,0" VerticalOptions="End" HorizontalOptions="Center" Orientation="Horizontal">
<Button Margin="20,0,50,20" FontSize="Large" HorizontalOptions="Start" Text="Study" >
</Button>
<Button Margin="50,0,20,20" FontSize="Large" Text="Test" Clicked="Button_Clicked">
</Button>
</StackLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>
It has been a while, since the last time I did some development for mobile. Now, I'm trying to refresh my knowledge using Xamarin Forms.
I created a Xamarin Froms project. However, I'm having some problems to render a collection of data into a ListView Content. I can only see the first element of tree Labels.
This is the XAML 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"
x:Class="ExampleBooks.View.BooksView"
Title="Books">
<ScrollView>
<StackLayout>
<ListView x:Name="ListViewBooks"
ItemsSource="{Binding Books}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout Padding="10" Orientation="Vertical">
<Label Text="{Binding Title}" FontSize="Large" VerticalOptions="Center"></Label>
<Label Text="{Binding Author}" FontSize="Small"></Label>
<Label Text="{Binding Description}" FontSize="14"></Label>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ScrollView>
</ContentPage>
And this is the screenshot of how the data using the above code is rendered:
As you can see, the Labels for Autor and Description don't displayed. As far I as know, all tree elements inside the nested StackLayout in the ListView should be displayed. However, I can only see the fist one.
I have try playing around with the Padding and Spacing attributes. But, none of them seems to help.
Do I missing something here? Any help/clue would help.
P.D. I'm using an Android Emulator. However, the same is happening in a Windows Phone emulator.
Thanks
Increase your ListView's RowHeight:
<ListView x:Name="ListViewBooks"
ItemsSource="{Binding Books}"
RowHeight="100">