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

本文关键字:控件 绑定 最小宽度 另一个 两个 | 更新日期: 2023-09-27 18:15:30

我想设置列的MinWidth,它应该是放置在列的单元格内的另一个网格中的标签和按钮控件的实际宽度的总和。为此,我使用了一个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>

也有一个错误说:无法cast类型的' embroidery managementsystem_v2 . _1 . viewmodel . collectionsviewmodel对象。ClientCollectionVM'来输入'System.IConvertible'。

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

我不知道为什么

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

您需要在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>

列将展开以适合它的内容。当然,你会想要改变内部网格为水平方向的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>

或者给内部网格它自己的列定义来分隔Label和Button。

根据您的更新添加GridSplitter,我已经包含了一个完整的示例,说明如何实现您所追求的。

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

一个快速改变你的转换器,因为ActualWidthActualHeight是双精度,让我们改变转换器使用双精度而不是整数,这样我们就不会结束流浪像素。

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中派生一个自定义控件,并以这种方式处理它,但上面的内容应该可以帮助您启动和运行。

您没有在绑定中指定任何内容,因此它在数据上下文中传递,即VM。VM不能转换为整型。你需要传入{Binding ElementName= btnnotificationclose, Path=ActualWidth}和lblnotificationheader。

老实说,听起来你把事情复杂化了。除非你使用分隔器,否则网格行/列不能调整大小。