UWP ValueConverter with DependencyProperty

Question

I have a UWP project, and I am trying to get a binding on my ValueConverter.

It is based on this guide.

I have created a DependencyProperty on the ValueConverter, but it is always null, instead of an element of type Vehicle.

There is my code:

MainPage.xaml

<Page
    x:Class="Project.Pages.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"     
    mc:Ignorable="d"
    xmlns:conv="using:Project.Converters"
    >

    <Page.Resources>
        <conv:Item_to_FullItem x:Key="Item_to_FullItem" VehicleItem="{Binding}"/>
    </Page.Resources>

    <Grid>
        <ListView x:Name="ListView_Vehicles" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid ScrollViewer.VerticalScrollBarVisibility="Auto">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="40"/>
                        </Grid.RowDefinitions>

                        <Border Grid.Column="0" BorderThickness="1" BorderBrush="Black">
                            <TextBlock Text="{Binding Path=Category}"/>
                        </Border>
                        <Border Grid.Column="1" BorderThickness="1" BorderBrush="Black">
                            <TextBlock Text="{Binding Item, Converter={StaticResource Item_to_FullItem}}"/>
                        </Border>
                        <Border Grid.Column="2" BorderThickness="1" BorderBrush="Black">
                            <TextBlock Text="{Binding Path=Weight}"/>
                        </Border>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>

</Page>

MainPage.xaml.cs

namespace Project.Pages
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            InitializeComponent();

            Fill_Vehicle_List();
            ListView_Vehicles.ItemsSource = VehicleServices.Vehicles;
        }

        public class Vehicle : BindableBase
        {
            private int _Category;
            public int Category
            {
                get { return _Category; }
                set { Set(ref _Category, value); }
            }

            private string _Items;
            public string Items
            {
                get { return _Items; }
                set { Set(ref _Items, value); }
            }           

            private double? _Weight;
            public double? Weight
            {
                get { return _Weight; }
                set { Set(ref _Weight, value); }
            }
        }

        public class Values_Vehicle : ObservableCollection<Vehicle> { }

        public static class VehicleServices
        {
            public static Values_Vehicle Vehicles = new Values_Vehicle();

            static VehicleServices()
            {
            }
        }

        public static void Fill_Vehicle_List()
        {
            VehicleServices.Vehicles.Add(new Vehicle()
            {
                Category = 1,
                Items = "1.0",
                Weight = 1000,
            });
            VehicleServices.Vehicles.Add(new Vehicle()
            {
                Category = 2,
                Items = "1.1",
                Weight = 1600,
            });
            VehicleServices.Vehicles.Add(new Vehicle()
            {
                Category = 8,
                Items = "1.2",
                Weight = 1400,
            });
            VehicleServices.Vehicles.Add(new Vehicle()
            {
                Category = 13,
                Items = "1.3",
                Weight = 1500,
            });
            VehicleServices.Vehicles.Add(new Vehicle()
            {
                Category = 1,
                Items = "2.0",
                Weight = 1100,
            });
        }
    }
}

Converter

namespace Project.Converters
{
    class Item_to_FullItem : DependencyObject, IValueConverter
    {
        public Vehicle VehicleItem
        {
            get { return (Vehicle)GetValue(dependencyProperty); }
            set { SetValue(dependencyProperty, value); }
        }

        public static readonly DependencyProperty dependencyProperty =
            DependencyProperty.Register(nameof(VehicleItem), typeof(Vehicle), typeof(Item_to_FullItem), new PropertyMetadata(null));

        public object Convert(object value, Type targetType, object parameter, string language)
        {
            if (VehicleItem != null)
            {
                if (value != null)
                {
                    string _formatedValue = string.Empty;

                    switch (VehicleItem.Category)
                    {
                        case 1:
                            return "#" + value.ToString();
                        case 2:
                        case 3:
                            return value.ToString() + "º";
                        default:
                            return value.ToString();
                    }
                }
            }

            return null;
        }

        public object ConvertBack(object value, Type targetType, object parameter, string language)
        {
            throw new NotImplementedException();
        }
    }
}

Answer 1

The problem is that when you use {Binding} in the <Page.Resources> section, the binding will be evaluated then and there, relatively to the Page's DataContext. You can verify this if you set a DataContext = new Vehicle() within the Page's constructor.

To fix this, you can just move the converter inside the DataTemplate declaration:

<DataTemplate>
    <Grid ScrollViewer.VerticalScrollBarVisibility="Auto">
        <Grid.Resources>
            <converters:Item_to_FullItem x:Key="Item_to_FullItem" VehicleItem="{Binding}"/>
        </Grid.Resources>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
        </Grid.RowDefinitions>

        <Border Grid.Column="0" BorderThickness="1" BorderBrush="Black">
            <TextBlock Text="{Binding Path=Category}"/>
        </Border>
        <Border Grid.Column="1" BorderThickness="1" BorderBrush="Black">
            <TextBlock Text="{Binding Item, Converter={StaticResource Item_to_FullItem}}"/>
        </Border>
        <Border Grid.Column="2" BorderThickness="1" BorderBrush="Black">
            <TextBlock Text="{Binding Path=Weight}"/>
        </Border>
    </Grid>
</DataTemplate>

This way the Binding's data context will be the current ListView item and it should work as expected.