Wie kann ich Raum aus den untergeordneten Elemente eines Stackpanel?

Question

Bei einem Stackpanel:

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

Was ist der beste Weg aus den untergeordneten Elementen zu Raum, so dass es gleich große Lücken zwischen ihnen sind, auch wenn die untergeordneten Elemente selbst sind in verschiedenen Größen? Kann es ohne das Festlegen von Eigenschaften auf jedem der einzelnen Kinder getan werden?

Answer 1

Mit Margin oder Padding, angewandt auf den Umfang innerhalb des Behälters:

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

EDIT:. Im Fall würden Sie wollen den Abstand zwischen zwei Behältern wiederverwenden, können Sie den Randwert auf eine Ressource in einem äußeren Umfang, f.e konvertieren

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

und dann auf diesen Wert in dem inneren Umfang bezieht

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

Answer 2

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

Es zeigt, wie ein angeschlossenes Verhalten erstellen, so dass Syntax wie dies funktionieren würde:

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

Dies ist der einfachste und schnellste Weg, Margin auf mehrere Kinder einer Platte zu setzen, auch wenn sie nicht vom gleichen Typ sind. (D Buttons, Textfelder, Comboboxen, usw.)

Answer 3

I verbessert auf Elad Katz‘Antwort .

• Fügen Sie LastItemMargin Eigenschaft MarginSetter speziell das letzte Element zu behandeln
• Fügen befestigt Eigenschaft mit vertikalem Abstand und horizontalen Eigenschaften, die am Ende der Liste
Abstand zwischen dem einzelnen Posten in vertikalen und horizontalen Listen und beseitigen jeden hinteren Rand fügt

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

Answer 4

Das, was Sie wirklich wollen, ist es, alle untergeordneten Elemente wickeln. In diesem Fall sollten Sie einen Artikel und kann nicht zurückgreifen zu schrecklich angefügten Eigenschaften verwenden, die Sie eine Million, die für jede Eigenschaft am Ende werden Sie Stil wollen.

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

Answer 5

1 für Sergey Antwort. Und wenn Sie wollen gelten, dass auf alle Ihre StackPanels Sie dies tun können:

<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 definieren (oder ein anderes Wörterbuch, das in die Application.Resources verschmolzen ist) es kann überschreibt den Standard Stil der Kontrolle. Für meist lookless Kontrollen wie die Stackpanel ist es kein Problem, aber für Textfelder usw. können Sie stolpern auf dieses Problem , die zum Glück einige Abhilfen hat.

Answer 6

Im Anschluss an Sergey Vorschlag, können Sie definieren und eine ganze Art Wiederverwendung (mit verschiedenen Immobilien Einrichter, einschließlich Marge) statt nur ein Dicken Objekt:

<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 für die implizite Stil Verwendung von Style-Vererbung ist, vom Stil in einigen äußeren vererben (wahrscheinlich von einem externen XAML-Datei zusammengefügt) Ressourcenverzeichnis.

Nebenbei bemerkt:

Zuerst habe ich naiv versucht, den impliziten Stil verwenden Sie die Style-Eigenschaft des Steuerelements auf diese äußeren Stil Ressource zu setzen (etwa mit der Taste „MyStyle“ definiert):

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

, die Visual Studio 2010 verursacht sofort herunterzufahren, mit katastrophalem Versagen Fehler (HRESULT: 0x8000FFFF (E_UNEXPECTED)), wie beschrieben unter https://connect.microsoft.com/VisualStudio/ Feedback / details / 753.211 / xAML-Editor-Fenster-nicht-mit-katastrophalen-Ausfall-when-a-style-Versuche-to-set-Stil-Eigenschaft #

Answer 7

Grid.ColumnSpacing Grid.RowSpacing StackPanel.Spacing sind jetzt auf UWP Vorschau, alle können acomplish verbessern, was hier gefordert wird.

Diese Eigenschaften sind derzeit nur mit dem Windows 10 Fall Creators Update-Insider SDK zur Verfügung, aber es sollte auf die letzten Bits machen!

Answer 8

Die Uniform möglicherweise nicht in Silverlight verfügbar sein, aber jemand hat es sich von WPF portiert. http://www.jeff.wilcox.name/2009/01/uniform -Grid /

Answer 9

Mein Ansatz erbt Stackpanel.

Verbrauch:

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

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

Answer 10

manchmal braucht man Padding zu setzen, nicht Margin Abstand zwischen den Elementen kleiner zu machen als default