Элементы управления содержимым

Все элементы управления содержимым инкапсулируют в себе какой-то другой элемент. Все они наследуются от класса ContentControl, который определяет ряд общих методов и свойств, в частности, свойство Content, которое позволяет вложить в этот элемент другой элемент. К таким элементам управления содержимым можно отнести Button, ToggleButton, ToolTip, RadioButton, CheckBox и ряд других. Также элементом управления содержимым является и главный элемент окна - Window

Отличительной чертой элементов управления содержимым является наличие свойства Content, которое и позволяет добавить внутри элемента другой элемент. В этом элементы управления содержимым схожи с контейнерами компоновки. Только контейнеры могут иметь множество вложенных элементов, а элементы управления содержимым только один.

В качестве содержимого свойство Content может принимать два вида объектов:

• Объект класса, который не наследуется от UIElement. Для такого объекта вызывается метод ToString(), который возвращает строковое преставление объекта. Затем эта строка устанавливается в качестве содержимого.

• Объект класса, который наследуются от UIElement. У такого объекта вызывается метод UIElement.OnRender(), который выполняет отрисовку внутри элемента управления содержимым.

Рассмотрим на примере кнопки, которая является элементом управления содержимым:

	
<Button Content="Hello UWP!" />

Содержимое элемента Button здесь представляет обычную строку, то есть объект типа, который не наследуется от UIElement. Этот же пример мы можем в XAML прописать иначе:

	
<Button>
    <Button.Content>
        Hello UWP!
    </Button.Content>
</Button>

Также можно использовать сокращенное определение свойства Content:

<Button>Hello UWP!</Button>

Возьмем другой пример. Определим кнопку с именем myButton:

	
<Page
    x:Class="ControlsApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ControlsApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Button x:Name="myButton" HorizontalAlignment="Center" Width="100" Height="40" />
    </Grid>
</Page>

А в файле кода MainPage.xaml.cs присвоим свойству Content какой-либо объект:

using Windows.UI.Xaml.Controls;

namespace ControlsApp
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            double number = 5.6;
            myButton.Content = number;
        } 
    }
}

В итоге получится следующую кнопку:

В данном случае число конвертируется в строку, которая устанавливается в качестве содержимого. Иначе все будет работать, если мы в качестве содержимого используем объект, унаследованный от UIElement:

<Button x:Name="myButton" HorizontalAlignment="Center">
    <Button Content="Universal Windows Platform" />
</Button>

Теперь в качестве содержимого будет использоваться другая кнопка, для которой при визуализации будет вызываться метод OnRender():

То есть в данном случае получается кнопка внутри кнопки, и во внутреннюю кнопку мы можем вложить еще какой-нибудь элемент.

Чтобы создать подобную кнопку в коде C#, можно было бы использовать следующее выражение:

myButton.Content = new Button { Content = "Universal Windows Platform" };

Но необходимо помнить, что элементы управления содержимым могут содержать только один объект. Но что, если нам захочется поместить в кнопку сразу несколько других кнопок? В этом случае можно использовать контейнеры компоновки:

<Button x:Name="myButton" HorizontalAlignment="Center">
    <StackPanel>
        <TextBlock Text="Набор кнопок" />
        <Button Background="Red" Width="80" Content="Red" />
        <Button Background="Yellow" Width="80" Content="Yellow" />
        <Button Background="Green" Width="80" Content="Green" />
    </StackPanel>
</Button>

То же самое мы могли бы прописать через код C#:

StackPanel buttonStack = new StackPanel();
buttonStack.Children.Add(new TextBlock { Text = "Набор кнопок" });
buttonStack.Children.Add(new Button { Content = "Red", Width = 80, Background = new SolidColorBrush(Windows.UI.Colors.Red) });
buttonStack.Children.Add(new Button { Content = "Yellow", Width = 80, Background = new SolidColorBrush(Windows.UI.Colors.Yellow) });
buttonStack.Children.Add(new Button { Content = "Green", Width = 80, Background = new SolidColorBrush(Windows.UI.Colors.Green) });
myButton.Content = buttonStack;

Позиционирование контента

HorizontalContentAlignment

Свойство HorizontalContentAlignment служит для выравнивания содержимого по горизонтали внутри элемента относительно его границ. Оно принимает следующие значения: Left (положение слева), Right (справа), Center (положение по центру), Stretch (растяжение по всей ширине).

<StackPanel HorizontalAlignment="Center">
    <Button Margin="5" HorizontalContentAlignment="Left" Content="Left HorizontalAlignment" Height="90" Width="500" />
    <Button Margin="5" HorizontalContentAlignment="Right" Content="Right HorizontalAlignment" Height="90" Width="500" />
    <Button Margin="5" HorizontalContentAlignment="Center" Content="Center HorizontalAlignment" Height="90" Width="500" />
</StackPanel>

VerticalContentAlignment

Свойство VerticalContentAlignment служит для выравнивания содержимого элемента по вертикали. Оно принимает следующие значения: Top (положение в верху), Bottom (внизу), Center (по центру), Stretch (растяжение по всей высоте).