locked
Column Alignment in Listbox RRS feed

  • Question

  • I have a multi-column listbox that is populated via a DataTable. Here is the segment of the XMAL for the listbox:

        <Window.Resources>
            <DataTemplate x:Key="listBoxTemplate">
                <StackPanel Margin="3" Orientation="Horizontal">
                    <TextBlock  Text="{Binding SERVICE_NUMBER}"></TextBlock>
                    <TextBlock Text="{Binding MODEL_NAME}"></TextBlock>
                    <TextBlock Text="{Binding MAKE_NAME}"></TextBlock>
                    <TextBlock Text="{Binding COUNTRY_ABBR}"></TextBlock>
                    <TextBlock Text="{Binding FROM_YEAR}"></TextBlock>
                    <TextBlock Text="{Binding TO_YEAR}"></TextBlock>
                    <TextBlock Text="{Binding BARCODE}"></TextBlock>
                </StackPanel>
            </DataTemplate>
        </Window.Resources>

        <StackPanel>
                <ListBox Name="lboxParentLov" Grid.Row="1" Grid.ColumnSpan="7" FontSize="12" Height="215" SelectionMode="Single"
                        ItemsSource="{Binding}" ItemTemplate="{StaticResource listBoxTemplate}" Margin="0,0,39,0"></ListBox>
         </StackPanel>

    My problem is that I cannot get the column values to left align in the listbox; as a result, I get an snakey effect in the listbox. I played with the Margin property for TextBlocks, but it did not help.

    Does anyone know how fix this problem?

    Thanks,
    Hamid

    Thursday, March 1, 2012 8:21 PM

Answers

  • Hi After thinking about it your original datatemplate will work but you will have to specify width and horizontalalignment=left. If you don't specify width for the textblocks you will end up with the snaky effect 

    Here you go - 

     <DataTemplate x:Key="listBoxTemplate">
                <StackPanel Margin="3" Orientation="Horizontal">
                    <TextBlock  Text="{Binding SERVICE_NUMBER}" Width="100" HorizontalAlignment="Left" ></TextBlock>
                    <TextBlock Text="{Binding MODEL_NAME}" Width="100" HorizontalAlignment="Left"></TextBlock>
                    <TextBlock Text="{Binding MAKE_NAME}" Width="100" HorizontalAlignment="Left"></TextBlock>
                    <TextBlock Text="{Binding COUNTRY_ABBR}" Width="100" HorizontalAlignment="Left"></TextBlock>
                    <TextBlock Text="{Binding FROM_YEAR}" Width="100" HorizontalAlignment="Left"></TextBlock>
                    <TextBlock Text="{Binding TO_YEAR}" Width="100" HorizontalAlignment="Left"></TextBlock>
                    <TextBlock Text="{Binding BARCODE}" Width="100" HorizontalAlignment="Left"></TextBlock>
                </StackPanel>
            </DataTemplate>

    • Marked as answer by HE2012 Thursday, March 1, 2012 10:18 PM
    Thursday, March 1, 2012 8:40 PM
  • Hi Hamid Entezam,

    You can also use the following code to auto sizing all columns and have every column aligns.

        <DataTemplate x:Key="listBoxTemplate">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" SharedSizeGroup="c1"/>
                    <ColumnDefinition Width="Auto" SharedSizeGroup="c2" />
                    <ColumnDefinition Width="Auto" SharedSizeGroup="c3" />
                    <ColumnDefinition Width="Auto" SharedSizeGroup="c4"/>
                    <ColumnDefinition Width="Auto" SharedSizeGroup="c5"/>
                    <ColumnDefinition Width="Auto" SharedSizeGroup="c6"/>
                    <ColumnDefinition Width="Auto" SharedSizeGroup="c7"/>
                </Grid.ColumnDefinitions>
                <TextBlock  Text="{Binding SERVICE_NUMBER}" Grid.Column="0" HorizontalAlignment="Left"></TextBlock>
                <TextBlock Text="{Binding MODEL_NAME}"  Grid.Column="1" HorizontalAlignment="Left"></TextBlock>
                <TextBlock Text="{Binding MAKE_NAME}"  Grid.Column="2" HorizontalAlignment="Left"></TextBlock>
                <TextBlock Text="{Binding COUNTRY_ABBR}"  Grid.Column="3" HorizontalAlignment="Left"></TextBlock>
                <TextBlock Text="{Binding FROM_YEAR}"  Grid.Column="4" HorizontalAlignment="Left"></TextBlock>
                <TextBlock Text="{Binding TO_YEAR}"  Grid.Column="5" HorizontalAlignment="Left"></TextBlock>
                <TextBlock Text="{Binding BARCODE}"  Grid.Column="6" HorizontalAlignment="Left"></TextBlock>
            </Grid>
        </DataTemplate>

    Don't forget to also add the following code to your ListBox.

     <ListBox Grid.IsSharedSizeScope="True"/>

    Best regards,

    Min Zhu [MSFT]
    MSDN Community Support | Feedback to us


    • Edited by Min Zhu Friday, March 2, 2012 3:49 AM
    • Marked as answer by HE2012 Friday, March 2, 2012 6:36 PM
    Friday, March 2, 2012 3:48 AM

