Detect binding property changed within a user control

Question

I am working on a Windows Store app in which I have a user control as a data template inside flipview.

User Control: (ImagePage.xaml)

    <UserControl
    x:Name="userControl"
    x:Class="MWC_online.Classes.ImagePage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MWC_online.Classes"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="768"
    d:DesignWidth="1366">

    <Grid Background="#FFF0F0F0" Margin="4,0">
     ...
        <Image Source="{Binding Img}"  Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top" />
        <StackPanel x:Name="stackPanel" HorizontalAlignment="Left" Margin="984,83,0,0" Width="325">
            <Grid Background="{Binding Colour}">
                <TextBlock Margin="30,30,30,15" Text="{Binding TextContent1}" FontWeight="Light" TextWrapping="Wrap" Foreground="#FF00ABE8" FontSize="29" />
            </Grid>
            <Grid Background="{Binding Colour}">
                <TextBlock Margin="30,10,30,30" Text="{Binding TextContent2}" TextWrapping="Wrap" Foreground="#FF606060" FontSize="17" />
            </Grid>
        </StackPanel>
    </Grid>
</UserControl>

User Control Class: (ImagePage.xaml.cs)

private static void OnTitleChanged(DependencyObject d, DependencyPropertyChangedEventArgs e){
    StackPanel stackPanel = (StackPanel)d;
    stackPanel.Visibility = Visibility.Collapsed;
}

public string TextContent1
{
    get { return (string)GetValue(TextContent1Property); }
    set { SetValue(TextContent1Property, value); }
}
public static readonly DependencyProperty TextContent1Property =
    DependencyProperty.Register("TextContent1", typeof(string), typeof(ImagePage), new PropertyMetadata("", new PropertyChangedCallback(OnTextContent1Changed)));

private static void OnTextContent1Changed(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
    // what I want to do is if TextContent1 or TextContent2 has no value
    // turn the stackpanel visibility to collapsed
    StackPanel stackPanel = (StackPanel)d;
    stackPanel.Visibility = Visibility.Collapsed;
}

Everything is working fine EXCEPT the OnTextContent1Changed is not firing! so I dont know if this is the right way of doing things but basically I just want to switch an UI element within the user control ON or OFF depending on the data binding that is being fed into it.

Answer 1

The TextBlock doesn't have a DataContext to find the DependencyProperty on. If you give your Grid a name in ImagePage.xaml:

    <Grid Background="#FFF0F0F0" Margin="4,0" x:Name="MyGrid">

Then you can set its DataContext in the ImagePage constructor in ImagePage.xaml.cs:

    public ImagePage()
    {
        InitializeComponent();

        MyGrid.DataContext = this;
    }

Which tells the Grid (and its decendents) to look for Dependency Properties on the ImagePage class. With this, the Dependency Property should get bound correctly. Another problem, though, is that you're telling the DependencyProperty that it is on an ImagePage with typeof(ImagePage), but then casting it to a StackPanel, which will fail every time:

    StackPanel stackPanel = (StackPanel)d; // Throws System.InvalidCastException

You could fix this by giving a name to the StackPanel and referencing it directly in your .cs file.