Blank screen on Xamarin - xaml

I have a Xamarin portable project.
The Xaml pages I debug are totally blank and I cannot see any components on the pages on both Android and IOS.
How can I fix this?
Note: It gets no error messages, the pages are opening and I cannot see anything on them.
The problem occured after this error. When I fixed it the pages I debug become opening empty,
although they were working before InitializeComponent error.
Any help would be greatly appreciated.
This is 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="AcikAkademi3.Layoutlar.GridOrnek3">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label BackgroundColor="Red" Text="0,0" Grid.Column="0" Grid.Row="0">
</Label>
<Label BackgroundColor="Blue" Text="1,0" Grid.Column="1" Grid.Row="0">
</Label>
<Label BackgroundColor="Yellow" Text="Açık Akademi" Grid.Column="2" Grid.Row="0"></Label>
<Label BackgroundColor="White" Text="0,1" Grid.Column="0" Grid.Row="1">
</Label>
<Label BackgroundColor="Silver" Text="1,1" Grid.Column="1" Grid.Row="1">
</Label>
<Label BackgroundColor="Lime" Text="2,1" Grid.Column="2" Grid.Row="1">
</Label>
</Grid>
</ContentPage>
This is my cs :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace AcikAkademi3.Layoutlar
{
public partial class GridOrnek3 : ContentPage
{
public GridOrnek3()
{
Padding = new Thickness(0, 20, 0, 0);
}
}
}
App.cs :
using AcikAkademi3.Layoutlar;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Xamarin.Forms;
namespace AcikAkademi3
{
public class App : Application
{
public App()
{
MainPage = new GridOrnek3();
}
protected override void OnStart()
{
}
protected override void OnSleep()
{
}
protected override void OnResume()
{
}
}
}

You should call InitializeComponent() in ctor.
Otherwise UI elements will not init from xaml file.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace AcikAkademi3.Layoutlar
{
public partial class GridOrnek3 : ContentPage
{
public GridOrnek3()
{
InitializeComponent();
Padding = new Thickness(0, 20, 0, 0);
}
}
}
Okay,
Looks like there is a mistake in xaml file
<Label BackgroundColor="Brown" Text="0,1" Grid.Column="0" Grid.Row="1">
</Label>
There is no Brown color, try to chose something from this table
This works for me
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0"
Grid.Row="0"
BackgroundColor="Red"
Text="0,0" />
<Label Grid.Column="1"
Grid.Row="0"
BackgroundColor="Blue"
Text="1,0" />
<Label Grid.Column="2"
Grid.Row="0"
BackgroundColor="Yellow"
Text="Açık Akademi"/>
<Label Grid.Column="0"
Grid.Row="1"
BackgroundColor="Olive"
Text="0,1" />
<Label Grid.Column="1"
Grid.Row="1"
BackgroundColor="Silver"
Text="1,1" />
<Label Grid.Column="2"
Grid.Row="1"
BackgroundColor="Lime"
Text="2,1" />
</Grid>

In fact, it seems that upon the InitializeComponent line is needed.

Related

Xamarin - bind custom view content

I have created a custom view and I would like to set its content by binding. This is what I have:
<ContentView.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="30"/>
</Grid.ColumnDefinitions>
<ffimageloadingsvg:SvgCachedImage Source="resource://CTP.SVG.exit.svg"
Grid.Row="0" Grid.Column="1"
HeightRequest="30"
WidthRequest="30"
HorizontalOptions="Center"
VerticalOptions="Center">
</ffimageloadingsvg:SvgCachedImage>
<redefinitions:BindableView Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"
Content="{Binding View, Source={x:Reference this}, Mode=OneWay}"/>
</Grid>
</ContentView.Content>
And following this tutorial I have defined my BindableView:
[ContentProperty(nameof(Content))]
public class BindableView : View
{
public static readonly BindableProperty ContentProperty =
BindableProperty.Create(
propertyName: nameof(Content),
returnType: typeof(View),
declaringType: typeof(BindableView),
defaultValue: default(View));
public View Content
{
get { return (View)GetValue(ContentProperty); }
set { SetValue(ContentProperty, value); }
}
}
But the BindableView is never showing, even if I define its Content statically.
What am I missing?
Easiest way to solve it is to use ContentView instead the custom BindableView.

