WP8 Bind data in a second view - xaml

I am creating a wp8 app. I have two Views and two viewmodels:
VMMainPage vmMainPage -> MainPage.xaml
VMresortInfo vmResortInfo -> resortInfo.xaml
The first one is working fine. However, I am having problems when I try to bind the second view with its viewmodel.
First, in my App.xaml.cs, I have initialized the vmResortInfo as I have done with the vmMainPage.
private static VMresortInfo vmResortInfo = null;
public static VMresortInfo VmResortInfo
{
get
{
if (vmResortInfo == null)
{
vmResortInfo = new VMresortInfo();
}
return vmResortInfo;
}
}
Then, in resortInfo.xaml.cs I changed the datacontext of the view:
public resortInfo()
{
InitializeComponent();
DataContext = App.VmResortInfo;
}
And finally, I try to bind the view with the viewmodel as follows:
<phone:PivotItem Header="info">
<ItemsControl ItemsSource="{Binding resort}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="4*"/>
</Grid.ColumnDefinitions>
<StackPanel Margin="5,5,5,5" Grid.Column="0">
<TextBlock Text="{Binding status}"/>
<TextBlock Text="{Binding name}"/>
</StackPanel>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</phone:PivotItem>
The VMresortInfo is:
public class VMresortInfo
{
private Resort resort {get; set;}
public VMresortInfo()
{
this.resort = new Resort();
this.resort.name = "NAME";
this.resort.status = "abierta";
this.resort.imageURL = new Uri("/Assets/fm.png", UriKind.RelativeOrAbsolute);
}
public void setName(string resortNameSelected)
{
this.resort.name = resortNameSelected;
}
}
But when I run the app.. no info is shown.
Thx in advance.

Omg... I was complicating myself unnecessary...
<phone:PivotItem Header="info">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="4*"/>
</Grid.ColumnDefinitions>
<StackPanel Margin="5,5,5,5" Grid.Column="0">
<TextBlock Text="{Binding resort.name}"/>
<TextBlock Text="{Binding resort.status}"/>
</StackPanel>
</Grid>
</phone:PivotItem>
Regards

Related

TwoWay Data Binding with MVVM Light on Windows Phone 8.1

I'm trying to create a custom Button with ListPickerFlyout using MVVM. The result that i wanna reach is something like that:
custom Button with ListPickerFlyout
My problem is how to bind the SelectedItem from ListPickerFlyout to the content TextBlock.
I'm using MVVM Light Windows Phone 8.1 (Store Appp).
My Xaml code:
<Button Background="White"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="40" />
</Grid.ColumnDefinitions>
<!-- Content TextBlock -->
<TextBlock Text="{Binding MyVM.SelectedItem, Mode=TwoWay}"
Style="{StaticResource DefaultTextBlock}"
FontSize="22"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="10, 0, 0, 0"/>
<Image Height="20" Grid.Column="1"
VerticalAlignment="Center" HorizontalAlignment="Center"
Source="../Assets/icons/arrow_down.png"/>
</Grid>
<Button.Flyout>
<ListPickerFlyout PickerFlyoutBase.Title="$Items$"
ItemsSource="{Binding MyVM.listItems}"
SelectedItem="{Binding MyVM.SelectedItem, Mode=TwoWay}" >
<ListPickerFlyout.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding}"
Style="{StaticResource DefaultTextBlock}"
FontSize="22"/>
</StackPanel>
</DataTemplate>
</ListPickerFlyout.ItemTemplate>
</ListPickerFlyout>
</Button.Flyout>
And in MyVM i have
public string SelectedItem { get; set; }
Edit:
Solved the problem, i forgot to add RaisePropertyChanged("SelectedItem");.
So, in my MVVM class:
private string _selectedItem;
public string SelectedItem
{
get { return _selectedItem; }
set
{
if (_selectedItem != value)
{
_selectedItem = value;
RaisePropertyChanged("SelectedItem");
}
}
}
Just need to add the RaisePropertyChanged("SelectedItem"); in MVVM class.
The complete code:
private string _selectedItem;
public string SelectedItem
{
get { return _selectedItem; }
set
{
if (_selectedItem != value)
{
_selectedItem = value;
RaisePropertyChanged("SelectedItem");
}
}
}

Windows phone 8.1 xaml Listview selected Item style

