How to use displaymemberpath on a combobox in UWP C++/CX? - xaml

Question

So I'm trying to bind a combobox to a vector of myclass. myclass has a public Platform::String^ property called key. So in my XAML, I have displaymemberpath for the combobox set to "key". However, I just get a box of empty options, which is the same result as if i set displaymemberpath to "asdf" (a non-existent property). To illustrate my problem, I've tried to rewrite this tutorial on using displaymemberpath in C++/CX: https://asp-net-example.blogspot.com/2017/01/uwp-combobox-displaymemberpath-and.html (I've tried following the original tutorial in C# and it worked perfectly fine).
Here's my code:
(MainPage.xaml is exactly the same as the tutorial).
<Page
x:Class="displaymembercxxtest.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:displaymembercxxtest"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<StackPanel
x:Name="stack_panel1"
Orientation="Horizontal"
Background="LightYellow"
Padding="100"
>
<ComboBox
x:Name="ComboBox1"
Header="Select A Color"
DisplayMemberPath="ColorName"
SelectedValuePath="ColorValue"
SelectionChanged="ComboBox1_SelectionChanged"
>
</ComboBox>
<TextBlock
x:Name="TextBlock1"
FontFamily="Consolas"
FontSize="25"
Foreground="DarkGreen"
Margin="50,5,5,5"
/>
</StackPanel>
</Page>
Code Behind:
//MainPage.xaml.h
namespace displaymembercxxtest
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public ref class MainPage sealed
{
public:
MainPage();
private:
void ComboBox1_SelectionChanged(Platform::Object^ sender, Windows::UI::Xaml::Controls::SelectionChangedEventArgs^ e);
};
public ref class color sealed
{
public:
property Platform::String^ ColorName;
property Platform::String^ ColorValue;
color(Platform::String^ name, Platform::String^ value)
{
ColorName = name;
ColorValue = value;
}
};
}
   
//MainPage.xaml.cpp
MainPage::MainPage()
{
InitializeComponent();
Platform::Collections::Vector<color^>^ colors = ref new Platform::Collections::Vector<color^> ();
colors->Append(ref new color("INDIANRED", "#CD5C5C"));
colors->Append(ref new color("SALMON", "#FA8072"));
colors->Append(ref new color("CRIMSON", "#DC143C"));
colors->Append(ref new color("DEEPPINK", "#FF1493"));
colors->Append(ref new color("CORAL", "#FF7F50"));
colors->Append(ref new color("ORANGE", "#FFA500"));
colors->Append(ref new color("YELLOW", "#FFFF00"));
colors->Append(ref new color("PEACHPUFF", "#FFDAB9"));
ComboBox1->ItemsSource = colors;
}
void displaymembercxxtest::MainPage::ComboBox1_SelectionChanged(Platform::Object^ sender, Windows::UI::Xaml::Controls::SelectionChangedEventArgs^ e)
{
// not relevant to the problem
}
Here is what I'm seeing:
Here is what it looks like when I built the tutorial in C#:
As you can see, the options are blank in the C++/CX version. What am I doing wrong?

Answer 1

If you're using {Binding}, you'll need to add the BindableAttribute attribute to the color class.
Please check the following code:
[Windows::UI::Xaml::Data::Bindable]
public ref class color sealed
{
public:
property Platform::String^ ColorName;
property Platform::String^ ColorValue;
color(Platform::String^ name, Platform::String^ value)
{
ColorName = name;
ColorValue = value;
}
};
More information, please read Data binding overview documentation.