Question

我正在尝试将按钮的垂直设置设置到堆栈面板的底部，但是没有。

我已经阅读了一些主题，但是没有成功。除了stackpanel之外，我还有什么可以使用的吗？

我想按下最后一个按钮。

<Grid Grid.Column="0" Background="#312a28">
    <!--Left panel buttons-->
    <StackPanel>
        <!--Button icon list-->
            <Button Height="70" Background="#556ac1">
                <Image Source="img/icon_list.png" Height="50" Width="50"/>
            </Button>
            <!--Button new order-->
        <Button Height="70" Background="#556ac1">
            <StackPanel Width="70">
                <Image Source="img/ordertake_neworder.png" Height="35" Width="34" HorizontalAlignment="Center"/>
                <TextBlock Text="Yeni" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="18" Foreground="White"/>
            </StackPanel>
        </Button>
        <!--Button order-->
        <Button Height="70" Background="#556ac1">
            <StackPanel Width="70">
                <Image Source="img/orders_icon_white.png" Height="40" Width="50" HorizontalAlignment="Center"/>
                <TextBlock Text="Sipariş" HorizontalAlignment="Center" FontSize="18" Foreground="White"/>
            </StackPanel>
        </Button>
        <!--Button payment-->
        <Button Height="70" Background="#556ac1">
            <StackPanel Width="70">
                <Image Source="img/icon_payment.png" Height="40" Width="50" HorizontalAlignment="Center"/>
                <TextBlock Text="Ödeme" HorizontalAlignment="Center" FontSize="18" Foreground="White"/>
            </StackPanel>
        </Button>
        <!--Button Sales-->
        <Button Height="70" Background="#556ac1">
            <StackPanel Width="70">
                <Image Source="img/hot_sales_icon.png" Height="40" Width="50" HorizontalAlignment="Center"/>
                <TextBlock Text="Satış" HorizontalAlignment="Center" FontSize="18" Foreground="White"/>
            </StackPanel>
        </Button>
        <!--Button printer-->
        <Button Height="70" Background="#556ac1">
            <StackPanel Width="70">
                <Image Source="img/payment_printer.png" Height="40" Width="50" HorizontalAlignment="Center"/>
                <TextBlock Text="Yazdır" HorizontalAlignment="Center" FontSize="18" Foreground="White"/>
            </StackPanel>
        </Button>
        <!--Button back-->
      (This Button) -->  <Button Height="70" Background="Transparent" VerticalAlignment="Bottom">
            <StackPanel Width="70">
                <Image Source="img/previous.png" Height="40" Width="50" HorizontalAlignment="Center"/>
            </StackPanel>
        </Button>
    </StackPanel>
</Grid>

Answer 1

尝试将DockPanel与LastChildFill="False"一起使用。将DockPanel.Dock="Top"放在最后一个按钮上的每个按钮上。给出最后一个按钮DockPanel.Dock="Bottom"。

snicz的答案以不同的方式组织XAML，但对布局具有相同的影响。值得了解解决问题的方法。