Dear all i am new to windows phone and xaml.
i have listview on my pivot template now i just want that when i select an item in the listview the backgroud color changed here is my xaml code
<ListView x:Name="LVPrimary" Grid.Row="2" Grid.Column="0"
ItemsSource="{Binding}"
IsItemClickEnabled="True"
ItemClick="LVPrimary_ItemClick"
ContinuumNavigationTransitionInfo.ExitElementContainer="True">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Width="40" Height="40" CornerRadius="5,5,5,5">
<Border.Background>
<ImageBrush ImageSource="{Binding ImagePath}" />
</Border.Background>
</Border>
<StackPanel Grid.Row="0" Grid.Column="1" Margin="0,0,0,0">
<TextBlock
Text="{Binding Code}"
TextWrapping="Wrap"
Pivot.SlideInAnimationGroup="1"
CommonNavigationTransitionInfo.IsStaggerElement="True"
Style="{ThemeResource ListViewItemTextBlockStyle}"
Margin="0,0,19,0"/>
<TextBlock
TextWrapping="NoWrap" TextTrimming="CharacterEllipsis"
Text="{Binding Name}"
Pivot.SlideInAnimationGroup="2"
CommonNavigationTransitionInfo.IsStaggerElement="True"
Style="{ThemeResource ListViewItemContentTextBlockStyle}"
Margin="0,0,5,0"/>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Sorry for the late reply. You will have a List<ItemClass> and ObservableCollection<ItemClass>.
What you can do is - Define a SolidColorBrush Property and bind this property to your Item Grid. I have created this example : -
Here is my Item Class : - Make sure you Implement INotifyPropertyChanged.
public class Item : INotifyPropertyChanged
{
public string Something { get; set; }
public SolidColorBrush ItemBackground
{
get { return _itemBackground; }
set
{
_itemBackground = value;
OnPropertyChanged("ItemBackground");
}
}
private SolidColorBrush _itemBackground;
public event PropertyChangedEventHandler PropertyChanged;
[NotifyPropertyChangedInvocator]
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
}
}
And My sample & simple Xaml is :-
<ListView x:Name="LVPrimary" IsItemClickEnabled="True" ItemClick="ListViewBase_OnItemClick">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Background="{Binding ItemBackground}" Height="100" Width="200">
<TextBlock Text="{Binding Something}"></TextBlock>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
And on Onlick Event I just changed the color of the clicked item like this :-
private void ListViewBase_OnItemClick(object sender, ItemClickEventArgs e)
{
((Item)e.ClickedItem).ItemBackground = new SolidColorBrush(Color.FromArgb(255, 255, 255, 255));
}
Hope it will help you.
Below solution works fine for me..
var griditem = ListViewName.ContainerFromItem(ListViewName.SelectedItem);
var a = ((Windows.UI.Xaml.Controls.Panel)((Windows.UI.Xaml.Controls.ContentControl)listViewItem).ContentTemplateRoot
a.Background= new SolidColorBrush(Windows.UI.Colors.Red);
var textitem = ListViewName.ContainerFromItem(ListViewName.SelectedItem);
var a = ((Windows.UI.Xaml.Controls.Panel)((Windows.UI.Xaml.Controls.ContentControl)listViewItem).ContentTemplateRoot).Children;
((TextBlock)a.ElementAt(0)).Text= "Your Text";

XAML: Binding scrollviewer with 2 sources

Trying to learn xaml designing. I got this picture from internet and use it as a model to practice. There is a problem: When I click one of day buttons, a scrollviewer with a list of day tasks appears. Each task has a list of hours in day, from start time to end time. I don't know whether they are from one source or 2 source (one describes day task and the other one is a list of hours of this task).
I tried with this
public async void ShowTasks()
{
ObservableCollection<DayTask> Data = await App.DataSource.GetData();
DateListBox.ItemsSource = Data;
DayTask daytask = Data.Where(x => x.Day.Date == App.Day.Date).FirstOrDefault();
TasksListView.ItemsSource = daytask.Tasks;
List<HoursModel> HoursList = new List<HoursModel>();
foreach (var simpletask in daytask.Tasks)
{
HoursList.Add(new HoursModel(simpletask.StartTimeHour, simpletask.EndTimeHour));
}
HoursListView.ItemSource = HoursList;
}
This is my xaml code:
<ScrollViewer Height="730" Width="300" >
<ListView
x:Name="TasksListView" Height="730" Width="300"
HorizontalAlignment="Right">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="7*"/>
</Grid.ColumnDefinitions>
<ListView
Grid.Column="0"
x:Name="HoursListView">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock
x:Name="ShowedHours"
Text="{Binding}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Grid Grid.Column="1">
<Rectangle
Fill="Pink"
Height="75"
Width="150"
Margin="60,20,0,0"/>
<TextBlock
Text="{Binding Description}"
FontSize="17"
TextWrapping="Wrap"
Margin="80,20,0,0"/>
</Grid>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollViewer>
I got an error with HoursListView.ItemSource = HoursList;. The detail of this error is
The name 'HoursListView' does not exist in the current context. Does anyone have any suggestions how I can do this ?
You can't access control in DataTemplate directly by it's name. That makes sense because DataTemplate in this case is generated repeatedly for each item within TasksListView.
According to XAML markup posted, you want to have different HoursList for each DayTask. That can be achieved by adding an HoursList property in DayTask class. I'd suggest to use ObservableCollection instead of List because the former has built-in feature to notify bound UI to refresh whenever item added to or removed from collection :
public class DayTask
{
public ObservableCollection<HoursModel> HoursList { get; set; }
.....
}
Then bind HoursListView's ItemsSource to above property :
.....
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="7*"/>
</Grid.ColumnDefinitions>
<ListView
Grid.Column="0"
ItemsSource="{Binding HoursList}"
x:Name="HoursListView">
.....
</ListView>
</Grid>
</DataTemplate>
.....
Don't forget to populate all HoursList properties before setting DateListBox.ItemsSource.

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...

No data with ListBox with Grid inside

I am doing a Grid of two columns that are inside a ListBox. That after that I can DataBind the two columns to be repeated vertically.
So far the code below shows nothing on the WP7 emulator.
<ListBox Background="Yellow" ItemsSource="{Binding}" Height="100" Margin="0,0,8,0">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Height="100">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<TextBlock Text="Channels" HorizontalAlignment="Stretch" Foreground="Black" Grid.Column="0" />
<TextBlock Text="Antenna" HorizontalAlignment="Stretch" Foreground="Black" Grid.Column="1"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Please help me.
If your only concern is that you see ItemTemplate in action, you can supply explicit non-UI items as follows:
<ListBox Background="Yellow" Height="100" Margin="0,0,8,0" xmlns:sys="clr-namespace:System;assembly=mscorlib">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Height="30">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<TextBlock Text="Channels" HorizontalAlignment="Stretch" Foreground="Black" Grid.Column="0" />
<TextBlock Text="Antenna" HorizontalAlignment="Stretch" Foreground="Black" Grid.Column="1"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<sys:String>1111111</sys:String>
<sys:String>2222222</sys:String>
<sys:String>3333333</sys:String>
</ListBox>
Notes:
I removed ItemsSource and supplied items explicitly.
Items must not derive from UIElement so that they are templated. (UIElements are simply drawn and the template is ignored.)
I added System namespace so that string objects can be specified.
I decreased ItemTemplate height so that more than one list row is visible.
Easier solution:
Give the ListBox a name and remove the binding:
<ListBox x:Name="myLB" Background="Yellow" Height="100" Margin="0,0,8,0">
Then use this line in the code (after the call InitializeComponent()):
myLB.ItemsSource = new List<string> { "First", "Second", "Third" };
If you want design-time itemssource, you can use the IsInDesignMode property like so:
if (System.ComponentModel.DesignerProperties.IsInDesignTool)
{
myListBox.ItemsSource = GenerateMockItems();
}
else
{
myListBox.ItemsSource = GetRealItems();
}
in MVVMLight ViewModels, this is shortcut-ed as
if (IsInDesignMode)
{
}
Similarly, since it looks like you're setting your ItemsSource in xaml, inside your class that is your DataContext, you could do something like
public class MyViewModel
{
public MyViewModel()
{
if (System.ComponentModel.DesignerProperties.IsInDesignTool)
{
Items = GenerateMockItems();
EditTime = GenerateRandomFutureDate();
}
else
{
//whatever you expect should happen in runtime
}
}
//what list is binding to
public ObservableCollection<Item> Items { get; set; }
//other properties.. for example
public bool HasItems { get { return Items != null && Items.Count > 0; } }
public DateTime EditDate { get; set; }
private ObservableCollection<Item> GenerateMockItems()
{
var collection = new ObservableCollection<Item>();
for (int i = 0; i < 10; i++)
{
collection.Add(new Item() { Name="sdfsdfs" , Channel=i });
}
return collection;
}
private DateTime GenerateRandomFutureDate()
{
return DateTime.Now.AddSeconds(new Random().Next(0,50000));
}
}