WPF: установка ширины (и высоты) как процентного значения

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

 <Textbox HorizontalAlignment="Stretch" ...

Это заставит элемент Textbox растянуться по горизонтали и заполнить все родительское пространство по горизонтали (на самом деле это зависит от родительской панели, которую вы используете, но должно работать в большинстве случаев).

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

Вы можете поместить текстовые поля в сетку, чтобы задать процентные значения в строках или столбцах сетки и позволить текстовым полям автоматически заполнять свои родительские ячейки (как они будут по умолчанию). Пример:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*" />
        <ColumnDefinition Width="3*" />
    </Grid.ColumnDefinitions>

    <TextBox Grid.Column="0" />
    <TextBox Grid.Column="1" />
</Grid>

Это сделает # 1 2/5 ширины, а # 2 3/5.

Как правило, вы должны использовать встроенный элемент управления макетом, подходящий для вашего сценария (например, используйте сетку в качестве родительского элемента, если вы хотите масштабировать относительно родительского элемента). Если вы хотите сделать это с произвольным родительским элементом, вы можете создать ValueConverter для этого, но он, вероятно, не будет таким чистым, как вам хотелось бы. Однако, если вам это абсолютно необходимо, вы можете сделать что-то вроде этого:

public class PercentageConverter : IValueConverter
{
    public object Convert(object value, 
        Type targetType, 
        object parameter, 
        System.Globalization.CultureInfo culture)
    {
        return System.Convert.ToDouble(value) * 
               System.Convert.ToDouble(parameter);
    }

    public object ConvertBack(object value, 
        Type targetType, 
        object parameter, 
        System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Что можно использовать так, чтобы получить дочернее текстовое поле 10% ширины его родительского холста:

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfApplication1"
    Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <local:PercentageConverter x:Key="PercentageConverter"/>
    </Window.Resources>
    <Canvas x:Name="canvas">
        <TextBlock Text="Hello"
                   Background="Red" 
                   Width="{Binding 
                       Converter={StaticResource PercentageConverter}, 
                       ElementName=canvas, 
                       Path=ActualWidth, 
                       ConverterParameter=0.1}"/>
    </Canvas>
</Window>

Для тех, кто получает сообщение об ошибке: Строка '2 *' не может быть преобразована в длину.

<Grid >
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*" /><!--This will make any control in this column of grid take 2/5 of total width-->
        <ColumnDefinition Width="3*" /><!--This will make any control in this column of grid take 3/5 of total width-->
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition MinHeight="30" />
    </Grid.RowDefinitions>

    <TextBlock Grid.Column="0" Grid.Row="0">Your text block a:</TextBlock>
    <TextBlock Grid.Column="1" Grid.Row="0">Your text block b:</TextBlock>
</Grid>

Можно использовать реализацию IValueConverter. Класс конвертера, который наследуется от IValueConverter, принимает некоторые параметры, такие как value (процент) и parameter (ширина родителя), и возвращает желаемое значение ширины. В файле XAML для ширины компонента задается желаемое значение:

public class SizePercentageConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (parameter == null)
            return 0.7 * value.ToDouble();

        string[] split = parameter.ToString().Split('.');
        double parameterDouble = split[0].ToDouble() + split[1].ToDouble() / (Math.Pow(10, split[1].Length));
        return value.ToDouble() * parameterDouble;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        // Don't need to implement this
        return null;
    }
}

XAML:

<UserControl.Resources>
    <m:SizePercentageConverter x:Key="PercentageConverter" />
</UserControl.Resources>

<ScrollViewer VerticalScrollBarVisibility="Auto"
          HorizontalScrollBarVisibility="Disabled"
          Width="{Binding Converter={StaticResource PercentageConverter}, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Border}},Path=ActualWidth}"
          Height="{Binding Converter={StaticResource PercentageConverter}, ConverterParameter=0.6, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Border}},Path=ActualHeight}">
....
</ScrollViewer>

Я использую два метода относительного размера. У меня есть класс под названием Relative с тремя присоединенными свойствами To, WidthPercent и HeightPercent, который полезен, если я хочу, чтобы элемент имел относительный размер элемента в любом месте визуального дерева и чувствовал себя менее взломанным, чем подход преобразователя - хотя используйте то, что работает для ты, которым ты доволен.

Другой подход более хитрый. Добавьте ViewBox там, где вы хотите указать относительные размеры внутри, а затем внутри него добавьте Grid с шириной 100. Затем, если вы добавите TextBlock с шириной 10 внутри него, это, очевидно, будет 10% от 100.

ViewBox будет масштабировать Grid в соответствии с предоставленным ему пространством, поэтому, если это единственное, что есть на странице, то Grid будет масштабироваться на всю ширину и эффективно, ваш TextBlock масштабируется до 10% страницы.

Если вы не установите высоту для Grid, он будет уменьшаться, чтобы соответствовать его содержимому, поэтому все будет иметь относительно размер. Вам нужно будет убедиться, что контент не становится слишком высоким, т.е. начинает изменять соотношение сторон пространства, предоставленного ViewBox, иначе он также начнет масштабировать высоту. Вероятно, вы можете обойти это, установив Stretch из UniformToFill.

Я знаю, что это не XAML, но я сделал то же самое с событием SizeChanged текстового поля:

private void TextBlock_SizeChanged(object sender, SizeChangedEventArgs e)
{
   TextBlock textBlock = sender as TextBlock;
   FrameworkElement element = textBlock.Parent as FrameworkElement;
   textBlock.Margin = new Thickness(0, 0, (element.ActualWidth / 100) * 20, 0);
}

Размер текстового поля составляет 80% от размера своего родителя (правое поле - 20%) и при необходимости растягивается.