---
title: "How to right align some elements of WPF ListItem?"  
description: "How to right align some elements of WPF ListItem?"  
author: "Anonymous User"  
published: 2013-08-16  
updated: 2013-08-17  
canonical: https://www.mindstick.com/forum/1381/how-to-right-align-some-elements-of-wpf-listitem  
category: "wpf"  
tags: ["wpf"]  
reading_time: 3 minutes  

---

# How to right align some elements of WPF ListItem?

Hi!

I have a WPF [listbox](https://www.mindstick.com/articles/626/listbox-events-in-c-dot-net) and have updated the list item [data template](https://www.mindstick.com/forum/23064/update-image-source-in-data-template-long-list-selector-wp8) to have essentially a 3 [column](https://www.mindstick.com/forum/33860/how-to-calculate-column-summary-in-sql-server) [layout](https://www.mindstick.com/articles/12853/android-layout-and-its-type).

I would like:

|[status](https://www.mindstick.com/articles/157184/check-lic-policy-status-online-by-policy-number) [color](https://www.mindstick.com/articles/77/how-to-split-form-background-color-in-c-sharp)|name| buttons|

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](https://www.mindstick.com/forum/161285/how-does-the-window-console-object-work-in-javascript) gets wider.

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](https://yourviews.mindstick.com/view/87536/what-are-ghosts-jobs-and-how-to-figure-out-them) 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.

Here's my 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>
```

Tanks in [advance](https://www.mindstick.com/blog/33258/jee-mains-and-jee-advance-exams)

## Replies

### Reply by shreesh chandra shukla

Hi!

The problem is at the first level below DataTemplate, here:

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

By its nature a StackPanel will align items to the left, so it's not a layout that's well suited to what you want to do. Instead try using a Grid with two columns, giving the left column Width=* and the right 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>
```


---

Original Source: https://www.mindstick.com/forum/1381/how-to-right-align-some-elements-of-wpf-listitem

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.