Develop Reference

My SaveCommand Button isnt working in UWP why?? I use MVVM Pattern

Ok, I've been practicing with MVVM Pattern on UWP, now I've created an object Customer EditableCustomer which is my helper property between my view and my model at my VM.
if my four properties FirstName, LastName, Email and Phone arent nulls or emptys my savecommand button should enable.
but I havent been able to raise my property changes on my EditableCustomer so that way I could Raise my SaveCommand.RaiseCanExecuteChanged().
this is my code for my view:
<UserControl
x:Class="MVVMHeirarchiesDemo.Views.AddEditCustomerView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MVVMHeirarchiesDemo.Views"
xmlns:viewmodel="using:MVVMHeirarchiesDemo.ViewModel"
xmlns:conv="using:MVVMHeirarchiesDemo.Converters"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<UserControl.DataContext>
<viewmodel:AddEditCustomerViewModel/>
</UserControl.DataContext>
<UserControl.Resources>
<conv:ValidationMessageConverter x:Key="ValidationMessageConverter"/>
</UserControl.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid x:Name="grid1"
HorizontalAlignment="Left"
Margin="10,10,0,0"
VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Text="First Name:"
Grid.Column="0"
Grid.Row="0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="3"/>
<StackPanel Orientation="Vertical"
Grid.Column="1"
Grid.Row="0">
<TextBox x:Name="firstNameTextBox"
Text="{Binding EditableCustomer.FirstName, Mode=TwoWay}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="3"
Height="23"
Width="120"/>
<TextBlock x:Name="firstNameErrorMessage"
Text="{Binding EditableCustomer.ValidationMessages[FirstName], Converter={StaticResource ValidationMessageConverter}}"
Width="{Binding Width, ElementName=firstNameTextBox, Mode=OneWay}"
TextWrapping="Wrap"/>
</StackPanel>
<TextBlock Text="Last Name:"
Grid.Column="0"
Grid.Row="1"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="3"/>
<StackPanel Orientation="Vertical"
Grid.Column="1"
Grid.Row="1">
<TextBox x:Name="lastNameTextBox"
Text="{Binding EditableCustomer.LastName, Mode=TwoWay}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Width="{Binding Width, ElementName=firstNameTextBox, Mode=OneWay}"
Height="{Binding Height, ElementName=firstNameTextBox, Mode=OneWay}"
Margin="3"/>
<TextBlock x:Name="lastNameErrorMessage"
Text="{Binding EditableCustomer.ValidationMessages[LastName], Converter={StaticResource ValidationMessageConverter}}"
Width="{Binding Width, ElementName=firstNameTextBox, Mode=OneWay}"
TextWrapping="Wrap"/>
</StackPanel>
<TextBlock Text="Email:"
Grid.Column="0"
Grid.Row="2"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="3"/>
<StackPanel Orientation="Vertical"
Grid.Column="1"
Grid.Row="2">
<TextBox x:Name="emailTextBox"
Text="{Binding EditableCustomer.Email, Mode=TwoWay}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Width="{Binding Width, ElementName=firstNameTextBox, Mode=OneWay}"
Height="{Binding Height, ElementName=firstNameTextBox, Mode=OneWay}"
Margin="3"/>
<TextBlock x:Name="emailErrorMessage"
Text="{Binding EditableCustomer.ValidationMessages[Email], Converter={StaticResource ValidationMessageConverter}}"
Width="{Binding Width, ElementName=firstNameTextBox, Mode=OneWay}"
TextWrapping="Wrap"/>
</StackPanel>
<TextBlock Text="Phone:"
Grid.Column="0"
Grid.Row="3"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="3"/>
<StackPanel Orientation="Vertical"
Grid.Column="1"
Grid.Row="3">
<TextBox x:Name="phoneTextBox"
Text="{Binding EditableCustomer.Phone, Mode=TwoWay}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Width="{Binding Width, ElementName=firstNameTextBox, Mode=OneWay}"
Height="{Binding Height, ElementName=firstNameTextBox, Mode=OneWay}"
Margin="3"/>
<TextBlock x:Name="phoneErrorMessage"
Text="{Binding EditableCustomer.ValidationMessages[Phone], Converter={StaticResource ValidationMessageConverter}}"
Width="{Binding Width, ElementName=firstNameTextBox, Mode=OneWay}"
TextWrapping="Wrap"/>
</StackPanel>
</Grid>
<Grid Grid.Row="1">
<StackPanel Orientation="Horizontal">
<Button x:Name="saveCommandButton"
Content="Save"
Command="{Binding SaveCommand}"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="25,5,0,0"
Width="75"/>
<Button x:Name="addCommandButton"
Content="Add"
Command="{Binding SaveCommand}"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="25,5,0,0"
Width="{Binding Width, ElementName=saveCommandButton, Mode=OneWay}"/>
<Button x:Name="cancelCommandButton"
Content="Cancel"
Command="{Binding CancelCommand}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="25,5,0,0"
Width="{Binding Width, ElementName=saveCommandButton, Mode=OneWay}"/>
</StackPanel>
</Grid>
</Grid>
As you can see at my textboxes the text property are bind to my EditableCustomer.(propertyName)
my ViewModel is this one:
public class AddEditCustomerViewModel : BindableBase
{
public AddEditCustomerViewModel()
{
CancelCommand = new MyCommand(OnCancel);
SaveCommand = new MyCommand(OnSave, CanSave);
EditableCustomer = new Customer();
}
private Customer _editableCustomer;
public Customer EditableCustomer
{
get
{
return _editableCustomer;
}
set
{
SetProperty(ref _editableCustomer, value);
SaveCommand.RaiseCanExecuteChanged();
}
}
public MyCommand CancelCommand { get; private set; }
public MyCommand SaveCommand { get; private set; }
public event Action Done = delegate { };
private void OnCancel()
{
Done();
}
private void OnSave()
{
Done();
}
private bool CanSave()
{
if (HasEmptyFields())
return false;
return true;
}
private bool HasEmptyFields()
{
return string.IsNullOrEmpty(EditableCustomer.FirstName) || string.IsNullOrEmpty(EditableCustomer.LastName)
|| string.IsNullOrEmpty(EditableCustomer.Phone) || string.IsNullOrEmpty(EditableCustomer.Email);
}
}
All i need to do is to be able to trigger the setter for my EditableCustomer property, but I've been able to do that with it.
what am i missing here??
I see my code and I think that it should be raise everytime each field has text until it becomes true once all my text boxes have text on them.
but nothing happens.
just to understand this is my BindableBase is a class where I apply my INotifyPropertyChanged.
public class BindableBase : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged = delegate { };
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
protected virtual void SetProperty<T>(ref T member, T val, [CallerMemberName]string propertyName = null)
{
if (object.Equals(member, val))
return;
member = val;
OnPropertyChanged(propertyName);
}
}
I hope someone can enlight me, meanwhile i'll try to keep digging on this issues.

