blocks|key|1374018|text|您可以将文本框放在网格中，以对网格的行或列执行百分比值，并让文本框自动填充到其父单元格(默认情况下)。示例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1374019|<Grid>
++++<Grid.ColumnDefinitions>
++++++++<ColumnDefinition+Width="2*"+/>
++++++++<ColumnDefinition+Width="3*"+/>
++++</Grid.ColumnDefinitions>

++++<TextBox+Grid.Column="0"+/>
++++<TextBox+Grid.Column="1"+/>
</Grid>|code-block|syntax|javascript|1374020|这将使#1+2/5的宽度和#2+3/5。|1374021|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You can put the textboxes inside a grid to do percentage values on the rows or columns of the grid and let the textboxes auto-fill to their parent cells (as they will by default). Example:

<pre><code>&lt;Grid&gt;
 &lt;Grid.ColumnDefinitions&gt;
 &lt;ColumnDefinition Width="2*" /&gt;
 &lt;ColumnDefinition Width="3*" /&gt;
 &lt;/Grid.ColumnDefinitions&gt;

 &lt;TextBox Grid.Column="0" /&gt;
 &lt;TextBox Grid.Column="1" /&gt;
&lt;/Grid&gt;
</code></pre>

This will make #1 2/5 of the width, and #2 3/5.

blocks|key|1589142|text|将其拉伸到与父容器相同的大小的方法是使用属性：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1589143|+<Textbox+HorizontalAlignment="Stretch"+...|code-block|syntax|javascript|1589144|这将使Textbox元素水平拉伸，并水平填充所有父空间(实际上，这取决于您使用的父面板，但在大多数情况下应该都有效)。|1589145|百分比只能与网格单元格值一起使用，因此另一个选择是创建一个网格，并将您的文本框放入其中一个具有适当百分比的单元格中。|1589146|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

The way to stretch it to the same size as the parent container is to use the attribute:

<pre><code> &lt;Textbox HorizontalAlignment="Stretch" ...
</code></pre>

That will make the Textbox element stretch horizontally and fill all the parent space horizontally (actually it depends on the parent panel you're using but should work for most cases).

Percentages can only be used with grid cell values so another option is to create a grid and put your textbox in one of the cells with the appropriate percentage.

blocks|key|1374134|text|通常，您将使用适合您的场景的内置布局控件(例如，如果您希望相对于父级进行缩放，则使用网格作为父级)。如果你想用一个任意的父元素来做这件事，你可以创建一个ValueConverter来做它，但是它可能不会像你想要的那样干净。但是，如果你确实需要它，你可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1374135|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();
++++}
}|code-block|syntax|javascript|1374136|它可以像这样使用，以获得其父画布宽度的10%25的子文本框：|1374137|<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>|1374138|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Typically, you'd use a built-in layout control appropriate for your scenario (e.g. use a grid as a parent if you want scaling relative to the parent). If you want to do it with an arbitrary parent element, you can create a ValueConverter do it, but it probably won't be quite as clean as you'd like. However, if you absolutely need it, you could do something like this:
<pre class="lang-cs prettyprint-override"><code>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();
 }
}
</code></pre>
Which can be used like this, to get a child textbox 10% of the width of its parent canvas:
<pre class="lang-xml prettyprint-override"><code>&lt;Window x:Class=&quot;WpfApplication1.Window1&quot;
 xmlns=&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
 xmlns:x=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;
 xmlns:local=&quot;clr-namespace:WpfApplication1&quot;
 Title=&quot;Window1&quot; Height=&quot;300&quot; Width=&quot;300&quot;&gt;
 &lt;Window.Resources&gt;
 &lt;local:PercentageConverter x:Key=&quot;PercentageConverter&quot;/&gt;
 &lt;/Window.Resources&gt;
 &lt;Canvas x:Name=&quot;canvas&quot;&gt;
 &lt;TextBlock Text=&quot;Hello&quot;
 Background=&quot;Red&quot; 
 Width=&quot;{Binding 
 Converter={StaticResource PercentageConverter}, 
 ElementName=canvas, 
 Path=ActualWidth, 
 ConverterParameter=0.1}&quot;/&gt;
 &lt;/Canvas&gt;
&lt;/Window&gt;
</code></pre>

blocks|key|1589318|text|我知道它不是XAML，但我对textbox的SizeChanged事件也做了同样的事情：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1589319|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);
}|code-block|syntax|javascript|1589320|文本框显示为其父文本框大小的80%25+(右侧边距为20%25)，并在需要时进行拉伸。|1589321|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I know it's not XAML, but I did the same thing with SizeChanged event of the textbox:
<pre class="lang-cs prettyprint-override"><code>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);
}
</code></pre>
The textbox appears to be 80% size of its parent (well right side margin is 20%) and stretches when needed.

