WPF binding background not update

hossein tavakoli 471

Hi dears, I wanna set background color with binding and converter!

Converter Code :


    public class CheckBackground : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            try
            {
                if (value == null || value == PaymentTypes.PayMoney)
                    return Brushes.Orange;
                else
                    return
                        Brushes.Green;
            }
            catch
            {
                return Brushes.Transparent;
            }
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return (value == null || ((Brush)value) == Brushes.Green) ? PaymentTypes.EarnMoney : PaymentTypes.PayMoney;
        }
    }

WPF Xaml :

<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled" Background="Transparent" Name="lstCheckNotPass" ItemsSource="{Binding ElementName=dataGridNotPassCheck,Path=ItemsSource}">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid Height="80" Width="199" Margin="0,2" >
                <Border Background="{Binding Type,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged,Converter={StaticResource CheckBackgroundConverter}}" Height="80" Width="195" BorderThickness="1" BorderBrush="Gray" CornerRadius="5" Opacity="0.9"/>
                <Grid Margin="5">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <Label Content="{Binding Price,Converter={StaticResource DecimalToStringConverter}}" Style="{x:Null}" Grid.Column="0" VerticalAlignment="Center" HorizontalContentAlignment="Right" FontWeight="Bold" FontSize="12"/>
                    <Label Content="{Binding CheckPersianDate}" Style="{x:Null}" Grid.Column="1" VerticalAlignment="Center" HorizontalContentAlignment="Right" FontWeight="Bold" FontSize="12"/>
                    <Label Content="{Binding CustomerName}" Style="{x:Null}" Grid.Row="1" Grid.ColumnSpan="2" VerticalAlignment="Center" HorizontalContentAlignment="Center" FontSize="12" />
                    <Label Content="{Binding CheckId}" Style="{x:Null}" Grid.Row="2" Grid.ColumnSpan="2" VerticalAlignment="Center" HorizontalContentAlignment="Center" FontSize="12" />
                </Grid>
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

I use breakpoint in CheckBackground converter , it return color correctly but Border Background not updated.

Hongrui Yu-MSFT 2,075 Microsoft Vendor

Hi,@hossein tavakoli. Welcome to Microsoft Q&A.

Main doubts:

1.In the following code, value is of object type. Could value be directly compared with PaymentTypes.PayMoney without forced conversion and return Brushes.Orange or Brushes.Green.


if (value == null || value == PaymentTypes.PayMoney)

2.Do you provide Type in lstCheckNotPass.ItemsSource for data binding?

Here is my test.

Supplementary code


public class MyData

{

        public string Price { get; set; }

        public string CheckPersianDate { get; set; }

        public string CustomerName { get; set; }

        public string CheckId {  get; set; }

        public PaymentTypes Type { get; set; }

}

 

public enum PaymentTypes

{

    PayMoney,

    EarnMoney

}

 

public partial class MainWindow : Window

{

    public MainWindow()

    {

        InitializeComponent();

        ObservableCollection<MyData> data = new ObservableCollection<MyData>() {

            new MyData(){Price = "A",CheckPersianDate="A",CustomerName="A",CheckId="A",Type = PaymentTypes.PayMoney},

            new MyData(){Price = "B",CheckPersianDate="B",CustomerName="B",CheckId="B",Type = PaymentTypes.PayMoney},

            new MyData(){Price = "C",CheckPersianDate="C",CustomerName="C",CheckId="C",Type = PaymentTypes.EarnMoney},

            new MyData(){Price = "D",CheckPersianDate="D",CustomerName="D",CheckId="D",Type = PaymentTypes.EarnMoney},

            new MyData(){Price = "E",CheckPersianDate="E",CustomerName="E",CheckId="E",Type = PaymentTypes.EarnMoney},

        };

        lstCheckNotPass.ItemsSource = data; 

    }

}


<Window.Resources>

    <local:CheckBackground x:Key="CheckBackgroundConverter" ></local:CheckBackground>

</Window.Resources>

Adjusted code


<Label Content="{Binding Price,Converter={StaticResource DecimalToStringConverter}}" Style="{x:Null}" Grid.Column="0" VerticalAlignment="Center" HorizontalContentAlignment="Right" FontWeight="Bold" FontSize="12"/>


<Label Content="{Binding Price}" Style="{x:Null}" Grid.Column="0" VerticalAlignment="Center" HorizontalContentAlignment="Right" FontWeight="Bold" FontSize="12"/>


if (value == null || value == PaymentTypes.PayMoney)


if (value == null || (PaymentTypes)value == PaymentTypes.PayMoney)

Test Results

2 answers

hossein tavakoli 471

My Xaml Code :

<ListBox Name="lstCheckNotPass" ScrollViewer.HorizontalScrollBarVisibility="Disabled" Visibility="Collapsed" BorderThickness="0" Background="Transparent" ItemsSource="{Binding ElementName=dataGridNotPassCheck,Path=ItemsSource}">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid Height="80" Width="{Binding ElementName=panelCheck,Path=Width,Converter={StaticResource Width30Percent}}" MinWidth="150" Margin="0,2" >
                <Border Background="{Binding Type,Converter={StaticResource CheckBackgroundConverter}}" BorderThickness="1" BorderBrush="Gray" CornerRadius="5" Opacity="0.5"/>
                <Grid Margin="5">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <Label Content="{Binding CheckPersianDate}" Style="{x:Null}" Grid.Column="0" VerticalAlignment="Center" HorizontalContentAlignment="Left" FontWeight="Bold" FontSize="12"/>
                    <Label Content="{Binding Price,Converter={StaticResource DecimalToStringConverter}}" Style="{x:Null}" Grid.Column="1" VerticalAlignment="Center" HorizontalContentAlignment="Right" FontWeight="Bold" FontSize="12"/>
                    <Label Content="{Binding CustomerName}" Style="{x:Null}" Grid.Row="1" Grid.ColumnSpan="2" VerticalAlignment="Center" HorizontalContentAlignment="Center" FontSize="12" />
                    <Label Content="{Binding CheckId}" Style="{x:Null}" Grid.Row="2" Grid.ColumnSpan="2" VerticalAlignment="Center" HorizontalContentAlignment="Center" FontSize="12" />
                </Grid>
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Converter : PaymentType.PayMoney is string type for database text is 'PayMoney'


    public class CheckBackground : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            try
            {
                if (value == null || value == PaymentTypes.PayMoney)
                    return Brushes.Orange;
                else
                    return
                        Brushes.Green;
            }
            catch
            {              
                    return Brushes.Green;
             }
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return (value == null || ((Brush)value) == Brushes.Green) ? PaymentTypes.EarnMoney : PaymentTypes.PayMoney;
        }
    }

I use breakpoint in try block it return color correctly Green or Orange. But background of list's items not change.

Screenshot 2024-08-10 113406

Binding Code:

var varChecks = PaymentQuery.GetNotPassChecks(true);
if (varChecks.Count>0)
    lstCheckNotPass.ItemsSource = new ObservableCollection<Payment>(varChecks);

Payment Class :


    public class Payment : NotifyPropertyChanged
    {
        private long _paymentId;
        [DatabaseGenerated(DatabaseGeneratedOption.None)]
        public long PaymentId
        {
            get { return _paymentId; }
            set
            {
                _paymentId = value;
                OnPropertyChanged(nameof(PaymentId));
            }
        }

        private string _date;

        public string CheckPersianDate
        {
            get { return _date; }
            set
            {
                _date = value;
                OnPropertyChanged(nameof(PersianDate));
            }
        }

        private decimal _price;
        public decimal Price
        {
            get { return _price; }
            set
            {
                _price = value;
                OnPropertyChanged(nameof(Price));
            }
        }

        private string _type;//Contain PayMoney Or EarnMoney text
        public string Type
        {
            get { return _type; }
            set
            {
                _type = value;
                OnPropertyChanged(nameof(Type));
            }
        }

        private string _customerName;
        public string CustomerName;
        {
            get { return _customerName; }
            set
            {
                _type = customerName;
                OnPropertyChanged(nameof(CustomerName));
            }
        }

        private long? _checkId;

        public long? CheckId
        {
            get { return _checkId; }
            set
            {
                _checkId = value;
                OnPropertyChanged(nameof(CheckId));
            }
        }
}

