201

给定一个 StackPanel：

<StackPanel>
  <TextBox Height="30">Apple</TextBox>
  <TextBox Height="80">Banana</TextBox>
  <TextBox Height="120">Cherry</TextBox>
</StackPanel>

即使子元素本身具有不同的大小，将子元素隔开以使它们之间存在相同大小的间隙的最佳方法是什么？可以在不为每个单独的孩子设置属性的情况下完成吗？

4

11 回答 11

310

使用 Margin 或 Padding，应用于容器内的范围：

<StackPanel>
    <StackPanel.Resources>
        <Style TargetType="{x:Type TextBox}">
            <Setter Property="Margin" Value="0,10,0,0"/>
        </Style>
    </StackPanel.Resources> 
    <TextBox Text="Apple"/>
    <TextBox Text="Banana"/>
    <TextBox Text="Cherry"/>
</StackPanel>

编辑：如果您想重新使用两个容器之间的边距，您可以将边距值转换为外部范围内的资源，fe

<Window.Resources>
    <Thickness x:Key="tbMargin">0,10,0,0</Thickness>
</Window.Resources>

然后在内部范围内引用这个值

<StackPanel.Resources>
    <Style TargetType="{x:Type TextBox}">
        <Setter Property="Margin" Value="{StaticResource tbMargin}"/>
    </Style>
</StackPanel.Resources>
于 2009-05-31T18:39:46.803 回答
95

另一种不错的方法可以在这里看到：http: //blogs.microsoft.co.il/blogs/eladkatz/archive/2011/05/29/what-is-the-easiest-way-to-set-spacing-between- items-in-stackpanel.aspx 链接已损坏 ->这是此链接的网络存档。

它展示了如何创建附加行为，这样这样的语法就可以工作：

<StackPanel local:MarginSetter.Margin="5">
   <TextBox Text="hello" />
   <Button Content="hello" />
   <Button Content="hello" />
</StackPanel>

这是将 Margin 设置为面板的多个子项的最简单和最快的方法，即使它们不是同一类型。（即按钮、文本框、组合框等）

于 2011-05-29T22:29:12.317 回答
17

我改进了Elad Katz 的回答。

  • 将 LastItemMargin 属性添加到 MarginSetter 以专门处理最后一项
  • 添加具有垂直和水平属性的间距附加属性，可在垂直和水平列表中的项目之间添加间距，并消除列表末尾的任何尾随边距

gist 中的源代码。

例子：

<StackPanel Orientation="Horizontal" foo:Spacing.Horizontal="5">
  <Button>Button 1</Button>
  <Button>Button 2</Button>
</StackPanel>

<StackPanel Orientation="Vertical" foo:Spacing.Vertical="5">
  <Button>Button 1</Button>
  <Button>Button 2</Button>
</StackPanel>

<!-- Same as vertical example above -->
<StackPanel Orientation="Vertical" foo:MarginSetter.Margin="0 0 0 5" foo:MarginSetter.LastItemMargin="0">
  <Button>Button 1</Button>
  <Button>Button 2</Button>
</StackPanel>
于 2015-01-17T12:28:53.547 回答
9

您真正想要做的是包装所有子元素。在这种情况下，您应该使用项目控件，而不是求助于可怕的附加属性，您最终将拥有一百万个您希望设置样式的属性。

<ItemsControl>

    <!-- target the wrapper parent of the child with a style -->
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="Control">
            <Setter Property="Margin" Value="0 0 5 0"></Setter>
        </Style>
    </ItemsControl.ItemContainerStyle>

    <!-- use a stack panel as the main container -->
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <!-- put in your children -->
    <ItemsControl.Items>
        <Label>Auto Zoom Reset?</Label>
        <CheckBox x:Name="AutoResetZoom"/>
        <Button x:Name="ProceedButton" Click="ProceedButton_OnClick">Next</Button>
        <ComboBox SelectedItem="{Binding LogLevel }" ItemsSource="{Binding LogLevels}" />
    </ItemsControl.Items>
</ItemsControl>

在此处输入图像描述

于 2015-06-16T10:18:32.407 回答
6

+1 谢尔盖的回答。如果你想把它应用到你所有的 StackPanel 上，你可以这样做：

<Style TargetType="{x:Type StackPanel}">
    <Style.Resources>
        <Style TargetType="{x:Type TextBox}">
            <Setter Property="Margin" Value="{StaticResource tbMargin}"/>
        </Style>
    </Style.Resources>
</Style>

但请注意：如果您在 App.xaml（或合并到 Application.Resources 中的另一个字典）中定义这样的样式，它可能会覆盖控件的默认样式。对于像 stackpanel 这样的大多数看起来不显眼的控件，这不是问题，但是对于文本框等，您可能会偶然发现这个问题，幸运的是，它有一些解决方法。

于 2010-06-23T13:46:58.653 回答
3

按照 Sergey 的建议，您可以定义和重用整个 Style（具有各种属性设置器，包括 Margin），而不仅仅是一个 Thickness 对象：

<Style x:Key="MyStyle" TargetType="SomeItemType">
  <Setter Property="Margin" Value="0,5,0,5" />
  ...
</Style>

...

  <StackPanel>
    <StackPanel.Resources>
      <Style TargetType="SomeItemType" BasedOn="{StaticResource MyStyle}" />
    </StackPanel.Resources>
  ...
  </StackPanel>

请注意，这里的技巧是对隐式样式使用样式继承，从某些外部（可能从外部 XAML 文件合并）资源字典中的样式继承。

边注：

起初，我天真地尝试使用隐式样式将控件的 Style 属性设置为外部 Style 资源（例如使用键“MyStyle”定义）：

<StackPanel>
  <StackPanel.Resources>
    <Style TargetType="SomeItemType">
      <Setter Property="Style" Value={StaticResource MyStyle}" />
    </Style>
  </StackPanel.Resources>
</StackPanel>

这导致 Visual Studio 2010 立即关闭并出现 CATASTROPHIC FAILURE 错误（HRESULT: 0x8000FFFF (E_UNEXPECTED)），如https://connect.microsoft.com/VisualStudio/feedback/details/753211/xaml-editor-window-fails中所述-当-​​a-style-tries-to-set-style-property 时发生灾难性失败#

于 2012-07-11T10:15:45.527 回答
3

Grid.ColumnSpacing、Grid.RowSpacing、StackPanel.Spacing现在在 UWP 预览版中，所有这些都可以更好地完成这里的要求。

这些属性目前仅在 Windows 10 Fall Creators Update Insider SDK 中可用，但应该会达到最后阶段！

于 2017-07-06T15:17:59.990 回答
2

UniformGrid 在 Silverlight 中可能不可用，但有人从 WPF 移植了它。http://www.jeff.wilcox.name/2009/01/uniform-grid/

于 2009-05-31T18:22:27.097 回答
2

我的方法继承了 StackPanel。

用法：

<Controls:ItemSpacer Grid.Row="2" Orientation="Horizontal" Height="30" CellPadding="15,0">
    <Label>Test 1</Label>
    <Label>Test 2</Label>
    <Label>Test 3</Label>
</Controls:ItemSpacer>

所需要的只是以下简短的课程：

using System.Windows;
using System.Windows.Controls;
using System;

namespace Controls
{
    public class ItemSpacer : StackPanel
    {
        public static DependencyProperty CellPaddingProperty = DependencyProperty.Register("CellPadding", typeof(Thickness), typeof(ItemSpacer), new FrameworkPropertyMetadata(default(Thickness), FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, OnCellPaddingChanged));
        public Thickness CellPadding
        {
            get
            {
                return (Thickness)GetValue(CellPaddingProperty);
            }
            set
            {
                SetValue(CellPaddingProperty, value);
            }
        }
        private static void OnCellPaddingChanged(DependencyObject Object, DependencyPropertyChangedEventArgs e)
        {
            ((ItemSpacer)Object).SetPadding();
        }

        private void SetPadding()
        {
            foreach (UIElement Element in Children)
            {
                (Element as FrameworkElement).Margin = this.CellPadding;
            }
        }

        public ItemSpacer()
        {
            this.LayoutUpdated += PART_Host_LayoutUpdated;
        }

        private void PART_Host_LayoutUpdated(object sender, System.EventArgs e)
        {
            this.SetPadding();
        }
    }
}
于 2016-04-16T00:14:07.160 回答
0

有时您需要设置 Padding，而不是 Margin 以使项目之间的空间小于默认值

于 2013-11-25T13:41:01.023 回答
0

通常，我使用Grid而不是StackPanel这样：

卧式案例

<Grid>
 <Grid.ColumnDefinitions>
    <ColumnDefinition Width="auto"/>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition  Width="auto"/>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition  Width="auto"/>
 </Grid.ColumnDefinitions>
 <TextBox Height="30" Grid.Column="0">Apple</TextBox>
 <TextBox Height="80" Grid.Column="2">Banana</TextBox>
 <TextBox Height="120" Grid.Column="4">Cherry</TextBox>
</Grid>

垂直案例

<Grid>
     <Grid.ColumnDefinitions>
        <RowDefinition Width="auto"/>
        <RowDefinition Width="*"/>
        <RowDefinition  Width="auto"/>
        <RowDefinition Width="*"/>
        <RowDefinition  Width="auto"/>
     </Grid.ColumnDefinitions>
     <TextBox Height="30" Grid.Row="0">Apple</TextBox>
     <TextBox Height="80" Grid.Row="2">Banana</TextBox>
     <TextBox Height="120" Grid.Row="4">Cherry</TextBox>
</Grid>
于 2020-08-30T13:05:30.810 回答