如何将两个控件的宽度之和绑定到另一个控件的 MinWidth

Question

我想设置网格列的最小宽度，它应该是标签的实际宽度和放置在列单元格内的另一个网格内的按钮控件的总和。我为此目的使用了一个 Converter 类，但要弄清楚 XAML 部分。 转换器在这里：

class StringSumtoIntConverter : IMultiValueConverter
{
    public object Convert(object[] value, Type targetType, object parameter, CultureInfo culture)
    {
        int sum = 0;
        foreach (var item in value)
        {
            sum += System.Convert.ToInt32(item);
        }

        return sum;
    }
    //...Other implementations
}

我写到现在的XAML代码是：

xmlns:helperClasses="clr-namespace:EmbroidaryManagementSystem_V2._0.HelperClasses" <!--Import class-->

<helperClasses:StringSumtoIntConverter x:Key="StringSumtoIntConvert"/>  <!--Inside Window.Resources tag-->

<ColumnDefinition Width="48*"> <!--Inside Grid-->
    <ColumnDefinition.MinWidth>
        <MultiBinding Converter="{StaticResource StringSumtoIntConvert}">
            <Binding Path=""></Binding>
        </MultiBinding>
    </ColumnDefinition.MinWidth>
</ColumnDefinition>

XAML 的完整实现在这里：

<Window x:Class="EmbroidaryManagementSystem_V2._0.View.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:EmbroidaryManagementSystem_V2._0.View"
    xmlns:y="clr-namespace:EmbroidaryManagementSystem_V2._0.ViewModel.CollectionsViewModel"
    xmlns:helperClasses="clr-namespace:EmbroidaryManagementSystem_V2._0.HelperClasses"
    mc:Ignorable="d"
    Title="MainWindow" Height="655.512" Width="1120.159" FontSize="24" WindowStartupLocation="CenterScreen"
    >
<Window.Resources>
    <helperClasses:StringSumtoIntConverter x:Key="StringSumtoIntConvert"/>
</Window.Resources>
<Window.DataContext>
    <y:ClientCollectionVM/>
</Window.DataContext>
<Grid HorizontalAlignment="Left" Height="622" VerticalAlignment="Top" Width="1110" Background="#FFD6DBE9">
    <Grid.RowDefinitions>
        <RowDefinition Height="89*"/>
        <RowDefinition Height="39*"/>
        <RowDefinition Height="494*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="137*"/>
        <ColumnDefinition Width="48*">
            <ColumnDefinition.MinWidth>
                <MultiBinding Converter="{StaticResource StringSumtoIntConvert}">
                    <Binding Path=""></Binding>
                </MultiBinding>
            </ColumnDefinition.MinWidth>
        </ColumnDefinition>
    </Grid.ColumnDefinitions>
    <GridSplitter x:Name="gridSplitter" Grid.Column="1" HorizontalAlignment="Left" Height="533" Grid.Row="1" 
                  VerticalAlignment="Top" Width="2" Grid.RowSpan="2"/>
    <Grid Grid.Column="1" Height="35" Background="#FF657695" 
          Grid.Row="1" VerticalAlignment="Top">
        <Label x:Name="lblNotificationsHeader" Content="Notifications" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="14.667" Height="30" Foreground="#FFEBF0EE"/>
        <Button x:Name="btnNotificationsClose" Content="X" 
                Margin="0,5,8,0" VerticalAlignment="Top" Width="20" FontFamily="Verdana" HorizontalAlignment="Right" Background="Transparent" FontSize="13.333" Foreground="Black"/>
    </Grid>
</Grid>

还有一个错误提示：无法将“EmbroidaryManagementSystem_V2._0.ViewModel.CollectionsViewModel.ClientCollectionVM”类型的对象转换为“System.IConvertible”类型。 在行：

<MultiBinding Converter="{StaticResource StringSumtoIntConvert}">
                        <Binding Path=""></Binding>
                    </MultiBinding>

我不知道为什么。

Answer 1

您需要在 MultiBinding 中向转换器提供值。

<MultiBinding Converter="{StaticResource StringSumtoIntConvert}">
    <Binding ElementName="lblNotificationsHeader" Path="ActualWidth" />
    <Binding ElementName="btnNotificationsClose" Path="ActualWidth" />
</MultiBinding>

错误是因为 Path 为空，这意味着它正在获取 DataContext 并尝试将其传递给无法将 ClientCollectionVM 转换为 int 的转换器。

我不能 100% 确定您将如何处理所有这些，但您可能可以取消转换器并执行以下操作：

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>

