如何在 XAML 中根据其容器的高度设置按钮大小？

Question

我正在使用 XAML 开发 WPF 应用程序。我是初学者，我的按钮有问题。我需要将其高度设置为其容器（网格）的比例。我看到高度可以设置为一个值或“自动”，但我不知道如何对我的按钮说他的高度必须是包含它的网格高度的 3/4。

有人知道如何处理吗？是否可以使用 XAML 来做到这一点？

目标是当网格增长时，按钮也随之增长。

如有任何帮助，我们将不胜感激。

谢谢

这是我写的代码：

<Window x:Class="WpfAppButtonSize.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfAppButtonSize"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="800">

<Grid>
    <Grid Height="100" Width="250" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button Content="Button 1" FontSize="30" Height="75" Width="150"/>
    </Grid>
</Grid>

对于按钮，我想说的是 Height=0.75 * 网格高度，而不是 Height=“75”

Answer 1

最简单的方法是将按钮放置在其自己的网格中，行的大小适当以生成间距。

例如

<Grid ...>

    <Grid Grid.Row="???" Grid.Column="???" ...>
        <Grid.RowDefinitions>
            <RowDefinition Height="3*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
    
        <Button Grid.Row="0" ... />
    </Grid>

</Grid>

Answer 2

如果您通过指定

x:Name

属性为网格和按钮命名，则只要网格大小发生变化，您就可以在后面的代码中设置按钮的

Height

。

XAML

<Grid x:Name="MyGrid">
    <Button x:Name="MyButton" />
</Grid>

MainWindow.xaml.cs

在 WPF 中，您可以在代码隐藏中执行此操作：

public MainWindow()
{
    InitializeComponent();
    
    MyGrid.SizeChanged += (s,e) =>
    {
        if(e.HeightChanged)
        {
            MyButton.Height = MyGrid.Height * 0.75;
        }
    }
}

而在其他 .NET 技术中，例如 Xamarin.Forms 或 .NET MAUI，它必须如下所示：

public MainWindow()
{
    InitializeComponent();
    
    MyGrid.PropertyChanged += (s,e) =>
    {
        if(e.PropertyName == nameof(MyGrid.Height))
        {
            MyButton.Height = MyGrid.Height * 0.75;
        }
    }
}

Answer 3

您可以使用转换器并绑定网格的“ActualHeight”属性来实现此目的。

<Button Height="{Binding ElementName="mygGrid" Path=ActualHeight, Converter={StaticResource percentageConverter}}"/>

Answer 4

我成功使用以下方法：

1. 使用 Convert 函数创建一个新类 Converters

转换器.cs

namespace WpfAppButtonSize 
{
public class Converters : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        double.TryParse((parameter as string).Replace(',', '.'), NumberStyles.Any, CultureInfo.InvariantCulture, out double param);
        return param * (double)value;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return true;
    }
}

2. 将按钮的实际高度绑定到网格的高度+使用转换器作为静态资源和转换器参数

MainWindow.xaml

<Window.Resources>
    <converter:Converters x:Key="converter" />
</Window.Resources>
    
<Grid>
    <Grid x:Name="MyGrid" Height="100" Width="250" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button x:Name="MyButton" Content="Button 1" FontSize="30" Width="150" Height="{Binding ElementName=MyGrid, Path=ActualHeight, Converter={StaticResource converter}, ConverterParameter=0.75}" />
    </Grid>
</Grid>

**并且不要忘记将转换器命名空间添加到 xaml 中：**

xmlns:converter="clr-namespace:WpfAppButtonSize"

以下帖子也对我有帮助：XAML 绑定到转换器

谢谢大家的帮助。