Avalonia窗口宽度无法适配DataGrid问题求助

问题描述 #

将WPF项目迁移到Avalonia平台时，遇到窗口尺寸无法适配DataGrid的问题。已知Avalonia中用NaN替代WPF的Auto属性设置窗口宽度，但窗口宽度仍远大于DataGrid的宽度，预期窗口宽度应与DataGrid（例如“Last Refresh Time”列的总宽度）匹配。

原XAML代码：

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:EndpointHelper.ViewModels"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="Auto" d:DesignHeight="350"
        x:Class="EndpointHelper.Views.MainWindow"
        x:DataType="vm:MainWindowViewModel"
        Width="NaN" Height="350"
        Icon="/Assets/avalonia-logo.ico"
        Title="EndpointHelper">

    <Window.KeyBindings>
        <KeyBinding Gesture="F5" Command="{Binding KeyDownEvent_F5Command}"/>
    </Window.KeyBindings>

    <Design.DataContext>
        <!-- This only sets the DataContext for the previewer in an IDE,
             to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs) -->
        <vm:MainWindowViewModel/>
    </Design.DataContext>

    <!-- <TextBlock Text="{Binding Greeting}" HorizontalAlignment="Center" VerticalAlignment="Center"/> -->

    <Grid>
        <DockPanel Margin="5">
            <Border DockPanel.Dock="Top" >
                <Border>
                    <DataGrid x:Name="datagrid_information" ItemsSource="{Binding Informationdgm, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" 
                            IsReadOnly="True" AutoGenerateColumns="False" HeadersVisibility="None" CanUserReorderColumns="False" CanUserResizeColumns="False" CanUserSortColumns="False" BorderThickness="0.1" >
                                    <DataGrid.Columns>
                                        <DataGridTextColumn FontSize="12" Binding="{Binding Attribute}" Header="Attribute" Width="Auto"/>
                                        <DataGridTextColumn FontSize="12" Binding="{Binding Value}" Header="Value" Width="Auto"/>
                                    </DataGrid.Columns>
                    </DataGrid>
                </Border>
            </Border>
            
        </DockPanel>
    </Grid>

</Window>

解决方案 #

关键调整点： #

• 给窗口设置SizeToContent="Width"，让窗口自动根据内容宽度调整自身宽度
• 给DataGrid设置HorizontalAlignment="Left"，避免它拉伸填满父容器，只占用自身所需宽度
• 简化外层布局容器，移除不必要的嵌套Border和DockPanel，减少多余空间

修改后的完整XAML代码： #

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:EndpointHelper.ViewModels"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="Auto" d:DesignHeight="350"
        x:Class="EndpointHelper.Views.MainWindow"
        x:DataType="vm:MainWindowViewModel"
        Height="350"
        SizeToContent="Width"
        Icon="/Assets/avalonia-logo.ico"
        Title="EndpointHelper">

    <Window.KeyBindings>
        <KeyBinding Gesture="F5" Command="{Binding KeyDownEvent_F5Command}"/>
    </Window.KeyBindings>

    <Design.DataContext>
        <!-- This only sets the DataContext for the previewer in an IDE,
             to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs) -->
        <vm:MainWindowViewModel/>
    </Design.DataContext>

    <DataGrid x:Name="datagrid_information" 
              ItemsSource="{Binding Informationdgm, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" 
              IsReadOnly="True" 
              AutoGenerateColumns="False" 
              HeadersVisibility="None" 
              CanUserReorderColumns="False" 
              CanUserResizeColumns="False" 
              CanUserSortColumns="False" 
              BorderThickness="0.1"
              HorizontalAlignment="Left"
              Margin="5">
        <DataGrid.Columns>
            <DataGridTextColumn FontSize="12" Binding="{Binding Attribute}" Header="Attribute" Width="Auto"/>
            <DataGridTextColumn FontSize="12" Binding="{Binding Value}" Header="Value" Width="Auto"/>
        </DataGrid.Columns>
    </DataGrid>

</Window>

补充说明： #

• 移除了原布局中多余的Grid、DockPanel和嵌套Border，这些容器会默认拉伸子元素，导致DataGrid占据多余空间
• SizeToContent="Width"会让窗口自动计算内容的宽度并适配，不需要再设置Width="NaN"
• HorizontalAlignment="Left"确保DataGrid只占用自身内容所需的宽度，不会被拉伸填满窗口

内容的提问来源于stack exchange，提问作者Stephan