Editor goes behind the keyboard when it resized using Wordwrap in Xamarin.Forms (iOS)?

I am proceeding further and generating new ticket as it is quite different from this issue How to prevent Editor to go behind the keyboard in Xamarin.Forms?
I have chat page and autosize editor. When user type more than 1-2 lines, Editor expand correctly but it goes behind the keyboard.
However, if user add multiple lines using "return" it works correctly. I think I am missing something in Xaml page to play with Editor and StackLayout.
Please suggest
Please note that I don't use Xam.Plugins.Forms.KeyboardOverlap. To manage layout on keyboard visibility, I use custom stacklayout WrapperStackLayoutRenderer which set bottom padding on appear and disappear of keyboard.
Page Xaml
<ContentPage.Content>
<local1:WrapperStackLayout>
<Grid Margin="0" Padding="0" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<ListView x:Name="MessagesListView"
ItemTemplate="{StaticResource MessageTemplateSelector}"
ItemsSource="{Binding Conversations}"
HasUnevenRows="True"
Margin="0"
Grid.Row="0"
SeparatorVisibility="None"/>
<Grid RowSpacing="1" ColumnSpacing="2" Padding="5" Grid.Row="1" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<local1:EditorWithAutoSize x:Name="txtMessage" Text="{Binding SendingText}" TextChanged="EnableSend"/>
<Frame x:Name="SendButton" Grid.Column="1" Margin= "0" Padding="0" HasShadow="false" HeightRequest="25"
BackgroundColor="Transparent" HorizontalOptions="FillAndExpand">
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="SendMessage_Click" NumberOfTapsRequired="1" />
</Frame.GestureRecognizers>
<Label Text="Send" x:Name="sendButton" HeightRequest="20"
HorizontalOptions="Center" VerticalOptions="Center"/>
</Frame>
</Grid>
</Grid>
</local1:WrapperStackLayout>
</ContentPage.Content>
EditorWithAutoSize
public class EditorWithAutoSize : Editor
{
public EditorWithAutoSize()
{
this.TextChanged += (sender, e) => {
this.InvalidateMeasure();
};
}
}
WrapperStackLayout
public class WrapperStackLayout : StackLayout
{
}
WrapperStackLayoutRenderer
public class WrapperStackLayoutRenderer : VisualElementRenderer<StackLayout>
{
public WrapperStackLayoutRenderer()
{
UIKeyboard.Notifications.ObserveWillShow((sender, args) =>
{
if (Element != null)
{
Element.Margin = new Thickness(0, 0, 0, (args.FrameEnd.Height));
}
});
UIKeyboard.Notifications.ObserveWillHide((sender, args) =>
{
if (Element != null)
{
Element.Margin = new Thickness(0); //set the margins to zero when keyboard is dismissed
}
});
}
}
You have to add RowDefinition Height="auto" in your second Grid, then the editor will auto group with the text you entered:
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
The complete code should be:
<Grid RowSpacing="1" ColumnSpacing="2" Padding="5" Grid.Row="1" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<local:EditorWithAutoSize x:Name="txtMessage" Text="Binding SendingText" />
<Frame x:Name="SendButton" Grid.Column="1" Margin= "0" Padding="0" HasShadow="false" HeightRequest="25"
BackgroundColor="Transparent" HorizontalOptions="FillAndExpand">
<Label Text="Send" x:Name="sendButton" HeightRequest="20"
HorizontalOptions="Center" VerticalOptions="Center"/>
</Frame>
</Grid>
I uploaded my test sample here and you can check it: editor-xamarin.forms
BTW, there is a sample in github that you can refer: ChatUIXForms, you can use the editor and custom renderer code in his project. There are also blogs the author wrote you can read.

