WPF:将宽度(和高度)设置为百分比值
在 WPF（Windows Presentation Foundation）中，默认情况下，控件的宽度和高度是以像素为单位的。然而，你可以通过使用布局容器和一些技巧来实现控件宽度和高度的百分比设置。
使用 Grid 布局容器
Grid 布局容器是一个非常强大的工具，它允许你使用行和列定义布局，并且可以使用星号（*）语法来表示百分比。
示例：将控件宽度和高度设置为百分比
假设你有一个 Button 控件，你希望它的宽度和高度分别是其父容器宽度和高度的 50%。
<Window x:Class="WpfApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="2*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Button Content="Click Me" Grid.Row="0" Grid.Column="0" />
</Grid>
</Window>在这个示例中，Grid 有两个行和两个列。第一行和第一列的高度和宽度分别是总高度和宽度的 1/3，而第二行和第二列的高度和宽度分别是总高度和宽度的 2/3。你可以根据需要调整这些比例。
使用 ViewBox 容器
ViewBox 容器可以自动缩放其子元素以适应其大小。你可以将控件放在 ViewBox 中，并设置 ViewBox 的宽度和高度为百分比。
示例：使用 ViewBox
<Window x:Class="WpfApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<ViewBox Width="0.5" Height="0.5">
<Button Content="Click Me" />
</ViewBox>
</Grid>
</Window>在这个示例中，ViewBox 的宽度和高度分别设置为 0.5（即 50%）。Button 控件将被缩放以适应 ViewBox 的大小。
使用 Binding 和 RelativeSource
你还可以使用数据绑定和 RelativeSource 来动态设置控件的宽度和高度为其父容器的百分比。
示例：使用 Binding 和 RelativeSource
<Window x:Class="WpfApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Button Content="Click Me"
Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=Grid}, Converter={StaticResource PercentageConverter}, ConverterParameter=0.5}"
Height="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType=Grid}, Converter={StaticResource PercentageConverter}, ConverterParameter=0.5}" />
</Grid>
</Window>在这个示例中，我们使用了一个自定义的 PercentageConverter 来将父容器的宽度和高度转换为百分比。你需要在代码中定义这个转换器。
定义 PercentageConverter
using System;
using System.Globalization;
using System.Windows.Data;
namespace WpfApp
{
public class PercentageConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value is double originalValue && parameter is string percentageString && double.TryParse(percentageString, out double percentage))
{
return originalValue * percentage;
}
return value;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
}在 XAML 中注册转换器
<Window x:Class="WpfApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApp"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<local:PercentageConverter x:Key="PercentageConverter" />
</Window.Resources>
<Grid>
<Button Content="Click Me"
Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=Grid}, Converter={StaticResource PercentageConverter}, ConverterParameter=0.5}"
Height="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType=Grid}, Converter={StaticResource PercentageConverter}, ConverterParameter=0.5}" />
</Grid>
</Window>相关·内容
7回答
假设我想让一个TextBlock的Width等于它的父容器的Width (即，从一边到另一边拉伸)或它的父容器Width的一个百分比，我如何在不指定绝对值的情况下在XAML中实现这一点？(基本上，就像HTML和CSS一样)
浏览 1提问于2009-04-04得票数 162
回答已采纳
我已经使用mx:Grid布局组件以一种非常类似于HTML表格的方式来布局一些表单元素。但是，当您调整应用程序的大小时，结果不会像HTML表格那样水平伸展。我怎样才能让它做到这一点？
浏览 0提问于2009-03-10得票数 1
回答已采纳
因此，我有一个DIV元素，它正好位于浏览器窗口的中心，具有宽度和高度的百分比值，因此它根据浏览器大小调整大小：
所以我需要这样的东西：有办法吗？
浏览 1提问于2020-10-23得票数 1
回答已采纳
1回答
我想写一个jQuery插件来动画从cover到100%的background-size属性，反之亦然，但我不知道如何将cover设置为百分比值，是否有可能获得调整大小的背景图像的宽度和高度？我知道我可以得到$('#selector').css('backgroundSize')，但是我得到了cover，我想把它转换成当前背景图像的宽度和高度，我该怎么做呢？
浏览 5提问于2012-02-01得票数 1
回答已采纳
在设计网站时，是否可以在同一布局中将宽度属性设置为百分比值，将高度属性设置为像素值？如果是这样，这是什么类型的布局？
提前感谢！
浏览 1提问于2013-06-18得票数 2
回答已采纳
2回答
我想知道如何才能将页面的一部分拉伸到完整的高度和宽度？就像一个100%的窗口的全屏区域。嗯，不是如果你调整它的大小，而是你的最大高度。我不知道该怎么做。我该怎么办？
浏览 5提问于2017-07-24得票数 0
回答已采纳
3回答
对于Listview的初始大小，它是以像素为单位的300 X 600 (宽度X高度)。我还将它的maxHeight设置为750，但宽度保持不变，即300。此外，在仙人掌的属性中，我已经将SizeToContent属性更改为SizeToContent属性，正如一些线程所建议的那样，通过这样做，可以让系统在调整窗口大小之后决定控件的适当大小。我们是否可以在WPF中设置宽度和高度的<em
浏览 3提问于2011-06-14得票数 2
回答已采纳
4回答
要做到这一点，我只需对所有css调用使用百分比：{ text-align: center;}
我试过这样做，让所有的高度都是一样的：{ font-family: Helvetica,sans-serif; background: #39bcd4 none
浏览 0提问于2011-07-12得票数 4
回答已采纳
2回答
所以我在我的网站上得到了iframe，我需要在标题和内容之间使用% value (现在这里是占位符)，但是在空白处使用百分比值会让它太大，100%value大约是1900px！如何强制#portNav的顶部边距基于iframe的实际高度(基于用户的屏幕分辨率)？
浏览 1提问于2013-10-15得票数 0
当窗口调整大小时，左和右的内容会自动调整高度大小。我想要的是自动调整#内容的大小--宽度也一样，以填补这两个框之间的空白。
到目前为止，我编写的代码只适用于第一页加载或刷新。
浏览 2提问于2012-07-22得票数 0
5回答
为什么height的百分比值不起作用，而width的百分比值起作用？background:orange;#not-working{ height:30%;}
#working的宽度最终为视口的80%，但#not-working的高度最终为0。
浏览 3提问于2011-04-14得票数 263
回答已采纳
我想在使用officeUI.displayDialogAsync时设置对话框宽度和高度的固定值，如何实现？ Office.EventType.DialogEventReceived, function (dialogEvent) { });
}); 这里的宽度和高度是文档中当前浏览器的百分比值我可以有一个固定值的高度和宽度吗？
浏览 29提问于2019-05-13得票数 1
3回答
我的印象是'dip‘(密度独立像素)值是android使用%值来确定布局元素的宽度和高度的解决方案。我认为这是一个升级，使用静态'px‘(像素)值或其他静态测量，如厘米或英寸。不幸的是，倾斜值不能像百分比值那样缩放，Android中有没有类似于带有宽度和高度参数的百分比值？
感谢您的洞察力！
浏览 0提问于2011-07-19得票数 2
回答已采纳
1回答
有了这个布局，您就不必指定layout_width和layout_height (改为使用app:layout_heightpercent )，这在以前的Android版本上运行得很好。但是现在我已经更新到了新的Android 2，我得到了错误，它说我必须定义默认的高度和宽度值。我做什么好？
浏览 0提问于2016-04-12得票数 1
回答已采纳
1回答
我对wkhtmltopdf和javascript有一些问题。在我的页面上是一个用jqgrid生成的表格和一些用amchart生成的图形。
浏览 0提问于2013-06-10得票数 2
2回答
在css calc中指定百分比值时，calc如何知道我指的是width还是height？}
您可能会假设它是宽度或高度，这取决于您正在访问的属性(在本例中为宽度)。如果是这样的话，如果您想要根据不同的属性进行一些计算，会发生什么？例如，根据某种高度计算来设置宽度？比如说，把容器的宽度设为1.5倍高？
浏览 1提问于2019-04-12得票数 5
4回答
我们可以使用像素或百分比来设置元素E的填充和边距属性。B) <body>元素的默认宽度是多少？
谢谢。因此，我假设<body>的宽度(以像素
浏览 8提问于2009-12-20得票数 1
回答已采纳
3回答
我想调整一个div的高度和它的内容。如果我使用像min-height: 100px;这样的东西，当屏幕变小时(在移动设备中)，div对屏幕来说就太大了。我该怎么做？
任何帮助都将是非常感谢的。
浏览 2提问于2013-07-10得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
