[英]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.