Come distacco gli elementi figlio di uno StackPanel?

Dato uno StackPanel:

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

Qual è il modo migliore per distanziare gli elementi figlio in modo che vi siano spazi uguali tra loro, anche se gli elementi figlio stessi sono di dimensioni diverse? Può essere fatto senza impostare le proprietà su ciascuno dei singoli bambini?

Usa margine o riempimento, applicato all'ambito all'interno del contenitore:

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

MODIFICA: Nel caso in cui si desideri riutilizzare il margine tra due contenitori, è possibile convertire il valore del margine in una risorsa in un ambito esterno, fe

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

e quindi fare riferimento a questo valore nell'ambito interno

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

Un altro bell'approccio può essere visto qui: http://blogs.microsoft.co.il/blogs/eladkatz/archive/2011/05/29/what-is-the-easiest-way-to-set-spacing-b Between- items-in-stackpanel.aspx Il link è interrotto -> questo è il webarchive di questo link.

Mostra come creare un comportamento associato, in modo che la sintassi come questa funzioni:

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

Questo è il modo più semplice e veloce per impostare il margine su diversi figli di un pannello, anche se non sono dello stesso tipo. (Vale a dire pulsanti, caselle di testo, caselle combinate, ecc.)

Ho migliorato la risposta di Elad Katz .

• Aggiungi la proprietà LastItemMargin a MarginSetter per gestire in modo speciale l'ultimo elemento
• Aggiungi la proprietà Spaziatura collegata con le proprietà Verticale e Orizzontale che aggiunge la spaziatura tra gli elementi negli elenchi verticale e orizzontale ed elimina qualsiasi margine finale alla fine dell'elenco

Codice sorgente in sintesi .

Esempio:

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

La cosa che vuoi veramente fare è avvolgere tutti gli elementi figlio. In questo caso dovresti usare un controllo degli oggetti e non ricorrere a orribili proprietà annesse che finirai per avere un milione di per ogni proprietà che desideri stile.

<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 per la risposta di Sergey. E se vuoi applicarlo a tutti i tuoi StackPanel puoi farlo:

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

Ma attenzione: se si definisce uno stile come questo nel proprio App.xaml (o in un altro dizionario che viene unito in Application.Resources), può sovrascrivere lo stile predefinito del controllo. Per i controlli per lo più privi di aspetto come lo stackpanel non è un problema, ma per le caselle di testo ecc. Potresti imbatterti in questo problema , che fortunatamente ha alcune soluzioni alternative.

Seguendo il suggerimento di Sergey, puoi definire e riutilizzare un intero stile (con vari setter di proprietà, incluso il margine) invece di un solo oggetto 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>

Si noti che il trucco qui è l'uso di Style Inheritance per lo stile implicito, che eredita dallo stile in un dizionario delle risorse esterno (probabilmente unito da un file XAML esterno).

Nota a margine:

Inizialmente, ho cercato ingenuamente di usare lo stile implicito per impostare la proprietà Style del controllo su quella risorsa Style esterna (diciamo definita con la chiave "MyStyle"):

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

che ha causato la chiusura immediata di Visual Studio 2010 con errore CATASTROPHIC FAILURE (HRESULT: 0x8000FFFF (E_UNEXPECTED)), come descritto in https://connect.microsoft.com/VisualStudio/feedback/details/753211/xaml-editor-window-fails -con-catastrofica-fallimento-quando-a-style-cerca-to-set-style-proprietà #

Grid.ColumnSpacing , Grid.RowSpacing , StackPanel.Spacing sono ora in anteprima UWP, tutti consentiranno di realizzare meglio ciò che è richiesto qui.

Queste proprietà sono attualmente disponibili solo con Windows 10 Fall Creators Update Insider SDK, ma dovrebbero arrivare ai bit finali!

UniformGrid potrebbe non essere disponibile in Silverlight, ma qualcuno l'ha portato da WPF. http://www.jeff.wilcox.name/2009/01/uniform-grid/

Il mio approccio eredita StackPanel.

Uso:

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

Tutto ciò che serve è la seguente breve classe:

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

a volte è necessario impostare Riempimento, non Margine per rendere lo spazio tra gli elementi più piccolo del valore predefinito