C# XAML Introduction Part 4 Object Names Part 2


This is a continuation of Object Names Part 1. This example allows the user to view a custom colour in a rectangle by specifying the three colour codes, red, green and blue. The user can enter the values into three text boxes and click the button to see the colour displayed in a rectangle.

CustomColours

When the user clicks the Update button, the code behind in the Click event runs. It gets the three values in the text boxes, converts them to bytes and then applies the three values to a Color struct that is applied to a Solid Color Brush object that is applied to the Fill property of the rectangle object.

<Window x:Class="MikeColorRectTextbox.MainWindow"
        x:Name="MWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:MikeColorRectTextbox"
        mc:Ignorable="d"
        Title="Mike Color Rect TextBox" Height="270" Width="400">
    <Grid>
        <Rectangle x:Name="Rect" HorizontalAlignment="Left" Height="124" Margin="203,41,0,0" Stroke="Black" VerticalAlignment="Top" Width="144">
            <Rectangle.Fill>
                <SolidColorBrush>
                    <SolidColorBrush.Color>
                        <Color>
                            <Color.A>255</Color.A>
                            <Color.R>0</Color.R>
                            <Color.G>0</Color.G>
                            <Color.B>0</Color.B>
                        </Color>
                    </SolidColorBrush.Color>
                </SolidColorBrush>
            </Rectangle.Fill>
        </Rectangle>
        <TextBox x:Name="textBoxRed" Text="0" HorizontalAlignment="Left" Height="24" Margin="97,41,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="67" />
        <TextBox x:Name="textBoxGreen" Text="0" HorizontalAlignment="Left" Height="27" Margin="97,83,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="67"/>
        <TextBox x:Name="textBoxBlue" Text="0" HorizontalAlignment="Left" Height="26" Margin="97,130,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="67"/>
        <Label x:Name="labelRed" Content="Red" HorizontalAlignment="Left" Height="35" Margin="10,41,0,0" VerticalAlignment="Top" Width="62"/>
        <Label x:Name="labelGreen" Content="Green" HorizontalAlignment="Left" Height="35" Margin="10,82,0,0" VerticalAlignment="Top" Width="62"/>
        <Label x:Name="labelBlue" Content="Blue" HorizontalAlignment="Left" Height="35" Margin="10,130,0,0" VerticalAlignment="Top" Width="62"/>
        <Button x:Name="button" Content="Update" HorizontalAlignment="Left" Height="28" Margin="221,172,0,0" VerticalAlignment="Top" Width="108" Click="button_Click"/>
        <Label x:Name="label" Content="Enter a value from 0 to 255 for each colour and click Update." HorizontalAlignment="Left" Height="26" Margin="10,10,0,0" VerticalAlignment="Top" Width="337"/>
    </Grid>
</Window>

In the above XAML notice that we have used x:Name for the three text boxes and the rectangle.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace MikeColorRectTextbox
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        private void button_Click(object sender, RoutedEventArgs e)
        {
            // update the color in the rectangle.
            // 
            byte myByteRed, myByteGreen, myByteBlue;
            myByteRed = 0; myByteGreen = 0; myByteBlue = 0;
            // get the values in the 3 text boxes and put them into bytes
            byte.TryParse(textBoxRed.Text, out myByteRed);
            byte.TryParse(textBoxGreen.Text, out myByteBlue);
            byte.TryParse(textBoxBlue.Text, out myByteGreen);
            // Change the colour
            Rect.Fill = new SolidColorBrush(System.Windows.Media.Color.FromRgb(myByteRed, myByteBlue, myByteGreen));
        }
    }
}

Instead of the last line of code above, you could shorten it and use the line below. The longer version was shown just for illustration. For another post example of using a custom colour in a SolidColorBrush (Color.FromRgb()) have a look at the post C# XAML Resources Introduction Part 3.

Rect.Fill = new SolidColorBrush(Color.FromRgb(myByteRed, myByteBlue, myByteGreen));

Events

Above, we use the Click event. It would be more logical and convenient for the user if they could just enter a number and have it automatically update the colour in the rectangle.