[英]Aligning Elements within a StackPanel
我有一個堆棧面板,其中有一個幾何按鈕、文本塊和兩個平面按鈕。即使我已經為這些元素中的每一個提供了單獨的水平對齊方式,它們似乎都是從我的左側堆疊起來的......
我希望我的幾何按鈕和文本塊向左側對齊,而平面按鈕向堆棧面板的右側對齊。
截至目前,它們都按各自的順序從左側排列
為什么 XAML 沒有收到我的對齊? 我能做些什么嗎?
感謝你的幫助
這是我的代碼
<StackPanel Grid.Row="2" Orientation="Horizontal" Margin="0,10,0,0">
<GeometryButton Command="{}"
Geometry="{StaticResource {}"
ToolTip="{}"
HorizontalAlignment="Left"/>
<TextBlock
Text="{}"
Style="{}"
Margin="0,10,10,10"
Foreground="Black"
HorizontalAlignment="Left"/>
<FlatButton Command="{}"
Content="{}"
Style="{}"
VerticalAlignment="Center"
HorizontalContentAlignment="Center"
IsDefault="True"
Margin="0"
MinWidth="80"
HorizontalAlignment="Right"
/>
<FlatButton Command="{}"
Content="{}"
Style="{}"
VerticalAlignment="Center"
HorizontalContentAlignment="Center"
MinWidth="80"
Margin="10,0,0,0"
HorizontalAlignment="Right"
/>
</StackPanel>
編輯:-我預期的 output 類似於下面的...
也使用 Grid 對我來說不是一個選項
-------------------------------------------------------------------
| [Geo Button] [Text Block] [Flat Button][Flat Button]|
| |
| |
| |
-------------------------------------------------------------------
如果你預期的 output 是這樣的:
--------------------------------------
| [Geo Button] |
| [Text Block] |
| [Flat Button]|
| [Flat Button]|
--------------------------------------
然后,您需要將Orientation
更改為Vertical
而不是Horizontal
。
但是,如果你想要這個:
--------------------------------------
| [Geo Button] [Flat Button]|
| [Text Block] [Flat Button]|
--------------------------------------
它是:
Flat Button
的Margin
(我個人不推薦這樣做); 或者Grid
或DockPanel
,嘗試在此處查找代碼和更多解釋我用這個部分制作了您預期的 output:
<Grid Height="100" Background="Red">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" Grid.Column="0">
//...
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">
//...
</StackPanel>
</Grid>
部分原因是因為我沒有FlatButton
和Geo Button
的資源,所以我只使用了常規的Button
。 請注意,您需要將VerticalAlignment
屬性設置為<TextBlock>
的Center
。
您可以將Grid
與列定義一起使用,而不是StackPanel
。 例子:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Button
Grid.Column="0"
Margin="8"
VerticalAlignment="Center"
Content="Button1"/>
<TextBlock
Grid.Column="1"
Margin="8"
Text="TextBlock"
Style="{Binding}"
Foreground="Black"
VerticalAlignment="Center"/>
<Button
Grid.Column="3"
Margin="8"
Content="Button2"
VerticalAlignment="Center"/>
<Button
Grid.Column="4"
Margin="8"
Content="Button3"
VerticalAlignment="Center"/>
</Grid>
已編輯
另一種解決方案:
<DockPanel>
<StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
<Button Content="Geo Button" VerticalAlignment="Center" Margin="6"/>
<Button Content="Text Block" VerticalAlignment="Center" Margin="6"/>
</StackPanel>
<StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
<Button Content="Flat Button" VerticalAlignment="Center" Margin="6"/>
<Button Content="Flat Button" VerticalAlignment="Center" Margin="6"/>
</StackPanel>
</DockPanel>
DockPanel
應該可以解決這個問題。 嘗試這個:
<DockPanel Margin="0,10,0,0">
<Button HorizontalAlignment="Left" Content="GeoButton" Height="20" DockPanel.Dock="Left"/>
<TextBlock Foreground="Black" VerticalAlignment="Center" Text="TextBlock" DockPanel.Dock="Left"/>
<Button HorizontalAlignment="Right" Content="Flat Button1" Height="20" DockPanel.Dock="Right"/>
<Button HorizontalAlignment="Right" Content="Flat Button2" Height="20" DockPanel.Dock="Right"/>
</DockPanel>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.