Вы тратите впустую свое время, пытаясь написать CSS для того, чтобы разбираться со всем этим вручную.
Посмотрите документацию по сетке Bootstrap , в которой создание макета сетки становится таким же простым, как:
One of three columns
One of three columns
One of three columns
. меньшее устройство, например телефон или планшет.
Начать с этим так же просто, как включить размещенный на CDN Bootstrap.css в разделе вашей собственной страницы.
Возможно, позже вам понадобятся некоторые плагины JS, если вы захотите добавить более продвинутые функции начальной загрузки.
Как так:
<StackPanel VerticalAlignment="Bottom">
...
</StackPanel>
и заполнить с кнопками вверх необходимо вставить кнопки в положении 0, вместо того, чтобы добавить их.
Другая альтернатива должна использовать DockPanel вместо этого.
Просто устанавливает LastChildFill на ложь на DockPanel.
Затем устанавливает приложенное свойство Dock на каждую кнопку, которую Вы добавляете к Нижней части прежде, чем добавить к DockPanel.
пример:
var button = new Button();
DockPanel.SetDock(button, Dock.Bottom);
Лучший способ решить проблему состоит в том, чтобы реализовать пользовательский контейнер, полученный из stackpanel, но быстрое и грязное решение, если элементы добавляются во времени выполнения,
public Window1()
{
InitializeComponent();
for (int i = 0; i < 10; i++)
{
Button btn = new Button();
btn.Content = "Button " + i;
MyStack.Children.Insert(0, btn);
}
}
, Просто вставляют объект в 0 положениях вместо того, чтобы добавить их.
Попытайтесь поместить StackPanel в другом контейнере (не StackPanel; возможно, DockPanel) и выравнивание нижней части это. Затем, когда Вы заполняете кнопки, помещаете каждого новый в первое положение.
Или вы можете повернуть StackPanel на 180 градусов, чтобы кнопки располагались друг над другом снизу вверх, а затем повернув кнопки еще на 180 градусов, чтобы снова перевернуть их правой стороной вверх:
<StackPanel>
<!-- rotate all buttons inside this panel -->
<StackPanel.Resources>
<Style TargetType="Button">
<Setter Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="180"/>
</Setter.Value>
</Setter>
</Style>
</StackPanel.Resources>
<!-- rotate the stack panel -->
<StackPanel.LayoutTransform>
<RotateTransform Angle="180"/>
</StackPanel.LayoutTransform>
<!-- content -->
<Button>1</Button>
<Button>2</Button>
</StackPanel>
Я обнаружил, что использование UniformGrid с Column = 1 дает аккуратный стек заполнения, а установка Rows = 1 дает аккуратный горизонт заполненный стек. И добавление с индекса 0 будет работать снизу вверх.
Люблю решение преобразований от Нира. Мне было интересно, можно ли это сделать с помощью преобразований.
Одно предостережение: не используйте уловку преобразования для элемента управления на основе ScrollView, такого как ListBox, потому что операция полосы прокрутки будет инвертирована из содержимого. Забавно смотреть, если вы не конечный пользователь. ;>