Home > DeveloperSection > Forums > How to right align some elements of WPF ListItem?
jacob rasel
jacob rasel

Total Post:88

Points:616
Posted on    August-16-2013 6:02 AM

 WPF WPF 
Ratings:


 1 Reply(s)
 3019  View(s)
Rate this:
Hi!

I have a WPF listbox and have updated the list item data template to have essentially a 3 column layout.

I would like:

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



shreesh chandra shukla
shreesh chandra shukla

Total Post:105

Points:735
Posted on    August-17-2013 7:00 AM

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>


Don't want to miss updates? Please click the below button!

Follow MindStick