Custom control, background doesn't change

Question

So I made a custom control, containing a button and an image. I create 64 of them, a chessboard.

for (int i = 1; i <= 8; i++)
{
    for (int j = 1; j <= 8; j++)
    {
        Square field = new Square(i, j, this);
        field.Click += OnFieldClick;
        squares[i - 1, j - 1] = field;
        squares_list.Add(field);
        Square_control fieldBase = new Square_control(field);

        this.table.Children.Add(fieldBase);
        Grid.SetRow(fieldBase, j - 1);
        Grid.SetColumn(fieldBase, i - 1);
    }
}

Square is a class inheriting from Button class. It's background is set in it's constructor.

Square_Control is my custom control containing a button and an image. Its constructor sets the button to the parameter.

Thanks to the debugger, I found out that colors black and white are set properly in the field and fieldBase objects, but when I run the program all the buttons are white. I feel like I'm missing some important knowledge about how WPF works.

Square constructor:

public Square(int row, int col, MainWindow wind)
    {
        if ((row + col) % 2 == 0)
            isWhite = true;
        else
            isWhite = false;

        colName = col;
        rowName = row;

        if (this.isWhite)
            SquareColor = wind.BasicWhite;
        else
            SquareColor = wind.BasicBlack;

        Background = SquareColor;
        window = wind;
    }


BasicWhite = new SolidColorBrush(new Color()
        {
            R = 255,
            B = 255,
            G = 255,
            A = 255
        });

        BasicBlack = new SolidColorBrush(new Color()
        {
            R = 0,
            B = 0,
            G = 0,
            A = 255
        });

Square_control xaml:

<Button x:Name="SQR">
    <Image x:Name="FigImage"/>
</Button>

It's constructor:

public Square_control(Button butt)
    {
        InitializeComponent();
        SQR = butt;
    }

Also, I tried setting background color in Square_Control directly in XAML and it worked.

You'd have to provide us with the Square class code so we can try to help — Rafalon
What are BasicWhite and BasicBlack? For all i know both could have the value of the same color assigned (white). — user2819245

Kilazur Kilazur · Accepted Answer · 2018-03-02T16:08:32

You're not doing it properly indeed.

First, you already have a Square control; what do you need a Square_control for?

You don't even need Square; just make a new UserControl and put your Button and your Image in it.
If you need further specialization (like the IsWhite property), you can just add it to this UserControl as dependency properties.

And simply pass the required parameters (x, y) to its constructor.

You can start with something like that:

public partial class ChessSquare : UserControl
{
    public enum Piece
    {
        King,
        Queen,
        Rook,
        Bishop,
        Knight,
        Pawn,
        None
    }

    public readonly SolidColorBrush BasicWhite = new SolidColorBrush(new Color { R = 255, G = 255, B = 255, A = 255 });
    public readonly SolidColorBrush BasicBlack = new SolidColorBrush(new Color { R = 0, G = 0, B = 0, A = 255 });

    public Boolean IsWhite
    {
        get { return (Boolean)this.GetValue(IsWhiteProperty); }
        set
        {
            this.SetValue(IsWhiteProperty, value);
            this.Background = value ? BasicWhite : BasicBlack;
        }
    }
    public static readonly DependencyProperty IsWhiteProperty = DependencyProperty.Register(
      nameof(IsWhite), typeof(Boolean), typeof(ChessSquare), new PropertyMetadata(false, new PropertyChangedCallback(OnIsWhitePropertyChanged)));

    public Piece PieceType
    {
        get { return (Piece)this.GetValue(PieceProperty); }
        set { this.SetValue(PieceProperty, value); }
    }
    public static readonly DependencyProperty PieceProperty = DependencyProperty.Register(
      nameof(PieceType), typeof(Piece), typeof(ChessSquare), new PropertyMetadata(Piece.None, new PropertyChangedCallback(OnPieceTypePropertyChanged)));

    public ChessSquare(int row, int col)
    {
        InitializeComponent();
        IsWhite = (row + col) % 2 == 0;
    }

    private static void OnIsWhitePropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var square = (ChessSquare)d;
        square.Background = (bool)e.NewValue ? square.BasicWhite : square.BasicBlack;
    }

    private static void OnPieceTypePropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        // change the image, set it to null is the value is Piece.None
    }
}

And eventually replace the this.Background by this.button.Background, depending on how you name stuff in this UserControl's associated XAML.

Custom control, background doesn't change

1 Answers