I'm building a Xamarin Crossplatform App
For drawer menu I'm following this tutorial : https://www.youtube.com/watch?v=aYjK0cPjZMQ
But the problem is when I change my MainPage from ContentPage to MasterDetailPage it shows me this error:
MainPage.XAML :
<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Last_MSPL"
x:Class="Last_MSPL.MainPage">
<MasterDetailPage.Master>
<ContentPage Title="Menu">
<Grid BackgroundColor="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="200" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid>
<Image Source="bg.png" Aspect="AspectFill" />
<StackLayout Padding="0,20,0,0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
<Image Source="profile.png" Aspect="AspectFill" WidthRequest="85" HeightRequest="85" />
<Label Text="Xam Buddy" TextColor="White" FontSize="Large" />
</StackLayout>
</Grid>
<StackLayout Grid.Row="1" Spacing="15">
<ListView x:Name="navigationDrawerList"
RowHeight="60"
SeparatorVisibility="None"
BackgroundColor="#e8e8e8"
ItemSelected="OnMenuItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!-- Main design for our menu items -->
<StackLayout VerticalOptions="FillAndExpand"
Orientation="Horizontal"
Padding="20,10,0,10"
Spacing="20">
<Image Source="{Binding Icon}"
WidthRequest="40"
HeightRequest="40"
VerticalOptions="Center" />
<Label Text="{Binding Title}"
FontSize="Small"
VerticalOptions="Center"
TextColor="Black"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</Grid>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
Help me through this so I can move forward, Thanks!
I just Clean my project, rebuild and it works
because the generated .g.cs from the xaml has not been refreshed so it was giving this error
Related
<ContentPage.ToolbarItems>
<ToolbarItem Clicked="ToolbarItem_Clicked"
Text="+ Search "
>
</ToolbarItem>
</ContentPage.ToolbarItems>
<StackLayout>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
</Grid>
<StackLayout Grid.Row="0" >
<CarouselView x:Name="carouselview"
PeekAreaInsets="50"
>
<CarouselView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal"
ItemSpacing="20"
/>
</CarouselView.ItemsLayout>
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Frame HasShadow="True"
BorderColor="DarkGray"
CornerRadius="5"
Margin="20"
HeightRequest="500"
WidthRequest="500"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand">
<StackLayout>
<Label Text="{Binding NameProduct}"
FontAttributes="Bold"
FontSize="Large"
HorizontalOptions="Center"
VerticalOptions="Center" />
<Image Source="xamarinremovebg.png"
Aspect="AspectFill"
HeightRequest="150"
WidthRequest="150"
HorizontalOptions="Center" />
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
</StackLayout>
</StackLayout>
This my code I want to use itemselected event in CarouselView.I mean item selected in listview.But there is none in CarouselView.All I want is when I click the item1 in CarouselView i want go to a detail page of item1 thank you so much for helping me.
There is no such a default event like in ListView . However we could add a TapGestureRecognizer on DataTemplate as a workaround .
in xaml
1.set the name of the ContentPage
<?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="xxx.MainPage"
x:Name="page"
>
Add TapGestureRecognizer
<DataTemplate>
<StackLayout>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding ItemSelectedCommand,Source={x:Reference page}}" CommandParameter="{Binding .}"/>
</StackLayout.GestureRecognizers>
<Frame>
//...
</Frame>
</StackLayout>
</DataTemplate>
in your ViewModel
public ICommand ItemSelectedCommand{ get; set; }
In the constructor:
ItemSelectedCommand= new Command((item)=>{
// item here is type of the model in the ItemSource of CarouselView
// var model = item as yourmodel
});
I am trying to bind my Command property to the Command in my MasterDetailPage view model. I tried defining the name property for the master page and setting that as the reference source, but it does not seem to bind to the viewmodel. For context, the List MenuItems is a property in the same Viewmodel and the Title binds just fine. I believe I am not setting the Source for the command correctly, but not sure how to fix it. Also, I am using Prism, so the viewmodel is mapped in app.xaml already.
<MasterDetailPage
x:Class="MasterDetailPrism.Views.MainPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="http://prismlibrary.com"
prism:ViewModelLocator.AutowireViewModel="True"
x:Name="menuMasterPage">
<MasterDetailPage.Master>
<ContentPage Title="Menu">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="225" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" BackgroundColor="Aqua" />
<StackLayout Grid.Row="1" BindableLayout.ItemsSource="{Binding MenuItems}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout>
<Button
Command="{Binding NavigateAsync, Source={x:Reference menuMasterPage}}"
CommandParameter="{Binding NavPath}"
Text="{Binding Title}" />
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</Grid>
</ContentPage>
</MasterDetailPage.Master>
I was able to figure it out - I had to name the StackLayout, and then bind to the root of that as the source, not the contentpage or masterpage. In the code below, ItemsList.
<StackLayout Grid.Row="1" BindableLayout.ItemsSource="{Binding MenuItems}" x:Name="ItemsList">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout>
<Button
Command="{Binding BindingContext.NavigateAsync, Source={x:Reference ItemsList}}"
CommandParameter="{Binding NavPath}"
Text="{Binding Title}" />
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
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
It try to move DataTemplate on my CollectionView to a separate xaml file, for reuse it but not work.
the collectionView on my MainPage:
<CollectionView ItemsSource="{Binding Spesa.Articoli}" >
<CollectionView.ItemTemplate>
<control:ArticoloSpesaControl />
</CollectionView.ItemTemplate>
</CollectionView>
and this is the separate ArticoloSpesaControl.xaml file "ArticoloSpesaControl"
<DataTemplate xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Prestospesa.View.Control.ArticoloSpesaControl"
xmlns:plugin="clr-namespace:Plugin.Badge.Abstractions;assembly=Plugin.Badge.Abstractions"
xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
>
<StackLayout Orientation="Horizontal" Padding="10,0,10,0">
<StackLayout Orientation="Horizontal" HorizontalOptions="Start" Spacing="0">
<plugin:Badge BadgeText="{Binding Articolo.quantita}" Style="{StaticResource Badge}"
BackgroundColor="{StaticResource BadgeColor}"
WidthRequest="35" Margin="0,9,2,0" />
<ffimageloading:CachedImage
Source="loading.gif"
WidthRequest="40"
HorizontalOptions="Start"
VerticalOptions="Center"
IsVisible="{Binding RequestPending}"
/>
<Label Text="{Binding DescrizioneArticolo}" Style="{StaticResource LabelProduct}"
WidthRequest="200"
HeightRequest="40"
HorizontalOptions="FillAndExpand"
/>
<Label Text="{Binding Articolo.prezzoNetto, StringFormat='{0:F}€'}" WidthRequest="90"
TextColor="Red"
HeightRequest="50"
VerticalTextAlignment="Center"
HorizontalOptions="End" HorizontalTextAlignment="End" VerticalOptions="Center" Style="{StaticResource LabelMedium}" />
</StackLayout>
</StackLayout>
Any help is welcome !
You can create a ContentView as the DataTemplate of the CollectionView
<CollectionView ItemsSource="{Binding xxx}">
<CollectionView.ItemTemplate>
<DataTemplate>
<control:ArticoloSpesaControl />
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
In ArticoloSpesaControl
<?xml version="1.0" encoding="UTF-8"?>
<ContentView 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="App3.View1">
<ContentView.Content>
//...
</ContentView.Content>
</ContentView>
I am working with Xamarin's CollectionView and Stacklayout and I'm trying to display item lists from different sources in the form of collection views. However, the output of the code shown below is something I didn't expect it. The result of the first collection view is getting displayed in a small window and all the remaining items can be read by scrolling. However, I want to display them all without using a scroll and the same should work if more collectionviews are added in the code. Is there anything I'm missing here?
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
Title="Arhoo"
x:Class="Arhoo.Pages.MainFeedPage">
<StackLayout>
<StackLayout VerticalOptions="FillAndExpand">
<CollectionView x:Name="ItemsListView"
ItemsSource="{Binding Hotels}"
VerticalOptions="FillAndExpand" Margin="10" Visual="Material">
<CollectionView.Header>
<StackLayout BackgroundColor="LightGray" HeightRequest="50" >
<Label Visual="Material" Text="Hotels" FontSize="Medium" FontAttributes="Bold" />
</StackLayout>
</CollectionView.Header>
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical" Span="2"/>
</CollectionView.ItemsLayout>
<CollectionView.EmptyView>
<StackLayout>
<Label HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Text="Loading Hotels"/>
</StackLayout>
</CollectionView.EmptyView>
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Visual="Material">
<ContentView Padding="10">
<Frame HasShadow="false" OutlineColor="#2f2f2f" Padding="0" CornerRadius="2">
<Grid BackgroundColor="#f2f2f2" MinimumHeightRequest="400">
<Image Source="{Binding Image}" Aspect="AspectFill"/>
<BoxView BackgroundColor="#000000" Opacity="0.4"/>
<Label Text="{Binding Text}" Margin="15" TextColor="White" VerticalOptions="End"
VerticalTextAlignment="End" LineBreakMode="NoWrap" FontSize="18" />
</Grid>
</Frame>
</ContentView>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
<StackLayout VerticalOptions="FillAndExpand">
<CollectionView x:Name="TOsListView"
ItemsSource="{Binding TourOperators}"
VerticalOptions="FillAndExpand" >
<CollectionView.Header>
<StackLayout BackgroundColor="LightGray" HeightRequest="20" >
<Label Margin="10,0,0,0" Text="Tour Operators" FontSize="Medium" FontAttributes="Bold" />
</StackLayout>
</CollectionView.Header>
<CollectionView.ItemsLayout>
<GridItemsLayout
Orientation="Vertical"
Span="2"/>
</CollectionView.ItemsLayout>
<CollectionView.EmptyView>
<StackLayout>
<Label
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
Text="Loading TOs"/>
</StackLayout>
</CollectionView.EmptyView>
<CollectionView.ItemTemplate>
<DataTemplate>
<ContentView Padding="10" >
<Frame HasShadow="false"
OutlineColor="#2f2f2f"
Padding="0"
CornerRadius="2">
<Grid BackgroundColor="#f2f2f2">
<Image Source="{Binding Image}"
Aspect="AspectFill"/>
<BoxView BackgroundColor="#000000"
Opacity="0.4"/>
<Label Text="{Binding Text}"
Margin="15"
TextColor="White"
VerticalOptions="End"
VerticalTextAlignment="End"
LineBreakMode="NoWrap"
FontSize="18" />
</Grid>
</Frame>
</ContentView>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</StackLayout>
</ContentPage>
I have added a <ScrollView> at my code and the collectionview items displayed as I wanted it. Here is the modified code that is working for me.
?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
Title="Arhoo"
x:Class="Arhoo.Pages.MainFeedPage">
<ScrollView>
<StackLayout>
<CollectionView x:Name="HotelsListView" ... </CollcetionView>
</StackLayout>
<StackLayout>
<CollectionView x:Name="HotelsListView" ... </CollcetionView>
</StackLayout>
<StackLayout>
<CollectionView x:Name="HotelsListView" ... </CollcetionView>
</StackLayout>
</StackLayout>
</ScrollView>
</ContentPage>