It looks like SaveCommand.RaiseCanExecuteChanged(); is only called when you set the EditableCustomer, but when you modify the values inside that object (ie name, email, etc), nothing is notifying the UI that SaveCommand can execute.
If you're going to break up your view models like that, where you have an encapsulated class that manages the input, then it will need to notify the parent view model of changes. Your AddEditCustomerViewModel does not know when the properties have changed and cannot RaiseCanExecuteChanged() accordingly.
Update
In your case, I would recommend having the view-model route all properties that can be modified by the UI form. For example:
public class AddEditCustomerViewModel : BindableBase
{
public string FirstName
{
get { return _editableCustomer.FirstName; }
set
{
_editableCustomer.FirstName = value;
OnPropertyChanged(nameof(FirstName));
if (!HasEmptyFields())
{
SaveCommand.RaiseCanExecuteChanged();
}
}
}
}
and your XAML should bind directly to the view-model, not the model:
<TextBox Text="{Binding FirstName, Mode=TwoWay}" />

how to access DataCollection

I have a Pivot view in my WP8 app, and I'm trying to access the data collection from the view's class upon Click event "removePin".
The source of the data collection is another class called Pins.
how can I achieve that?
this is my snippet code for the XAML for that particular part
<phone:PivotItem Header="Pins">
<!-- Content Panel -->
<Grid x:Name="ContentPanel2" HorizontalAlignment="Left" Height="583" Margin="10,10,0,0" Grid.Row="1" VerticalAlignment="Top" Width="460">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="400*"/>
<ColumnDefinition Width="0*"/>
<ColumnDefinition Width="87*"/>
</Grid.ColumnDefinitions>
<ListBox x:Name="lstData2" ItemsSource="{Binding DataCollection2, Source={StaticResource PinsCollection}}"
Grid.ColumnSpan="3" Foreground="#FF1D53D0" Height="583" VerticalAlignment="Bottom">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Tap="StackPanel_Tap">
<Image Margin="8" VerticalAlignment="Top" Source="{Binding ImageUri}"
Width="100" Height="100" />
<StackPanel Height="93" Width="259" >
<TextBlock Margin="8" Width="250" TextWrapping="Wrap" VerticalAlignment="Top" HorizontalAlignment="Left" Foreground="#FF1D53D0"
Text="{Binding Pinnedname}" Height="33" RenderTransformOrigin="0.5,0.5" FontFamily="Segoe WP SemiLight" FontSize="24" FontWeight="Bold" />
<TextBlock Width="155" Margin="8,0,8,8" VerticalAlignment="Top"
HorizontalAlignment="Left" Text="{Binding Status}" Foreground="#FF1D53D0" FontFamily="Segoe WP SemiLight" />
</StackPanel>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu>
<toolkit:MenuItem Header="Remove Pin" Click="RemovePin_Click" Tag="{Binding pinId}"/>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<!-- End of Content Panel -->
</Grid>

