WPF 网格列 def auto 始终从右侧剪切

Question

我有一个 WPF 应用程序，其中有一个网格，其中 2 列设置为 * 和自动。问题是，当我减小窗口的大小时，第二列中的子项将从右侧而不是左侧被剪切。我希望它们从左侧剪辑，因为我已将水平对齐设置为右侧。有没有办法可以剪切左侧的第二列元素？<Window x:Class="WpfApp2.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:WpfApp2"        mc:Ignorable="d"        Title="MainWindow" Height="450" Width="800" >    <Grid>        <Grid.ColumnDefinitions>            <ColumnDefinition Width="*" MinWidth="60"/>            <ColumnDefinition Width="auto"/>        </Grid.ColumnDefinitions>        <DockPanel  HorizontalAlignment="Right" Grid.Column="1">            <Button Click="Button_Click" Content="click me" Width="150" DockPanel.Dock="Right" />            <Label Content="abcdef" Width="200" DockPanel.Dock="Right" />            <Label x:Name="mLog"/>        </DockPanel>        <Button Click="Button_Click" DockPanel.Dock="Right" Content="click me" Width="150"/>        <Label Content="abcdef" Width="200" DockPanel.Dock="Right"/>    </Grid></Window>

Answer 1

 而不是这个：

<Window x:Class="WpfApp2.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:WpfApp2"

        mc:Ignorable="d"

        Title="MainWindow" Height="450" Width="800" >

    <Grid>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="*" MinWidth="60"/>

            <ColumnDefinition Width="auto"/>

        </Grid.ColumnDefinitions>

        <DockPanel  HorizontalAlignment="Right" Grid.Column="1">

            <Button Click="Button_Click" Content="click me" Width="150" DockPanel.Dock="Right" />

            <Label Content="abcdef" Width="200" DockPanel.Dock="Right" />

            <Label x:Name="mLog"/>

        </DockPanel>

        <Button Click="Button_Click" DockPanel.Dock="Right" Content="click me" Width="150"/>

        <Label Content="abcdef" Width="200" DockPanel.Dock="Right"/>

    </Grid>

</Window>

尝试这个：

<Window x:Class="WpfApp2.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:WpfApp2"

            mc:Ignorable="d"

            Title="MainWindow" Height="450" Width="800" >

        <Grid>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="*" MinWidth="60"/>

                <ColumnDefinition Width="auto"/>

            </Grid.ColumnDefinitions>

            <DockPanel  HorizontalAlignment="Right" Grid.Column="1">

                <Button Click="Button_Click" Content="click me" Width="150" DockPanel.Dock="Right" />

                <Label Content="abcdef" Width="200" DockPanel.Dock="Right" />

                <Label x:Name="mLog"/>

            </DockPanel>

            <Button Click="Button_Click" DockPanel.Dock="Right" Content="click me"/>

            <Label Content="abcdef" Width="200" DockPanel.Dock="Right"/>

        </Grid>

    </Window>

我删除了最后一个按钮宽度属性。

Answer 2

我猜你正在尝试制作 3 列布局，两侧各有 1 个按钮，中间有 1 个内容通道。

因此，您可以尝试这样的操作，其中所有内容都位于具有不同 z-index 和水平对齐的同一网格中，现在，当您调整窗口大小时，标签保持在中间，按钮“夹在”标签内容的右侧和后面左边。

<Grid>

    <Button HorizontalAlignment="Left" Content="click me" Width="150" />

    <Button HorizontalAlignment="Right" Content="click me" Width="150" />

    <Label HorizontalAlignment="Center" Content="abcdef" Width="200" Background="White" />

</Grid>

Answer 3

在 DockPanel 中，HorizontalAlignment 仅当 DockPanel 的宽度大于其所有子项的总宽度时才有用。按钮和标签的大小固定为 200 和 150，我相信 WPF 的行为将从左侧剪切元素。

第一个棘手的方法是让 DockPanel 填充两列，当网格变小时，DockPanel 的一部分将进入第一列的内容下方，给人一种从左侧剪切的感觉。

 <Grid>

     <Grid.ColumnDefinitions>

         <ColumnDefinition Width="*" MinWidth="60"/>

         <ColumnDefinition Width="*"/>

     </Grid.ColumnDefinitions>

     <DockPanel HorizontalAlignment="Right" Grid.ColumnSpan="2" LastChildFill="True">

         <Button Click="Button_Click" Content="click me 2" Width="150" DockPanel.Dock="Right" />

         <Label Content="abcdef 2" Width="200" />

         <Label x:Name="mLog" DockPanel.Dock="Right"/>

     </DockPanel>

     <Button Click="Button_Click" Content="click me 1" HorizontalContentAlignment="Stretch"/>

     <Label Content="abcdef 1" HorizontalContentAlignment="Stretch"/>

 </Grid>

另一种正确的方法是使用另一个 Grid 而不是 DockPanel，确保我们让第一列填充空间，以便与容器一起减小尺寸。

    <Grid HorizontalAlignment="Right" Grid.Column="1">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="*"/>

            <ColumnDefinition Width="150"/>

        </Grid.ColumnDefinitions>

        <Button Click="Button_Click" Content="click me" Grid.Column="1" MinWidth="150"/>

        <Label Content="abcdef" Grid.Column="0"/>

        <Label x:Name="mLog"/>

    </Grid>