CODEWITHSUNDEEP
wpfxaml
Emircan Aydın
Emircan Aydın

Reputation: 61

I'm having a horizontal problem in stackpanel

I'm trying to set the vertical setting of a button to the bottom in the stackpanel, but it doesn't.

I have read a few topics but I have not been successful. Is there anything I can use other than stackpanel ?

I want to push down the last button.

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

Upvotes: 0

Views: 49

Answers (2)

15ee8f99-57ff-4f92-890c-b56153
15ee8f99-57ff-4f92-890c-b56153

Reputation: 37066

Try using a DockPanel with LastChildFill="False". Put DockPanel.Dock="Top" on every Button but the last one. Give the last Button DockPanel.Dock="Bottom".

Upvotes: 1

snicz
snicz

Reputation: 61

To push down the last button to the very end, you could use a DockPanel for this: With using the standard DockPanel.LastChildFill option (true), the stackpanel will fill everything up until the Button up top.

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

Upvotes: 1

Related Questions