Control the width of a listbox inside a grid

Question

I have a view. The grid inside the view is divided into 2 columns.

<Grid x:Name="grdView">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

Inside the Auto column(Column 0), I have another view

<Border Grid.Column="0" Style="{DynamicResource BorderStyle}">
    <Views:ViewerDataBrowser x:Name="dataBrowser" DataContext="{Binding ViewDataBrowserInstance}" />
</Border>

Inside this view I have a listbox and a data template defined for the list box. Inside the data template I have 2 rows and 2 textblocks in each of them.

Issue

When the textblock characters are more than the width of the column, the listbox is being stretched and a scroll bar is also displayed. I don't want that to happen. I want the text to be truncated and show ... at the end.

I tried text trimming and text wrapping for the textblock. But it did not work. I also tried to set the width of data template to Auto, but it is not working. The only possible solution working for me is to set the width of the data template to a constant value.

I want the listbox to fit inside the grid and not show the scroll bar even though the text block have lengthy text. Please suggest a solution.

Niesje Niesje · Accepted Answer · 2016-05-02T14:51:25

You can get and set the horiztonalScrollBar property of a listBox as described on the MSDN site. When setting the width of the listBox (pre-uwp) you may use device independent pixels (DIPs). Also, instead of using a constant, you may set the width proportional to that of the listBox's container--though not recommended vs DIPs and auto-resizing since certain dimensions behave better.

Control the width of a listbox inside a grid

2 Answers