[Solved] Multi-column Grid inside a SelectionBoxTemplate

[dxk240]

Hi,
I have created a SelectionBoxTemplate using a grid with 3 columns. The first column should auto-size based on the content, the second column is fixed width, and the third column is using * sizing. The problem that I run into is that the first textblock's width is not stretched to fill the available area. The same behavior occurs when applying the below layout to an itemtemplate of a Listbox. The solution is to create a style targeting ListBoxItem and setting its HorizontalContentAlignment to Stretch. I have tried the same idea targeting RadComboBoxItem without any luck. I am using Silverlight 4 binaries.

Thank you in advance

<Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"></ColumnDefinition>
                <ColumnDefinition Width="20"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>

            <TextBlock Text="{Binding Value, Mode=OneWay}"
                       Foreground="Black"
                       FontWeight="Bold"
                       FontFamily="{StaticResource ContentFontFamily}"
                       FontSize="{StaticResource ContentFontSize}"
                       TextAlignment="Right" />

            <TextBlock Text="{Binding Meaning, Mode=OneWay}"
                       Grid.Column="2"
                       Margin="0,0,0,0"
                       Foreground="Gray"
                       FontWeight="Bold"
                       FontFamily="{StaticResource ContentFontFamily}"
                       FontSize="{StaticResource ContentFontSize}"
                       HorizontalAlignment="Left"
                       TextAlignment="Left" />

        </Grid>

[Lancelot]

Hi dxk240,

I see that you are trying to use the center column as a buffer in between the first and third columns.  I recommend approaching it a little differently.

I would remove the middle unused column and add a 20px buffer to the first column's TextBlock. Do this using the Padding property (you could also use the Margin property, but I find that in data ItemTemplates the textblock's padding property works better) . So your code should look like this instead:

<Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>

            <TextBlock Text="{Binding Value, Mode=OneWay}"
                       Grid.Column="0"
                       Padding="0,0,20,0"
                       Foreground="Black"
                       FontWeight="Bold"
                       FontFamily="{StaticResource ContentFontFamily}"
                       FontSize="{StaticResource ContentFontSize}"
                       TextAlignment="Right" />

            <TextBlock Text="{Binding Meaning, Mode=OneWay}"
                       Grid.Column="1"
                       Margin="0,0,0,0"
                       Foreground="Gray"
                       FontWeight="Bold"
                       FontFamily="{StaticResource ContentFontFamily}"
                       FontSize="{StaticResource ContentFontSize}"
                       HorizontalAlignment="Left"
                       TextAlignment="Left" />

        </Grid>

If it is absolutely necessary for you to keep the middle column, then you should explicitly set the first TextBlock's column to 0. Add a Grid.Column="0" to your Value TextBlock's properties.Please let me know if this doesn't solve your problems. I would be happy to help you further.

Good Luck,
Lancelot

[dxk240]

Thank you very much for replying. I have made the change but the result was not what I need (untitled.png). I made a change to width of the first column to show you what the end result should be (untitled2.png). As you can see, the items in the list will have variable length. I need each textblock to resize to the widest item in the list and right align its text so that end result is visually consistent making it easier for the user to find the item they are looking for. Like I said before, the regular listbox behaves the same way and the solution is to target the container style, but the same solution does not work for radcombobox.

[Lancelot]

I see the results you are getting, I would try setting a minimum width to the Textblock using MinWidth and also set the HorizontalAlignment to Stretch. That way it wont shrink to the little items but stretch if there is an exceptionally long item.

[dxk240]

I've tried that before but it didn't work. It seems that the item template (grid with two columns in my case) is being applied to each combobox item. Each combobox item is honoring the column properties of Auto and * based on the content it is bound to, not to the widest item in the entire list. What I need is for the grid to be applied to the panel hosting each combobox, that way the width of the first textblock will be set to the widest item in the collection. Which makes me wonder how the standard listbox accomplishes this setup. I can't believe that something this trivial is consuming so much of my time and I'm surprised that no one from Telerik has responded to the question yet. Thank you for your help though.