Avalonia：无法绑定到 ColumnDefinition.Width

Question

我的 Avalonia 用户控件中有一个

Grid

，当我的视图模型（派生自

bool

）的

ReactiveObject

属性通过 viewmodel 方法（代码在底部）设置为 true 时，我想隐藏其列。 由于

ColumnDefinition

没有

IsVisible

属性，我首先尝试使用样式。 我知道 Avalonia 不做数据触发，所以我尝试了：

      <Grid.Styles>
        <Style Selector="ColumnDefinition.Minimized">
          <Setter Property="Width" Value="0"/>
        </Style>
        <Style Selector="ColumnDefinition.Maximized">
          <Setter Property="Width" Value="400"/>
        </Style>
      </Grid.Styles>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="32" />
        <ColumnDefinition Classes.Minimized="{Binding IsColumnContentMinimized}"
                          Classes.Maximized="{Binding !IsColumnContentMinimized}" />
        <ColumnDefinition Width="10" />
        <ColumnDefinition />
      </Grid.ColumnDefinitions>

但这给了我两个构建错误：

AVLN2000    Unable to resolve suitable regular or attached property (Minimized/Maximized) on type Avalonia.Base:Avalonia.Controls.Classes 

所以我向转换器辞职了：

        <ColumnDefinition Width="{Binding !IsColumnContentMinimized,
                            Converter={StaticResource BoolToDouble}, ConverterParameter=400}" />

来自 App.axaml，在

Application.Resources

标签内：

    <myNamespaceAlias:BoolToDoubleConverter x:Key="BoolToDouble" />
    

    namespace MyProject.myNamespace;

    public class BoolToDoubleConverter : IValueConverter {
      public object Convert(object? value, Type targetType, object? parameter, CultureInfo culture) {
        if (value is bool && parameter != null) {
          var param = (double.NegativeZero);

          if (double.TryParse(parameter.ToString(), out param) && (bool)value) {
            return (double)param;
          }
        }

        return 0;
      }

      public object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture) {
        throw new NotSupportedException();
      }
    }

它实际上返回了正确的值，但该列呈现的宽度超过 800 像素，并且当

IsColumnContentMinimized

翻转值时永远不会调整大小（绑定到

IsColumnContentMinimized

的其他内容按预期执行）。 然后我尝试将宽度直接绑定到我的 VM 方法中设置的伴随属性：

        <ColumnDefinition Width="{Binding ContentColumnWidth}" />

  protected bool _isColumnContentMinimized;
  protected double _contentColumnWidth;
...
  public bool IsColumnContentMinimized {
    get => _isColumnContentMinimized;
    set => this.RaiseAndSetIfChanged(ref _isColumnContentMinimized, value);
  }
...
  public double ContentColumnWidth {
    get => _contentColumnWidth;
    set => this.RaiseAndSetIfChanged(ref _contentColumnWidth, value);
  }
...
  private void ExecuteToggleMinimizeColumnContent() {
    IsColumnContentMinimized = !IsColumnContentMinimized;
    ContentColumnWidth = (IsColumnContentMinimized ? 0 : 400d);
  }

但是没有效果！ 请告诉我如何在不使用代码隐藏的情况下使其工作（假设可以工作），谢谢...

Answer 1

如果您尝试向

ColumnDefinition

添加类，您会收到以下错误

无法解析 Avalonia.Controls:Avalonia.Controls.ColumnDefinition 类型上合适的常规或附加属性类

这意味着

Classes

 没有名为 

ColumnDefinition

的属性

要实现您尝试做的事情，请将列宽设置为

auto

并将宽度应用到该列中的内容，如下所示

<Grid>
  <Grid.Styles>
        <Style Selector="Grid.Minimized">
          <Setter Property="Width" Value="0"/>
        </Style>
        <Style Selector="Grid.Maximized">
          <Setter Property="Width" Value="400"/>
        </Style>
      </Grid.Styles>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="32" />
        <ColumnDefinition Width="auto" Classes="hello" />
        <ColumnDefinition Width="10" />
        <ColumnDefinition />
      </Grid.ColumnDefinitions>

  <Grid Grid.Column="0" Background="Red" />
  <Grid Grid.Column="1" 
        Classes.Minimized="{Binding IsColumnContentMinimized}"
        Classes.Maximized="{Binding !IsColumnContentMinimized}" 
        Background="Green" />
  <Grid Grid.Column="2" Background="Blue" />
  <Grid Grid.Column="3" Background="Azure" />
</Grid>