Bagaimana cara memisahkan elemen anak dari StackPanel?

Diberikan StackPanel:

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

Apa cara terbaik untuk memisahkan elemen-elemen anak sehingga ada celah yang berukuran sama di antara mereka, meskipun elemen-elemen anak itu sendiri memiliki ukuran yang berbeda? Bisakah itu dilakukan tanpa menetapkan properti pada masing-masing anak?

Gunakan Margin atau Padding, diterapkan pada ruang lingkup dalam wadah:

<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: Jika Anda ingin menggunakan kembali margin antara dua kontainer, Anda dapat mengkonversi nilai margin ke sumber daya dalam lingkup luar,

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

dan kemudian merujuk pada nilai ini di lingkup dalam

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

Pendekatan lain yang bagus bisa dilihat di sini: http://blogs.microsoft.co.il/blogs/eladkatz/archive/2011/05/29/what-is-the-easiest-way-to-set-spacing-between- items-in-stackpanel.aspx Tautan rusak -> ini adalah webarchive dari tautan ini.

Ini menunjukkan cara membuat perilaku terlampir, sehingga sintaksis seperti ini berfungsi:

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

Ini adalah cara termudah & tercepat untuk mengatur Margin ke beberapa anak panel, bahkan jika mereka tidak dari jenis yang sama. (Yaitu Tombol, Kotak Teks, Kotak Kombo, dll.)

Saya memperbaiki jawaban Elad Katz .

• Tambahkan properti LastItemMargin ke MarginSetter untuk menangani item terakhir secara khusus
• Tambahkan Spacing properti terlampir dengan properti Vertikal dan Horizontal yang menambahkan spasi antara item dalam daftar vertikal dan horizontal dan menghilangkan margin trailing di akhir daftar

Kode sumber dalam inti .

Contoh:

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

Hal yang benar-benar ingin Anda lakukan adalah membungkus semua elemen anak. Dalam hal ini Anda harus menggunakan kontrol item dan tidak menggunakan properti terlampir yang mengerikan yang pada akhirnya Anda akan memiliki jutaan properti yang ingin Anda ciptakan.

<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 untuk jawaban Sergey. Dan jika Anda ingin menerapkannya pada semua StackPanels Anda, Anda dapat melakukan ini:

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

Namun berhati-hatilah: jika Anda mendefinisikan gaya seperti ini di App.xaml Anda (atau kamus lain yang digabungkan ke dalam Aplikasi. Sumber) itu dapat mengganti gaya default kontrol. Untuk sebagian besar kontrol yang tidak terlihat seperti stackpanel itu bukan masalah, tetapi untuk kotak teks dll Anda mungkin menemukan masalah ini , yang untungnya memiliki beberapa solusi.

Menindaklanjuti saran Sergey, Anda dapat menentukan dan menggunakan kembali seluruh Gaya (dengan berbagai setter properti, termasuk Margin) alih-alih hanya objek Ketebalan:

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

Perhatikan bahwa trik di sini adalah penggunaan Style Inheritance untuk style implisit, yang diturunkan dari style di kamus sumber daya luar (mungkin digabung dari file XAML eksternal).

Sidenote:

Pada awalnya, saya secara naif mencoba menggunakan gaya implisit untuk mengatur properti Style dari kontrol ke sumber daya Style luar (katakanlah didefinisikan dengan kunci "MyStyle"):

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

yang menyebabkan Visual Studio 2010 segera ditutup dengan kesalahan CATASTROPHIC FAILURE (HRESULT: 0x8000FFFF (E_UNEXPECTED)), seperti yang dijelaskan di https://connect.microsoft.com/VisualStudio/feedback/details/753211/xaml-editor-window-fails -dengan-bencana-kegagalan-ketika-gaya-mencoba-untuk-mengatur-gaya-properti #

Grid.ColumnSpacing , Grid.RowSpacing , StackPanel.Spacing sekarang di pratinjau UWP, semua akan memungkinkan untuk lebih memahami apa yang diminta di sini.

Properti ini saat ini hanya tersedia dengan Windows 10 Fall Creators Update Insider SDK, tetapi harus membuatnya ke bit akhir!

UniformGrid mungkin tidak tersedia di Silverlight, tetapi seseorang telah porting dari WPF. http://www.jeff.wilcox.name/2009/01/uniform-grid/

Pendekatan saya mewarisi StackPanel.

Pemakaian:

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

Yang dibutuhkan hanyalah kelas pendek berikut:

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

terkadang Anda perlu mengatur Padding, bukan Margin untuk membuat ruang antar item lebih kecil dari standar