WPF ListItem öğesinin bazı öğelerini hizalamak nasıl?

Question

Bir WPF liste kutum var ve temel olarak 3 sütun düzenine sahip olmak için liste öğesi veri şablonunu güncelledim.

isterim:

| durum rengi | isim | düğmeler |

Bunlar muhtemelen CSS terimleridir, ancak yaptığım soldaki durum rengini ve adını sollamak istiyorum, sonra düğmelerin sağa doğru kalacağını ve her zaman sağda kalmasını istiyorum. pencere genişler.

Çok yakın olduğumu hissediyorum, pencere genişlediğinde liste öğesi genişler büyür, tek yapmam gereken düğmelerin sağa doğru kalacağını söylemek ama nasıl olduğunu anlayamıyorum. Ben yığın panelleri, bir otomatik | * | otomatik sütun düzeni (son sütun üzerinde bir streç) ile bir ızgara denedim ve bir dockpanel denedim.

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

Ve başarmak için çalışıyorum ne bir görüntü: İşte

benim XAML var

Answer 1

sorun burada DataTemplate, aşağıdaki ilk düzeydedir:

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

Doğası gereği, StackPanel, öğeleri sola hizalar; bu nedenle, yapmak istediğiniz işe uygun bir düzen değildir. Bunun yerine sol sütun Width=* ve sağ Width=Auto veren iki sütunlu bir Izgara kullanmayı deneyin. senin ItemContainerStyle yılında

<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

, Stretch için HorizontalAlignment ayarlayın. Grid veya StackPanel'e veya daraltmak için kullandığınız konteynere neden olabilecek varsayılan olarak Sol olduğuna inanıyorum.