Comment espacer les éléments enfants d'un StackPanel?

Question

donné une StackPanel:

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

Quelle est la meilleure façon d'espacer les éléments de l'enfant afin qu'il existe des lacunes de taille égale entre eux, même si les éléments enfants eux-mêmes sont de tailles différentes? Peut-il être fait sans définir des propriétés sur chacun des enfants individuels?

Answer 1

Utiliser la marge ou Rembourrage, appliqués à la portée dans le conteneur:

<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: Si vous voulez réutiliser la marge entre deux conteneurs, vous pouvez convertir la valeur de la marge à un ressource dans une portée externe, fe

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

puis se référer à cette valeur dans le champ intérieur

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

Answer 2

Il se peut que UniformGrid ne soit pas disponible dans Silverlight, mais que quelqu'un l'ait porté depuis WPF. http://www.jeff.wilcox.name/2009/01/uniform-grid/

Answer 3

+1 pour la réponse de Sergey. Et si vous voulez l'appliquer à tous vos StackPanels vous pouvez le faire:

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

Mais méfiez-vous: si vous définissez un style comme celui-ci dans votre App.xaml (ou un autre dictionnaire qui est fusionné dans l'application .Resources) peut remplacer le style par défaut du contrôle. Pour des contrôles presque sans apparence comme le panneau de pile, ce n'est pas un problème, mais pour les boîtes de texte, etc., vous pouvez tomber sur this problem, qui a heureusement quelques solutions de contournement.

Answer 4

Une autre approche agréable peut être vu ici: http://blogs.microsoft.co.il/blogs/eladkatz/archive/2011/05/29/what-is-the-easiest-way-to-set-spacing-between-items-in-stackpanel.aspx

Il montre comment créer un comportement attaché, de sorte que la syntaxe comme cela fonctionne:

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

C'est le & plus facile la plus rapide de Définissez la marge sur plusieurs enfants d'un panneau, même s'ils ne sont pas du même type. (boutons Ie, TextBoxes, ComboBoxes, etc.)

Answer 5

Faisant suite à la suggestion de Sergey, vous pouvez définir et réutiliser un ensemble de style (avec divers setters de propriété, y compris la marge) au lieu d'un objet Epaisseur:

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

Notez que l'astuce ici est l'utilisation du style héritage pour le style implicite, héritant du style dans certains (probablement fusionné à partir du fichier XAML externe) externe dictionnaire de ressources.

Sidenote:

Au début, je naïvement essayé d'utiliser le style implicite pour définir la propriété Style du contrôle de cette ressource de style externe (par exemple défini avec la touche « MyStyle »):

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

qui a causé Visual studio 2010 pour arrêter immédiatement avec l'erreur CATASTROPHIQUE PANNE (HRESULT: 0x8000FFFF (E_UNEXPECTED)), comme décrit parfois à https://connect.microsoft.com/VisualStudio/feedback/details/753211/xaml-editor-window-fails-with-catastrophic-failure-when-a-style-tries-to-set-style-property#

Answer 6

vous devez définir Rembourrage, pas Marge pour faire de l'espace entre les éléments plus petits que la valeur par défaut

Answer 7

J'ai amélioré le Elad Katz' answer.

• Ajouter une propriété LastItemMargin à MarginSetter pour traiter spécialement le dernier élément
• Ajouter Espacement propriété attachée avec verticale et les propriétés horizontales qui ajoute l'espacement entre les éléments dans les listes verticales et horizontales et élimine toute marge de fuite à la fin de la liste

Source code in gist.

Exemple:

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

La chose que vous voulez vraiment faire est envelopper tous les éléments enfants. Dans ce cas, vous devez utiliser un contrôle des éléments et ne pas avoir recours à des propriétés attachées horribles que vous finirez par avoir un million de pour chaque propriété que vous souhaitez styler.

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

Mon approche StackPanel hérite.

Utilisation:

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

Tout ce qui est nécessaire est court la classe suivante:

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

Grid.ColumnSpacing, Grid.RowSpacing, StackPanel.Spacing sont maintenant aperçu UWP, tout permettra de mieux acomplish ce qui est demandé ici .

Ces propriétés sont actuellement disponibles uniquement avec le Kit de développement Windows Embedded Update Insider de Windows 10, mais devraient atteindre les derniers bits!