How can I bind inside this ControlTemplate?

Question

I have a ListView, filled with a List<MyListItem> and I need to use a ControlTemplate to be able to change the effects when an item is selected. Now I have the problem that {Binding MyProperty} doesn't work inside of that ControlTemplate. How can I access the properties of MyListItem inside the template?

My XAML looks like this(simplified):

<ListView
        Name="ListView"
        Grid.Column="1"
        IsSwipeEnabled="False">

        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListViewItem">
                            <Grid>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal"/>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="SelectionStates">
                                        <VisualState x:Name="Unselected">
                                            <Storyboard>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="myColoredText" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Orange"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="SelectedUnfocused">
                                            <Storyboard>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="myColoredText" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Red"/>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>

                                <!-- Here I have my custom layout, removed for readability -->
                                <TextBlock
                                    Name="myColoredText"
                                    Foreground="Green"
                                    Text="{Binding MyProperty}"/><!-- This does not work -->

                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListView.ItemContainerStyle>
    </ListView>

Here is the class behind this XAML:

public sealed partial class MyPage : Page
{
    public MyPage()
    {
        InitializeComponent();
        ListView.ItemsSource = new List<MyListItem>()
        {
            new MyListItem("Title1", "SubTitle1"),
            new MyListItem("Title2", "SubTitle2")
        }
    }
}

and the MyListItem class:

class MyListItem
{
    public string MyProperty { get; set; }
    public string MyOtherProperty { get; set; }

    public MyListItem(string myProperty, string myOtherProperty)
    {
        MyProperty = myProperty;
        MyOtherProperty = myOtherProperty;
    }
}

Smallest project with the problem:

Project

Answer 1

In the TextBox, use:

Text="{Binding Content.MyProperty, 
               RelativeSource={RelativeSource TemplatedParent}}"

Answer 2

You need to use the {TemplateBinding} expression when dealing with custom ControlTemplates. This binds property values to any corresponding properties associated with a control instance.

<TextBlock Name="myColoredText"
           Foreground="Green"
           Text="{TemplateBinding MyProperty}" />

This will bind to directly to the specified instance property in your control. Since WPF/WinRT controls are DependencyObjects, DependencyProperties are commonly used:

public static readonly DependencyProperty MyPropertyProperty = 
    DependencyProperty.Register(
        "MyProperty",
        typeof(Boolean),
        typeof(ListViewItem),
        null
    );

public bool MyProperty
{
    get { return (bool)GetValue(MyPropertyProperty); }
    set { SetValue(MyPropertyProperty, value); }
}

Then when declaring a new instance, one would populate this property as is standard in XAML:

<someNamespace:ListViewItem MyProperty={Binding ViewModelProperty} />

You can read more on the TemplateBinding markup expression at MSDN.

Answer 3

Wpf supports binding only to properties, not to fields. So, you MyItemClass should be:

public class MyListItem { 
    public string MyProperty { get; set; } 
    public string MyOtherProperty { get; set; } 

    public MyListItem(string myProperty, string myOtherProperty) {         
        MyProperty = myProperty; 
        MyOtherProperty = myOtherProperty;  
    }
}

Hope, it helps