Develop Reference

MVVM ItemTemplate with custom control

I'm following this tutorial on how to use a ListView ItemTemplate to display a list of person : http://www.wpf-tutorial.com/listview-control/listview-data-binding-item-template/
I understood the general concept but I am stuck on one point.
Here is the ItemTemplate sample :
<Grid>
<ListView Margin="10" Name="lvDataBinding" ItemsSource"={Binding MyPersonsList}">
<ListView.ItemTemplate>
<DataTemplate>
<WrapPanel>
<TextBlock Text="Name: " />
<TextBlock Text="{Binding Name}" FontWeight="Bold" />
<TextBlock Text=", " />
<TextBlock Text="Age: " />
<TextBlock Text="{Binding Age}" FontWeight="Bold" />
<TextBlock Text=" (" />
<TextBlock Text="{Binding Mail}" TextDecorations="Underline" Foreground="Blue" Cursor="Hand" />
<TextBlock Text=")" />
</WrapPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
What I cannot understand, is how to replace the TextBlocks with a custom control like this :
<Grid>
<ListView Margin="10" Name="lvDataBinding" ItemsSource"={Binding MyPersonsList}">
<ListView.ItemTemplate>
<DataTemplate>
<WrapPanel>
<MyPersonDisplayer Person="{Binding ???}"/>
</WrapPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
How to tell the template I want to set the MyPersonDisplayer control property Person with the source item ?
EDIT :
I tried to add only Person={Binding}, but it displays me this error.

I think it might have problem about the implementation MenuItemViewModel property in MenuItemView class. Do you have implement the MenuItemViewModel property as DependencyProperty? Maybe you can refer this post.

Enable/Disable Button When Listbox is Selected

I have a ListBox
<ListBox Background="WhiteSmoke"
Name="LstComponents"
ItemsSource="{Binding}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding ComponentID}" />
<TextBlock Text=" - " />
<TextBlock Text="{Binding ComponentName}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
and a few buttons
<Button Content="Add New Components"
Name="BtnAdd"
Margin="5"
Click="BtnAdd_Click" />
<Button Content="Update Components"
Name="BtnUpdate"
Grid.Column="1"
Margin="5"
Click="BtnUpdate_Click" />
<Button Content="Delete Components"
Grid.Column="2"
Name="BtnDelete"
Margin="5"
Click="BtnDelete_Click" />
Now I wanted the Update and Delete button to be disabled when it is loaded whereas it should enable if the list item in the ListBox is selected.
I don't want to write a code behind for it. Plz Suggest? How would i be able to accomplish this task in XAML

You can use
IsEnabled="{Binding ElementName=ListBoxName, Path=SelectedItems.Count}"
to make it work.

New line in ListBox with bound data

I'm putting data to ListBox from a list of objects using this simple code:
<ListBox Name="lbxListaZadan">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel xml:space="preserve" Orientation="Horizontal">
<TextBlock Text="{Binding title}" />
<TextBlock Text="
" />
<TextBlock Text="Priorytet: " />
<TextBlock Text="{Binding priority}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Instead of expected output:
Task1
Priorytet: 1
Task2
Priorytet:2
Task3
Priorytet: 3
I'm getting:
Task1Priorytet: 1
Task2Priorytet: 2
Task3Priorytet: 3
Why is the newline in a place I would not expect it to be, and how the hell can I reach the expected output in listbox.

<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding title}" />
<StackPanel Orientation="Horizontal">
<TextBlock Text="Priorytet: " />
<TextBlock Text="{Binding priority}" />
</StackPanel>
</StackPanel>
</DataTemplate>
A newline character can only work inside a single TextBlock, not between two of them.

You can put 2 TextBlocks in vertical StackPanel
<StackPanel>
<TextBlock Text="{Binding title}" />
<TextBlock Text="{Binding priority, StringFormat='Priorytet: {0}'}" />
</StackPanel>
also instead of 2 TextBlocks for priority you can use one with StringFormat

The Environment.NewLine would only have the expected effect, if the texts are in the same TextBlock.
WPF then renders the Text property of the TextBlock with the new line in mind, which causes a line break.
To achieve the wanted behavior, you'd have add a vertical layout element:
<ListBox Name="lbxListaZadan">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel xml:space="preserve" Orientation="Vertical">
<TextBlock Text="{Binding title}" />
<StackPanel Orientation="horizontal">
<TextBlock Text="Priorytet: " />
<TextBlock Text="{Binding priority}" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Passing ListViewItems aross pages

I am using Windows Phone 8.1 and I am wondering how do I pass Binded values across pages? I have already binded the data to my ListView as shown below. And also, how do I retrieve the values from the page.
E.g. when I click the "Name" I would go to the EnterAmount and pass all the 5 Binded Data to it.
Is my method of doing correct? Or is there a simpler way of accomplishing this.
And also, may know how do I concatinate first_name and last_name into a single row?
I want it displayed like
First Name + Last Name
Item Name
Much appreciated
SelectItem.xaml
<ListView Name="ItemList"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="40,300,0,0"
Height="200"
Width="320"
IsItemClickEnabled="True"
ItemClick="ItemList_ItemClick">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Grid.Column="1">
<TextBlock Width="200"
FontSize="20"
Foreground="#FFFF7B2C"
Text="{Binding item_id}"
Visibility="Collapsed"/>
<TextBlock Width="200"
FontSize="20"
Foreground="#FFFF7B2C"
Text="{Binding first_name}" />
<TextBlock Width="200"
FontSize="20"
Foreground="#FFFF7B2C"
Text="{Binding last_name}" />
<TextBlock Width="200"
FontSize="20"
Foreground="#FFFF7B2C"
Text="{Binding item_name}" />
<TextBlock Width="200"
FontSize="20"
Foreground="#FFFF7B2C"
Text="{Binding progress}"
Visibility="Collapsed"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
SelectItem.xaml.cs
private void ItemList_ItemClick(object sender, ItemClickEventArgs e)
{
//this.Frame.Navigate(typeof(EnterAmount), e.ClickedItem);
}

XAML Get data from binded elements

I have this XAML code:
<ListView Name="ListBoxWithNews" ItemsSource="{Binding News}" Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" Grid.ColumnSpan="2">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding imageURL}" Width="75" Height="75" />
<StackPanel>
<TextBox Text="{Binding Title}" Width="200" />
<TextBox Text="{Binding Body}" Width="200" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The controls are binded using the MVVM pattern. The user can change the content of the two text boxes. Is there a possible way to get the updated text from these text boxes at some point when I need them?

Your ViewModel should implement INotifyPropertyChanged and Use TwoWay Binding as below
<ListView Name="ListBoxWithNews" ItemsSource="{Binding News,Mode=TwoWay}" Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" Grid.ColumnSpan="2">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding imageURL,Mode=TwoWay}" Width="75" Height="75" />
<StackPanel>
<TextBox Text="{Binding Title,Mode=TwoWay}" Width="200" />
<TextBox Text="{Binding Body,Mode=TwoWay}" Width="200" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>