Làm thế nào để căn chỉnh một số yếu tố của WPF ListItem?

Question

Tôi có một hộp danh sách WPF và đã cập nhật mẫu dữ liệu mục danh sách để có cơ bản bố cục 3 cột.

Tôi muốn:

| status color | name | nút |

Đây có thể là các thuật ngữ CSS nhưng tôi muốn tô màu trạng thái và tên ở bên trái, mà tôi đã làm, sau đó tôi muốn các nút được thả sang bên phải và luôn ở bên phải ngay cả khi cửa sổ rộng hơn.

Tôi cảm thấy mình rất gần, chiều rộng mục danh sách phát triển khi cửa sổ rộng hơn, tất cả những gì tôi cảm thấy tôi phải làm là báo các nút để trôi nổi nhưng không thể tìm ra cách. Tôi đã cố gắng ngăn xếp bảng, một lưới với một auto | * | auto cột bố trí (Với một căng trên cột cuối cùng) và tôi đã thử một dockpanel.

Dưới đây là XAML của tôi:

<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> 

Và một hình ảnh của những gì tôi đang cố gắng để đạt được:

Answer 1

Vấn đề là ở cấp đầu tiên dưới đây DataTemplate, ở đây:

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

Bản chất của nó là StackPanel sẽ căn chỉnh các mục ở bên trái, vì vậy nó không phải là bố cục phù hợp với những gì bạn muốn làm. Thay vào đó, hãy thử sử dụng Lưới với hai cột, cho cột bên trái Width=* và bên phải 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

Trong ItemContainerStyle của bạn, đặt HorizontalAlignment-Stretch. Tôi tin rằng nó là trái theo mặc định, có thể gây ra Grid hoặc StackPanel hoặc bất kỳ container bạn sử dụng để sụp đổ.