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>