StackPanel의 자 요소를 띄우려면 어떻게 해야 합니까?

StackPanel의 자 요소를 띄우려면 어떻게 해야 합니까?

스택 패널 지정:

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

자 요소 자체의 크기는 다르지만 자 요소 간에 동일한 크기의 간격이 생기도록 간격을 두는 가장 좋은 방법은 무엇일까요?각각의 자녀에게 속성을 설정하지 않고 할 수 있습니까?

용기 내의 스코프에 적용된 여백 또는 패딩을 사용합니다.

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

편집: 두 컨테이너 사이의 여백을 재사용하려는 경우 여백 값을 외부 범위의 리소스로 변환할 수 있습니다.

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

그리고 나서 내부 스코프에서 이 값을 참조합니다.

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

또 다른 훌륭한 접근방식은 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 is breaked -> 이 링크의 웹 아카이브입니다.

다음과 같은 구문이 기능하도록 연결된 동작을 작성하는 방법을 보여 줍니다.

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

같은 타입이 아니더라도 패널 내의 여러 자녀에게 마진을 설정하는 가장 쉽고 빠른 방법입니다.(버튼, 텍스트 박스, 콤보 박스 등)

나는 Elad Katz의 대답을 향상시켰다.

• 마지막 항목을 특수하게 처리하기 위해 MarginSetter에 LastItemMargin 속성을 추가합니다.
• 수직 리스트와 수평 리스트의 항목 사이에 간격을 추가하고 리스트의 끝에 있는 후행 여백을 제거하는 수직 및 수평 속성을 사용하여 Spacing attached 속성 추가

소스코드는 GIST에 있습니다.

예:

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

정말 필요한 것은 모든 하위 요소를 랩하는 것입니다.이 경우 아이템 컨트롤을 사용해야 하며, 스타일링을 원하는 속성마다 백만 개의 아이템을 보유하게 되는 끔찍한 부착 속성에 의존해서는 안 됩니다.

<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은 세르게이 답입니다.모든 StackPanel에 이를 적용하려면 다음과 같이 하십시오.

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

단, App.xaml(또는 Application에 병합된 다른 사전)에서 이러한 스타일을 정의하는 경우에는 주의해야 합니다.리소스) 컨트롤의 기본 스타일을 재정의할 수 있습니다.스택 패널과 같은 외관이 없는 컨트롤에서는 문제가 되지 않습니다만, 텍스트 박스등의 경우는, 이 문제에 부딪힐 가능성이 있습니다.다만, 몇개의 회피책이 있습니다.

Sergey의 제안에 따라 단순히 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>

여기서 트릭은 암묵적인 스타일에 대해 스타일 상속을 사용하는 것입니다.이는 외부(아마 외부 XAML 파일에서 병합된) 리소스 사전의 스타일에서 상속됩니다.

사이드노트:

처음에는 암묵적인 스타일을 사용하여 컨트롤의 Style 속성을 외부 스타일 리소스("MyStyle" 키로 정의됨)로 설정하려고 했습니다.

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

이로 인해 https://connect.microsoft.com/VisualStudio/feedback/details/753211/xaml-editor-window-fails-with-catastrophic-failure-when-a-style-tries-to-set-style-property#에서 설명한 바와 같이 Visual Studio 2010이 즉시 셧다운되어 치명적인 실패 오류(HRESULT: 0x8000FFFFF (E_UNEXPECTED))가 발생하였습니다.

그리드.컬럼스페이스, 그리드.행 간격 지정, 스택 패널.이제 공백은 UWP 미리보기에 있습니다. 모두 여기서 요청한 내용을 더 잘 반영할 수 있습니다.

이러한 속성은 현재 Windows 10 Fall Creators Update Insider SDK에서만 사용할 수 있지만 마지막 비트까지 사용할 수 있습니다.

UniformGrid는 Silverlight에서 사용할 수 없을 수 있지만 누군가가 WPF에서 포팅했습니다.http://www.jeff.wilcox.name/2009/01/uniform-grid/

나의 접근 방식은 StackPanel을 계승한다.

사용방법:

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

필요한 것은 다음과 같은 짧은 수업뿐입니다.

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

저는 주로Grid대신StackPanel다음과 같습니다.

가로형 케이스

<Grid>
 <Grid.ColumnDefinitions>
    <ColumnDefinition Width="auto"/>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition  Width="auto"/>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition  Width="auto"/>
 </Grid.ColumnDefinitions>
 <TextBox Height="30" Grid.Column="0">Apple</TextBox>
 <TextBox Height="80" Grid.Column="2">Banana</TextBox>
 <TextBox Height="120" Grid.Column="4">Cherry</TextBox>
</Grid>

세로 대문자

<Grid>
     <Grid.ColumnDefinitions>
        <RowDefinition Width="auto"/>
        <RowDefinition Width="*"/>
        <RowDefinition  Width="auto"/>
        <RowDefinition Width="*"/>
        <RowDefinition  Width="auto"/>
     </Grid.ColumnDefinitions>
     <TextBox Height="30" Grid.Row="0">Apple</TextBox>
     <TextBox Height="80" Grid.Row="2">Banana</TextBox>
     <TextBox Height="120" Grid.Row="4">Cherry</TextBox>
</Grid>

항목 사이의 공간을 기본값보다 작게 만들기 위해 여백이 아닌 패딩을 설정해야 하는 경우가 있습니다.

언급URL : https://stackoverflow.com/questions/932510/how-do-i-space-out-the-child-elements-of-a-stackpanel