如何右对齐 WPF ListItem 的某些元素？

Question

我有一个 WPF 列表框，并且更新了列表项数据模板，使其基本上具有 3 列布局。

我想要：

|状态颜色|名称|按钮|

这些可能是 CSS 术语，但我想将状态颜色和名称浮动到左侧，我已经完成了，然后我希望按钮浮动到右侧，并且始终保持在右侧，即使窗口变宽了。

我觉得我很接近，当窗口变宽时列表项的宽度会增加，我觉得我所要做的就是告诉按钮向右浮动，但不知道如何。我试过堆栈面板，一个带有 auto|*|auto 列布局的网格（最后一列有一个拉伸），我试过一个停靠面板。

这是我的 XAML：

    <Controls:MetroWindow x:Class="Appsecute.Views.MainView2"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
        xmlns:AppsecuteControls="clr-namespace:Appsecute.Controls"
        Title="APPSECUTE" Height="630" Width="480" Icon="/Appsecute;component/Images/icon.png" WindowStartupLocation="CenterScreen">

    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colours.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.AnimatedSingleRowTabControl.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro.Resources;component/Icons.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>

    <Grid Margin="0,0,12,0">
        <AppsecuteControls:NotifyIcon
            x:Name="NotifyIcon"
            Text="Appsecute"
            Icon="/Images/icon.ico" MouseDoubleClick="NotifyIconMouseDoubleClick" Grid.ColumnSpan="2">
            <AppsecuteControls:NotifyIcon.ContextMenu>
                <ContextMenu StaysOpen="False">
                </ContextMenu>
            </AppsecuteControls:NotifyIcon.ContextMenu>
        </AppsecuteControls:NotifyIcon>

        <Grid Height="auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="auto" Margin="12,0,0,24">
            <Grid.RowDefinitions>
                <RowDefinition Height="auto" />
                <RowDefinition Height="*" />
                <RowDefinition Height="auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <Label Content="APPLICATIONS" Height="auto" Name="LabelApplications" Grid.Row="0" Padding="2" Margin="0,8,0,0" VerticalAlignment="Top" />
            <ListBox Height="auto" Name="ListBoxApplications" Width="auto" Grid.Row="1" Grid.ColumnSpan="3" Focusable="False" Background="White" BorderBrush="{x:Null}" SelectionChanged="ListBoxApplicationsSelectionChanged">
                <ListBox.ItemContainerStyle>
                    <Style TargetType="{x:Type ListBoxItem}">
                        <Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
                        <Setter Property="Padding" Value="0"></Setter>
                        <Setter Property="Background" Value="#EEEEEE"></Setter>
                        <Setter Property="BorderBrush" Value="White"></Setter>
                        <Setter Property="BorderThickness" Value="0,0,0,2"></Setter>
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="BorderBrush" Value="#FF4EA6EA"></Setter>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </ListBox.ItemContainerStyle>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>

                            <StackPanel Grid.Column="0" Orientation="Horizontal">
                                <Rectangle Fill="{Binding StateColor}" Width="5" Height="auto" Margin="0,0,5,0"></Rectangle>
                                <StackPanel Orientation="Vertical">
                                    <StackPanel Orientation="Horizontal" Margin="0,4,0,0">
                                        <TextBlock Text="{Binding DisplayName}" FontSize="20" Padding="2" />
                                    </StackPanel>
                                    <StackPanel Orientation="Horizontal" Margin="0,4">
                                        <TextBlock Text="{Binding CloudName}" FontSize="12" Foreground="#FF666666" />
                                        <TextBlock Text=" - " FontSize="12" Foreground="#FF666666" />
                                        <TextBlock Text="{Binding Username}" FontSize="12" Foreground="#FF666666" />
                                    </StackPanel>
                                </StackPanel>
                            </StackPanel>

                            <DockPanel Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Right">
                                <Button Background="{x:Null}" BorderBrush="{x:Null}" Focusable="False" Tag="{Binding}" Name="ButtonUpload" ToolTip="Upload Application" Click="ButtonUploadClick">
                                    <StackPanel>
                                        <Image Width="24" Height="24" Source="/Appsecute;component/Images/upload.png"/>
                                    </StackPanel>
                                </Button>
                                <Button Background="{x:Null}" BorderBrush="{x:Null}" Focusable="False" Tag="{Binding}" Name="ButtonStart" Click="ButtonStartClick" ToolTip="Start Application" IsEnabled="{Binding IsStopped}">
                                    <StackPanel>
                                        <Image Width="24" Height="24" Source="/Appsecute;component/Images/play.png" />
                                    </StackPanel>
                                </Button>
                                <Button Background="{x:Null}" BorderBrush="{x:Null}" Focusable="False" Tag="{Binding}" Name="ButtonStop" ToolTip="Stop Application" Click="ButtonStopClick" IsEnabled="{Binding IsStarted}">
                                    <StackPanel>
                                        <Image Width="24" Height="24" Source="/Appsecute;component/Images/stop.png"/>
                                    </StackPanel>
                                </Button>
                                <Button Background="{x:Null}" BorderBrush="{x:Null}" Focusable="False" Click="ButtonRestartClick" Tag="{Binding}" Name="ButtonRestart" ToolTip="Restart Application">
                                    <StackPanel>
                                        <Image Width="24" Height="24" Source="/Appsecute;component/Images/restart.png"/>
                                    </StackPanel>
                                </Button>
                            </DockPanel>
                        </Grid>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
            <Label Content="SERVICE INSTANCES" Height="auto" Name="LabelServiceInstances" Grid.Row="2" Grid.ColumnSpan="3" Padding="2" Margin="0,8,0,0" VerticalAlignment="Top" />
            <ListBox Height="auto" Name="ListBoxServiceInstances" Width="auto" Grid.Row="3" Grid.RowSpan="2" Grid.ColumnSpan="3" />
        </Grid>
        <Label Height="28" HorizontalAlignment="Left" Margin="0,0,0,0" Name="LabelStatus" VerticalAlignment="Bottom" Width="auto" VerticalContentAlignment="Bottom" HorizontalContentAlignment="Stretch" FontSize="10" />
    </Grid>
</Controls:MetroWindow>

以及我正在努力实现的目标的图像：

Answer 1

问题出在第一层下面DataTemplate，这里：

<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">

就其性质而言，StackPanel 会将项目向左对齐，因此它不是一个非常适合您想要做的布局。而是尝试使用具有两列的 Grid，给出左列 Width=* 和右列 Width=Auto。

<ListBox HorizontalContentAlignment="Stretch">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <StackPanel Grid.Column="0" Orientation="Vertical">
                    ...
                </StackPanel>
                <DockPanel Grid.Column="1" VerticalAlignment="Center">
                    ...
                </DockPanel>
            </Grid>
        <DataTemplate>
    </ListBox.ItemTemplate>
<ListBox>

Answer 2

在您的ItemContainerStyle 中，将HorizontalAlignment 设置为Stretch。我相信它默认是 Left，这可能会导致 Grid 或 StackPanel 或您使用的任何容器崩溃。