All replies

  • Hi Hamid, 

    Its not going to work using a stackpanel because the textblocks will be of different lengths. and they will be stacked next to each other.

    To sort this problem out use a grid 

    <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="100" />
                    <ColumnDefinition Width="100" />
                    <ColumnDefinition Width="100" />
                    <ColumnDefinition Width="100" />
                    <ColumnDefinition Width="100" />
                    <ColumnDefinition Width="100" />
                    <ColumnDefinition Width="100" />
                </Grid.ColumnDefinitions>
                <TextBlock  Text="{Binding SERVICE_NUMBER}" Grid.Column="0" HorizontalAlignment="Left"></TextBlock>
                <TextBlock Text="{Binding MODEL_NAME}"  Grid.Column="1" HorizontalAlignment="Left"></TextBlock>
                <TextBlock Text="{Binding MAKE_NAME}"  Grid.Column="2" HorizontalAlignment="Left"></TextBlock>
                <TextBlock Text="{Binding COUNTRY_ABBR}"  Grid.Column="3" HorizontalAlignment="Left"></TextBlock>
                <TextBlock Text="{Binding FROM_YEAR}"  Grid.Column="4" HorizontalAlignment="Left"></TextBlock>
                <TextBlock Text="{Binding TO_YEAR}"  Grid.Column="5" HorizontalAlignment="Left"></TextBlock>
                <TextBlock Text="{Binding BARCODE}"  Grid.Column="6" HorizontalAlignment="Left"></TextBlock>
            </Grid>
    There are other options as well but this is as good as any.
    Thursday, March 1, 2012 8:30 PM
  • Hi After thinking about it your original datatemplate will work but you will have to specify width and horizontalalignment=left. If you don't specify width for the textblocks you will end up with the snaky effect 

    Here you go - 

     <DataTemplate x:Key="listBoxTemplate">
                <StackPanel Margin="3" Orientation="Horizontal">
                    <TextBlock  Text="{Binding SERVICE_NUMBER}" Width="100" HorizontalAlignment="Left" ></TextBlock>
                    <TextBlock Text="{Binding MODEL_NAME}" Width="100" HorizontalAlignment="Left"></TextBlock>
                    <TextBlock Text="{Binding MAKE_NAME}" Width="100" HorizontalAlignment="Left"></TextBlock>
                    <TextBlock Text="{Binding COUNTRY_ABBR}" Width="100" HorizontalAlignment="Left"></TextBlock>
                    <TextBlock Text="{Binding FROM_YEAR}" Width="100" HorizontalAlignment="Left"></TextBlock>
                    <TextBlock Text="{Binding TO_YEAR}" Width="100" HorizontalAlignment="Left"></TextBlock>
                    <TextBlock Text="{Binding BARCODE}" Width="100" HorizontalAlignment="Left"></TextBlock>
                </StackPanel>
            </DataTemplate>

    • Marked as answer by HE2012 Thursday, March 1, 2012 10:18 PM
    Thursday, March 1, 2012 8:40 PM
  • Than you very much for your help. The alignment problem is now fixed.
    Thursday, March 1, 2012 10:18 PM
  • Hi Hamid Entezam,

    You can also use the following code to auto sizing all columns and have every column aligns.

        <DataTemplate x:Key="listBoxTemplate">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" SharedSizeGroup="c1"/>
                    <ColumnDefinition Width="Auto" SharedSizeGroup="c2" />
                    <ColumnDefinition Width="Auto" SharedSizeGroup="c3" />
                    <ColumnDefinition Width="Auto" SharedSizeGroup="c4"/>
                    <ColumnDefinition Width="Auto" SharedSizeGroup="c5"/>
                    <ColumnDefinition Width="Auto" SharedSizeGroup="c6"/>
                    <ColumnDefinition Width="Auto" SharedSizeGroup="c7"/>
                </Grid.ColumnDefinitions>
                <TextBlock  Text="{Binding SERVICE_NUMBER}" Grid.Column="0" HorizontalAlignment="Left"></TextBlock>
                <TextBlock Text="{Binding MODEL_NAME}"  Grid.Column="1" HorizontalAlignment="Left"></TextBlock>
                <TextBlock Text="{Binding MAKE_NAME}"  Grid.Column="2" HorizontalAlignment="Left"></TextBlock>
                <TextBlock Text="{Binding COUNTRY_ABBR}"  Grid.Column="3" HorizontalAlignment="Left"></TextBlock>
                <TextBlock Text="{Binding FROM_YEAR}"  Grid.Column="4" HorizontalAlignment="Left"></TextBlock>
                <TextBlock Text="{Binding TO_YEAR}"  Grid.Column="5" HorizontalAlignment="Left"></TextBlock>
                <TextBlock Text="{Binding BARCODE}"  Grid.Column="6" HorizontalAlignment="Left"></TextBlock>
            </Grid>
        </DataTemplate>

    Don't forget to also add the following code to your ListBox.

     <ListBox Grid.IsSharedSizeScope="True"/>

    Best regards,

    Min Zhu [MSFT]
    MSDN Community Support | Feedback to us


    • Edited by Min Zhu Friday, March 2, 2012 3:49 AM
    • Marked as answer by HE2012 Friday, March 2, 2012 6:36 PM
    Friday, March 2, 2012 3:48 AM
  • Min,

    Thank you very much for your suggestion. I will give it a try.
    Hamid

    Friday, March 2, 2012 6:36 PM