Question

var a1 = “HEL”;
var a2 = “HELLO”;
var a3 = “LLO”;
var length = a2.Length+5;

        listbox.Items.Add(a1.PadRight(length) +"End");
        listbox.Items.Add(a2.PadRight(length) + "End");
        listbox.Items.Add(a3.PadRight(length) + "End");

I have code like this to obviously pad all text so that the word End lines up.

The problem is I have to change the font from the wpf listbox from Segoe UI to Courier New to have this work. The rest of my app uses Segoe UI, so I think it looks weird here.

Is there any way to achieve the result with Segoe UI or maybe a similar font with correct spacing I could use, or maybe someone has some other smart solution i haven’t even thought of? 🙂

Thanks

edit

at the end of the day I want this to display to related items like this:

ITEM A    -> ITEM B
ITEM X    -> ITEM Y
ITEM C    -> ITEM E

dont want to use gridview.

Answer 1

Feed the ListBox the two pieces of data separately, and use a data template. Here’s how.

First, create a little class to represent each item you want to insert:

public class WordPair {
  public string First { get; set; }
  public string Second { get; set; }
}

(You probably already have a suitable class and/or collection in your application — I assume those pairs of strings are coming from somewhere!)

Second, set your ListBox.ItemsSource to a collection of these things:

listBox.ItemsSource = new List<WordPair> {
  new WordPair { First = "ITEM A", Second = "ITEM B" },
  new WordPair { First = "ITEM X", Second = "ITEM Y" },
};

Again, this collection may already exist in your app.

Third, create a DataTemplate specifying the desired layout, and assign it to your ListBox.ItemTemplate:

<!-- in your Window.Resources section -->
<DataTemplate x:Key="AlignedPairs">
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="Auto" />
      <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <TextBlock Text="{Binding First}" Grid.Column="0" />
    <TextBlock Text="->" TextAlignment="Center" Grid.Column="1" />
    <TextBlock Text="{Binding Second}" TextAlignment="Right" Grid.Column="2" />
  </Grid>
</DataTemplate>

<ListBox Name="listBox" ItemTemplate="{StaticResource AlignedPairs}">
  <ListBox.ItemContainerStyle>
    <Style TargetType="ListBoxItem">
      <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    </Style>
  </ListBox.ItemContainerStyle>
</ListBox>

(I’ve guessed at the exact alignment you want for the items, but you can obviously tweak it.)

Note that you also need to set the HorizontalContentAlignment of the ListBoxItems to Stretch using ListBox.ItemContainerStyle. Otherwise each ListBoxItem will take up only the space it needs, resulting in all the Grid columns being minimal size and looking like a straight concatenation. Stretch makes each ListBoxItem fill the full width so the Grid columns are forced to grow accordingly.