Syncfusion Xamarin Listview not displaying any items

I want to insert a syncfusion linearlayout listview, but for some reason it's not displaying any items/data, and I'm not getting any errors at the same time, I tried changing binding syntax and a couple things, but I cannot seem to get it right.
This is my xaml:
<syncfusion:SfListView x:Name="listView"
ItemTemplate="{Binding Source={local2:BandInfoRepository}, Path=BandInfo, Mode=TwoWay}"
ItemSize="100"
AbsoluteLayout.LayoutBounds="1,1,1,1"
AbsoluteLayout.LayoutFlags="All" >
<syncfusion:SfListView.ItemTemplate>
<DataTemplate>
<Grid RowSpacing="0" Padding="0,12,8,0" ColumnSpacing="0" Margin="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="1" />
</Grid.RowDefinitions>
<Grid RowSpacing="0" Padding="8,0,8,10">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image Source="{Binding Path=BandImage}"
Grid.Column="0"
Grid.Row="0"
HeightRequest="80"
WidthRequest="70"
HorizontalOptions="Start"
VerticalOptions="Start"
/>
<StackLayout Orientation="Vertical"
Padding="5,-5,0,0"
VerticalOptions="Start"
Grid.Row="0"
Grid.Column="1">
<Label Text="{Binding Path=BandName}"
FontAttributes="Bold"
FontSize="16"
BackgroundColor="Green"
TextColor="#000000" />
<Label Text="{Binding Path=BandDescription}"
Opacity="0.54"
BackgroundColor="Olive"
TextColor="#000000"
FontSize="13" />
</StackLayout>
</Grid>
<BoxView Grid.Row="1"
HeightRequest="1"
Opacity="0.75"
BackgroundColor="#CECECE" />
</Grid>
</DataTemplate>
</syncfusion:SfListView.ItemTemplate>
</syncfusion:SfListView>
And this is the class where I'm getting the data from:
public class BandInfo : INotifyPropertyChanged
{
private string bandName;
private string bandDesc;
private ImageSource _bandImage;
public string BandName
{
get { return bandName; }
set
{
bandName = value;
OnPropertyChanged("BandName");
}
}
public string BandDescription
{
get { return bandDesc; }
set
{
bandDesc = value;
OnPropertyChanged("BandDescription");
}
}
public ImageSource BandImage
{
get { return _bandImage; }
set
{
_bandImage = value;
OnPropertyChanged("BandImage");
}
}
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string name)
{
if (this.PropertyChanged != null)
this.PropertyChanged(this, new PropertyChangedEventArgs(name));
}
}
And just in case, this is how I'm filling the collection (BandInfoRepository.cs):
public class BandInfoRepository
{
private ObservableCollection<BandInfo> bandInfo;
public ObservableCollection<BandInfo> BandInfo
{
get { return bandInfo; }
set { this.bandInfo = value; }
}
public BandInfoRepository()
{
GenerateBookInfo();
}
internal void GenerateBookInfo()
{
string[] BandNames = new string[] {
"Nirvana",
"Metallica",
"Frank Sinatra"
};
string[] BandDescriptions = new string[] {
"Description",
"Description",
"Description"
};
bandInfo = new ObservableCollection<BandInfo>();
for (int i = 0; i < BandNames.Count(); i++)
{
var band = new BandInfo()
{
BandName = BandNames[i],
BandDescription = BandDescriptions[i],
BandImage = ImageSource.FromResource("Lim.Images.Image" + i + ".png")
};
bandInfo.Add(band);
}
}
}
I hope you guys can help me out as I've been stuck with this for a while now. Thanks in advance.
Looks like you unintentionally bind ItemTemplate twice and not bind any
ItemsSource even once.
We have looked into your code snippet and we have found that you have binded the underlying collection to ItemTemplate property instead of ItemsSource property. Further to bind the underlying collection you have to set your ViewModel(i.e. BandInfoRepository) as BindingContext for ContentPage. Please refer the below code snippets to know how to set BindingContext for your page and also to bind the underlying collection into the ItemsSource property.
Code Example:[XAML]
<ContentPage>
<ContentPage.BindingContext>
<local:BandInfoRepository/>
</ContentPage.BindingContext>
<ContentPage.Content>
<listView:SfListView x:Name="listView" ItemSize="70" ItemsSource="{Binding BandInfo}" >
<listView:SfListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid x:Name="grid" RowSpacing="1">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="1" />
</Grid.RowDefinitions>
<Grid RowSpacing="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Source="{Binding BandImage}"
VerticalOptions="Center"
HorizontalOptions="Center"
HeightRequest="50" Aspect="AspectFit"/>
<Grid Grid.Column="1"
RowSpacing="1"
Padding="10,0,0,0"
VerticalOptions="Center">
<Label Text="{Binding ContactName}"/>
</Grid>
</Grid>
<StackLayout Grid.Row="1" BackgroundColor="Gray" HeightRequest="1"/>
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</listView:SfListView.ItemTemplate>
</listView:SfListView>
</ContentPage.Content>
</ContentPage>
For your assistance, we have attached the working sample link below.
Sample link: http://www.syncfusion.com/downloads/support/directtrac/186932/ze/ListViewSample905947849