result Screenshot 2024-08-10 110808

Viorel 117.6K Reputation points

2024-08-10T10:24:28.66+00:00

Is lstCheckNotPass visible?
hossein tavakoli 471 Reputation points

2024-08-10T13:37:17.6733333+00:00

yes, in code I make it visible

Hongrui Yu-MSFT 2,075 Microsoft Vendor

Hi,@hossein tavakoli.

I re-tested according to your latest code and found that the background could be successfully set.

Related code:


<Window.Resources>

    <local:CheckBackground x:Key="CheckBackgroundConverter" ></local:CheckBackground>

</Window.Resources>

<Grid>

    <ListBox Name="lstCheckNotPass" ScrollViewer.HorizontalScrollBarVisibility="Disabled" BorderThickness="0" Background="Transparent" ItemsSource="{Binding ElementName=dataGridNotPassCheck,Path=ItemsSource}">

        <ListBox.ItemsPanel>

            <ItemsPanelTemplate>

                <WrapPanel Orientation="Horizontal"/>

            </ItemsPanelTemplate>

        </ListBox.ItemsPanel>

        <ListBox.ItemTemplate>

            <DataTemplate>

                <Grid Height="80" Width="199" MinWidth="150" Margin="0,2" >

                    <Border Background="{Binding Type,Converter={StaticResource CheckBackgroundConverter}}" BorderThickness="1" BorderBrush="Gray" CornerRadius="5" Opacity="0.5"/>

                    <Grid Margin="5">

                        <Grid.ColumnDefinitions>

                            <ColumnDefinition/>

                            <ColumnDefinition/>

                        </Grid.ColumnDefinitions>

                        <Grid.RowDefinitions>

                            <RowDefinition/>

                            <RowDefinition/>

                            <RowDefinition/>

                        </Grid.RowDefinitions>

                        <Label Content="{Binding CheckPersianDate}" Style="{x:Null}" Grid.Column="0" VerticalAlignment="Center" HorizontalContentAlignment="Left" FontWeight="Bold" FontSize="12"/>

                        <Label Content="{Binding Price}" Style="{x:Null}" Grid.Column="1" VerticalAlignment="Center" HorizontalContentAlignment="Right" FontWeight="Bold" FontSize="12"/>

                        <Label Content="{Binding CustomerName}" Style="{x:Null}" Grid.Row="1" Grid.ColumnSpan="2" VerticalAlignment="Center" HorizontalContentAlignment="Center" FontSize="12" />

                        <Label Content="{Binding CheckId}" Style="{x:Null}" Grid.Row="2" Grid.ColumnSpan="2" VerticalAlignment="Center" HorizontalContentAlignment="Center" FontSize="12" />

                    </Grid>

                </Grid>

            </DataTemplate>

        </ListBox.ItemTemplate>

    </ListBox>

</Grid>


public partial class MainWindow : Window

{

    public MainWindow()

    {

        InitializeComponent();

        List<Payment> varChecks = new List<Payment>()

        {

            new Payment(){Price = 10,CheckPersianDate="A",CustomerName="A",CheckId=10,Type = "PayMoney"},

            new Payment(){Price = 20,CheckPersianDate="B",CustomerName="B",CheckId=20,Type = "PayMoney"},

            new Payment(){Price = 30,CheckPersianDate="C",CustomerName="C",CheckId=30,Type = "PayMoney"},

            new Payment(){Price = 40,CheckPersianDate="D",CustomerName="D",CheckId=40,Type = "EarnMoney"},

            new Payment(){Price = 50,CheckPersianDate="E",CustomerName="E",CheckId=50,Type = "EarnMoney"},

        };

 

            

        lstCheckNotPass.ItemsSource = new ObservableCollection<Payment>(varChecks);

    }

}

 

