color doesn't show, wrong color selected

Question

I am building an app with WinUI (Is not very pleasant)

anyway

have a model, that represents color, but when I bind, I don't see the colors, and when I select the color is not the correct color

namespace NanoFlow.Model {
    public class ColorOption(Color color, string name) {

        public Color Color { get; set; } = color;

        public SolidColorBrush Brush { get; set; } = new SolidColorBrush(color);

        public string Name { get; set; } = name;
    }
}

   <ComboBox
       Width="200"
       ItemsSource="{x:Bind ViewModel.ColorOptions}"
       SelectedItem="{x:Bind ViewModel.SelectedLineColor, Mode=TwoWay}">
       <ComboBox.ItemTemplate>
           <DataTemplate>
               <StackPanel Orientation="Horizontal">
                   <Rectangle
                       Width="20"
                       Height="20"
                       Margin="2"
                       Fill="{Binding Color}" />
                   <TextBlock
                       Margin="5,0,0,0"
                       VerticalAlignment="Center"
                       Text="{Binding Name}" />
               </StackPanel>
           </DataTemplate>
       </ComboBox.ItemTemplate>
   </ComboBox>

public partial class LineSettingsDialogViewModel : ObservableObject {

    [ObservableProperty]
    private int selectedLinesCount;

    [ObservableProperty]
    private Color selectedLineColor;

    public ObservableCollection<int> _lineCounts = [];

    public ObservableCollection<ColorOption> ColorOptions { get; } =
    [
        new(Colors.Black, "Black"),
        new(Colors.Red, "Red"),
        new(Colors.Blue, "Blue"),
        new(Colors.Green, "Green"),
        new(Colors.Yellow, "Yellow")
    ];
}

Also, when I select the color

is not correnct

    public partial class MainViewModel(LineSettingsDialogViewModel lineSettingsDialogViewModel) : ObservableObject {

        private readonly LineSettingsDialogViewModel _lineSettingsDialogViewModel = lineSettingsDialogViewModel;

        [ObservableProperty]
        private int _selectedLinesCount;

        [ObservableProperty]
        private Color selectedLineColor;

        public ObservableCollection<PointModel> Points { get; } = [];

        public ObservableCollection<LineModel> Lines { get; } = [];

        [RelayCommand]
        async Task NewDesign(XamlRoot xamlRoot) {

            if(xamlRoot != null) {

                var dialog = new LineSettingsDialog(
                    _lineSettingsDialogViewModel) {
                    XamlRoot = xamlRoot
                };

                var result = await dialog.ShowAsync();

                if(result == ContentDialogResult.Primary) {
                    SelectedLinesCount = _lineSettingsDialogViewModel.SelectedLinesCount;
                    SelectedLineColor = _lineSettingsDialogViewModel.SelectedLineColor;
                }
            }
        }
    }
}

#00000000 is black not yellow

Answer 1

Hi,

Welcome to Microsoft Q&A!

According to your code, your itemsource is bound to ObservableCollection<ColorOption> ColorOptions. So the selecteditem type should be a ColorOptions object.

However your SelectedItem is bind to selectedLineColor, the selectedLineColor is a Color object. Because the types are different, the value of the selectedLineColor has not changed, it is always the initial value. The initial value is Black.

You need to modify the type of selectedLineColor to ColorOptions in both of the models.

Thank you

Jeanine