<!--Left panel buttons-->
<DockPanel LastChildFill="False">
    <!--Button icon list-->
    <Button Height="70" Background="#556ac1" DockPanel.Dock="Top">
        <Image Source="img/icon_list.png" Height="50" Width="50"/>
    </Button>
    <!--Button new order-->
    <Button Height="70" Background="#556ac1" DockPanel.Dock="Top">
        <StackPanel Width="70">
            <Image Source="img/ordertake_neworder.png" Height="35" Width="34" HorizontalAlignment="Center"/>
            <TextBlock Text="Yeni" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="18" Foreground="White"/>
        </StackPanel>
    </Button>
    <!--Button order-->
    <Button Height="70" Background="#556ac1" DockPanel.Dock="Top">
        <StackPanel Width="70">
            <Image Source="img/orders_icon_white.png" Height="40" Width="50" HorizontalAlignment="Center"/>
            <TextBlock Text="Sipariş" HorizontalAlignment="Center" FontSize="18" Foreground="White"/>
        </StackPanel>
    </Button>
    <!--Button payment-->
    <Button Height="70" Background="#556ac1" DockPanel.Dock="Top">
        <StackPanel Width="70">
            <Image Source="img/icon_payment.png" Height="40" Width="50" HorizontalAlignment="Center"/>
            <TextBlock Text="Ödeme" HorizontalAlignment="Center" FontSize="18" Foreground="White"/>
        </StackPanel>
    </Button>
    <!--Button Sales-->
    <Button Height="70" Background="#556ac1" DockPanel.Dock="Top">
        <StackPanel Width="70">
            <Image Source="img/hot_sales_icon.png" Height="40" Width="50" HorizontalAlignment="Center"/>
            <TextBlock Text="Satış" HorizontalAlignment="Center" FontSize="18" Foreground="White"/>
        </StackPanel>
    </Button>
    <!--Button printer-->
    <Button Height="70" Background="#556ac1" DockPanel.Dock="Top">
        <StackPanel Width="70">
            <Image Source="img/payment_printer.png" Height="40" Width="50" HorizontalAlignment="Center"/>
            <TextBlock Text="Yazdır" HorizontalAlignment="Center" FontSize="18" Foreground="White"/>
        </StackPanel>
    </Button>
    <!--Button back-->
    <Button Height="70" Background="Transparent" DockPanel.Dock="Bottom">
        <StackPanel Width="70">
            <Image Source="img/previous.png" Height="40" Width="50" HorizontalAlignment="Center"/>
        </StackPanel>
    </Button>
</DockPanel>

Answer 2

要将最后一个按钮向下推到底，可以为此使用DockPanel：使用标准的DockPanel.LastChildFill选项（true），堆栈面板将填充所有内容，直到Button顶上为止。

<DockPanel >
    <!--Button back-->
    <Button DockPanel.Dock="Bottom"
            Height="70" Background="Transparent" VerticalAlignment="Bottom">
        <StackPanel Width="70">
            <Image Source="img/previous.png" Height="40" Width="50" HorizontalAlignment="Center"/>
        </StackPanel>
    </Button>

    <StackPanel>
        <!--Button icon list-->
        <Button Height="70" Background="#556ac1">
            <Image Source="img/icon_list.png" Height="50" Width="50"/>
        </Button>
        <!--Button new order-->
        <Button Height="70" Background="#556ac1">
            <StackPanel Width="70">
                <Image Source="img/ordertake_neworder.png" Height="35" Width="34" HorizontalAlignment="Center"/>
                <TextBlock Text="Yeni" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="18" Foreground="White"/>
            </StackPanel>
        </Button>
        <!--Button order-->
        <Button Height="70" Background="#556ac1">
            <StackPanel Width="70">
                <Image Source="img/orders_icon_white.png" Height="40" Width="50" HorizontalAlignment="Center"/>
                <TextBlock Text="Sipariş" HorizontalAlignment="Center" FontSize="18" Foreground="White"/>
            </StackPanel>
        </Button>
        <!--Button payment-->
        <Button Height="70" Background="#556ac1">
            <StackPanel Width="70">
                <Image Source="img/icon_payment.png" Height="40" Width="50" HorizontalAlignment="Center"/>
                <TextBlock Text="Ödeme" HorizontalAlignment="Center" FontSize="18" Foreground="White"/>
            </StackPanel>
        </Button>
        <!--Button Sales-->
        <Button Height="70" Background="#556ac1">
            <StackPanel Width="70">
                <Image Source="img/hot_sales_icon.png" Height="40" Width="50" HorizontalAlignment="Center"/>
                <TextBlock Text="Satış" HorizontalAlignment="Center" FontSize="18" Foreground="White"/>
            </StackPanel>
        </Button>
        <!--Button printer-->
        <Button Height="70" Background="#556ac1">
            <StackPanel Width="70">
                <Image Source="img/payment_printer.png" Height="40" Width="50" HorizontalAlignment="Center"/>
                <TextBlock Text="Yazdır" HorizontalAlignment="Center" FontSize="18" Foreground="White"/>
            </StackPanel>
        </Button>

    </StackPanel>
</DockPanel>

我在stackpanel中遇到水平问题

2 个答案: