C# XAML Introduction Part 4 Object Names Part 2

 in C# by

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.

view source
print?
1<Window x:Class="MikeColorRectTextbox.MainWindow"
2        x:Name="MWindow"
3        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
7        xmlns:local="clr-namespace:MikeColorRectTextbox"
8        mc:Ignorable="d"
9        Title="Mike Color Rect TextBox" Height="270" Width="400">
10    <Grid>
11        <Rectangle x:Name="Rect" HorizontalAlignment="Left" Height="124" Margin="203,41,0,0" Stroke="Black" VerticalAlignment="Top" Width="144">
12            <Rectangle.Fill>
13                <SolidColorBrush>
14                    <SolidColorBrush.Color>
15                        <Color>
16                            <Color.A>255</Color.A>
17                            <Color.R>0</Color.R>
18                            <Color.G>0</Color.G>
19                            <Color.B>0</Color.B>
20                        </Color>
21                    </SolidColorBrush.Color>
22                </SolidColorBrush>
23            </Rectangle.Fill>
24        </Rectangle>
25        <TextBox x:Name="textBoxRed" Text="0" HorizontalAlignment="Left" Height="24" Margin="97,41,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="67" />
26        <TextBox x:Name="textBoxGreen" Text="0" HorizontalAlignment="Left" Height="27" Margin="97,83,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="67"/>
27        <TextBox x:Name="textBoxBlue" Text="0" HorizontalAlignment="Left" Height="26" Margin="97,130,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="67"/>
28        <Label x:Name="labelRed" Content="Red" HorizontalAlignment="Left" Height="35" Margin="10,41,0,0" VerticalAlignment="Top" Width="62"/>
29        <Label x:Name="labelGreen" Content="Green" HorizontalAlignment="Left" Height="35" Margin="10,82,0,0" VerticalAlignment="Top" Width="62"/>
30        <Label x:Name="labelBlue" Content="Blue" HorizontalAlignment="Left" Height="35" Margin="10,130,0,0" VerticalAlignment="Top" Width="62"/>
31        <Button x:Name="button" Content="Update" HorizontalAlignment="Left" Height="28" Margin="221,172,0,0" VerticalAlignment="Top" Width="108" Click="button_Click"/>
32        <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"/>
33    </Grid>
34</Window>

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

view source
print?
1using System;
2using System.Collections.Generic;
3using System.Linq;
4using System.Text;
5using System.Threading.Tasks;
6using System.Windows;
7using System.Windows.Controls;
8using System.Windows.Data;
9using System.Windows.Documents;
10using System.Windows.Input;
11using System.Windows.Media;
12using System.Windows.Media.Imaging;
13using System.Windows.Navigation;
14using System.Windows.Shapes;
15 
16namespace MikeColorRectTextbox
17{
18    /// <summary>
19    /// Interaction logic for MainWindow.xaml
20    /// </summary>
21    public partial class MainWindow : Window
22    {
23        public MainWindow()
24        {
25            InitializeComponent();
26        }
27        private void button_Click(object sender, RoutedEventArgs e)
28        {
29            // update the color in the rectangle.
30            //
31            byte myByteRed, myByteGreen, myByteBlue;
32            myByteRed = 0; myByteGreen = 0; myByteBlue = 0;
33            // get the values in the 3 text boxes and put them into bytes
34            byte.TryParse(textBoxRed.Text, out myByteRed);
35            byte.TryParse(textBoxGreen.Text, out myByteBlue);
36            byte.TryParse(textBoxBlue.Text, out myByteGreen);
37            // Change the colour
38            Rect.Fill = new SolidColorBrush(System.Windows.Media.Color.FromRgb(myByteRed, myByteBlue, myByteGreen));
39        }
40    }
41}

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.

view source
print?
1Rect.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.