'WinUI-3 Editable ComboBox not displaying Bound Text on Application start
On start of application the ComboBox with a valid Text Property incorrectly shows a placeholder text rather than the bound text value - until the user clicks the ComboBox. The click causes the correct bound Text to show and stay shown. The related TextBox linked to same property correctly shows the bound value at all times.
If a Combo List item is selected it works as expected indicating Binding is correct. It looks like the default template: (generic.xaml from C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.18362.0\Generic.xaml) is likely incorrect as the Text should show when a value exists, rather than the Placeholder text. If this is the cause, then I do not yet have the skill to redefine the visual states correctly and would benefit from a hint.
Can anyone point me in the right direction so I can show the Text property at initial start without a click required. The user control code used is:
Demonstrated with a WinUI3 usercontrol containing TextBox and a ComboBox - Text of each bound to the same property in two way mode so each will update with property changed.
Using current nuget package of CommunityToolkit 7.1.2 which uses
.net5.0-windows10.0.18362
Xaml Code ComboBoxTest.xaml:
<UserControl
x:Class="mvvmTry1.Views.ComboBoxTest"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:mvvmTry1.ViewModels"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<StackPanel Orientation="Horizontal" Spacing="20" Background="AntiqueWhite">
<TextBox Header="Current Value" Text="{x:Bind MyText,Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
MinWidth="60"
Height="Auto" />
<ComboBox
Header=" ComboBox"
IsEditable="True"
ItemsSource="{x:Bind MyListItems, Mode=TwoWay}"
MinWidth="100"
PlaceholderText="PlaceHolder Text"
PlaceholderForeground="Green"
Text="{x:Bind MyText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
/>
</StackPanel>
</UserControl>
CodeBehind ComboBoxTest.xaml.cs:
using CommunityToolkit.Mvvm.ComponentModel;
using Microsoft.UI.Xaml.Controls;
using System.Collections.ObjectModel;
// To learn more about WinUI, the WinUI project structure,
// and more about our project templates, see: http://aka.ms/winui-project-info.
namespace mvvmTry1.Views
{
[ObservableObject]
public partial class ComboBoxTest : UserControl
{
[ObservableProperty]
private string myText ="MyText value";
public ObservableCollection<string> MyListItems = new();
public ComboBoxTest()
{
this.InitializeComponent();
MyListItems.Add("Item 1");
MyListItems.Add("Item 2");
MyListItems.Add("Item 3");
}
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
