我如何腾出一个StackPanel的子元素?

给定一个StackPanel:

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

在子元素本身大小不同的情况下，怎样才能使它们之间的间隔大小相等呢?在不为每个单独的子节点设置属性的情况下可以做到这一点吗?

188118 次浏览
小开

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

小开
最佳答案

使用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>

编辑:如果你想在两个容器之间重用边距，你可以将边距值转换为外部作用域中的资源，例如。

<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>
小开

Sergey的答案是+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中的另一个字典)中定义了这样的样式，它将覆盖控件的默认样式。对于大多数不好看的控件，比如堆栈面板，这不是问题，但对于文本框等，你可能会偶然发现这个问题，幸运的是，它有一些变通办法。

小开
这里可以看到另一个很好的方法: < a href = " http://blogs.microsoft.co.il/blogs/eladkatz/archive/2011/05/29/what-is-the-easiest-way-to-set-spacing-between-items-in-stackpanel。aspx noreferrer“rel = > http://blogs.microsoft.co.il/blogs/eladkatz/archive/2011/05/29/what-is-the-easiest-way-to-set-spacing-between-items-in-stackpanel.aspx < / > 链路中断->该链路的这是webbarchive

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

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

这是最简单的&将Margin设置为面板的几个子元素的最快方法，即使它们不属于同一类型。(即按钮，文本框，组合框等)

小开

按照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立即关闭，并出现灾难性失败错误(HRESULT: 0x8000FFFF (E_UNEXPECTED))，如https://connect.microsoft.com/VisualStudio/feedback/details/753211/xaml-editor-window-fails-with-catastrophic-failure-when-a-style-tries-to-set-style-property#

小开

有时你需要设置填充，而不是边距，使项目之间的空间小于默认值

小开

我改进了Elad Katz的回答。

  • 为MarginSetter添加LastItemMargin属性以专门处理最后一项
  • “添加间距”附加属性具有“垂直”和“水平”属性，用于在垂直和水平列表中的项之间添加间距，并消除列表末尾的任何尾距

源代码在主旨。

例子:

<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>
小开

您真正需要做的是包装所有子元素。在这种情况下，你应该使用一个项目控件，而不是诉诸于可怕的附加属性，你最终会有一百万个你想要样式的每个属性。

<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>

enter image description here

小开

我的方法继承了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();
}
}
}
小开

网格。列空间， 网格。行空间， StackPanel。间距现在在UWP预览，所有这些都将允许更好地完成这里的要求。

这些属性目前只与Windows 10秋季创作者更新内部SDK可用，但应该使它到最后位!

小开

通常，我像这样使用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>

提交答案