I was finally able to display the ListView using a <Grid> when clicking on a button. This is the 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:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"
xmlns:local="clr-namespace:GasStations"
x:Class="GasStations.MainPage">
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="50" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" x:Name="MapGrid">
<maps:Map WidthRequest="960" HeightRequest="200"
x:Name="MyMap" IsShowingUser="true"/>
</StackLayout>
<StackLayout Grid.Row="1">
<Button Text="Show List" x:Name="Button_DisplayList"
VerticalOptions="CenterAndExpand"
HorizontalOptions="Center"
Clicked="OnButtonClicked" />
</StackLayout>
<StackLayout Grid.Row="2" x:Name="listSection" IsVisible="false" HeightRequest="200">
<ListView x:Name="ListView_Pets">
<ListView.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>dog</x:String>
<x:String>cat</x:String>
<x:String>bird</x:String>
</x:Array>
</ListView.ItemsSource>
</ListView>
</StackLayout>
</Grid>
</ContentPage>
And this is the codebehind:
void OnButtonClicked(object sender, EventArgs args)
{
listSection.IsVisible = true;
Button_DisplayList.IsVisible = false;
}
When I click the button, the ListView is displayed and the button is hidden. So far so good.
Once the ListView is open, how can I hide the ListView again when I tap on the map?
I tried using GestureRecognizers and <TapGestureRecognizer Tapped="OnTapGestureRecognizerTapped"/>, but it doesn't build.
Any help is appreciated.
I've included screenshots because I'm still learning the terminology.
Adding gesture recognizer on the parent stacklayout of the map
On xaml:
<StackLayout Grid.Row="0" x:Name="MapGrid">
<StackLayout.GestureRecognizer>
<TapGestureRecognizer Tapped="OnMapAreaTapped"/>
</StackLayout.GestureRecognizer>
<maps:Map WidthRequest="960" HeightRequest="200" x:Name="MyMap" IsShowingUser="true"/>
</StackLayout>
On code behind:
private void OnMapAreaTapped(object sen, EventArgs e)
{
listSection.IsVisible = false;
Button_DisplayList.IsVisible = true;
}
Related
I'm trying to create my first Xamarin forms app. This is my first app using C#, And my first Xamarin app, so I ran with the template that gives me the "burger menu" when I created the project in Visual Studio 2019. I found quick guide on youtube that used Rg.Plugins to invoke the popup. I tried doing the same, And I can see it does work, sort of, since the pop-up page is being rendered using a fade in animation. As soon as it has been rendered, it disapears, And the underlying page is being "grayed out", so it seems like it's active, but I simply can't see it.
My guess is that it has something to do with how my other elements is being drawn or because I used the burger menu template? If anyone have an idea about what's going on, I would be glad :)
I have been using the iOS Simulator to test out the app.
Heres XAML for the page invoking the pop-up:
"Frontpage" that invokes on "Clicked="PopupCPR_clicked":
<?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="EWSMonitor.Views.Monitorering"
xmlns:vm="clr-namespace:EWSMonitor.ViewModels"
Title="{Binding Title}">
<ContentPage.BindingContext>
<vm:MonitoreringModel />
</ContentPage.BindingContext>
<ContentPage.Resources>
<ResourceDictionary>
<Color x:Key="Accent">#2a2b2b</Color>
</ResourceDictionary>
</ContentPage.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<BoxView Color="{StaticResource Primary}" Grid.Column="0" Grid.RowSpan="2"/>
<StackLayout BackgroundColor="{StaticResource Primary}" VerticalOptions="FillAndExpand" HorizontalOptions="Fill">
<StackLayout Orientation="Horizontal" HorizontalOptions="Center" VerticalOptions="Center">
<ContentView Padding="0,40,0,40" VerticalOptions="FillAndExpand">
<Image Source="logo.png" VerticalOptions="Center" HeightRequest="100" />
</ContentView>
</StackLayout>
</StackLayout>
<ScrollView Grid.Row="1">
<StackLayout Orientation="Vertical" Padding="30,24,30,24" Spacing="10" WidthRequest="200">
<Label TextColor="{StaticResource Sekundær}" Text="Indtast patient ID (CPR) eller klik på "Monitorer uden patient identifikation"." FontSize="20"/>
<Label TextColor="{StaticResource Sekundær}" Text="Du kan vælge at scanne patientens armbånd eller indtast CPR nummer manuelt! Benyt altid en scanner hvor det er muligt!" FontSize="16" Padding="0,0,0,0"/>
<Label TextColor="{StaticResource Sekundær}" FontSize="12" Padding="0,24,0,0">
<Label.FormattedText>
<FormattedString>
<FormattedString.Spans>
<Span Text="Fremsøg patient: "/>
<!-- <Span Text="https://aka.ms/xamarin-quickstart" FontAttributes="Bold"/> -->
</FormattedString.Spans>
</FormattedString>
</Label.FormattedText>
</Label>
<Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<!--Command="{Binding OpenWebCommand}"-->
<Button Margin="1,1,1,1" x:Name="PopupCPR" Text="Indtast CPR"
Clicked="PopupCPR_clicked"
BackgroundColor="{StaticResource Sekundær}"
TextColor="{StaticResource Primary}"
CornerRadius="5" WidthRequest="150" HeightRequest="30" Grid.Row="0" Grid.Column="0" />
<Button Margin="1,1,1,1" Text="Monitorer uden patientidentifikation"
Command="{Binding OpenWebCommand}"
BackgroundColor="{StaticResource Sekundær}"
TextColor="{StaticResource Primary}"
CornerRadius="5" WidthRequest="150" HeightRequest="30" Grid.Row="0" Grid.Column="1" />
</Grid>
</StackLayout>
</ScrollView>
</Grid>
</ContentPage>
The xaml.cs file:
using Rg.Plugins.Popup.Services;
using System;
using System.ComponentModel;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace EWSMonitor.Views
{
public partial class Monitorering : ContentPage
{
public Monitorering()
{
InitializeComponent();
}
private PopupCPR _PopupCPR;
private async void PopupCPR_clicked(object sender, EventArgs e)
{
_PopupCPR = new PopupCPR();
await PopupNavigation.Instance.PushAsync(_PopupCPR);
}
}
}
Then the popup page xaml:
<?xml version="1.0" encoding="utf-8" ?>
<pages:PopupPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
x:Class="EWSMonitor.Views.PopupCPR"
xmlns:vm="clr-namespace:EWSMonitor.ViewModels"
Title="{Binding Title}">
<pages:PopupPage.Animation>
<animations:ScaleAnimation
PositionIn="Center"
PositionOut="Center"
ScaleIn="1.2"
ScaleOut="0.8"
DurationIn="400"
DurationOut="300"
EasingIn="SinOut"
EasingOut="SinIn"
HasBackgroundAnimation="True"/>
</pages:PopupPage.Animation>
<StackLayout VerticalOptions="Center" HorizontalOptions="FillAndExpand" Padding="20, 20, 20, 20">
<StackLayout BackgroundColor="{StaticResource Sekundær}" Padding="0, 10, 0, 0">
<Label Text="Dette er et fedt pop-up vindue" TextColor="{StaticResource Primary}" FontSize="20" HorizontalOptions="Center"></Label>
<ScrollView>
<StackLayout>
<StackLayout Orientation="Horizontal">
<Entry Placeholder="Test Entry"
HorizontalOptions="FillAndExpand"
BindingContext="{x:Reference Switch}"
IsEnabled="{Binding Path=IsToggled}"
PlaceholderColor="Silver"
Keyboard="Email"
TextColor="Gray"></Entry>
<Switch IsToggled="True" x:Name="Switch"></Switch>
</StackLayout>
<ActivityIndicator Color="Gray" IsRunning="True"></ActivityIndicator>
<Slider Value="0.4" x:Name="Slider"></Slider>
<ProgressBar BindingContext="{x:Reference Slider}" Progress="{Binding Path=Value}"></ProgressBar>
<Button Text="Close" TextColor="{StaticResource Sekundær}" Clicked="OnClose"></Button>
</StackLayout>
</ScrollView>
</StackLayout>
</StackLayout>
<!-- <ContentView x:Name="popupCPRVindue" BackgroundColor="{StaticResource Sekundær}" Padding="10,0" IsVisible="true" AbsoluteLayout.LayoutBounds="0, 0, 1, 1">
<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
<Label Text="Hejsa" />
<Button Text="Luk" TextColor="{StaticResource Sekundær}" Clicked="OnClose"></Button>
</StackLayout>
</ContentView>
-->
<!--
<StackLayout
VerticalOptions="Center"
HorizontalOptions="Center"
Padding="20, 20, 20, 20">
<Label
Text="Dette er en stor fed TEST" TextColor="{StaticResource Sekundær}"/>
<Button Text="Luk" TextColor="{StaticResource Sekundær}" Clicked="OnClose"></Button>
</StackLayout>
-->
</pages:PopupPage>
And the xaml.cs for the popup page:
using Rg.Plugins.Popup.Pages;
using Rg.Plugins.Popup.Services;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace EWSMonitor.Views
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class PopupCPR : PopupPage
{
public PopupCPR()
{
InitializeComponent();
}
private async void OnClose(object sender, EventArgs e)
{
await PopupNavigation.Instance.PopAsync();
}
protected override Task OnAppearingAnimationEndAsync()
{
return Content.FadeTo(0, 5);
}
protected override Task OnAppearingAnimationBeginAsync()
{
return Content.FadeTo(1);
}
}
}
Here is a picture where it possible to see it fade in, before it just disappears:
Popup before it dissapears
you are explicitly setting the Opacity to 0
Content.FadeTo(0, 5);
I have a MvxContentPage with a CollectionView. The items in the CollectionView are to be presented with a MvxContentView. I've tried and tried but can't get the MvxContentView to load it's associated ViewModel. I've downloaded the MvvmCross code and looked at the samples. There is an example in the PlayGround project but it seems to be incomplete.
The page below shows the content of a Set. A Set contains n SetItems which should be shown in the CollectionView. Each SetItem is presented using the partial view.
Here's my code:
The MvxContentPage:
<?xml version="1.0" encoding="utf-8" ?>
<mvx:MvxContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:mvx="clr-namespace:MvvmCross.Forms.Views;assembly=MvvmCross.Forms"
xmlns:views="clr-namespace:eTabber.Views"
xmlns:model="clr-namespace:eTabber.Data.Model;assembly=eTabber.Data"
xmlns:viewmodels="clr-namespace:eTabber.Core.ViewModels;assembly=eTabber.Core"
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"
Padding="0"
x:Class="eTabber.Views.SetView" x:TypeArguments="viewmodels:SetViewModel"
Title="{Binding PageTitle}" >
<StackLayout
StyleClass="MainContainer"
Spacing="0"
Margin="0"
Padding="0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Text="{Binding SetList.Name, Mode=OneWay}" StyleClass="Title" Grid.Row="0"></Label>
<StackLayout Orientation="Vertical" Grid.Row="1">
<Button Text="Add" Command="{Binding AddCommand}" />
<CollectionView ItemsSource="{Binding SetItems}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
x:Name="SetlistsListView"
Grid.Row="2"
SelectionMode="Single"
ChildrenReordered="SetlistsListView_ChildrenReordered">
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="model:SetItem" x:Name="DataTemplate">
<views:SetItemView BindingContext="{Binding Source={x:Reference DataTemplate}}" />
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</Grid>
</StackLayout>
</mvx:MvxContentPage>
And the partial view with MvxContentView:
<?xml version="1.0" encoding="UTF-8"?>
<mvx:MvxContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:mvx="clr-namespace:MvvmCross.Forms.Views;assembly=MvvmCross.Forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:viewmodels="clr-namespace:eTabber.Core.ViewModels;assembly=eTabber.Core"
x:TypeArguments="viewmodels:SetItemViewModel"
x:Class="eTabber.Views.SetItemView">
<ContentView.Content>
<Grid x:Name="SetlistsInnerView" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Label Text="{Binding Set.SetName, Mode=OneWay}"
IsVisible="{Binding TitleVisible, Mode=OneWay}"
StyleClass="Title"
Grid.Row="0">
</Label>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Label Text="{Binding Path=Song.Artist.Name, Mode=OneWay}" Grid.Column="0" Grid.Row="0" StyleClass="Label"/>
<Label Text="{Binding Path=Song.Title, Mode=OneWay}" Grid.Column="1" Grid.Row="0" StyleClass="Label"/>
</Grid>
</Grid>
</ContentView.Content>
</mvx:MvxContentView>
Code behind:
using eTabber.Core.ViewModels;
using MvvmCross.Forms.Views;
using Xamarin.Forms.Xaml;
namespace eTabber.Views
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class SetItemView : MvxContentView<SetItemViewModel>
{
public SetItemView()
{
InitializeComponent();
}
}
}
And the ViewModel:
using eTabber.Data.Model;
using MvvmCross.Navigation;
using Xamarin.Forms;
namespace eTabber.Core.ViewModels
{
public class SetItemViewModel : BaseViewModel<SetItem>
{
public SetItem SetItem { get => passedEntity; set => passedEntity = value; }
public SetItemViewModel(IMvxNavigationService navigationService) : base(navigationService)
{
var context = View.BindingContextProperty;
}
}
}
It does show the page with the information so some binding is taking place but I want it to load the ViewModel (in which case the bindings would have to be different of course). Here's what it displays:
The issue is in the first MvxContentPage code:
<views:SetItemView BindingContext="{Binding Source={x:Reference
DataTemplate}}" />
What do I specify in the Binding to get the SetItemViewModel to be loaded.
In Xamarin.Forms, I have a page which contains one Picker control and one TextBox. For that page, I want to display a background image. My problem is that there is no proprietary way to set an aspect ratio for page background images in Xamarin.Forms. The initial code looks like the following:
<?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"
xmlns:controls="clr-namespace:Reserve15.Controls"
mc:Ignorable="d"
x:Class="Reserve15.Views.Bestellen"
Title="Bestellen"
BackgroundImageSource="image_food">
<ContentPage.Content>
<StackLayout HorizontalOptions="Center" VerticalOptions="Center">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackLayout HorizontalOptions="Center" VerticalOptions="Center" Grid.Column="0" Grid.Row="1" Margin="20,0,20,0">
<controls:MaterialPicker x:Name="KategoriePicker" Title="Was möchtest du essen?" BackgroundColor="White" />
<controls:MaterialTextBox x:Name="OrtTextBox" Placeholder="Dein Lieferort" BackgroundColor="White" />
</StackLayout>
</Grid>
</StackLayout>
</ContentPage.Content>
</ContentPage>
This results in the following layout:
Now, the problem is actually that the burger in the background image is only displayed partially. So I googled and found several attempts to fix this. They all involved AbsoluteLayout or RelativeLayout.
I tried both, but AbsoluteLayout seemed to work better. XAML is the following:
<?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"
xmlns:controls="clr-namespace:Reserve15.Controls"
mc:Ignorable="d"
x:Class="Reserve15.Views.Bestellen"
Title="Bestellen">
<AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Image AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" Source="image_food" Aspect="AspectFill"/>
<StackLayout AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="1,1,1,1">
<!--Content-->
<StackLayout HorizontalOptions="Center" VerticalOptions="Center">
<StackLayout HorizontalOptions="Center" VerticalOptions="Center" Grid.Column="0" Grid.Row="1">
<controls:MaterialPicker x:Name="KategoriePicker" Title="Was möchtest du essen?" BackgroundColor="White" />
<controls:MaterialTextBox x:Name="OrtTextBox" Placeholder="Dein Lieferort" BackgroundColor="White" />
</StackLayout>
</StackLayout>
</StackLayout>
</AbsoluteLayout>
</ContentPage>
And it results in this:
As you can see, the background image is now properly sized but the former centered controls are at the very top now. How can I fix that?
Change the HorizontalOptions="Center" VerticalOptions="Center" of stacklayout to CenterAndExpand will work:
<AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Image AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" Source="sample.jpg" Aspect="AspectFill"/>
<StackLayout AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="1,1,1,1">
<!--Content-->
<StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >
<Label x:Name="KategoriePicker" Text="Was möchtest du essen?" BackgroundColor="White" />
<Label x:Name="OrtTextBox" Text="Dein Lieferort" BackgroundColor="White" />
</StackLayout>
</StackLayout>
</AbsoluteLayout>
Result:
I have been trying all the "Qs that may have your answer" 3 days later, still no joy.
I have a XAML Page that holds a ListView of products and their details, using binding to a model called RackProducts as you can see:
<?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="PapillonWine.PapillonRackCatalogPage"
xmlns:local="clr-namespace:PapillonWine;assembly=PapillonWine"
xmlns:artina="clr-namespace:UXDivers.Artina.Shared;assembly=UXDivers.Artina.Shared"
xmlns:customContentView="clr-namespace:PapillonWine.NavBars"
Title="{ artina:Translate PageTitleProductsCatalog }"
BackgroundColor="{ DynamicResource MainWrapperBackgroundColor }"
x:Name="CatalogItemPage">
<ContentPage.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="70" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<customContentView:CustomNavigationBar Grid.Row="0" x:Name="NavigationBarView" BackgroundColor="Transparent"/>
<ListView
x:Name="PapillonRackItems"
Grid.Row="1"
ItemsSource="{ Binding RackProducts }"
HasUnevenRows="True"
ItemSelected="OnItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<local:PapillonCatalogItemTemplate />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</ContentPage.Content>
</ContentPage>
Each product is displayed using the PapillonCatalogItemTemplate which holds four buttons (to view a carousel of product images, to add to cart, to view dimensions and lastly to share the product). This PapillonCatalogItemTemplate is as follows:
<?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="PapillonWine.PapillonCatalogItemTemplate"
xmlns:local="clr-namespace:PapillonWine;assembly=PapillonWine"
xmlns:artina="clr-namespace:UXDivers.Artina.Shared;assembly=UXDivers.Artina.Shared"
xmlns:customContentView="clr-namespace:PapillonWine.NavBars"
xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
xmlns:fftransformations="clr-namespace:FFImageLoading.Transformations;assembly=FFImageLoading.Transformations"
Padding="10" BackgroundColor="{ DynamicResource MainWrapperBackgroundColor }"
x:Name="CatalogItemTemplate">
<!-- FAVORITE ICON -->
<Grid>
<!-- COLUMN DEFS -->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- ROW DEFS -->
<Grid.RowDefinitions>
<RowDefinition Height="0.45*" />
<RowDefinition><RowDefinition.Height><OnIdiom x:TypeArguments="GridLength" Phone="200" Tablet="400" /></RowDefinition.Height></RowDefinition>
</Grid.RowDefinitions>
<StackLayout Grid.Column="0" Grid.Row="0" Spacing="5" HorizontalOptions="FillAndExpand" WidthRequest="1000" >
<!-- PRODUCT NAME -->
<Label Text="{ Binding Name }" />
<!-- DESCRIPTION -->
<Label Text="{Binding Description}" />
<!-- BUTTONS -->
<StackLayout x:Name="buttonstack" Orientation="Horizontal" >
<!-- SHOW IMAGES -->
<artina:Button
x:Name="ImageCarousel"
Text="{ x:Static local:FontAwesomeWeb511Font.CameraRetro }"
Style="{StaticResource FontIcon}"
BindingContext="{Binding Source={x:Reference CatalogItemTemplate}, Path=BindingContext}"
Command="{Binding OnClickViewImageCarousel}"
CommandParameter="{Binding Source={x:Reference buttonstack}, Path=BindingContext}" >
<!-- SHOW CART -->
<artina:Button
Text="{ x:Static local:FontAwesomeWeb511Font.cartplus }"
Style="{StaticResource FontIcon}"
Clicked="OnBuyItemSelected">
</artina:Button>
<!-- SHOW DIMENSIONS -->
<artina:Button
Text="{ x:Static local:FontAwesomeWeb511Font.RulerCombined }"
Style="{StaticResource FontIcon}"
Clicked="OnDimensionsSelected" >
<!-- SHOW IMAGES -->
<artina:Button
Text="{ x:Static local:FontAwesomeFont.Share }"
Style="{StaticResource FontIcon}"
Clicked="OnShareSelected" >
</StackLayout>
</StackLayout>
<ffimageloading:CachedImage
Grid.Column="0" Grid.Row="1"
Source="{ Binding Image }" />
</Grid>
</ContentView>
If I click the ffloading image at the bottom of the template item, the OnItemSelected button fires, and I get a nice new view page with a picture of the product that I selected and all its item details... bully! The code it fires is as follows:
public async void OnItemSelected(object sender, SelectedItemChangedEventArgs e)
{
var selectedItem = ((ListView)sender).SelectedItem;
var page = new PapillonRackItemViewPage(((RackProduct)selectedItem).Id);
await Navigation.PushModalAsync(page);
}
However... if I try to fire one of the buttons within the item template (for example the one directly beneath "SHOW IMAGES", nothing happens. I have left the Commmand, CommandParameter and Binding arguments in that first button but I'm not sure they're correct. I have tried ICommand route, TapGestureRecognizer route, and tried most similar posts, and I really need help on this one. How do I pass the same binding context as in the ListView and its "RackProducts" binding, through button items within a list view? Any chance of a much needed helping hand? Thanks!
in your XAML
Clicked="OnClickViewImageCarousel" CommandParameter="{Binding .}"
then in the code behind
protected void OnClickViewImageCarousel(object sender, EventArgs e)
{
var selectedItem = (RackProduct)((Button)sender).CommandParameter;
}
Hello I have an app i'm doing in xamrian forms and I have a card styled list view. I want to be able to add 3 buttons underneath the listview one on the left one in the center and one on the right
here's my 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"
x:Class="App.HomePage">
<ListView x:Name="listView" HasUnevenRows="true" ItemSelected="OnItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame Padding="0,0,0,8" BackgroundColor="#d2d5d7">
<Frame.Content>
<Frame Padding="15,15,15,15" OutlineColor="Gray" BackgroundColor="White">
<Frame.Content>
<StackLayout Padding="20,0,0,0" Orientation="Horizontal" HorizontalOptions="CenterAndExpand">
<Image
HorizontalOptions="StartAndExpand"
Source="{Binding Image}" />
<Label Text="{Binding Name}"
TextColor="#69add1"
FontFamily="OpenSans-Light"
FontSize="24"/>
</StackLayout>
</Frame.Content>
</Frame>
</Frame.Content>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage>
How would I go about doing this in xaml?
Thank's in advance! :)
Try 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:local="clr-namespace:Sandbox_Forms"
x:Class="Sandbox_Forms.MainPage">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ListView Grid.Row="0" BackgroundColor="Aqua">
<!-- Add bindings and data template -->
</ListView>
<StackLayout Orientation="Horizontal" Grid.Row="1">
<Button Text="Button1" HorizontalOptions="FillAndExpand"/>
<Button Text="Button2" HorizontalOptions="FillAndExpand"/>
<Button Text="Button3" HorizontalOptions="FillAndExpand"/>
</StackLayout>
</Grid>
</ContentPage>
This will limit your ListView to only fill the space that your buttons do not occupy. The output should look something like this:
<StackLayout>
<ListView>
...
</ListView>
<StackLayout Orientation="Horizontal">
<Button ... />
<Button ... />
<Button ... />
</StackLayout>
</StackLayout>