public class Payment : INotifyPropertyChanged

{

    private long _paymentId;

 

    public long PaymentId

    {

        get { return _paymentId; }

        set

        {

            _paymentId = value;

            OnPropertyChanged(nameof(PaymentId));

        }

    }

 

    private string _date;

 

    public string CheckPersianDate

    {

        get { return _date; }

        set

        {

            _date = value;

            OnPropertyChanged(nameof(CheckPersianDate));

        }

    }

 

    private decimal _price;

    public decimal Price

    {

        get { return _price; }

        set

        {

            _price = value;

            OnPropertyChanged(nameof(Price));

        }

    }

 

    private string _type;//Contain PayMoney Or EarnMoney text

    public string Type

    {

        get { return _type; }

        set

        {

            _type = value;

            OnPropertyChanged(nameof(Type));

        }

    }

 

    private string _customerName;

    public string CustomerName

    {

        get { return _customerName; }

        set

        {

            _customerName = value;

            OnPropertyChanged(nameof(CustomerName));

        }

    }

 

    private long? _checkId; 

 

    public long? CheckId

    {

        get { return _checkId; }

        set

        {

            _checkId = value;

            OnPropertyChanged(nameof(CheckId));

        }

    }

 

    public event PropertyChangedEventHandler PropertyChanged;

 

    public void OnPropertyChanged(string propertyName)

    {

        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));

    }

}

 

public class CheckBackground : IValueConverter

{

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)

    {

        try

        {

            if (value == null || value == PaymentTypes.PayMoney)

                return Brushes.Orange;

            else

                return

                    Brushes.Green;

        }

        catch

        {

            return Brushes.Green;

        }

    }

 

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)

    {

        return (value == null || ((Brush)value) == Brushes.Green) ? PaymentTypes.EarnMoney : PaymentTypes.PayMoney;

    }

}

 

public static class PaymentTypes

{

    public static string PayMoney = "PayMoney";

 

    public static string EarnMoney = "EarnMoney";

}

Test Results

Could you provide a sample project that reproduces your problem? If you can't reproduce the problem in a single sample program, then you could consider whether there is other code that is causing the problem.

hossein tavakoli 471 Reputation points

2024-08-13T16:33:53.29+00:00

I create new project , it work correctly.
But in main project it doesn't work.
I clean my solution an rebuild it, also I deleted obj and bin folder. But background not changed.

if I use Background="Red" it work, with Converter background not changed, but breakpoint show me return color is correct.
Is there any way to help me ?
Viorel 117.6K Reputation points

2024-08-13T17:47:00.1633333+00:00
Ideally you should probably remove the private and irrelevant parts and prepare a simplified project that demonstrates the problem.

How does it behave in this case:

<Border Background="{Binding Type2}" BorderThickness="1" BorderBrush="Gray"> <Grid . . . labels . . . </Grid> </Border>

where Type2 is a test property that returns Brushes.Red?
hossein tavakoli 471 Reputation points

2024-08-14T06:12:09.82+00:00

CheckBackground converter return Color
Hongrui Yu-MSFT 2,075 Reputation points Microsoft Vendor

2024-08-14T06:41:08.71+00:00
Hi,@hossein tavakoli.

According to your description, the problem should come from other code.

The following test method could be used for some troubleshooting

Test whether only the Border converter is unavailable or all converters in the xaml are unavailable.

Output the changes of Border.Background from time to time to see if there is another place to assign the value again, or the value returned by the converter is not assigned.

Use TextBlock.Text as the conversion content to more clearly understand what the converted value is.
hossein tavakoli 471 Reputation points

2024-08-18T07:38:51.47+00:00

I use TextBlock , text is correct

hossein tavakoli 471 Reputation points

2024-08-18T08:18:49.0266667+00:00

Solved. My converter return Brush (System.Drawing) , should return Brush as System.Windows.Media
Please sign in to rate this answer.

0 comments No comments
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

WPF binding background not update

2 answers

Your answer