Question

使用以下XAML，取消选中该复选框后会隐藏底行。一切顺利，直到你用网格探测器调整大小。然后选中/取消选中该复选框不会执行任何操作。鉴于转换器将高度设置为0，我希望该行隐藏。这是怎么回事？移动分离器后如何重置高度？

<Grid>
    <Grid.Resources>
        <m:CheckedToLengthConverter x:Key="checkedToLengthConverter" />
    </Grid.Resources>
    <Grid.RowDefinitions>
        <RowDefinition Height="3*" />
        <RowDefinition Height="{Binding Mode=OneWay, ElementName=ShowBottomCheckBox, Path=IsChecked, Converter={StaticResource checkedToLengthConverter}, ConverterParameter=2}" />
    </Grid.RowDefinitions>
    <Border Background="Blue" />
    <CheckBox Name="ShowBottomCheckBox" IsChecked="True" />
    <GridSplitter HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Height="5" />
    <Border Background="Red" Grid.Row="1" />
</Grid>

转换器：

public class CheckedToLengthConverter: IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if ((bool)value)
            return new GridLength(int.Parse(parameter.ToString()), GridUnitType.Star);

        return new GridLength(0, GridUnitType.Pixel);
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Answer 1

问题是，一旦移动分割器，第一行将具有明确的宽度，因此将最后一行设置回*将不会产生任何影响。经过一些实验，我想出了下面的代码。请注意，您需要指定一个TwoWay绑定，否则它将无效。

public class CheckedToLengthConverter : MarkupExtension, IValueConverter
{
    public GridLength TrueValue { get; set; }
    public GridLength FalseValue { get; set; }

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return System.Convert.ToBoolean(value) ? TrueValue : FalseValue;
    }

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

    #region Overrides of MarkupExtension

    public override object ProvideValue(IServiceProvider serviceProvider)
    {
        return this;
    }

    #endregion
}

<Grid>
    <Grid.Resources>
        <m:CheckedToLengthConverter TrueValue="2*" FalseValue="*" x:Key="c1" />
        <m:CheckedToLengthConverter TrueValue="3*" FalseValue="0" x:Key="c2" />
    </Grid.Resources>

    <Grid.RowDefinitions>
        <RowDefinition Height="{Binding Mode=TwoWay, Path=IsChecked, 
                       ElementName=ShowBottomCheckBox, 
                       Converter={StaticResource c1}}"/>
        <RowDefinition Height="auto"/>
        <RowDefinition Height="{Binding Mode=TwoWay, Path=IsChecked, 
                       ElementName=ShowBottomCheckBox, 
                       Converter={StaticResource c2}}"/>
    </Grid.RowDefinitions>
    <Border Background="Blue" />
    <CheckBox Name="ShowBottomCheckBox" IsChecked="True" />
    <GridSplitter HorizontalAlignment="Stretch" 
                  Grid.Row="1" VerticalAlignment="Bottom" Height="5" 
                  ResizeBehavior="PreviousAndNext" />
    <Border Background="Red" Grid.Row="2" />
</Grid>

Answer 2

这是UX问题的人，而不是代码。你尝试做什么没什么意义，你尝试使用Visual States吗？

如何在使用分离器后重置网格行高？

2 个答案: