WPF grid column def auto always clipping from right

Question

I have a WPF app which has a grid with 2 columns set to * and auto. The issue is when I reduce the size of the window the children in second column are getting clipped from right instead of left. I expect them to clip from left because I have set the horizontal alignment to right. Is there a way we can clip the second column elements from left?

<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

Instead of this:

<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>

try this:

<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>

i deleted the last button width property.

output:

Answer 2

I would guess you are trying to make 3 column layout with 1 button on either side and 1 middle lane for content.

So you could try something like this, where all your content are in same grid with different z-index and horizontal alignments, now when you resize the window the label stays in middle and the buttons "clip behind" the label content from the right and the left.

<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>