Вирівняти елементи на панелі стека?


148

Мені було цікаво, чи можу я мати два елементи управління в орієнтованому на горизонтальний StackPanel так, щоб правий елемент був приєднаний до правої частини StackPanel.

Я спробував таке, але нічого не вийшло:

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

У фрагменті вище я хочу, щоб кнопка була прив’язана до правої частини StackPanel.

Примітка. Мені потрібно це робити зі StackPanel, а не Grid тощо.


Ви чітко не згадуєте жодних сіток, але саме так я це і здійснив. Мені буде цікаво дізнатися, чи є хтось інший, який не відповідає сітці на ваше запитання, що відповідає моїм власним потребам.
JMD

так, я хтось просто дав мені проект, повний стекових панелей таким чином, ось він хоче, щоб це було виправлено.
Шиммі Вайцхандлер

3
Я знаю, що це (вкрай) пізно, але ти не міг би поставити докпанель в стекпанелі?
Кіан

1
@Kian, ти абсолютно правий у своєму коментарі, я сам про це подумав, спробував, і це спрацювало чудово.
Габрієлій

Відповіді:


221

Ви можете досягти цього за допомогою DockPanel:

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

Різниця полягає в тому, що а розташовує StackPanelдочірні елементи в одну лінію (вертикальну або горизонтальну), тоді як DockPanelвизначає область, де ви можете розташовувати дочірні елементи по горизонталі або вертикалі відносно один одного ( Dockвластивість змінює положення елемента відносно інших елементи в одному контейнері. Властивості вирівнювання, такі як, наприклад HorizontalAlignment, змінюють положення елемента щодо його батьківського елемента).

Оновлення

Як зазначено в коментарях, ви також можете використовувати FlowDirectionвластивість a StackPanel. Див @ D_Bester в відповідь .


1
це те, що я мав на увазі під «тощо» Я здогадуюсь, що відповідь "ні", і мені доведеться зробити це важким способом, читайте мій коментар до JMD вище
Shimmy Weitzhandler

Ну, StackPanel просто не може виконати потрібний макет. Сітка надасть вам найбільшу гнучкість, але перехід від StackPanel на DockPanel не здається надто складним.
Дірк Волмар

2
У Windows 8 немає ніяких інших рішень?
Крістоф

@DirkVollmar Насправді StackPanel працює досить добре, дивіться мою відповідь.
D_Bester

1
якщо ви хочете, щоб елемент вирівнювався якнайправіше, встановіть LastChildFill="False"це <DockPanel LastChildFill="False">, див. stackoverflow.com/a/9599290/4573839
yu yang Jian

68

Йо можна встановити FlowDirectionз Stack panelдо RightToLeft, а потім всі елементи будуть вирівняні до правої сторони.


3
Однак зауважте, що це змінює (повертає) порядок елементів керування в StackPanel.
rumblefx0

1
@slattery Якщо проблема FlowDirection просто помістіть в інший StackPanel і вкажіть FlowDirection. Дивіться мою відповідь.
D_Bester

1
@ rumblefx0: зауважте, DockPanel також змінює порядок елементів керування, якщо вони стиковані вправо або внизу. Це тому, що перший елемент управління, стикований спочатку.
Олів'є Якот-Дескомб

29

Для тих, хто стикається з цим питанням, ось як досягти цього макета за допомогою Grid:

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

творить

Server:                                                                   http://127.0.0.1

18

Не вдалося виконати цю роботу за допомогою 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. Дивіться мою відповідь.
D_Bester

Я думаю, що це набагато чистіше рішення, ніж возитися з вкладеними напрямками потоку
Росс

5

Це прекрасно працює для мене. Просто поставте кнопку спочатку, оскільки ви починаєте праворуч. Якщо 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>

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

0

для Windows 10 використовуйте RelaPanel замість панелі стека та використовуйте

relapanel.alignrightwithpanel = "вірно"

для містяться елементів.


0

Якщо у вас виникають проблеми, такі як у мене, де мітки були зосереджені на моїй вертикальній панелі стека, переконайтеся, що ви використовуєте елементи керування повної ширини. Видаліть властивість Width або покладіть кнопку в контейнер на повну ширину, який дозволяє внутрішнє вирівнювання. WPF - це використання контейнерів для управління компонуванням.

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

Вертикальний StackPanel з лівою міткою, а потім правою кнопкою

Я сподіваюся, що це допомагає.


-8

Можливо, не те, що ви хочете, якщо вам потрібно уникати значень розміру жорсткого кодування, але іноді я використовую для цього "shim" (роздільник):

<Separator Width="42"></Separator>
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.