WPF Panel超出边界

雾影射手 / 2024-09-26 / 原文

关于StackPanel和Grid这两种常用的WPF布局控件的不同行为

1.StackPanel的行为:

StackPanel设计用于简单地将元素堆叠在一起(垂直或水平)。它不会限制其子元素的大小,允许它们按需增长。这意味着:

子元素可以超出StackPanel的边界
StackPanel不会自动调整大小以适应其内容
如果内容超出了可见区域,StackPanel会允许滚动(如果放在ScrollViewer中)

2.Grid的行为:

Grid是一个更复杂的布局控件,设计用于创建灵活的表格式布局。它有以下特点:

默认情况下,Grid会限制其子元素在其单元格内
Grid会自动调整其行和列的大小以适应内容(除非明确设置了固定大小)
子元素通常不会超出Grid的边界

3.效果实现

点击查看代码

<DataGridTemplateColumn Header="操作" Width="180">
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal" >
                <Grid Width="170">
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                        <Button Grid.Column="2" Margin="5" Style="{StaticResource ImageButtonStyle}" Content="/Resources/Icon/del.png" Command="{Binding DataContext.ClickCommand, RelativeSource={RelativeSource AncestorType=DataGrid}}" CommandParameter="Dele"/>
                        <Button Grid.Column="1" Margin="10,5" Style="{StaticResource ImageButtonStyle}" Content="/Resources/Icon/edit.png" Command="{Binding DataContext.ClickCommand, RelativeSource={RelativeSource AncestorType=DataGrid}}" CommandParameter="Edit"/>
                        <Button Grid.Column="0" Margin="5" Style="{StaticResource ImageButtonStyle}" Content="/Resources/Icon/addcon.png" Command="{Binding DataContext.ClickCommand, RelativeSource={RelativeSource AncestorType=DataGrid}}" CommandParameter="AddCon" Visibility="{Binding DataContext.AddVisibility, RelativeSource={RelativeSource AncestorType=DataGrid}}"/>
                    </StackPanel>
                </Grid>
                <Border Width="10" Height="60" Opacity="0.05" Margin="0,0,-15,0">
                    <Border.Background>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                            <GradientStop Color="#0177FB" Offset="0" />
                            <GradientStop Color="Transparent" Offset="1" />
                        </LinearGradientBrush>
                    </Border.Background>
                </Border>
            </StackPanel>
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

![image](https://img2024.cnblogs.com/blog/677750/202409/677750-20240926095426812-1842758627.jpg)