Работа с графикой

Кисти

Большинство элементов управления имеют свойства Background и Foreground, представляющие цвет фона и шрифта. В качестве значения эти свойства принимают одну из кистей. Все кисти представляют классы, производные от базового класса Windows.UI.Xaml.Media.Brush.

В рамках Universal Windows Platform нам доступно четыре вида кистей:

• SolidColorBrush

• LinearGradientBrush

• ImageBrush

• WebViewBrush

SolidColorBrush

SolidColorBrush представляет самую простую кисть, которая заливает содержимое сплошным цветом:

<Button Background="Silver" Foreground="Black" Content="Hello" />

Фактически это определение кнопки будет эквивалентно следующему:

<Button Content="Hello">
    <Button.Background>
        <SolidColorBrush Color="Silver" />
    </Button.Background>
    <Button.Foreground>
        <SolidColorBrush Color="Black" />
    </Button.Foreground>
</Button>

SolidColorBrush использует два основных свойства для настройки цвета: Color (задает сам цвет) и Opacity (задает прозрачность). Например:

<SolidColorBrush Color="Black" Opacity="0.3" />

Opacity принимает значение от 0 (полность прозрачный) до 1.0 (непрозрачный).

Свойство Color устанавливает цвет и принимает объект типа Windows.UI.Color. В UWP уже есть ряд предустановленных цветов, которые определены в классе Windows.UI.Colors. Например:

<Button x:Name="myButton" Background="Red" Content="Hello" />

эквивалентно следующему коду c#:

SolidColorBrush buttonBrush = new SolidColorBrush(Windows.UI.Colors.Red);
myButton.Background = buttonBrush;

Также мы можем устанавливать цвет с помощью шестнадцатиричного значения в формате "ARGB":

<Button x:Name="myButton" Background="#FFFF0000" Content="Hello" />

То же самое можно сделать с помощью кода C#:

Windows.UI.Color redColor = Windows.UI.Color.FromArgb(255, 255, 0, 0);
SolidColorBrush buttonBrush = new SolidColorBrush(redColor);
myButton.Background = buttonBrush;

LinearGradientBrush

LinearGradientBrush представляет кисть, которая наносит линейный градиент:

<Button x:Name="myButton" Content="Hello">
    <Button.Background>
        <LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,0">
            <GradientStop Color="Black" Offset="0" />
            <GradientStop Color="White" Offset="1" />
        </LinearGradientBrush>
    </Button.Background>
    <Button.Foreground>
        <LinearGradientBrush>
            <GradientStop Color="Yellow" Offset="1" />
            <GradientStop Color="Red" Offset="0.5" />
            <GradientStop Color="Blue" Offset="0" />
        </LinearGradientBrush>
    </Button.Foreground>
</Button>

Градиентная кисть составляют элементы GradientStop - точки градиента. Для каждого элемента задается свойство Color (в виде константы из Windows.UI.Colors или шестнадцатеричного значения ARGB) и свойство Offset - положение точки градиента вдоль оси градиента.

Свойство Offset принимает значение double в диапазоне от 0 до 1. Значение 0 помещает GradientStop в начало оси градиента, то есть вблизи его точки StartPoint. Значение 1 помещает GradientStop в точку EndPoint.

По умолчанию кись создает горизонтальный градиент. Однако установив нужные параметры для свойств StartPoint и EndPoint, мы можем сделать вертикальный градиент, как в данном случае: StartPoint="0.5,1" EndPoint="0.5,0"

ImageBrush

ImageBrush использует для окрашивания элемента какое-либо изображение:

<Grid>
    <Grid.Background>
        <ImageBrush ImageSource="assets/dubi.png" />
    </Grid.Background>
    <Button x:Name="myButton" Content="Hello" HorizontalAlignment="Center" Height="50" Width="80">
        <Button.Background>
            <SolidColorBrush Color="Silver" Opacity="0.7" />
        </Button.Background>
    </Button>
</Grid>

Для установк изображения используется свойство ImageSource. По умолчанию ImageBrush растягивает изображение так, чтобы полностью закрыть элемент. Однако мы можем изменить это поведение с помощью свойства Stretch. Оно устанавливает, как изображение растягивается. Значение по умолчанию - Fill, но мы можем убрать масштабирование с помощью значения None, либо применить другие способы растягивания с посредством значений Uniform или UniformToFill.

WebViewBrush

WebViewBrush в качестве изображения устанавливает содержимое WebView:

<Grid Background="White">
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    
	<WebView x:Name="webView1" Source="http://msdn.com" />
    
	<Button Height="100" Width="190" Grid.Row="1" HorizontalAlignment="Center">
        <Button.Background>
            <WebViewBrush x:Name="webBrush" SourceName="webView1" />
        </Button.Background>
    </Button>
</Grid>

Но чтобы заставить WebViewBrush вывести отображение из WebView, надо обработать в файле кода загрузку html-документа в WebView:

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        webView1.NavigationCompleted += WebView1_NavigationCompleted;
    }

    private void WebView1_NavigationCompleted(WebView sender, WebViewNavigationCompletedEventArgs args)
    {
        webBrush.Redraw();
    }
}

Метод webBrush.Redraw() выводит содержимое из WebView в качестве изображения: