I'm building a Xamarin Forms application and am trying to reference the binding context of a parent control from a DataTemplate:
<flv:FlowListView Grid.Row="3" x:Name="abc"
Grid.Column="0"
Grid.ColumnSpan="2"
FlowColumnCount="3"
SeparatorVisibility="None"
HasUnevenRows="true"
FlowItemsSource="{Binding ProductPackageBatch}"
FlowLastTappedItem="{Binding LastTappedItem}"
FlowItemTappedCommand="{Binding ItemTappedCommand}">
<flv:FlowListView.FlowColumnTemplate>
<DataTemplate>
<StackLayout Margin="5, 10, 10, 5">
<StackLayout.Children>
<Frame Padding="2"
OutlineColor="{DynamicResource ProductGridImageBorderColor}"
HasShadow="False"
BackgroundColor="{DynamicResource ProductGridBackgroundColor}">
<Image Aspect="AspectFit"
WidthRequest="100"
Source="{Binding ImageBase64, Converter={StaticResource Base64ToImageConverter}}">
<Image.HeightRequest>
<OnPlatform x:TypeArguments="x:Double"
iOS="100"
Android="150" />
</Image.HeightRequest>
</Image>
</Frame>
<Label Style="{StaticResource ProductGridName}"
Text="{Binding Name}" />
<Label Style="{StaticResource ProductGridFormattedPrice}"
Text="{Binding FormattedPrice}"
FontAttributes="Bold" />
<Button BackgroundColor="{DynamicResource BuyButtonColor}"
TextColor="{DynamicResource TextColor}"
BorderRadius="0"
Margin="5, 0, 5, 0"
VerticalOptions="End"
Text="Buy"
Command="{Binding Source={x:Reference abc}, Path=BindingContext.AddToUserCartCommand}"
CommandParameter="{Binding .}" />
</StackLayout.Children>
</StackLayout>
</DataTemplate>
</flv:FlowListView.FlowColumnTemplate>
</flv:FlowListView>
There is an event called on AddToUserCartCommand that I want to call from a button in the FlowListView. I've tried a few different ways to reference the control, but the method never gets called. The following button sits outside this control and works ok:
<Button Grid.Row="4"
Margin="30"
BackgroundColor="{DynamicResource BuyButtonColor}"
TextColor="{DynamicResource TextColor}"
BorderRadius="0"
Text="Add to Cart"
Command="{Binding AddToUserCartCommand}"
CommandParameter="{Binding ProductPackage.Id}" />
Can anyone help explain what I'm doing wrong?
Set the correct binding context of the Command and CommandParamter:
<Button BackgroundColor="{DynamicResource BuyButtonColor}"
BindingContext="{x:Reference Name=abc}"
TextColor="{DynamicResource TextColor}"
BorderRadius="0"
Margin="5, 0, 5, 0"
VerticalOptions="End"
Text="Buy"
Command="{Binding Path=BindingContext.AddToUserCartCommand}"
CommandParameter="{Binding Path=BindingContext.ProductPackage.Id}" />
Related
I have the exact same issue as asked in this question. The tabbar changes color when there is content behind it. However, as stated in this question, if they remove the renderer then their problem stops. I currently do not have a renderer at all and still have this problem. The only part of my code that doesn't have this problem are pages that are not in the shell hierarchy and that are navigated to using the following line of code:
var search = new SearchList();
Navigation.PushAsync(search);
The pages that are navigated to using the style of the following lines of code have the tabbar issue:
await Shell.Current.GoToAsync($"//{nameof(MemberList)}");
The xaml and code behind for the different pages are the exact same. The only difference is one is defined in the appshell hierarchy(MemberList) and the other is not(SearchList) as seen below:
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:SampleYE.Views"
Title="SampleYE"
x:Class="SampleYE.AppShell"
>
<!--
The overall app visual hierarchy is defined here, along with navigation.
https://learn.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/
-->
<Shell.Resources>
<ResourceDictionary>
<Style x:Key="BaseStyle" TargetType="Element">
<Setter Property="Shell.BackgroundColor" Value="{StaticResource Primary}" />
<Setter Property="Shell.ForegroundColor" Value="{StaticResource Secondary}" />
<Setter Property="Shell.TitleColor" Value="{StaticResource Secondary}" />
<Setter Property="Shell.DisabledColor" Value="#AD94BB" />
<Setter Property="Shell.UnselectedColor" Value="{StaticResource Tertiary}" />
<Setter Property="Shell.TabBarBackgroundColor" Value="{StaticResource Primary}" />
<Setter Property="Shell.TabBarForegroundColor" Value="{StaticResource Secondary}"/>
<Setter Property="Shell.TabBarUnselectedColor" Value="{StaticResource Tertiary}"/>
<Setter Property="Shell.TabBarTitleColor" Value="{StaticResource Secondary}"/>
</Style>
<Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" />
<Style TargetType="FlyoutItem" BasedOn="{StaticResource BaseStyle}" />
</ResourceDictionary>
</Shell.Resources>
<TabBar>
<ShellContent Route="StartupPage" Shell.FlyoutBehavior="Disabled" ContentTemplate="{DataTemplate local:StartupPage}" />
</TabBar>
<TabBar>
<Tab Title="Directory" Icon="icon_feed.png">
<ShellContent Route="MemberList" ContentTemplate="{DataTemplate local:MemberList}"/>
</Tab>
<Tab Title="Profile" Icon="icon_about.png">
<ShellContent Route="ProfilePage1" ContentTemplate="{DataTemplate local:ProfilePage1}" />
</Tab>
</TabBar>
<!--
If you would like to navigate to this content you can do so by calling
await Shell.Current.GoToAsync("//LoginPage");
-->
<TabBar>
<ShellContent Route="LoginPage1" Shell.FlyoutBehavior="Disabled" ContentTemplate="{DataTemplate local:LoginPage1}" />
</TabBar>
</Shell>
The definition of the pages with the issue are as follows:
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="SampleYE.Views.MemberList">
<ContentPage.Content>
<ListView x:Name="listView" ItemSelected="OnItemSelected" IsGroupingEnabled="true">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="5,0,0,0" VerticalOptions="StartAndExpand" Orientation="Vertical">
<Label Text="{Binding Title}" VerticalTextAlignment="Center" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout HorizontalOptions="StartAndExpand" Orientation="Horizontal">
<Image WidthRequest="44" HeightRequest="44" Source="{Binding Photo}" />
<StackLayout Padding="5,0,0,0" VerticalOptions="StartAndExpand" Orientation="Vertical">
<Label Text="{Binding Name}" VerticalTextAlignment="Center" Font="Medium" />
<Label Text="{Binding Title}" VerticalTextAlignment="Center" Font="Micro" />
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage.Content>
</ContentPage>
<ContentPage.Content>
<Grid RowDefinitions="Auto">
<ScrollView Grid.Row="0" >
<Grid RowDefinitions="Auto,Auto,Auto,Auto" ColumnDefinitions="*,*" VerticalOptions="CenterAndExpand"
RowSpacing="25">
<Frame Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" BorderColor="{StaticResource Secondary}"
VerticalOptions="Start" HorizontalOptions="Center" WidthRequest="150" HeightRequest="150"
CornerRadius="75" HasShadow="False" Padding="0" IsClippedToBounds="True">
<Image Source="Profile" Aspect="AspectFill"/>
</Frame>
<Button Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"
TextColor="{StaticResource Primary}" BackgroundColor="{StaticResource Secondary}"
HeightRequest="54" WidthRequest="54" CornerRadius="27" TranslationX="65"
ImageSource="Camera" HorizontalOptions="Center" VerticalOptions="End"/>
<Frame Grid.Row="2" Grid.ColumnSpan="2" IsClippedToBounds="True"
Margin="20,20,20,0" CornerRadius="15" Padding="0,20,0,20" >
<Grid RowDefinitions="*,*,*" ColumnDefinitions="*,*,*,*" RowSpacing="12" ColumnSpacing="5">
<Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" HorizontalTextAlignment="Center"
Text="Calvin"/>
<Label Grid.Row="0" Grid.Column="2" Grid.ColumnSpan="2" HorizontalTextAlignment="Center"
Text="Carter"/>
<Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" HorizontalTextAlignment="Center"
Text="Ace"/>
<Label Grid.Row="1" Grid.Column="2" Grid.ColumnSpan="2" HorizontalTextAlignment="Center"
Text="Wrecking Ball"/>
<Label Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" HorizontalTextAlignment="Center"
Text="Spring"/>
<Label Grid.Row="2" Grid.Column="2" Grid.ColumnSpan="2" HorizontalTextAlignment="Center"
Text="2014"/>
</Grid>
</Frame>
<Frame Grid.Row="3" Grid.ColumnSpan="2" IsClippedToBounds="False"
Margin="20,20,20,0" CornerRadius="15" Padding="0,20,0,45" >
<Grid RowDefinitions="*,Auto,Auto,*" ColumnDefinitions="*,*,*,*" RowSpacing="20" ColumnSpacing="5" >
<Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" HorizontalTextAlignment="Center"
Text="02/01/1994"/>
<Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="4" HorizontalTextAlignment="Center"
Text="Wreckingball14"/>
<Label Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" HorizontalTextAlignment="Center"
Text="CCC#blackhousedevelopers.com"/>
<Label Grid.Row="2" Grid.Column="2" Grid.ColumnSpan="2" HorizontalTextAlignment="Center"
Text="Wrecking Ball"/>
<Label Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" HorizontalTextAlignment="Center"
Text="Spring"/>
<Label Grid.Row="3" Grid.Column="2" Grid.ColumnSpan="2" HorizontalTextAlignment="Center"
Text="2014"/>
</Grid>
</Frame>
<Grid
Grid.Row="4" Grid.ColumnSpan="2" IsClippedToBounds="False"
Margin="20,0,20,0" Padding="0,20,0,20"
RowDefinitions="Auto,Auto" ColumnDefinitions="*,*" RowSpacing="20" >
<Frame IsClippedToBounds="true" Grid.Row="0" Grid.ColumnSpan="2"
Padding="0"
CornerRadius="15">
<Editor HeightRequest="70" x:Name="interestEntry"
BackgroundColor="{StaticResource Primary}" TextColor="{StaticResource Secondary}"
Placeholder="Interests (i.e. UFC, Fishing, Investing etc;)"
PlaceholderColor="{StaticResource Secondary}"/>
</Frame >
<Frame IsClippedToBounds="true" Grid.Row="1" Grid.ColumnSpan="2"
Padding="0"
CornerRadius="15">
<Editor HeightRequest="140" x:Name="bioEntry"
BackgroundColor="{StaticResource Primary}" TextColor="{StaticResource Secondary}"
Placeholder="Biography (A little information about yourself)"
PlaceholderColor="{StaticResource Secondary}"/>
</Frame>
</Grid>
</Grid>
</ScrollView>
</Grid>
</ContentPage.Content>
The fix to this was updating my ios project to a newer version. they fixed it in the update.
How do I make the CollectionView render all items with the same height while using a GridItemsLayout on iOS? It already works on Android that all elements in a row gets the same height but on iOS they are squished vertically in the center of the row.
This is how it currently looks on iOS (how it not should be..):
And this is how it currently looks on Android (how it also should be on iOS - all elements are scaled to the same height in the same row):
As of now, this is how my XAML looks like:
<CollectionView Grid.Row="1" x:Name="DataListView" ItemSizingStrategy="MeasureAllItems" ItemsSource="{Binding Data}" IsGrouped="False" ItemTemplate="{StaticResource EntryTemplate}"
Header="{Binding Header}" Footer="{Binding Footer}" BackgroundColor="{DynamicResource DarkBackgroundColor}">
<CollectionView.ItemsLayout>
<!-- Span is set in OnSizeAllocated to make this "dynamic" -->
<GridItemsLayout x:Name="GridItemsLayout" Orientation="Vertical" Span="1" />
</CollectionView.ItemsLayout>
<CollectionView.HeaderTemplate>
<DataTemplate x:DataType="x:String">
<Grid Padding="10,20">
<Label Text="{Binding}" TextColor="{DynamicResource TextColor}" FontAttributes="Bold" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" />
</Grid>
</DataTemplate>
</CollectionView.HeaderTemplate>
<CollectionView.FooterTemplate>
<DataTemplate x:DataType="x:String">
<Grid Padding="{OnPlatform iOS=20 30 20 20, Default=20}">
<Label Text="{Binding}" TextColor="{DynamicResource LightTextColor}" FontSize="Micro" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" />
</Grid>
</DataTemplate>
</CollectionView.FooterTemplate>
</CollectionView>
This is my entry data template XAML:
<DataTemplate x:Key="EntryTemplate" x:DataType="data:Entry">
<Grid BackgroundColor="Red" VerticalOptions="FillAndExpand" Margin="0">
<Frame WidthRequest="{Binding Converter={StaticResource FlowColumnWidthConverter}, ConverterParameter=324}" BackgroundColor="{DynamicResource DarkerBackgroundColor}"
BorderColor="{Binding IsActive, Converter={StaticResource ActiveToColorConverter}}" HorizontalOptions="Center" Margin="8" Padding="10" CornerRadius="5">
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="OnChecklistElementTapped" />
</Frame.GestureRecognizers>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Source="{Binding Type, Converter={StaticResource TypeToEmbeddedImageConverter}}" WidthRequest="32" HeightRequest="32" Margin="4" />
<Label Grid.Row="0" Grid.Column="1" Text="{Binding Name}" FontAttributes="Bold" LineBreakMode="TailTruncation" VerticalOptions="Start" />
<Label Grid.Row="1" Grid.Column="1" Text="{Binding Region}" FontSize="12" LineBreakMode="TailTruncation" VerticalOptions="Start" Margin="0,-6,0,0" />
<Label Grid.Row="2" Grid.Column="1" Text="{Binding AdditionalData}" TextType="Html" FontSize="12" LineBreakMode="WordWrap" Margin="0"
IsVisible="{Binding AdditionalData, Converter={StaticResource EmptyToVisibilityConverter}}" InputTransparent="True" />
<Label Grid.Row="3" Grid.Column="1" Text="{Binding Description}" FontSize="12" LineBreakMode="WordWrap"
IsVisible="{Binding Description, Converter={StaticResource EmptyToVisibilityConverter}}" />
<Switch Grid.Row="0" Grid.Column="2" Grid.RowSpan="2" IsToggled="{Binding IsDone}" HorizontalOptions="Center" VerticalOptions="Center" />
<StackLayout Grid.Row="2" Grid.Column="2" Grid.RowSpan="2" Orientation="Horizontal" Spacing="12" HorizontalOptions="Center" VerticalOptions="Start" Margin="0,4,0,4">
<controls:TintedImageButton Source="Details.png" Clicked="OnNavigateToDetailsButtonClicked" HeightRequest="32" WidthRequest="32"
IsVisible="{Binding Details, Converter={StaticResource EmptyToVisibilityConverter}}"
HorizontalOptions="Center" BackgroundColor="Transparent" />
<controls:TintedImageButton Source="Map.png" Clicked="OnNavigateToMapButtonClicked" HeightRequest="32" WidthRequest="32"
HorizontalOptions="Center" BackgroundColor="Transparent" IsVisible="{x:Static resources:Metadata.MAP_ENABLED}" />
</StackLayout>
</Grid>
</Frame>
</Grid>
</DataTemplate>
And this is my code behind (where I set how many columns there should be):
protected override void OnSizeAllocated(double width, double height)
{
base.OnSizeAllocated(width, height);
GridItemsLayout.Span = Convert.ToInt32(Math.Floor(width / 340d));
}
Anyone has an idea, why this is looks different on iOS in the first place and what I should look up to fix this problem?
I created the following BoxView in my App.xaml (as a separator)...
<Style x:Key="BoxViewGray" TargetType="BoxView">
<Setter Property="HeightRequest" Value="0.2"/>
<Setter Property="Color" Value="Gray"/>
</Style>
...and use it like so in my Page:
<BoxView Style="{StaticResource BoxViewGray}" />
Straight forward and it works out quite fine with Android (Release & Debug) though when I debug the iOS Solution, it's not visible. Maybe as an additional info: I don't have a physical Mac for debugging but use Macincloud instead of. Don't have a physical device (iPhone etc) either.
Update: The complete XAML code of the page:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:vm="clr-namespace:ErzengelMichael.ViewModels"
x:Class="ErzengelMichael.Views.EinstellungenPage"
Title="{Binding Rosenkranz[0].TabBarTitleSettings}" >
<ContentPage.BindingContext>
<vm:RosenkranzViewModel />
</ContentPage.BindingContext>
<ContentPage.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0.1" Color="Purple" />
<GradientStop Offset="0.9" Color="DarkSlateBlue" />
</LinearGradientBrush>
</ContentPage.Background>
<ScrollView>
<StackLayout Padding="10" >
<StackLayout Padding="5">
<BoxView Style="{StaticResource BoxViewGray}" />
<Label Text="{Binding Rosenkranz[0].SettingsText}"
HorizontalOptions="Center" FontSize="24" TextColor="White"
BackgroundColor="Transparent" Margin="0,0,0,5" />
<BoxView Style="{StaticResource BoxViewGray}" />
</StackLayout>
<StackLayout Orientation="Vertical" Padding="10" >
<StackLayout HorizontalOptions="Center" Orientation="Horizontal" Spacing="20" Padding="10">
<ImageButton CornerRadius="10" HeightRequest="80" BackgroundColor="Transparent" CommandParameter="French"
Command="{Binding ChangeLanguageCommand}" Source="france.jpg" VerticalOptions="Center" />
<ImageButton CornerRadius="10" HeightRequest="80" BackgroundColor="Transparent" CommandParameter="German"
Command="{Binding ChangeLanguageCommand}" Source="germany.jpg" VerticalOptions="Center" />
</StackLayout>
<StackLayout HorizontalOptions="Center" Orientation="Horizontal" Spacing="20" Padding="10" >
<ImageButton CornerRadius="10" HeightRequest="80" BackgroundColor="Transparent"
CommandParameter="English" Command="{Binding ChangeLanguageCommand}" Source="usa.jpg" VerticalOptions="Center" />
<ImageButton CornerRadius="10" HeightRequest="80" BackgroundColor="Transparent" CommandParameter="Spanish"
Command="{Binding ChangeLanguageCommand}" Source="spain.jpg" VerticalOptions="Center" />
</StackLayout>
<StackLayout HorizontalOptions="Center" Orientation="Horizontal" Spacing="20" Padding="10" >
<ImageButton CornerRadius="10" HeightRequest="80" BackgroundColor="Transparent" CommandParameter="Italian"
Command="{Binding ChangeLanguageCommand}" Source="italy.jpg" VerticalOptions="Center" />
<ImageButton CornerRadius="10" HeightRequest="80" BackgroundColor="Transparent" CommandParameter="Portugese"
Command="{Binding ChangeLanguageCommand}" Source="portugal.jpg" VerticalOptions="Center" />
</StackLayout>
</StackLayout>
<!--#region IMPRESSUM -->
<StackLayout Spacing="15" Padding="10" HorizontalOptions="Center" VerticalOptions="Center">
<BoxView Style="{StaticResource BoxViewGray}"/>
<Label HorizontalOptions="Center" HorizontalTextAlignment="Center" Text="Development and Design by xxx#web.de" TextColor="White" />
<Label HorizontalOptions="Center" Text="Version 1.0" TextColor="White" FontAttributes="Italic"/>
<Label HorizontalOptions="Center" TextColor="White" HorizontalTextAlignment="Center"
Text="Images used in this App are in the public domain worldwide."/>
<StackLayout Orientation="Horizontal" Spacing="0" HorizontalOptions="Center" >
<Label HorizontalTextAlignment="Center" >
<Label.FormattedText>
<FormattedString>
<Span Text="" FontFamily="FA-B" TextColor="White" CharacterSpacing="20" FontSize="24" />
<Span Text="" FontFamily="FA-B" TextColor="White" FontSize="24" />
</FormattedString>
</Label.FormattedText>
</Label>
</StackLayout>
<BoxView Style="{StaticResource BoxViewGray}" />
</StackLayout>
<!--#endregion-->
</StackLayout>
</ScrollView>
</ContentPage>
That because you set the HeightRequest as 0.2(which is less than 0.5) . So in iOS it will been ignored on some device because of screen resolution .
So you would better set it as 0.5 or higher on iOS device .
<Style x:Key="BoxViewGray" TargetType="BoxView">
<Setter Property="HeightRequest">
<Setter.Value>
<OnPlatform iOS="0.5" Android="0.2" />
</Setter.Value>
</Setter>
<Setter Property="Color" Value="Gray"/>
</Style>
Quick question:
Is the TableView in Xamarin.Forms supposed to be all grey like below picture? I was expecting a layout similar to what I'm getting, but with white backgrounds for individual TableSections.
Is this because of iOS 14, something I'm doing wrong or maybe the simulator? I'm also experiencing lack of DatePicker and TimePicker support - works on android but not on iPhone simulator, and I was told this issue was the simulator.
I haven't been able to test it on a real device.
I'm posting my code for the Tableview XAML below.
XAML code
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage
Title="{Binding FullName}"
xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="ContactBook.ContactsDetailPage">
<TableView Intent="Form">
<TableRoot>
<TableSection Title="Personal Info">
<EntryCell Label="First Name" Text="{Binding FirstName}" Keyboard="Text" />
<EntryCell Label ="Last Name" Text="{Binding LastName}" Keyboard="Text"/>
</TableSection>
<TableSection Title="Contact Info">
<EntryCell Label="Phone" Text="{Binding Phone}" Keyboard="Telephone"/>
<EntryCell Label="Email" Text="{Binding Email}" Keyboard="Email" />
</TableSection>
<TableSection Title="Other">
<SwitchCell Text="Blocked" On="{Binding IsBlocked}" />
</TableSection>
<TableSection>
<ViewCell>
<Button Text="Save" HorizontalOptions="FillAndExpand" Clicked="Button_Clicked"/>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
</ContentPage>
You could use ViewCell and StackLayout to achieve that, becuause xxxCell not contain a BackgroundColor pproperty.
For example, code as follows:
<TableSection Title="Contact Info">
<ViewCell>
<StackLayout Orientation="Horizontal" BackgroundColor="White">
<Label Margin="10,0,0,0" Text="Phone" VerticalOptions="Center"/>
<Entry Text="Binding Phone" HorizontalOptions="FillAndExpand" Keyboard="Telephone"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal" BackgroundColor="White">
<Label Margin="10,0,0,0" Text="Email" VerticalOptions="Center" />
<Entry Text="Binding Email" HorizontalOptions="FillAndExpand" Keyboard="Email" />
</StackLayout>
</ViewCell>
</TableSection>
<TableSection Title="Other" >
<ViewCell>
<StackLayout Orientation="Horizontal" BackgroundColor="White">
<Label Margin="15,0,0,0" Text="Blocked" VerticalOptions="Center"/>
<Switch Margin="280,0,0,0" />
</StackLayout>
</ViewCell>
</TableSection>
<TableSection>
<ViewCell>
<StackLayout BackgroundColor="White">
<Button Text="Save"
HorizontalOptions="FillAndExpand"
/>
</StackLayout>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
The effect:
TableView has a BackgroundColor property that lets you set the background color you want. So if you want it to match the rest of your page, you can do
<TableView Intent="Form" BackgroundColor="White">
I have a rather complicated data binding template and I'm not able to find away back to my ViewModel to access a property and command.
This is how my xaml is set up from Top to Bottom as its layout:
<HierarchicalDataTemplate x:Key="ChapterReferencesTemplate">
<StackPanel>
<DockPanel>
<TextBlock Text="Chapter Reference "/>
<AccessText Text="{Binding Path=Chapter}" />
</DockPanel>
<DockPanel>
<TextBlock Text="Total Reference Verses "/>
<AccessText Text="{Binding Path=Verses}" />
</DockPanel>
<ListView Name="VerseReferencesListView" Height="200"
ItemsSource="{Binding Path=VerseReferences}"
SelectedItem="{Binding Path=DataContext.CurrentVerseReference, Mode=TwoWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type src:CreateWritingsViewModel}}}"
AlternationCount="2"
BorderThickness="0"
IsSynchronizedWithCurrentItem="True">
<ListView.View>
<GridView AllowsColumnReorder="true" ColumnHeaderToolTip="xmlNamespace List" >
<GridViewColumn
Header="Verse"
DisplayMemberBinding="{Binding Path=Verse}" Width="Auto">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Width="Auto" TextAlignment="Left" Text="{Binding}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn
Header="Query"
DisplayMemberBinding="{Binding Path=Query}" Width="Auto">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Width="Auto" TextAlignment="Left" Text="{Binding}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Actions">
<GridViewColumn.CellTemplate>
<DataTemplate>
<Button
Command="{Binding Path=DataContext.LookupReferencesCommand, RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type src:CreateWritingsViewModel}}}"
CommandParameter="{Binding .}"
Template="{StaticResource AddButtonTemplate}" Cursor="Hand" Width="30"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
</StackPanel>
<HierarchicalDataTemplate x:Key="WritingsReferenceTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="200"/>
</Grid.ColumnDefinitions>
<GroupBox Header="{Binding Path=Hebrew}">
<StackPanel Margin="5 10 5 0">
<StackPanel>
<DockPanel>
<TextBlock Text="Writings of "/>
<AccessText Text="{Binding Path=Writings}" />
</DockPanel>
<DockPanel>
<TextBlock Text="Total Reference Chapters : "/>
<AccessText Text="{Binding Path=Chapters}" />
</DockPanel>
<DockPanel>
<TextBlock Text="Total Reference Verses : "/>
<AccessText Text="{Binding Path=Verses}" />
</DockPanel>
<DockPanel >
<TextBlock Text="Query for Writing : "/>
<AccessText Text="{Binding Path=QueryWriting}" />
</DockPanel>
<DockPanel >
<TextBlock Text="Query for Chapters : "/>
<AccessText Text="{Binding Path=QueryChapters}" />
</DockPanel>
</StackPanel>
<DockPanel Margin="0 5 0 0">
<GroupBox Header="Chapter References">
<Expander>
<ScrollViewer VerticalScrollBarVisibility="Auto" Height="200">
<HeaderedItemsControl
ItemTemplate="{StaticResource ChapterReferencesTemplate}"
ItemsSource="{Binding Path=ChapterReferences}"
Margin="10,0,0,0" />
</ScrollViewer>
</Expander>
</GroupBox>
</DockPanel>
</StackPanel>
</GroupBox>
</Grid>
<GroupBox Grid.Column="1" Header="CREATE REFERENCES">
<ListBox
Name="ReferenceListBox"
ItemTemplate="{StaticResource WritingsReferenceTemplate}"
ItemsSource="{Binding Path=odsDocumentsService.WritingsReferenceItems}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
VirtualizingStackPanel.IsVirtualizing="False"
VirtualizingStackPanel.VirtualizationMode="Standard">
</ListBox>
In my HierarchicalDataTemplate x:Key="ChapterReferencesTemplate" as you can see I'm already binding to ItemsSource="{Binding Path=VerseReferences}" but I also need to bind to my ViewModel's CurrentVerseReference for the SelectedItem property of the ListView.
Same for my Button Command to my ViewModel's LookupReferencesCommand. All the data is coming from bindings to a object class that contains a ObservableCollection (ChapterReferences, VerseReferences) So far I'm having no success in getting this to work and would appreciate your help very much.
Thanks!...
Well, I found the right properties to use to get this to work. But, I need to do some reading to find out more about these property settings. For my SelectedItem I had to do this:
SelectedItem="{Binding Path=DataContext.CurrentVerseReference, RelativeSource={RelativeSource AncestorType={x:Type ListBox}}}"
And for my Button Command and CommandParameter I had to do this and this is where I need to do more reading to understand how this worked:
<Button Command="{Binding Path=DataContext.LookupReferencesCommand, RelativeSource={RelativeSource AncestorType={x:Type ListBox}, AncestorLevel=2, Mode=FindAncestor}}"
CommandParameter="{Binding Path=DataContext.CurrentVerseReference, RelativeSource={RelativeSource AncestorType={x:Type ListBox}, AncestorLevel=2, Mode=FindAncestor}}"
Template="{StaticResource AddButtonTemplate}" Cursor="Hand" Width="30"/>
Its the AncestorLevel I don't understand. I'm assuming its because I have the Button control at the second level of the ListView?