WPF:将宽度(和高度)设置为百分比值

Question

说我想要一个TextBlock有它Width等于它的父容器的Width(即从一侧伸展到另一侧)或它的一个百分比的父容器Width,我怎么能做到这一点XAML,而无需指定绝对值？

我想这样做,以便如果稍后展开父容器容器(它的' Width增加),它的'子元素也将自动扩展.(基本上,就像在HTML和CSS中一样)

Answer 1

这是我之前发布的09年帖子的更新答案,其中包含不正确的信息.以下示例应该更好:

您可以将文本框放在网格中以对网格的行或列执行百分比值,并让文本框自动填充到其父单元格(默认情况下将如此).例:

<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.

原帖有错误/不完整的信息

不要以为你可以做%,但你可以做*:)

例:

<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.

Answer 2

将其拉伸到与父容器相同的大小的方法是使用以下属性:

 <Textbox HorizontalAlignment="Stretch" ...

这将使Textbox元素水平拉伸并水平填充所有父级空间(实际上它取决于您正在使用的父面板,但在大多数情况下应该有效).

百分比只能与网格单元格值一起使用,因此另一个选项是创建网格并将文本框放在具有适当百分比的其中一个单元格中.

Answer 3

通常,您将使用适合您的场景的内置布局控件(例如,如果您希望相对于父级进行缩放,请使用网格作为父级).如果你想用任意的父元素来做,你可以创建一个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>

Answer 4

对于任何收到错误的人:'2*'字符串无法转换为Length.

<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>

Answer 5

可以使用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>