Create a custom command class:
public class CustomCommand : ICommand
{
Action _exec;
public CustomCommand(Action exec)
{
_exec = exec;
}
public void Execute(object parameter)
{
if (_exec != null) _exec();
}
public bool CanExecute(object parameter)
{
return true;
}
public event EventHandler CanExecuteChanged;
}
Add it to the view model for elements of pins collection (I supposed it's PinItem)
public CustomCommand RemovePinCommand
{
get { return (CustomCommand)GetValue(RemovePinCommandProperty); }
set { SetValue(RemovePinCommandProperty, value); }
}
public static readonly DependencyProperty RemovePinCommandProperty =
DependencyProperty.Register("RemovePinCommand",
typeof(CustomCommand),
typeof(PinItem),
new UIPropertyMetadata(null));
In the constructor of that class implement your logic for this command:
RemovePinCommand = new CustomCommand(() =>
{
//delete this pin from its parent collection
});
final step is to bind the command to the menu item:
<toolkit:MenuItem Header="Remove Pin" Command="{Binding RemovePinCommand}"/>

Binding items using multiple selection mode ListBox?

Here is my problem i need to solve.
My data content is in DemoList class:
NOTICE: DemoHeader object contains a ObservableCollection of DemoItem objects, and DemoList object contains ObservableCollection of DemoHeader objects
public enum Type
{
article,
product,
material
}
public class DemoHeader
{
private ObservableCollection<DemoItem> _items;
public ObservableCollection<DemoItem> Items
{
get { return _items; }
set { _items = value; }
}
public DemoHeader(string document)
{
this._salesOrder = document;
_items = new ObservableCollection<DemoItem>();
}
private string _salesOrder;
public string SalesOrder
{
get { return _salesOrder; }
set { _salesOrder = value; }
}
}
public class DemoItem
{
public DemoItem(string name, Type type)
{
this._name = name;
this._type = type;
}
private Type _type;
public Type Type
{
get { return _type; }
set { _type = value; }
}
private string _name;
public string Name
{
get { return _name; }
set { _name = value; }
}
}
public class DemoList : ObservableCollection<DemoHeader>//, ICollectionView
{
public DemoList()
{
DemoHeader dd = new DemoHeader("Doc-1");
dd.Items.Add(new DemoItem("T-1", Type.article));
dd.Items.Add(new DemoItem("M-1", Type.material));
DemoHeader dd2 = new DemoHeader("Doc-2");
dd2.Items.Add(new DemoItem("P-1", Type.product));
dd2.Items.Add(new DemoItem("P-2", Type.product));
this.Add(dd);
this.Add(dd2);
}
}
XAML:
NOTICE: I have 4 CollectionViewSource for each ListBox.
<Window x:Class="WuZet.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:c="clr-namespace:WuZet"
Title="WuZet" WindowStartupLocation="CenterScreen" ResizeMode="CanResize" Loaded="window_loaded" Background="#ECE9D8" WindowStyle="ToolWindow" Icon="/WuZet;component/Images/ksi_ikona.ico" Topmost="True" WindowState="Maximized" SizeToContent="WidthAndHeight">
<Window.Resources>
<CollectionViewSource x:Key="list" Source="{Binding}"></CollectionViewSource>
<CollectionViewSource x:Key="wares" Source="{Binding Source={StaticResource list}, Path=Items}" Filter="wareFilter"></CollectionViewSource>
<CollectionViewSource x:Key="materials" Source="{Binding Source={StaticResource list}, Path=Items}" Filter="materialFilter"></CollectionViewSource>
<CollectionViewSource x:Key="products" Source="{Binding Source={StaticResource list}, Path=Items}" Filter="productFilter"></CollectionViewSource>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="80"></RowDefinition>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="200"></RowDefinition>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="200"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="0" Grid.ColumnSpan="2" Margin="5,5,5,5">
<TextBox/>
<Button Content="ok" Margin="0,5,0,0" HorizontalAlignment="Stretch" Height="30" Width="150" Click="Button_Click"/>
</StackPanel>
<StackPanel Grid.RowSpan="2" Grid.Column="2">
<ListBox Name="orders" IsEnabled="{Binding ElementName=check, Path=IsChecked}" Margin="85,5,85,5" Height="70" ItemsSource="{Binding Source={StaticResource list}}" DisplayMemberPath="SalesOrder"/>
<CheckBox Name="check" HorizontalAlignment="Center" Content="Wybierz zamówienie" IsChecked="False"/>
</StackPanel>
<GroupBox Header="Wares" Grid.Row="2" Grid.Column="0">
<ListBox Name="lbWares" ItemsSource="{Binding Source={StaticResource wares}}" >
<ListBox.ItemTemplate>
<DataTemplate>
<!--<StackPanel Orientation="Horizontal">-->
<TextBlock Text="{Binding Path=Name}"></TextBlock>
<!--<TextBlock Text="{Binding ZaE_TwrKod}" />
<TextBlock Text=", " />
<TextBlock Text="{Binding ZaE_Ilosc}" />
<TextBlock Text=", " />
<TextBlock Text="{Binding ZaE_TwrNazwa}" />-->
<!--</StackPanel>-->
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</GroupBox>
<GroupBox Header="Materials" Grid.Row="2" Grid.Column="1">
<ListBox Name="lbMaterials" ItemsSource="{Binding Source={StaticResource materials}}">
<ListBox.ItemTemplate>
<DataTemplate>
<!--<StackPanel Orientation="Horizontal">-->
<TextBlock Text="{Binding Path=Name}"/>
<!--<TextBlock Text=", " />
<TextBlock Text="{Binding ZaE_Ilosc}" />
<TextBlock Text=", " />
<TextBlock Text="{Binding ZaE_TwrNazwa}" />-->
<!--</StackPanel>-->
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</GroupBox>
<GroupBox Header="Products" Grid.Row="2" Grid.Column="2">
<ListBox Name="lbProducts" ItemsSource="{Binding Source={StaticResource products}}">
<ListBox.ItemTemplate>
<DataTemplate>
<!--<StackPanel Orientation="Horizontal">-->
<TextBlock Text="{Binding Path=Name}"/>
<!--<TextBlock Text=", " />
<TextBlock Text="{Binding ZaE_Ilosc}" />
<TextBlock Text=", " />
<TextBlock Text="{Binding ZaE_TwrNazwa}" />
</StackPanel>-->
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</GroupBox>
</Window>
DemoList object is binding to CollectionViewList x:Key=list.
Here is my buisiness logic i need to implement:
If checkbox is marked i need to return selected ListBoxItem to the
corresponding containers [wares, products, materials] - this logic is
working
If checkbox is unmarked i need to return ALL items
[ObservableCollection] of ALL headers to the corresponding
containers [wares, products, materials]
I'm stuck right here, can anyone suggest me a solution?
--- 2013-11-04 20:38
Sry for misunderstanding, and for my bad english.
I uploaded some screen to be more clear.
http://imgur.com/UowQrRP
As you see on the screen i need to implement behavior for checkbox.
When it is unchecked each DemoItem object must be display in one of 3 containers.
Each container is bind to CollectionViewSource.

How to know which row was clicked (and access its data) in Grid in WP7?

I have the following XAML:
<Grid x:Name="ContentPanelDaily"
Grid.Row="1"
<Grid.RowDefinitions>
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60" />
<ColumnDefinition Width="80" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0"
Grid.Column="0"
Style="{StaticResource PhoneTextAccentStyle}"
Margin="0,0,0,0">
First
</TextBlock>
<TextBlock Grid.Row="0"
Grid.Column="1"
Style="{StaticResource PhoneTextAccentStyle}"
Margin="0,0,0,0">
Second
</TextBlock>
</Grid>
How can i detect which row was clicked in Tap event? I have tried to find SelectedRow or something like this but it seems there is no anything like this in Grid. Thank you very much.

Put your data into a button, and subscribe to on OnClick event.
<Button OnClick="evetnHandler">
<TextBlock Grid.Row="0"
Grid.Column="0"
Style="{StaticResource PhoneTextAccentStyle}"
Margin="0,0,0,0">
First
</TextBlock>
</Button>
Also, as #Rachel said: you can use a ListBox.
<ListBox ItemsSource="{Binding Items}"
SelectedItem="{Binding Selected, Type=TwoWay}">
<ListBox.ItemTemplate>
<DataTemlate>
<TextBlock
Style="{StaticResource PhoneTextAccentStyle}"
Margin="0,0,0,0" Text="{Binding Name}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
And in a code-behind create
public ObservableCollection<DataItem> Items {get;set;}
private DataItem _selected;
public DataItem Selected
{
get {return _selected;}
set
{
_selected = value;
//ha! item selected!!! handle it
}
}
public class DataItem
{
public string Name {get;set;}
}

How to set tooltip with many rows for each (dynamic) listbox item in Silverlight

I would like to set in Silverlight for each item in a ListBox a tooltip with many rows.
In XAML i have a listbox and a button:
<ListBox Height="100" HorizontalAlignment="Left" Margin="24,136,0,0" Name="listBox1" VerticalAlignment="Top" Width="109" ItemsSource="{Binding}">
<Button Content="Add" Name="button_add" VerticalAlignment="Top" Width="118" Click="add_Click">
in c#
private void button_add_Click(object sender, RoutedEventArgs e)
{
ObservableCollection<Person> obs1 = new ObservableCollection<Person>();
obs1.Add(new Person(){Name="Name1", Age=1});
obs1.Add(new Person(){Name="Name2", Age=2});
listBox1.ItemsSource = obs1;
// This Line of Code MUST NOT BE USED!! listBox1.DisplayMemberPath = "Name";
}
public class Person
{
public String Name { get; set; }
public int Age { get; set; }
public override string ToString()
{
return Name;
}
}
I would like to show for each item the Age as my tooltip.
Edit: Ok, this is the Solution for showing only AGE as tooltip. That is one Line/Row.
<ListBox Height="100" HorizontalAlignment="Left" Margin="24,136,0,0" Name="listBox1" VerticalAlignment="Top" Width="109" ItemsSource="{Binding}">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}" ToolTipService.ToolTip="{Binding Age}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
But what if i want to show a Tooltip with 2 Lines? something like:
Name: Name1
Age: 1
Edit: 3 rows, 2 columns. i also added public String Comment { set; get; } to class Person
<ListBox Height="100" HorizontalAlignment="Left" Margin="24,136,0,0" Name="listBox1" VerticalAlignment="Top" Width="109" ItemsSource="{Binding}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<ToolTipService.ToolTip>
<ToolTip>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="40"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="250"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Name: " Grid.Row="0" Grid.Column="0" />
<TextBlock Text="{Binding Name}" Grid.Row="0" Grid.Column="1"/>
<TextBlock Text="Age: " Grid.Row="1" Grid.Column="0"/>
<TextBlock Text="{Binding Age}" Grid.Row="1" Grid.Column="1"/>
<TextBlock Text="Comment: " Grid.Row="2" Grid.Column="0"/>
<TextBlock Text="{Binding Comment}" Grid.Row="2" Grid.Column="1" TextWrapping="Wrap" />
</Grid>
</ToolTip>
</ToolTipService.ToolTip>
<TextBlock Text="{Binding Name}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
But there is stil a problem. The comment can be short or long, so i would like to make the ROWS/LINES/SPACE for Comment to be variable or else Text is cut off.

You can use any controls for tooltip content:
<ToolTipService.ToolTip>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Name}" />
<TextBlock Text="{Binding Age}" />
</StackPanel>
</ToolTipService.ToolTip>
Other possibility would be to use a converter, that returns the Name and Age separated by \r\n.