DependencyProperty in UserControl not binding in ListItem Template - wpf

Question

Ok hours of google searching and stakoverflow reading, I have been unable to find the answer to this issue.
I have a UserControl that is used to show a ProgressBar with a DependencyProperty of type double.
The MainPage.XAML.cs contains the DataContext:
void MainPage_Loaded(object sender,RoutedEventArgs e)
{
setDataContext();
MainGameListBox.ItemsSource = vm.GameList;
}
This is whats in the MainPage.XAML:
<ListBox Grid.Row="1" Grid.ColumnSpan="2" x:Name="MainGameListBox"
SelectionChanged="listBoxGameSearch_SelectionChanged" >
<!-- set its ItemsPanel to be a WrapPanel -->
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit1:WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<toolkit1:ContextMenuService.ContextMenu>
<toolkit1:ContextMenu>
<toolkit1:MenuItem Header="Pin to start" Click="PinGameToStart_Click" />
</toolkit1:ContextMenu>
</toolkit1:ContextMenuService.ContextMenu>
<Grid Width="173" Height="173"
Background="{StaticResource PhoneAccentBrush}" Margin="12">
<Grid.RowDefinitions>
<RowDefinition Height="32"/>
<RowDefinition Height="32"/>
<RowDefinition Height="32"/>
<RowDefinition Height="32"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="86.5"/>
<ColumnDefinition Width="86.5"/>
</Grid.ColumnDefinitions>
<Border Grid.Row="0" Grid.RowSpan="3" Grid.Column="0" Width="64"
Height="64" BorderBrush="#70BC1F" BorderThickness="2"
Margin="6,6,0,0" VerticalAlignment="Top"
HorizontalAlignment="Left">
<Image Source="{Binding GameTile,
Converter={StaticResource imageCacheConverter}}" />
</Border>
<view:CircularProgressChart x:Name="circularProgChart"
Grid.Row="0" Grid.Column="1"
Grid.RowSpan="3" Grid.ColumnSpan="2"
Margin="6"
Loaded="CircularProgressChart_Loaded"
CompletionPercent="{Binding CompletionPercentage}" />
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The CompletionPercent is the DP and the UserControl is below:
public partial class CircularProgressChart:UserControl
{
public double CompletionPercent
{
get { return (double)GetValue(CompletionPercentProperty); }
set { SetValue(CompletionPercentProperty, value); }
}
public static readonly DependencyProperty CompletionPercentProperty = DependencyProperty.Register("CompletionPercent", typeof(double), typeof(CircularProgressChart), new PropertyMetadata(0.0, CompletionPercentChanged));
public CircularProgressChart()
{
try
{
InitializeComponent();
DataContext = this;
}
catch (Exception ex)
{
MessageBox.Show(ex.Message);
}
}
}
Here's the CompletionPercentage Property:
public class Progress : INotifyPropertyChanged
{
private double _completionPercentage = 0.0;
public double CompletionPercentage
{
get{return _completionPercentage;}
set{
_completionPercentage = value;
NotifyPropertyChanged("CompletionPercentage");
}
}
protected void NotifyPropertyChanged(string name)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(name));
}
}
}
Question, is why is the
CompletionPercent="{Binding CompletionPercentage}"
not being bound? It gets the default value 0, but when the CompletionPercentage is updated the DP doesn't get the update. I've checked the NotifyPropertyChanged method and it fires correctly and works in all other parts of code.

Answer 1

The reason is DataContext = this line in CircularProgressChart constructor. {Binding CompletionPercentage} looks for CompletionPercentage property in DataContext, which obviously does not exist in CircularProgressChart. Instance of Progress class never makes it's way to the CircularProgressChart (explicit assignment of dependency property has a priority over binding).
Solution 1 (if you really want to keep dependency property): remove the DataContext = this; line. If you need to bind to properties of CircularProgressChart in it's XAML, specify correct binding sources instead of relying on DataContext.
Solution 2 (very common when deriving from UserControl): remove CompletionPercent dependency property completely (including its binding in MainPage.xaml) and bind to CompletionPercentage directly in CircularProgressChart.xaml. Also remove DataContext = this; line.
Solution 3 (true WPF-way): use default ProgressBar control with a custom template instead of creating your own control.