Databases
StackOverflow2013
Postsdbo
POHow to right align some elements of WPF ListItem?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to right align some elements of WPF ListItem?
    text
    copied!<p>I have a WPF listbox and have updated the list item data template to have essentially a 3 column layout.</p> <p>I would like:</p> <p>|status color|name| buttons|</p> <p>These are probably CSS terms but I want to float the status color and name to the left, which I've done, then I would like the buttons to be floated to the right, and always stay to the right even as the window gets wider.</p> <p>I feel like I'm so close, the list item widths grow when the window gets wider, all I feel I have to do is tell the buttons to float right but can't figure out how. I've tried stack panels, a grid with a auto|*|auto column layout (With a stretch on the last column) and I've tried a dockpanel.</p> <p>Here's my XAML:</p> <pre><code> &lt;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"&gt; &lt;Window.Resources&gt; &lt;ResourceDictionary&gt; &lt;ResourceDictionary.MergedDictionaries&gt; &lt;ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colours.xaml" /&gt; &lt;ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" /&gt; &lt;ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" /&gt; &lt;ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.AnimatedSingleRowTabControl.xaml" /&gt; &lt;ResourceDictionary Source="pack://application:,,,/MahApps.Metro.Resources;component/Icons.xaml" /&gt; &lt;ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" /&gt; &lt;ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" /&gt; &lt;/ResourceDictionary.MergedDictionaries&gt; &lt;/ResourceDictionary&gt; &lt;/Window.Resources&gt; &lt;Grid Margin="0,0,12,0"&gt; &lt;AppsecuteControls:NotifyIcon x:Name="NotifyIcon" Text="Appsecute" Icon="/Images/icon.ico" MouseDoubleClick="NotifyIconMouseDoubleClick" Grid.ColumnSpan="2"&gt; &lt;AppsecuteControls:NotifyIcon.ContextMenu&gt; &lt;ContextMenu StaysOpen="False"&gt; &lt;/ContextMenu&gt; &lt;/AppsecuteControls:NotifyIcon.ContextMenu&gt; &lt;/AppsecuteControls:NotifyIcon&gt; &lt;Grid Height="auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="auto" Margin="12,0,0,24"&gt; &lt;Grid.RowDefinitions&gt; &lt;RowDefinition Height="auto" /&gt; &lt;RowDefinition Height="*" /&gt; &lt;RowDefinition Height="auto" /&gt; &lt;RowDefinition Height="*" /&gt; &lt;/Grid.RowDefinitions&gt; &lt;Label Content="APPLICATIONS" Height="auto" Name="LabelApplications" Grid.Row="0" Padding="2" Margin="0,8,0,0" VerticalAlignment="Top" /&gt; &lt;ListBox Height="auto" Name="ListBoxApplications" Width="auto" Grid.Row="1" Grid.ColumnSpan="3" Focusable="False" Background="White" BorderBrush="{x:Null}" SelectionChanged="ListBoxApplicationsSelectionChanged"&gt; &lt;ListBox.ItemContainerStyle&gt; &lt;Style TargetType="{x:Type ListBoxItem}"&gt; &lt;Setter Property="HorizontalAlignment" Value="Stretch"&gt;&lt;/Setter&gt; &lt;Setter Property="Padding" Value="0"&gt;&lt;/Setter&gt; &lt;Setter Property="Background" Value="#EEEEEE"&gt;&lt;/Setter&gt; &lt;Setter Property="BorderBrush" Value="White"&gt;&lt;/Setter&gt; &lt;Setter Property="BorderThickness" Value="0,0,0,2"&gt;&lt;/Setter&gt; &lt;Style.Triggers&gt; &lt;Trigger Property="IsMouseOver" Value="True"&gt; &lt;Setter Property="BorderBrush" Value="#FF4EA6EA"&gt;&lt;/Setter&gt; &lt;/Trigger&gt; &lt;/Style.Triggers&gt; &lt;/Style&gt; &lt;/ListBox.ItemContainerStyle&gt; &lt;ListBox.ItemTemplate&gt; &lt;DataTemplate&gt; &lt;Grid&gt; &lt;Grid.ColumnDefinitions&gt; &lt;ColumnDefinition Width="*" /&gt; &lt;ColumnDefinition Width="Auto" /&gt; &lt;/Grid.ColumnDefinitions&gt; &lt;StackPanel Grid.Column="0" Orientation="Horizontal"&gt; &lt;Rectangle Fill="{Binding StateColor}" Width="5" Height="auto" Margin="0,0,5,0"&gt;&lt;/Rectangle&gt; &lt;StackPanel Orientation="Vertical"&gt; &lt;StackPanel Orientation="Horizontal" Margin="0,4,0,0"&gt; &lt;TextBlock Text="{Binding DisplayName}" FontSize="20" Padding="2" /&gt; &lt;/StackPanel&gt; &lt;StackPanel Orientation="Horizontal" Margin="0,4"&gt; &lt;TextBlock Text="{Binding CloudName}" FontSize="12" Foreground="#FF666666" /&gt; &lt;TextBlock Text=" - " FontSize="12" Foreground="#FF666666" /&gt; &lt;TextBlock Text="{Binding Username}" FontSize="12" Foreground="#FF666666" /&gt; &lt;/StackPanel&gt; &lt;/StackPanel&gt; &lt;/StackPanel&gt; &lt;DockPanel Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Right"&gt; &lt;Button Background="{x:Null}" BorderBrush="{x:Null}" Focusable="False" Tag="{Binding}" Name="ButtonUpload" ToolTip="Upload Application" Click="ButtonUploadClick"&gt; &lt;StackPanel&gt; &lt;Image Width="24" Height="24" Source="/Appsecute;component/Images/upload.png"/&gt; &lt;/StackPanel&gt; &lt;/Button&gt; &lt;Button Background="{x:Null}" BorderBrush="{x:Null}" Focusable="False" Tag="{Binding}" Name="ButtonStart" Click="ButtonStartClick" ToolTip="Start Application" IsEnabled="{Binding IsStopped}"&gt; &lt;StackPanel&gt; &lt;Image Width="24" Height="24" Source="/Appsecute;component/Images/play.png" /&gt; &lt;/StackPanel&gt; &lt;/Button&gt; &lt;Button Background="{x:Null}" BorderBrush="{x:Null}" Focusable="False" Tag="{Binding}" Name="ButtonStop" ToolTip="Stop Application" Click="ButtonStopClick" IsEnabled="{Binding IsStarted}"&gt; &lt;StackPanel&gt; &lt;Image Width="24" Height="24" Source="/Appsecute;component/Images/stop.png"/&gt; &lt;/StackPanel&gt; &lt;/Button&gt; &lt;Button Background="{x:Null}" BorderBrush="{x:Null}" Focusable="False" Click="ButtonRestartClick" Tag="{Binding}" Name="ButtonRestart" ToolTip="Restart Application"&gt; &lt;StackPanel&gt; &lt;Image Width="24" Height="24" Source="/Appsecute;component/Images/restart.png"/&gt; &lt;/StackPanel&gt; &lt;/Button&gt; &lt;/DockPanel&gt; &lt;/Grid&gt; &lt;/DataTemplate&gt; &lt;/ListBox.ItemTemplate&gt; &lt;/ListBox&gt; &lt;Label Content="SERVICE INSTANCES" Height="auto" Name="LabelServiceInstances" Grid.Row="2" Grid.ColumnSpan="3" Padding="2" Margin="0,8,0,0" VerticalAlignment="Top" /&gt; &lt;ListBox Height="auto" Name="ListBoxServiceInstances" Width="auto" Grid.Row="3" Grid.RowSpan="2" Grid.ColumnSpan="3" /&gt; &lt;/Grid&gt; &lt;Label Height="28" HorizontalAlignment="Left" Margin="0,0,0,0" Name="LabelStatus" VerticalAlignment="Bottom" Width="auto" VerticalContentAlignment="Bottom" HorizontalContentAlignment="Stretch" FontSize="10" /&gt; &lt;/Grid&gt; &lt;/Controls:MetroWindow&gt; </code></pre> <p>And an image of what I'm trying to achieve:</p> <p><img src="https://i.stack.imgur.com/MoixO.png" alt="enter image description here"></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload