Wie platziere ich die untergeordneten Elemente eines StackPanels?

Gegeben ein StackPanel:

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

Was ist der beste Weg, um die untergeordneten Elemente so zu platzieren, dass zwischen ihnen gleich große Lücken bestehen, obwohl die untergeordneten Elemente selbst unterschiedlich groß sind? Kann dies durchgeführt werden, ohne die Eigenschaften für jedes einzelne Kind festzulegen?

Verwenden Sie Rand oder Polsterung, die auf den Bereich innerhalb des Containers angewendet werden:

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

BEARBEITEN: Wenn Sie den Rand zwischen zwei Containern wiederverwenden möchten, können Sie den Randwert in eine Ressource in einem äußeren Bereich konvertieren, z

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

und beziehen Sie sich dann auf diesen Wert im inneren Bereich

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

Ein weiterer netter Ansatz ist hier zu sehen: http://blogs.microsoft.co.il/blogs/eladkatz/archive/2011/05/29/what-is-the-easiest-way-to-set-spacing-between- items-in-stackpanel.aspx Link ist defekt -> dies ist das Webarchiv dieses Links.

Es wird gezeigt, wie ein angehängtes Verhalten erstellt wird, damit die folgende Syntax funktioniert:

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

Dies ist der einfachste und schnellste Weg, um Margin auf mehrere untergeordnete Elemente eines Panels festzulegen, auch wenn diese nicht vom gleichen Typ sind. (Dh Schaltflächen, Textfelder, Kombinationsfelder usw.)

Ich habe die Antwort von Elad Katz verbessert .

• Fügen Sie MarginSetter die LastItemMargin-Eigenschaft hinzu, um das letzte Element speziell zu behandeln
• Angehängte Eigenschaft "Abstand hinzufügen" mit vertikalen und horizontalen Eigenschaften, die den Abstand zwischen Elementen in vertikalen und horizontalen Listen hinzufügen und nachfolgende Ränder am Ende der Liste entfernen

Quellcode im Kern .

Beispiel:

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

Das, was Sie wirklich tun möchten, ist, alle untergeordneten Elemente zu verpacken. In diesem Fall sollten Sie ein Elementsteuerelement verwenden und nicht auf schreckliche angehängte Eigenschaften zurückgreifen, von denen Sie am Ende eine Million für jede Eigenschaft haben, die Sie stylen möchten.

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

+1 für Sergeys Antwort. Und wenn Sie das auf alle Ihre StackPanels anwenden möchten, können Sie dies tun:

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

Aber Achtung: Wenn Sie einen Stil , wie dies in Ihrem App.xaml (oder ein anderes Wörterbuch , das in die Application.Resources verschmolzen ist) definieren es kann den Standardstil der Steuerung außer Kraft setzen. Für meist unscheinbare Steuerelemente wie das Stackpanel ist dies kein Problem, aber für Textfelder usw. können Sie auf dieses Problem stoßen , das zum Glück einige Problemumgehungen aufweist.

Gemäß dem Vorschlag von Sergey können Sie einen ganzen Stil (mit verschiedenen Eigenschaftssetzern, einschließlich Rand) definieren und wiederverwenden, anstatt nur ein Objekt für die Dicke:

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

Beachten Sie, dass der Trick hier die Verwendung der Stilvererbung für den impliziten Stil ist, der vom Stil in einem externen (wahrscheinlich aus einer externen XAML-Datei zusammengeführten) Ressourcenwörterbuch erbt.

Randnotiz:

Zuerst habe ich naiv versucht, den impliziten Stil zu verwenden, um die Style-Eigenschaft des Steuerelements auf diese äußere Style-Ressource festzulegen (z. B. mit dem Schlüssel "MyStyle" definiert):

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

Dies führte dazu, dass Visual Studio 2010 sofort mit dem Fehler CATASTROPHIC FAILURE (HRESULT: 0x8000FFFF (E_UNEXPECTED)) heruntergefahren wurde, wie unter https://connect.microsoft.com/VisualStudio/feedback/details/753211/xaml-editor-window-fails beschrieben -mit-katastrophalem-Fehler-wenn-ein-Stil-versucht-zu-setzen-Stil-Eigenschaft #

Grid.ColumnSpacing , Grid.RowSpacing , StackPanel.Spacing sind jetzt in der UWP-Vorschau verfügbar. Alle ermöglichen eine bessere Erfüllung der hier angeforderten Anforderungen.

Diese Eigenschaften sind derzeit nur mit dem Windows 10 Fall Creators Update Insider SDK verfügbar, sollten es aber bis zum Ende schaffen!

Das UniformGrid ist möglicherweise nicht in Silverlight verfügbar, aber jemand hat es von WPF portiert. http://www.jeff.wilcox.name/2009/01/uniform-grid/

Mein Ansatz erbt StackPanel.

Verwendung:

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

Alles was benötigt wird ist die folgende kurze Klasse:

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();
        }
    }
}

Manchmal müssen Sie Padding und nicht Margin festlegen, um den Abstand zwischen Elementen kleiner als die Standardeinstellung zu machen