스택 패널에서 항목을 정렬 하시겠습니까?

가로 방향 StackPanel에 2 개의 컨트롤을 가질 수 있는지 궁금해서 오른쪽 항목을 StackPanel의 오른쪽에 도킹해야합니다.

다음을 시도했지만 작동하지 않았습니다.

<StackPanel Orientation="Horizontal">
    <TextBlock>Left</TextBlock>
    <Button Width="30" HorizontalAlignment="Right">Right<Button>
</StackPanel>

위의 스 니펫에서 버튼을 StackPanel의 오른쪽에 도킹하고 싶습니다.

참고 : Grid 등이 아닌 StackPanel로 수행해야합니다.

당신은 이것을 달성 할 수 있습니다 DockPanel:

<DockPanel Width="300">
    <TextBlock>Left</TextBlock>
    <Button HorizontalAlignment="Right">Right</Button>
</DockPanel>

차이점은 a StackPanel는 자식 요소를 세로 또는 가로 로 한 줄로 배열 하는 반면, a DockPanel는 자식 요소를 서로에 대해 가로 또는 세로로 배열 할 수있는 영역을 정의한다는 것입니다 ( Dock속성이 다른 요소에 비해 요소의 위치를 ​​변경 함) 와 같은 정렬 속성은 (예 : HorizontalAlignment부모 요소를 기준으로 요소의 위치를 ​​변경합니다.)

최신 정보

주석에서 지적했듯이의 FlowDirection속성을 사용할 수도 있습니다 StackPanel. @ D_Bester 's answer를 참조하십시오 .

요 설정된 수 FlowDirection의 Stack panel행 RightToLeft과 모든 항목이 우측으로 배향한다.

이 질문에 우연히 사람들을 위해, 여기 레이아웃을 달성하는 방법은 다음 과 를 Grid:

<Grid>
    <TextBlock Text="Server:"/>
    <TextBlock Text="http://127.0.0.1" HorizontalAlignment="Right"/>
</Grid>

창조

Server:                                                                   http://127.0.0.1

내가 원하는 방식으로 DockPanel을 사용 하여이 작업을 수행 할 수 없었고 StackPanel의 흐름 방향을 뒤집는 것은 번거 롭습니다. 그리드를 사용하는 것은 내부 항목이 런타임에 숨겨 질 수 있으므로 옵션이 아닙니다. 따라서 디자인 타임에 총 열 수를 알 수 없습니다. 내가 생각해 낼 수있는 가장 좋고 간단한 해결책은 다음과 같습니다.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <StackPanel Grid.Column="1" Orientation="Horizontal">
        <!-- Right aligned controls go here -->
    </StackPanel>
</Grid>

이로 인해 StackPanel 내부의 컨트롤은 디자인 및 런타임에 컨트롤 수에 관계없이 사용 가능한 공간의 오른쪽에 정렬됩니다. 예이! :)

이것은 나를 위해 완벽하게 작동합니다. 오른쪽에서 시작하기 때문에 버튼을 먼저 넣으십시오. FlowDirection이 문제가되면 주위에 StackPanel을 추가하고 해당 부분에 FlowDirection = "LeftToRight"를 지정하십시오. 또는 관련 컨트롤에 FlowDirection = "LeftToRight"를 지정하십시오.

<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" FlowDirection="RightToLeft">
    <Button Width="40" HorizontalAlignment="Right" Margin="3">Right</Button>
    <TextBlock Margin="5">Left</TextBlock>
    <StackPanel FlowDirection="LeftToRight">
        <my:DatePicker Height="24" Name="DatePicker1" Width="113" xmlns:my="http://schemas.microsoft.com/wpf/2008/toolkit" />    
    </StackPanel>
    <my:DatePicker FlowDirection="LeftToRight" Height="24" Name="DatePicker1" Width="113" xmlns:my="http://schemas.microsoft.com/wpf/2008/toolkit" />    
</StackPanel>

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <TextBlock Text="Left"  />
    <Button Width="30" Grid.Column="1" >Right</Button>
</Grid>

Windows 10의 경우 스택 패널 대신 relativePanel을 사용하고

relativepanel.alignrightwithpanel = "true"

포함 된 요소

레이블이 세로 스택 패널의 중앙에있는 것과 같은 문제가 발생하는 경우 전체 너비 컨트롤을 사용해야합니다. 너비 속성을 삭제하거나 내부 정렬을 허용하는 전체 너비 컨테이너에 단추를 넣으십시오. WPF는 컨테이너를 사용하여 레이아웃을 제어하는 ​​것입니다.

<StackPanel Orientation="Vertical">
    <TextBlock>Left</TextBlock>
    <DockPanel>
        <Button HorizontalAlignment="Right">Right</Button>
    </DockPanel>
</StackPanel>

왼쪽 레이블과 오른쪽 버튼이있는 세로 스택 패널

이게 도움이 되길 바란다.

하드 코딩 크기 값을 피해야하는 경우에는 원하는 것이 아니지만 때로는 "shim"(구분 기호)을 사용합니다.

<Separator Width="42"></Separator>