Windows Phone understand the lineargradientbrush class and radialgradienbrush class (11)

 

We understand the design that can be completed in XAML. Generally, it can be completed by code in hidden files. The case in this section is different ways to achieve the same design effect; for example, the code in the hidden file is as follows:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace LinearGB
{
    public partial class MainPage: PhoneApplicationPage
    {
        // Constructor
        public MainPage ()
        {
            InitializeComponent ();
            Init ();
        }
        private void Init ()
        {
            TextBlock tb = new TextBlock ();
            tb.Name = "tbName";
            tb.Text = "Display color";
            tb.VerticalAlignment = VerticalAlignment.Center;
            tb.HorizontalAlignment = HorizontalAlignment.Center;
            // instantiate
            // LinearGradientBrush lgb1 = new LinearGradientBrush ();
            LinearGradientBrush lgb2 = new LinearGradientBrush ();
          
            GradientStopCollection gsc = new GradientStopCollection ();
            // Set the color and offset of the transition point
            GradientStop gt1 = new GradientStop ();
            // Color c = new Color ();
            //c.R = 255;
            //c.A = 230;
            //c.G = 22;
            //c.B = 43;
            //gt1.Color=c;
            gt1.Color = Color.FromArgb (255, 164, 143, 112);
            gt1.Offset = 0.2;
            gsc.Add (gt1);

            GradientStop gt2 = new GradientStop ();
            // Color c2 = new Color ();
            //c2.R = 251;
            //c2.A = 231;
            //c2.G = 12;
            //c2.B = 13;
            //gt2.Color = c2;
            gt2.Color = Color.FromArgb (229, 178, 234, 188);
            gt2.Offset = 0.7;
            gsc.Add (gt2);
            // Set the starting coordinates of the linear gradient color
            Point p1 = new Point (0, 0);
            lgb2.StartPoint = p1;
            // Set the end coordinates of the linear gradient color
            Point p2 = new Point (1, 1);
            lgb2.EndPoint = p2;
            // Set the gradient stop point
            lgb2.GradientStops = gsc;

            // Set the foreground color
            tb.Foreground = lgb2;

            ContentPanel.Children.Add (tb);
        }
}
}

The effects of the code above:

Similar effects can also be achieved from the XAML file. The textblock content in the contentpanel is as follows:

<TextBlock x:Name="tbName" Text="display the color" VerticalAlignment="Center" HorizontalAlignment="Center" >
                <TextBlock.Foreground>
                    <LinearGradientBrush StartPoint="0 0" EndPoint="1 1">
                        <LinearGradientBrush.GradientStops>
                        <GradientStopCollection>
                            <GradientStop Offset="0.2" Color="AliceBlue"></GradientStop>
                            <GradientStop Offset="0.7" Color="Brown"></GradientStop>
                        </GradientStopCollection>
                         </LinearGradientBrush.GradientStops>
                    </LinearGradientBrush>
                </TextBlock.Foreground>
            </TextBlock>

Implementation results:

The lineargradientbrush class is introduced in both methods. The lineargradienbush class uses linear rendering of color areas to hide necessary text comments in the Code. The official explanation and some concepts are as follows:

 

Official explanation

Lineargradientbrush uses a linear gradient to draw a region.
A linear gradient is defined along a straight line. The end of this line is a linear gradient

Startpoint and
Endpoint attribute definition. Lineargradientbrush draws it along this line

Gradientstops.

The default linear gradient is in the diagonal direction. By default

Startpoint is the value of 0, 0 in the upper left corner of the drawn area.
Point, its
The endpoint is in the lower-right corner of the drawn area with a value.
Point. The color of the gradient is inserted along the diagonal path.

Demonstrate diagonal gradient. A line is added to highlight the interpolation path from the start point to the end point of the gradient.

Linear gradient in the diagonal direction

The next illustration shows the same linear gradient, but it has a highlighted gradient stop point.

Diagonal gradient with highlighted gradient stop points

Because both lineargradientbrush and radialgradienbrush are derived from gradientbrush, many attributes are the same as those of the lineargradientbrush class;

The example code of the radialgradienbrush class is as follows:

<Textblock X: Name = "tbradia" verticalignment = "center" horizontalalignment = "center" text = "diffuse radiation">
<Textblock. Foreground>
<Radialgradientbrush gradientorigin = "0.5, 0.5" center = "0.5, 0.5"
Radiusx = "0.5" radiusy = "0.5">
<Gradientstop color = "yellow" offset = "0"/>
<Gradientstop color = "red" offset = "0.25"/>
<Gradientstop color = "blue" offset = "0.75"/>
<Gradientstop color = "limegreen" offset = "1"/>
</Radialgradientbrush>
</Textblock. Foreground>
</Textblock>

:

 

Gradient stop point in radial gradient