programing

스택 패널에서 항목 정렬?

easyjava 2023. 5. 4. 20:41
반응형

스택 패널에서 항목 정렬?

수평 지향 스택 패널에 두 개의 컨트롤을 사용하여 올바른 항목이 스택 패널 오른쪽에 도킹되도록 할 수 있는지 궁금합니다.

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

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

위의 스니펫에서 버튼을 스택 패널의 오른쪽에 도킹합니다.

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

다음을 통해 이를 달성할 수 있습니다.DockPanel:

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

차이점은 A가 하위 요소를 단일 선(수직 또는 수평)으로 정렬하는 반면, A는 하위 요소를 서로 상대적으로 수평 또는 수직으로 정렬할 수 있는 영역을 정의한다는 것입니다.Dock속성은 동일한 컨테이너 내의 다른 요소와 상대적으로 요소의 위치를 변경합니다.선형 특성:HorizontalAlignment상위 요소를 기준으로 요소의 위치를 변경합니다.

갱신하다

코멘트에서 지적된 바와 같이, 당신은 또한 사용할 수 있습니다.FlowDirection의 특성StackPanel@D_Better의 답변을 참조하십시오.

설정 가능FlowDirectionStack 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>

이렇게 하면 스택 패널 내부의 컨트롤이 설계 및 런타임 시 컨트롤 수에 관계없이 사용 가능한 공간의 오른쪽에 정렬됩니다.야호! :)

이것은 저에게 딱 맞습니다.오른쪽부터 시작하니까 버튼을 먼저 누르시면 됩니다.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>

수직 스택 패널에서 레이블이 중앙에 있는 경우와 같은 문제가 발생하면 전체 너비 컨트롤을 사용해야 합니다.Width 속성을 삭제하거나 버튼을 내부 정렬이 가능한 전체 너비 컨테이너에 넣습니다.WPF는 컨테이너를 사용하여 레이아웃을 제어하는 것입니다.

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

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

이것이 도움이 되길 바랍니다.

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

relativepanel.panel="true"와 오른쪽 정렬

포함된 요소에 대해.

하드 코딩 크기 값을 피해야 하는 경우에는 원하는 것이 아닐 수도 있지만, 가끔 다음과 같은 경우에는 "심"( 구분 기호)을 사용합니다.

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

언급URL : https://stackoverflow.com/questions/2023201/align-items-in-a-stack-panel

반응형