WPF ListItem के कुछ तत्वों को सही तरीके से संरेखित कैसे करें?

Question

मेरे पास एक WPF सूची बॉक्स है और अनिवार्य रूप से एक 3 कॉलम लेआउट रखने के लिए सूची आइटम डेटा टेम्पलेट अपडेट किया है।

मैं चाहूँगा:

| स्थिति रंग | नाम | बटन |

ये शायद सीएसएस शब्द हैं, लेकिन मैं स्थिति रंग और बाएं को बाईं ओर नामित करना चाहता हूं, जो मैंने किया है, तो मैं बटन को दाईं ओर फ़्लोट करना चाहता हूं, और हमेशा दाईं ओर रहना चाहता हूं खिड़की चौड़ी हो जाती है।

मुझे लगता है कि मैं बहुत करीब हूं, जब खिड़की चौड़ी हो जाती है तो सूची आइटम की चौड़ाई बढ़ जाती है, मुझे लगता है कि मुझे बस इतना करना है कि बटन सही फ्लोट करने के लिए कहें लेकिन यह पता नहीं लगा सकता कि कैसे। मैंने स्टैक पैनलों की कोशिश की है, एक ऑटो के साथ एक ग्रिड | * | ऑटो कॉलम लेआउट (अंतिम कॉलम पर एक खिंचाव के साथ) और मैंने एक डॉकपनेल की कोशिश की है।

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

और मैं क्या हासिल करने की कोशिश कर रहा हूँ की एक छवि:

यहाँ मेरी XAML है

Answer 1

समस्या नीचे DataTemplate, यहाँ पहली स्तर पर है:

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

इसकी प्रकृति से StackPanel बाईं ओर आइटम को संरेखित करेगा, इसलिए यह एक ऐसा लेआउट नहीं है जो आप करना चाहते हैं उसके लिए उपयुक्त है। इसके बजाय दो कॉलम के साथ ग्रिड का उपयोग करने का प्रयास करें, बाएं कॉलम 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 में, Stretch करने के लिए HorizontalAlignment निर्धारित किया है। मेरा मानना ​​है कि यह डिफ़ॉल्ट रूप से बाएं है, जो ग्रिड या स्टैकपैनेल या जो भी कंटेनर आप पतन के लिए उपयोग कर सकते हैं।