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

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

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

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

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

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

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

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

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

Оновлення

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

Йо можна встановити 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 використовуйте RelaPanel замість панелі стека та використовуйте

relapanel.alignrightwithpanel = "вірно"

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

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

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

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

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

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

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