Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I am developing a windows phone 7 application.
I need to display list of channels vertically. Next to each channel i need to display programs for that particular channel which should be horizontally scrollable. Can any one suggest how to do this?
You can use a nested listbox, setting a scrollviewer in the child list, something along this lines should get you started
public class Channel
{
public string Name { get; set; }
public IEnumerable<Program> Programs { get; set; }
}
public class Program
{
public string Name { get; set; }
}
In your code behind
public MainPage()
{
InitializeComponent();
BindChannels();
}
private void BindChannels()
{
lstChannels.ItemsSource = new[]
{
new Channel { Name = "BBC 1", Programs = new[] { new Program { Name = "Abbey Town" }, new Program { Name = "Early Bird" }, new Program { Name = "East enders" } } },
new Channel { Name = "BBC 2", Programs = new[] { new Program { Name = "Dancing stars" }, new Program { Name = "David and G" }, new Program { Name = "The Eastern blocks" } } },
new Channel { Name = "ITV", Programs = new[] { new Program { Name = "X Factor" }, new Program { Name = "X Factor reloaded" }, new Program { Name = "The game" } } },
new Channel { Name = "Fox News", Programs = new[] { new Program { Name = "Early news" }, new Program { Name = "Talk C" }, new Program { Name = "Recap" } } }
};
}
Xaml
<ListBox x:Name="lstChannels">
<ListBox.ItemTemplate>
<DataTemplate>
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled" Margin="0,6,0,0" Height="Auto">
<ListBox ItemsSource="{Binding Programs}" ScrollViewer.VerticalScrollBarVisibility="Disabled" Margin="12,0,0,0">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation ="Horizontal" >
<StackPanel.RenderTransform>
<TranslateTransform
X="0" />
</StackPanel.RenderTransform>
</StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Border Height="100" Width="200" BorderBrush="Bisque" BorderThickness="3">
<TextBlock Text="{Binding Name}"></TextBlock>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Related
I'm trying to create custom tabs control in .Net MAUI, for that, I had first tried it with ScrollView and BindableStackLayout control but in that, I'm facing a problem.
Reported here Custom tabs with ScrollView bug
So, as an alternative approach or work-around, I have tried to develop the same Tabs control using CollectionView.
This alternative approach is working fine in iOS but not working properly in Android.
There is one problem that is common in both Android and iOS. I have taken BoxView control as an Indicator for the selected tab. That I'm going to show only for the Selected tab but this just shows in the first tab, when I click on other tabs the tabs get changed but it does not get hidden from the first tab and get visible in the other selected tab.
I have used the visual state manager with white color for the selected state because it gives looks like an indicator which I',m trying to create using BoxView. But this also shows Selected item for Android only when that view gets loads for iOS I have to select the tab first then only it shows the selected color there.
Here is what I have done:
MainPage.xaml
<ContentPage.Content>
<Grid RowDefinitions="50, *" RowSpacing="0">
<CollectionView x:Name="TabsView"
Grid.Row="0"
ItemsSource="{Binding Tabs,Mode=TwoWay}"
ItemsUpdatingScrollMode="KeepItemsInView"
ItemSizingStrategy="MeasureAllItems"
SelectedItem="{Binding SelectedTab}"
SelectionChangedCommand="{Binding Path=BindingContext.TabChangedCommand,Source={x:Reference TabsView}}"
SelectionChangedCommandParameter="{Binding SelectedTab}"
SelectionMode="Single">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid RowSpacing="0" RowDefinitions="*, 3">
<Label Grid.Row="0"
Text="{Binding TabTitle}"
TextColor="White"
BackgroundColor="navy"
Padding="20,0"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
FontSize="12" />
<BoxView Grid.Row="1" Color="{Binding BoxColor}"
IsVisible="{Binding IsSelected}"/>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="CommonStates">
<VisualState Name="Normal"/>
<VisualState Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="White" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
<tabs:ParentRecordTabView Grid.Row="1"
IsVisible="{Binding IsParentRecordTabVisible}"
VerticalOptions="FillAndExpand"/>
<tabs:AdditionalInfoTabView Grid.Row="1"
IsVisible="{Binding IsAdditionalInfoTabVisible}"
VerticalOptions="FillAndExpand" />
</Grid>
</ContentPage.Content>
MainPageViewModel.cs
public class MainPageViewModel : BaseViewModel
{
public MainPageViewModel()
{
GetTabs();
}
private bool _isParentRecordTabVisible = true;
private bool _isAdditionalInfoTabVisible;
private ObservableCollection<TabViewModel> _tabs { get; set; }
private TabViewModel _selectedTab { get; set; }
public bool IsParentRecordTabVisible
{
get => _isParentRecordTabVisible;
set { _isParentRecordTabVisible = value; OnPropertyChanged(nameof(IsParentRecordTabVisible)); }
}
public bool IsAdditionalInfoTabVisible
{
get => _isAdditionalInfoTabVisible;
set { _isAdditionalInfoTabVisible = value; OnPropertyChanged(nameof(IsAdditionalInfoTabVisible)); }
}
public ObservableCollection<TabViewModel> Tabs
{
get => _tabs;
set { _tabs = value; OnPropertyChanged(nameof(Tabs)); }
}
public TabViewModel SelectedTab
{
get => _selectedTab;
set
{
_selectedTab = value;
OnPropertyChanged(nameof(SelectedTab));
}
}
public ICommand TabChangedCommand { get { return new Command<TabViewModel>(ChangeTabClick); } }
private void GetTabs()
{
Tabs = new ObservableCollection<TabViewModel>();
Tabs.Add(new TabViewModel { TabId = 1, IsSelected = true, TabTitle = "Parent record" });
Tabs.Add(new TabViewModel { TabId = 2, TabTitle = "Additional Info" });
Tabs.Add(new TabViewModel { TabId = 3, TabTitle = "Contacts" });
Tabs.Add(new TabViewModel { TabId = 4, TabTitle = "Previous inspections" });
Tabs.Add(new TabViewModel { TabId = 5, TabTitle = "Attachments" });
SelectedTab = Tabs.FirstOrDefault();
}
public void ChangeTabClick(TabViewModel tab)
{
Tabs.All((arg) =>
{
if (arg.TabId == tab.TabId)
{
arg.IsSelected = true;
}
else
{
arg.IsSelected = false;
}
return true;
});
SelectedTab = Tabs.Where(t => t.IsSelected == true).FirstOrDefault();
switch (SelectedTab.TabId)
{
case 1:
IsParentRecordTabVisible = true;
IsAdditionalInfoTabVisible = false;
break;
case 2:
IsParentRecordTabVisible = false;
IsAdditionalInfoTabVisible = true;
break;
}
}
}
TabViewModel.cs
public class TabViewModel : BaseViewModel
{
private bool _IsSelected;
public bool IsSelected
{
get { return _IsSelected; }
set
{
_IsSelected = value;
OnPropertyChanged(nameof(IsSelected));
}
}
private int _TabId;
public int TabId
{
get { return _TabId; }
set
{
_TabId = value;
OnPropertyChanged(nameof(TabId));
}
}
private string _TabTitle;
public string TabTitle
{
get { return _TabTitle; }
set
{
_TabTitle = value;
OnPropertyChanged(nameof(TabTitle));
}
}
}
Note: This same approach again works fine in Xamarin.Forms (Visual Studio 2019), this just not working in MAUI, so does anyone notice something like this?
How to Reproduce error: check github
Remove the BoxView default style in your project. Resource> Styles> Styles.xml
<Style TargetType="BoxView">
<Setter Property="Color" Value="{AppThemeBinding Light={StaticResource Gray950}, Dark={StaticResource Gray200}}" />
You could use the IsVisible property to show the BoxView or not instead of binding color with BoxColor. Remove the SelectionChangedCommand, SelectionChangedCommandParameter and VisualStateManager.VisualStateGroups in CollectionView as well.
<BoxView Grid.Row="1"
Color="Yellow"
IsVisible="{Binding IsSelected}"/>
Set the SelectedTab property like below.
public TabViewModel SelectedTab
{
get => _selectedTab;
set
{
_selectedTab = value;
SetSelection();
OnPropertyChanged(nameof(SelectedTab));
}
}
private void SetSelection()
{
foreach (var item in Tabs)
{
item.IsSelected = false;
}
SelectedTab.IsSelected = true;
}
I created a CarouselPage but I need CarouselView so I can add other control onto the page. For some reason, nothing showing up. Don't know what I am missing.
public class Zoo
{
public string ImageUrl { get; set; }
public string Name { get; set; }
}
public ObservableCollection<Zoo> Zoos { get; set; }
public PlayKeySound()
{
Zoos = new ObservableCollection<Zoo>
{
new Zoo
{
ImageUrl = "http://content.screencast.com/users/JamesMontemagno/folders/Jing/media/23c1dd13-333a-459e-9e23-c3784e7cb434/2016-06-02_1049.png",
Name = "Woodland Park Zoo"
},
new Zoo
{
ImageUrl = "http://content.screencast.com/users/JamesMontemagno/folders/Jing/media/6b60d27e-c1ec-4fe6-bebe-7386d545bb62/2016-06-02_1051.png",
Name = "Cleveland Zoo"
},
new Zoo
{
ImageUrl = "http://content.screencast.com/users/JamesMontemagno/folders/Jing/media/e8179889-8189-4acb-bac5-812611199a03/2016-06-02_1053.png",
Name = "Phoenix Zoo"
}
};
InitializeComponent();
carousel.ItemsSource = Zoos;
}
Xaml part:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:control="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView"
x:Class="keysound.PlayKeySound"
x:Name="devicePage"
BackgroundColor="Gray" >
<ContentPage.Content>
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<control:CarouselView x:Name="carousel" >
<control:CarouselView.ItemTemplate>
<DataTemplate>
<Label Text="{Binding Name}"/>
</DataTemplate>
</control:CarouselView.ItemTemplate>
</control:CarouselView>
</StackLayout>
</ContentPage.Content>
This is just a testing code to tryout the carousel view.
I was able to run your code and see the data of your collection. I had problems with carousel when I first time installed it. Try two things:
Clean and rebuild the solution. If this doesn't help
Uninstall pre-2, install pre-1. Check if it works. Then update to pre-2.
I know it is strange but that what did it for me.
So I have a listbox I am trying to make for an "achievement page". Everything works good if I use a List but when I switch it to a List there is nothing displayed, not even from the xaml...
public partial class achievementPage : PhoneApplicationPage
{
public string Description { get; set; }
public string Type { get; set; }
public achievementPage()
{
InitializeComponent();
loadListbox();
}
public achievementPage(string achievementGet, string d1)
{
}
public void loadListbox()
{
achievementStoreage.loadData();
List<achievementPage> achievementList = new List<achievementPage>();
achievementList.Add(new achievementPage(achievementStoreage.achievement1, "This is a test"));
achievementList.Add(new achievementPage(achievementStoreage.achievement2, "This is another test"));
//List<string> achievementList = new List<string>();
//achievementList.Add("Sup");
achievementListBox.ItemsSource = achievementList;
}
}
<ListBox Name="achievementListBox" Margin="0,0,0,0" >
<ListBox.ItemTemplate>
<DataTemplate>
<Button Width="776" Height="120" BorderBrush="Black">
<Button.Content>
<StackPanel Orientation="Horizontal" Height="50">
<StackPanel Orientation="Horizontal" Height="40">
<TextBlock Width="150" Foreground="Black" FontSize="22" Text="Description:" Height="40"/>
</StackPanel>
</StackPanel>
</Button.Content>
</Button>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
All I get is a blank page.. P.S don't worry about achievementStoreage, it is working properly.(just where I get stored data)
Frankly, it seems that you are simply not allowed to use ItemTemplates along with UIElements as the items' DataContexts. I've tried with:
achievementListBox.ItemsSource = new [] {"a","b"};
and both items were visible and printed dummy "description" texts, but none of the following lines I've tried has presented anything at all:
achievementListBox.ItemsSource = new [] { new TextBlock(), new TextBlock()};
achievementListBox.ItemsSource = new [] { new Rectangle(), new Rectangle()};
achievementListBox.ItemsSource = new [] { new Grid(), new Grid()};
Trying with your custom page - the same. No items shown.
This is very misleading. The items were shown, but look at the lines above: the controls were created empty, with no contents set!.
It turns out, that if the ListBox detects that the Item is an UIElement, then it does not use the ItemTemplate, but it presents that UIElement directly!
achievementListBox.ItemsSource = new[] { new TextBlock() { Text = "bbb" }, new TextBlock() { Text = "eee" } };
achievementListBox.ItemsSource = new[] { new Rectangle() { Fill = new SolidColorBrush(Colors.Red), Width = 30, Height = 10 }, new Rectangle() { Fill = new SolidColorBrush(Colors.Green), Width = 30, Height = 10 } };
var gridA = new Grid() { Width = 110, Height = 40 }; gridA.Children.Add(new Rectangle() { Fill = new SolidColorBrush(Colors.Red) });
var gridB = new Grid() { Width = 110, Height = 40 }; gridB.Children.Add(new Rectangle() { Fill = new SolidColorBrush(Colors.Green) });
achievementListBox.ItemsSource = new[] { gridA, gridB };
All of the three above examples completely ignore the ListBox.ItemTemplate, and instead, they display two items directly: two textboxes, two rectangles, two larger rectangles (in a Grid).
Getting back to your case: It means that with your original setup, the ListBox would try to display the items directly too - as your custom Page is a UIElement. And indeed it did that! But your pages were ... empty. In the overloaded constructor you omitted the InitializeComponent(); that constructs the View by reading the XAML code. Here is a corrected example that displays a "Hello" three times: Once just because it lies on the page, and next two times because the ListBox rows are set to the same page.
Please excuse me for renaming the classes, I simply started a new project instead of pasting your code.
Please note that I had to add to the XAML some other controls, because the Pages used as the data items would be display as empty, because they would have no items set
public partial class MainPage : PhoneApplicationPage
{
public string Description { get; set; }
public string Type { get; set; }
public MainPage()
{
InitializeComponent();
loadListbox();
}
public MainPage(string achievementGet, string d1)
{
InitializeComponent();
someText.Text = d1;
}
public void loadListbox()
{
achievementListBox.ItemsSource = new[] { new MainPage(null, "ddd"), new MainPage(null, "ccc") };
}
}
<StackPanel>
<TextBlock>
<Run Text="Hello" />
<Run Text=" " />
<Run x:Name="someText" />
</TextBlock>
<ListBox Name="achievementListBox" Margin="0,0,0,0">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Width="150" Foreground="White"
FontSize="22" Text="This DataTemplate is IGNORED because the Item is UIElement"
Height="40"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
I tried to shape the code in a similar manner to yours, just removed some lines not relevant to the problem. I hope this explains you everything now :)
Oh my. Why do create a list of achievementPages? On your achievementPage you will want to have a ListBox with items of type, like, AchievementItem, CompletedAchievement, NotCompletedAchievement, etc.
Currently, nothing shows up because your code probably throws StackoverflowException (not joking here:)). Look: your achievementPage constructor calls loadListBox that creates two achievementPages and adds them to the list. But creating two achievementPages causes again their constructors to be called two times, which invokes loadListBox two times, and so on..
-- edit: ok, no stackoverflow, I've just noticed the second constructor. You should stick to naming the classes with capital letters you know :) Anyways, putting a Page as a data item of a ListBox on a Page is a bad idea.
What you wanted to get should look more like:
public partial class AchievementPage : PhoneApplicationPage
{
public string Description { get; set; }
public string Type { get; set; }
public AchievementPage()
{
InitializeComponent();
loadListbox();
}
public void loadListbox()
{
var theList = new List<Achievement>();
theList.Add(new Achievement{ AchvCount=3, AchvName="medals" });
theList.Add(new Achievement{ AchvCount=2, AchvName="badges" });
theList.Add(new Achievement{ AchvCount=6, AchvName="zonks" });
achievementListBox.ItemsSource = achievementList;
}
}
public class Achievement : DependencyObject
{
public int AchvCount {get; set;}
public string AchvName {get; set;}
}
<ListBox Name="achievementListBox" Margin="0,0,0,0">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="You've got:" />
<TextBlock Grid.Column="0" Text="{Binding AchvCount}" />
<TextBlock Grid.Column="0" Text="{Binding AchvName}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I trying to put some images into the hub tile as the window phone 7 design but i found out even i follow the ebook exactly but i still unable to put the images into it.
Anyone please?
XAML code
<ListBox Grid.Row="0" x:Name="tileList">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<toolkit:HubTile Title="{Binding Title}" Margin="3" Notification="{Binding Notification}"
DisplayNotification="{Binding DisplayNotification}" Message="{Binding Message}"
GroupTag="{Binding GroupTag}" Source="{Binding ImageUri}">
</toolkit:HubTile>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Code Behind
List<TileItem> tileItems = new List<TileItem>()
{
new TileItem()
{
ImageUri="/Images/logo.png", Title="Work Hard", Notification = "Work Hard", GroupTag="TileGroup"
},
new TileItem()
{
ImageUri="/Images/Hard.jpg", Title="Work Smart", Notification = "Work Smart", GroupTag="TileGroup"
},
new TileItem()
{
ImageUri="/Images/Hard.jpg",
Title = "Play Smart",
Message = "Look Smart"
},
new TileItem()
{
ImageUri="/Images/Hard.jpg",
Title = "Sleep Smart",
Message = "Sleep Smart"
},
new TileItem()
{
ImageUri="/Images/Hard.jpg",
Title = "Sleep Hard",
Message = "Sleep Hard"
},
new TileItem()
{
ImageUri="/Images/Hard.jpg", Title="Play Hard", Notification = "Play Hard", GroupTag="TileGroup"
}
};
For the classes which be
public class TileItem
{
public string ImageUri
{
get;
set;
}
public string Title
{
get;
set;
}
public string Notification
{
get;
set;
}
public bool DisplayNotification
{
get
{
return !string.IsNullOrEmpty(this.Notification);
}
}
public string Message
{
get;
set;
}
public string GroupTag
{
get;
set;
}
}
Anyone pls. Thanks
Judging by the way you have the path, I would say its the "Build Action". You might want to check if the image that your trying to display has its "Build Action" set to content.
I'd like to change Foreground color of TextBlock (bellow TitleText and DateText) in DataTemplate from code.
<ListBox x:Name="listBox1" ItemsSource="{Binding}" ScrollViewer.ManipulationMode="Control" SelectionChanged="listBox1_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="stackPanel1" HorizontalAlignment="Stretch" Orientation="Horizontal">
<TextBlock FontSize="35" x:Name="TitleText" Text="{Binding Title}" Width="386" Foreground="Black" />
<TextBlock FontSize="25" x:Name="DateText" Text="{Binding Date}" Width="78" Foreground="Black" />
<TextBlock x:Name="Id" Text="{Binding Id}" Visibility="Collapsed" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I'd like to do like this in code behind. But It seems not be able to access x:Name property in DataTemplate.
this.TitleText.Foreground = new SolidColorBrush(Color.FromArgb(0, 0, 0, 0);
Does anyone know a good solution for this ?
Why don't you do it the Fast way instead of crawling the Visual Tree.
<TextBlock FontSize="35" Text="{Binding Title}" Width="386" Foreground="[Binding Color}" />
Then all you have to do is:
Add a Color Brush Property in your Collection
Change this property to the color you want
Make sure this property implement INotify or is a Dependency Property
Example
XAML
<Grid>
<ListBox ItemsSource="{Binding}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel HorizontalAlignment="Stretch" Orientation="Horizontal">
<TextBlock Text="{Binding Title}" Foreground="{Binding TitleColor}" />
<TextBlock Text="{Binding Date}" Foreground="Black" />
<TextBlock Text="{Binding Id}" Visibility="Collapsed" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
CodeBehind
public partial class MainPage : Page
{
public ObservableCollection<TEST> TestCollection { get; private set; }
public MainWindow()
{
InitializeComponent();
TestCollection = new ObservableCollection<TEST>();
TestCollection.Add(new TEST()
{
TitleColor = Brushes.Black,
ID = 0,
Title = "A",
Date = DateTime.Now,
});
TestCollection.Add(new TEST()
{
TitleColor = Brushes.Red,
ID = 1,
Title = "B",
Date = DateTime.Now.AddDays(1),
});
DataContext = TestCollection;
}
}
public class TEST : INotifyPropertyChanged
{
private Brush _TitleColor;
public Brush TitleColor
{
get
{
return _TitleColor;
}
set
{
_TitleColor = value;
OnPropertyChanged("TitleColor");
}
}
private int _ID;
public int ID
{
get
{
return _ID;
}
set
{
_ID = value;
OnPropertyChanged("ID");
}
}
private string _Title;
public string Title
{
get
{
return _Title;
}
set
{
_Title = value;
OnPropertyChanged("Title");
}
}
private DateTime _Date;
public DateTime Date
{
get
{
return _Date;
}
set
{
_Date = value;
OnPropertyChanged("Date");
}
}
public TEST()
{
}
#region INotifyProperty
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string name)
{
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(name));
}
#endregion
}
You can use FindItem method to find element in visual tree by it name and then change it Foregorund.
((listBox.ItemContainerGenerator.ContainerFromIndex(5) as FrameworkElement).FindName("TitleText") as TextBlock).Foreground = new SolidColorBrush(Color.FromArgb(255, 128, 128, 128));
where 5 is your item index
To Expand on MyKuLLSKI's answer, if your change is based on some value already in your object (eg. an int property that is greater than 5), you could use a ValueConverter (see here for an example) to read the value and return a brush. That is cleaner than adding a colour to your model since it is (arguably) UI related rather than data related.
MyKuLLSKI gave me perfect solution. But I couldn't make it.
I was struggling and I found my problem. I wrote the answer (only for me ) in my blog. Please take a glance it.
Cannot bind two types of data source to one UI target
http://myprogrammingdial.blogspot.com/2012/03/cannot-bind-two-types-of-data-source-to.html