Xamarin.Forms: Creating a SearchBar and search on a ListView

Good Day everyone. I'm currently doing an application that allows the User to CRUD record of an Customer and save it on a database.
All the created records are displayed on a ListView.
What I want to do is to create a SearchBar that allows me to search Customer Records that is inside my ListView. In a separate program, I've tried to create a searchbar but I was only able to search records from a pre-defined ListView.
The searchbar I need to do should allow me to search on a ListView that comes from a database.
Hope you can help me with this.
Here are some of my codes. If you need to see more. Please let me know. Thanks a lot.
CustomerViewModel.cs
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using XamarinFormsDemo.Models;
using XamarinFormsDemo.Services;
namespace XamarinFormsDemo.ViewModels
{
public class CustomerVM : INotifyPropertyChanged
{
private List<Customer> _customerList;
public List<Customer> CustomerList
{
get { return _customerList; }
set
{
_customerList = value;
OnPropertyChanged();
}
}
public CustomerVM()
{
InitializeDataAsync();
}
private async Task InitializeDataAsync()
{
var customerServices = new CustomerServices();
CustomerList = await customerServices.GetCustomerAsync();
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
var handler = PropertyChanged;
if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
CustomerPage.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="XamarinFormsDemo.Views.ClientListPage"
xmlns:ViewModels="clr-namespace:XamarinFormsDemo.ViewModels;assembly=XamarinFormsDemo"
xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"
BackgroundImage="bg3.jpg"
Title="Client List">
<ContentPage.BindingContext>
<ViewModels:CustomerVM/>
</ContentPage.BindingContext>
<StackLayout Orientation="Vertical">
<ListView x:Name="CustomerListView"
ItemsSource="{Binding CustomerList}"
HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="10" RowSpacing="10" ColumnSpacing="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<controls:CircleImage Source="icon.png"
HeightRequest="66"
HorizontalOptions="CenterAndExpand"
Aspect="AspectFill"
WidthRequest="66"
Grid.RowSpan="2"
/>
<Label Grid.Column="1"
Text="{Binding CUSTOMER_NAME}"
TextColor="#24e97d"
FontSize="24"/>
<Label Grid.Column="1"
Grid.Row="1"
Text="{Binding CUSTOMER_CODE}"
TextColor="White"
FontSize="18"
Opacity="0.6"/>
<Label Grid.Column="1"
Grid.Row="2"
Text="{Binding CUSTOMER_CONTACT}"
TextColor="White"
FontSize="18"
Opacity="0.6"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<StackLayout Orientation="Vertical"
Padding="30,10,30,10"
HeightRequest="20"
BackgroundColor="#24e97d"
VerticalOptions="Center"
Opacity="0.5">
<Label Text="© Copyright 2016 SMESOFT.COM.PH All Rights Reserved "
HorizontalTextAlignment="Center"
VerticalOptions="Center"
HorizontalOptions="Center" />
</StackLayout>
</StackLayout>
</ContentPage>
SearchBar has SearchCommand property. Bind it to some your ICommand on view model. Also bind Text property of SearchBar to string property on view model. Keep all records in some common collection _allCustomers and on UI show only ObservableCollection<Customer> Customers. In execution method for this command you could add:
private void SearchCommandExecute()
{
var tempRecords = _allCustomers.Where(c=>c.FullName.Contains(Text));
Customers = new ObservableCollection<Customer>(tempRecords);
}
This is basically an addition to the answer of Egor Gromadskiy, but as there are so many comments on other subjects I post it here.
Keep in mind that when in the search bar X button or cancel button is pressed, search command will not be triggered. So if you want to show all results on this event, call this command from the SearchText property (in this case, SearchText is set to null, at least on iOS, for Android refer to this forum).
The same can be done if you want an as-you-type search and don't wait till Search button is hit.
public string SearchText
{
get { ... }
set {
... = value;
SearchCommand.Execute();
}
}

MVVM binding error?

In the first block below I intentionally miss named one of my binding statements so I could compare to my second block. The difference is in the property not found on 'ag2.item...' line.
item is my model.
In block 2 you can see that it is pointing to my view model (ag2.viewModel.itemViewModel).
What do I need to do in my XAML or my codebehind to get it to point to my class rather than the viewmodel?
Block 1:
BindingExpression path error: 'itemModel1' property not found on
'ag2.item, ag2, Version=1.0.0.0, Culture=neutral,
PublicKeyToken=null'. BindingExpression: Path='itemModel1'
DataItem='ag2.item, ag2, Version=1.0.0.0,
Culture=neutral, PublicKeyToken=null'; target element is
'Windows.UI.Xaml.Controls.TextBlock' (Name='null'); target property is
'Text' (type 'String')
Block 2:
BindingExpression path error:'itemModel' property not found on
'ag2.viewModel.itemViewModel, ag2, Version=1.0.0.0, Culture=neutral,
PublicKeyToken=null'. BindingExpression: Path='itemModel'
DataItem='ag2.viewModel.itemViewModel, ag2, Version=1.0.0.0,
Culture=neutral, PublicKeyToken=null'; target element is
'Windows.UI.Xaml.Controls.TextBlock' (Name='null'); target property is
'Source' (type 'String')
Code behind to Block 2:
itemViewModel VM = new itemViewModel((Int32)navigationParameter);
DataContext = VM;
I should also note that in block 1 I am doing my binding to a GridView where the ItemSource="{Binding item}" is set.
In block 2 I built my UI using grids and textblocks using this: Text="{Binding Path=itemModel}"
Update: In an effort to try to gain better understanding. I'm putting my code out there: Here is the XAML, below that will be the ViewModel and below that is my Model... I'm new at MVVM so I really don't know what I'm doing incorrectly. Any help is greatly appreciated.
XAML:
<common:LayoutAwarePage
x:Name="pageRoot"
x:Class="autoGarage2.VehicleItemDetailPage"
IsTabStop="false"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:common="using:autoGarage2.Common"
xmlns:local="using:autoGarage2"
xmlns:data="using:autoGarage2"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006">
<!--
This grid acts as a root panel for the page that defines two rows:
* Row 0 contains the back button and page title
* Row 1 contains the rest of the page layout
-->
<Grid Style="{StaticResource LayoutRootStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
<!-- Back button and page title -->
<Grid
Style="{StaticResource LayoutRootStyle}" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
<TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Style="{StaticResource PageHeaderTextStyle}" Grid.Column="1"/>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="3*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal" Width="auto" Margin="50,0,0,0" VerticalAlignment="Top" >
<Grid HorizontalAlignment="Left" Width="250" Height="250">
<Border Background="White" BorderBrush="CornflowerBlue" BorderThickness="1">
<Image Source="{Binding Image}" Margin="50"/>
</Border>
<StackPanel VerticalAlignment="Bottom" Background="CornflowerBlue">
<StackPanel Orientation="Horizontal" DataContext="{Binding vehicles}">
<TextBlock Text="{Binding VehicleMake}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource PageSubheaderTextStyle}" Margin="5"/>
<TextBlock Text="{Binding VehicleModel}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource PageSubheaderTextStyle}" Margin="5"/>
</StackPanel>
</StackPanel>
</Grid>
</StackPanel>
<StackPanel Grid.Row="0" Grid.Column="1">
<Grid Margin="20,0,0,20">
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Vehicle Make:" Grid.Row="0" Grid.Column="0" FontSize="25" Foreground="Black" />
<TextBox Text="{Binding Path=VehicleMake}" Grid.Row="0" Grid.Column="1" FontSize="25" BorderBrush="CornflowerBlue" BorderThickness="1"/>
<TextBlock Text="Vehicle Model:" FontSize="25" Foreground="Black" Grid.Row="1" Grid.Column="0"/>
<TextBox Text="{Binding VehicleModel}" Grid.Row="1" Grid.Column="1" FontSize="25" BorderBrush="CornflowerBlue" BorderThickness="1"/>
<TextBlock Text="Vehicle Year:" FontSize="25" Foreground="Black" Grid.Row="2" Grid.Column="0"/>
<TextBox Text="{Binding VehicleYear}" Grid.Row="2" Grid.Column="1" FontSize="25" BorderBrush="CornflowerBlue" BorderThickness="1"/>
<TextBlock Text="License Plate:" FontSize="25" Foreground="Black" Grid.Row="3" Grid.Column="0"/>
<TextBox Text="" Grid.Row="3" Grid.Column="1" FontSize="25" BorderBrush="CornflowerBlue" BorderThickness="1"/>
<TextBlock Text="VIN #" FontSize="25" Foreground="Black" Grid.Row="4" Grid.Column="0"/>
<TextBox Text="" Grid.Row="4" Grid.Column="1" FontSize="25" BorderBrush="CornflowerBlue" BorderThickness="1" />
<TextBlock Text=" Current Mi/Km" FontSize="25" Foreground="Black" Grid.Row="5" Grid.Column="0"/>
<TextBox Text="" Grid.Row="5" Grid.Column="1" FontSize="25" BorderBrush="CornflowerBlue" BorderThickness="1"/>
<TextBlock Text="" FontSize="25" Foreground="Black" Grid.Row="6" Grid.ColumnSpan="2"/>
<TextBlock Text="Last Oil Change" FontSize="25" Foreground="Black" Grid.Row="7" Grid.Column="0"/>
<TextBox Text="" Grid.Row="7" Grid.Column="1" FontSize="25" BorderBrush="CornflowerBlue" BorderThickness="1"/>
<TextBlock Text="Last Oil Change Mi/Km" FontSize="25" Foreground="Black" Grid.Row="8" Grid.Column="0"/>
<TextBox Text="" Grid.Row="8" Grid.Column="1" FontSize="25" BorderBrush="CornflowerBlue" BorderThickness="1"/>
<TextBlock Text="" FontSize="25" Foreground="Black" Grid.Row="9" Grid.ColumnSpan="2"/>
<TextBlock Text="Reminder Mi/Km" FontSize="25" Foreground="Black" Grid.Row="10" Grid.Column="0"/>
<TextBox Text="" Grid.Row="10" Grid.Column="1" FontSize="25" BorderBrush="CornflowerBlue" BorderThickness="1"/>
<TextBlock Text="Reminder Month(s)" FontSize="25" Foreground="Black" Grid.Row="11" Grid.Column="0"/>
<TextBox Text="" Grid.Row="11" Grid.Column="1" FontSize="25" BorderBrush="CornflowerBlue" BorderThickness="1"/>
</Grid>
</StackPanel>
</Grid>
</Grid>
</common:LayoutAwarePage>
View Model:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Collections.ObjectModel;
using Windows.Foundation.Collections;
using System.IO;
namespace autoGarage2.viewModel
{
class vehicleViewModel
{
private IList<vehicle> m_vehicles;
private IList<vehicle> m_vehicleItem;
public IList<vehicle> vehicles
{
get { return m_vehicles; }
set { m_vehicles = value; }
}
public IList<vehicle> vehicleItem
{
get { return m_vehicleItem; }
set { m_vehicleItem = value; }
}
private IList<vehicle> getVehicleDetail(Int32 vId)
{
var vehicleItem =
from v in vehicles
where v.VehicleId == vId
select v;
if (vId > 0)
{
//vehicles.Clear();
m_vehicles = new List<vehicle>();
foreach (var item in vehicleItem)
{
m_vehicles = new List<vehicle>
{
new vehicle(item.VehicleId, item.VehicleMake.ToString(), item.VehicleModel.ToString(), item.VehicleYear, item.Image.ToString())
};
//vehicle myVehicle = new vehicle(item.VehicleId, item.VehicleMake.ToString(), item.VehicleModel.ToString(), item.VehicleYear, item.Image.ToString());
//m_vehicles.Add(myVehicle);
}
}
return m_vehicles;
}
public vehicleViewModel(Int32 vId)
{
m_vehicles = new List<vehicle>
{
new vehicle(1, "Mazda", "3", 2011, "Assets/car2.png"),
new vehicle(2, "Chevy", "Tahoe", 2004, "Assets/jeep1.png"),
new vehicle(3, "Honda", "Goldwing", 2007 ,"Assets/moto1.png")
};
if (vId > 0)
{
//m_vehicles = new List<vehicle>();
//m_vehicles =
//getVehicleDetail(vId);
m_vehicles = new List<vehicle>
{
new vehicle(2, "Chevy", "Tahoe", 2004, "Assets/jeep1.png"),
};
}
}
#region dbCode
//string dbName = "vehicle.db";
//var dbPath = Path.Combine(Windows.Storage.ApplicationData.Current.LocalFolder.Path, dbName);
//using (var db = new SQLite.SQLiteConnection(dbPath))
// {
// var list = db.Table<vehicle>().ToList();
// m_vehicles = new List<vehicle>();
// for (Int32 i = 0; i < list.Count; i++)
// {
// //m_vehicles.Add(db.Table<vehicle>().ToList());
// }
// }
//foreach (vehicle item in m_vehicles)
//{
// AllItems.Add(item);
//}
#endregion
}
}
Model:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
//using SQLite;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Imaging;
namespace autoGarage2
{
class vehicle : autoGarage2.Common.BindableBase
{
public vehicle()
{
}
public vehicle(string imagePath)
{
this._imagePath = imagePath;
}
public vehicle(Int32 vId, string vMake, string vModel, Int16 vYear, string imagePath)
{
this.m_vehicleID = vId;
this.m_vehicleMake = vMake;
this.m_vehicleModel = vModel;
this.m_vehicleYear = vYear;
this.m_vehicleName = vMake + " " + vModel;
this._imagePath = imagePath;
}
private Int32 m_vehicleID;
private String m_vehicleMake;
private String m_vehicleModel;
private Int16 m_vehicleYear;
private string m_vehicleName;
private ImageSource _image = null;
private String _imagePath = null;
private static Uri _baseUri = new Uri("ms-appx:///");
//[AutoIncrement, PrimaryKey]
public Int32 VehicleId
{
get
{
return m_vehicleID;
}
set
{
m_vehicleID = value;
OnPropertyChanged("VehicleId");
}
}
public String VehicleMake
{
get
{
return m_vehicleMake;
}
set
{
m_vehicleMake = value;
OnPropertyChanged("VehicleMake");
}
}
public String VehicleModel
{
get
{
return m_vehicleModel;
}
set
{
m_vehicleModel = value;
OnPropertyChanged("VehicleModel");
}
}
public Int16 VehicleYear
{
get
{
return m_vehicleYear;
}
set
{
m_vehicleYear = value;
OnPropertyChanged("VehicleYear");
}
}
public string VehicleName
{
get
{
return m_vehicleName;
}
set
{
m_vehicleName = value;
OnPropertyChanged("VehicleName");
}
}
public ImageSource Image
{
get
{
if (this._image == null && this._imagePath != null)
{
this._image = new BitmapImage(new Uri(vehicle._baseUri, this._imagePath));
}
return this._image;
}
set
{
this._imagePath = null;
this.SetProperty(ref this._image, value);
}
}
public void SetImage(String path)
{
this._image = null;
this._imagePath = path;
this.OnPropertyChanged("Image");
}
}
}
It sounds like you are trying to databind your TextBlock to a different object, not to the ViewModel (which is the DataContext of your window/control). If that is correct, you'll need to set the DataContext of the TextBlock or the parent Grid to the object you want to DataBind to.
The DataContext is used in determining the path to DataBind to for a control, and it inherits down the visual tree. So if your DataContext is set to MyViewModel, and you use Text="{Binding Path=itemModel}", your binding path will be MyViewModel.itemModel.
If you don't want to include MyViewModel in the binding path, you'll need to change the DataContext of the control in question, or of a containing control. For MVVM, this is often done by having the other object exposed as a property of the ViewModel. So if your MyViewModel had a property ItemModel:
public class ItemModel
{
public string Property1 { get; }
public string Property2 { get; }
}
public class MyViewModel
{
public ItemModel ItemModel { get; private set; }
}
Then your XAML could look like this (assuming MyViewModel is the DataContext of the parent window/control).
<Grid Grid.Row="1" DataContext="{Binding ItemModel}">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding property1}"/>
<TextBlock Text="{Binding Property2}" Grid.Row="1"/>
</Grid>
And the two textboxes would be bound to Property1 and Property2 of the ItemModel object.
You seem to be trying to bind to a list but you are not using any ItemsControl in your XAML. You should probably use something like a ListView, bind its ItemsSource to your vehicles or vehicleItem lists, use an ItemTemplate/DataTemplate to define the look of each item in the collection, use ObservableCollection if your collection changes or raise INotifyPropertyChanged.PropertyChanged notifications if you swap out your collection, etc. Otherwise I would suggest reading something about binding ItemsControls or a general book about XAML, like Adam Nathan's WPF Unleashed. It seems like you are setting your m_vehicles only to replace it with a new one in the next statement. Also - you are setting the DataContext of the StackPanel to your list, which is allowed, but it does not work, since the DataContext of the elements of your StackPanel will still be the entire list and not its items, which is what you get by using an ItemsControl.
I was able to get my data to show up after a weekend of not looking at it. Basically I noticed that I was getting a binding error that stated that it couldn't find the property in my autoGarage2.vehicles list. So for grins I prefaced the binding like this:
{Binding vehicles[0].vehicleModel}
Next time I ran it, the data was there. After thinking about it some more, I decided to create a single object of vehicle and instead of populating the list object I'm populating just the single vehicle property. Now I'm doing something like this:
{Binding vehicleSingle.vehicleModel}
Thanks for every ones help. I guess this is just a nuance of how MVVM works in XAML...