然后该列将扩展以适应其内容。当然，您可能希望将内部 Grid 更改为具有水平方向的 StackPanel：

<StackPanel Grid.Row="1"
                Grid.Column="1"
                Height="35"
                VerticalAlignment="Top"
                Background="#FF657695"
                Orientation="Horizontal">
        <Label x:Name="lblNotificationsHeader"
               Height="30"
               HorizontalAlignment="Left"
               VerticalAlignment="Top"
               Content="Notifications"
               FontSize="14.667"
               Foreground="#FFEBF0EE" />
        <Button x:Name="btnNotificationsClose"
                Margin="0,5,8,0"
                HorizontalAlignment="Right"
                VerticalAlignment="Top"
                Background="Transparent"
                Content="X"
                FontFamily="Verdana"
                FontSize="13.333"
                Foreground="Black" />
    </StackPanel>

要么这样，要么给内部 Grid 它自己的列定义，以将标签和按钮分开。

更新

根据您添加 GridSplitter 的更新，我提供了一个完整示例，说明如何实现您的目标。

请记住，在您的示例中，无论您向哪个方向拖动，GridSplitter 都会真正调整左列的大小，而右列只是在扩展以填充。所以我们的目标不是在你的右栏有一个MinWidth，而是在我们的左栏有一个MaxWidth。

对转换器进行快速更改，因为 ActualWidth 和 ActualHeight 是双精度数，让我们将转换器更改为使用双精度数而不是整数，这样我们就不会出现杂散像素。

public object Convert(object[] value, Type targetType, object parameter, CultureInfo culture)
    {
        double sum = 0;
        foreach (var item in value)
        {
            sum += System.Convert.ToDouble(item);
        }

        return sum;
    }

我们将把 GridSplitter 放在它自己的列中，将列宽设置为 "2"，将第一个 ColumnDefinition 的宽度设置为 "4*"，第三个设置为 "*"。 "4*" 实际上只是一个随机数，星号大小取决于百分比，所以 4 并不总是有效，它只是在这种情况下起作用。

我们还需要在内部网格中添加一些列，我们将为它们命名并使用这些元素来获取我们的 MultiBinding 的宽度。我们这样做而不是从元素本身获取宽度，因为 ActualWidth 不包括边距。

<Grid Background="#FFD6DBE9">
    <Grid.RowDefinitions>
        <RowDefinition Height="89*" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="494*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="4*" />
        <ColumnDefinition Width="2" />
        <ColumnDefinition Width="*">
            <ColumnDefinition.MinWidth>
                <MultiBinding Converter="{StaticResource StringSumtoIntConvert}">
                    <Binding ElementName="cdNotificationHeaderLabel" Path="ActualWidth" />
                    <Binding ElementName="cdNotificationHeaderButton" Path="ActualWidth" />
                </MultiBinding>
            </ColumnDefinition.MinWidth>
        </ColumnDefinition>
    </Grid.ColumnDefinitions>
    <GridSplitter x:Name="gridSplitter"
                  Grid.Row="1"
                  Grid.RowSpan="2"
                  Grid.Column="1"
                  Width="2"
                  ResizeBehavior="PreviousAndNext" />
    <Grid Grid.Row="1"
          Grid.Column="2"
          Height="35"
          Background="#FF657695">
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="cdNotificationHeaderLabel" Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition x:Name="cdNotificationHeaderButton" Width="Auto" />
        </Grid.ColumnDefinitions>
        <Label x:Name="lblNotificationsHeader"
               Margin="0 0 5 0"
               HorizontalAlignment="Left"
               VerticalAlignment="Center"
               Content="Notifications"
               FontSize="14.667"
               Foreground="#FFEBF0EE" />
        <Button x:Name="btnNotificationsClose"
                Grid.Column="2"
                HorizontalAlignment="Right"
                VerticalAlignment="Center"
                Background="Transparent"
                Content="X"
                FontFamily="Verdana"
                FontSize="13.333"
                Foreground="Black" />
    </Grid>
</Grid>

综上所述，我建议从 GridSplitter 派生一个自定义控件并以这种方式处理它，但以上内容应该有助于您启动和运行。

Answer 2

您没有在绑定中指定任何内容，因此它在您的数据上下文（即 VM）中传递。 VM 不能转换为 int。您需要传入 {Binding ElementName=btnNotificationsClo​​se, Path=ActualWidth} 和 lblNotificationsHeader。

不过，老实说，听起来你把事情复杂化了。网格行/列不可调整大小，除非您使用您不使用的拆分器。