blocks|key|1589454|text|我使用两种方法进行相对大小调整。我有一个名为Relative的类，它有三个附加的属性To，WidthPercent和HeightPercent，如果我想让一个元素在可视化树中的任何位置都是元素的相对大小，并且感觉没有转换器方法那么麻烦-尽管使用适合你的，你满意的方法，它是很有用的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1589455|另一种方法更为巧妙。在需要相对大小的位置添加一个ViewBox，然后在其中添加一个宽度为100的Grid。如果你添加一个宽度为10的TextBlock，它显然是100的10%25。|1589456|ViewBox会根据给定的空间来缩放Grid，所以如果它是页面上的唯一内容，那么Grid将被扩展到全宽且有效，您的TextBlock将被缩放到页面的10%25。|1589457|如果你不在Grid上设置高度，那么它会缩小以适应它的内容，所以它都是相对大小的。你必须确保内容不会变得太高，比如开始改变给ViewBox的空间的纵横比，否则它也会开始缩放高度。您可能可以使用UniformToFill的Stretch来解决此问题。|1589458|entityMap^0|M|8|16|2|19|C|1M|D|0|O|7|1C|4|1U|9|0|0|7|I|4|14|4|1L|9|0|5|4|1P|7|2N|D|31|7|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]|$9|Q|A|R|B|C]|$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|13|8|@$9|14|A|15|B|C]|$9|16|A|17|B|C]|$9|18|A|19|B|C]|$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|1C|8|@$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]|$9|1H|A|1I|B|C]|$9|1J|A|1K|B|C]]|D|@]|E|$]]|$1|L|3|-4|5|6|7|1L|8|@]|D|@]|E|$]]]|M|$]]

I use two methods for relative sizing. I have a class called <code>Relative</code> with three attached properties <code>To</code>, <code>WidthPercent</code> and <code>HeightPercent</code> which is useful if I want an element to be a relative size of an element anywhere in the visual tree and feels less hacky than the converter approach - although use what works for you, that you're happy with.

The other approach is rather more cunning. Add a <code>ViewBox</code> where you want relative sizes inside, then inside that, add a <code>Grid</code> at width 100. Then if you add a <code>TextBlock</code> with width 10 inside that, it is obviously 10% of 100.

The <code>ViewBox</code> will scale the <code>Grid</code> according to whatever space it has been given, so if its the only thing on the page, then the <code>Grid</code> will be scaled out full width and effectively, your <code>TextBlock</code> is scaled to 10% of the page.

If you don't set a height on the <code>Grid</code> then it will shrink to fit its content, so it'll all be relatively sized. You'll have to ensure that the content doesn't get too tall, i.e. starts changing the aspect ratio of the space given to the <code>ViewBox</code> else it will start scaling the height as well. You can probably work around this with a <code>Stretch</code> of <code>UniformToFill</code>.

blocks|key|1374334|text|可以使用IValueConverter实现。从IValueConverter继承的Converter类接受一些参数，如value+(百分比)和parameter+(父元素的宽度)，并返回所需的宽度值。在XAML文件中，组件的宽度设置为所需的值：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1374335|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()+%2B+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;
++++}
}|code-block|syntax|javascript|1374336|XAML：|1374337|<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>|1374338|entityMap^0|1N|5|1Z|9|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

IValueConverter implementation can be used. Converter class which takes inheritance from IValueConverter takes some parameters like <code>value</code> (percentage) and <code>parameter</code> (parent's width) and returns desired width value. In XAML file, component's width is set with the desired value:
<pre class="lang-cs prettyprint-override"><code>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;
 }
}
</code></pre>
XAML:
<pre class="lang-xml prettyprint-override"><code>&lt;UserControl.Resources&gt;
 &lt;m:SizePercentageConverter x:Key=&quot;PercentageConverter&quot; /&gt;
&lt;/UserControl.Resources&gt;

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

Say I want a <code>TextBlock</code> to have its <code>Width</code> equal to it's Parent container's <code>Width</code> (ie, stretch from side to side) or a percentage of it's Parent Container <code>Width</code>, how can I accomplish this in <code>XAML</code> without specifying absolute values?

I want to do this so that if the Parent Container container is later on expanded (its' <code>Width</code> increased), its' Child Elements will also be expanded automatically. (basically, like in HTML and CSS)

WPF: Setting the Width (and Height) as a Percentage Value

容器

假设我想让一个TextBlock的Width等于它的父容器的Width (即，从一边到另一边拉伸)或它的父容器Width的一个百分比，我如何在不指定绝对值的情况下在XAML中实现这一点？我想这样做是为了如果父容器容器稍后被展开(它的‘Width’增加了)，它的‘子元素’也会自动展开。(基本上，就像HTML和CSS一样)

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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