Wednesday, August 29, 2012

Silverlight Grid Column widths

Silverlight Grid Column widths

I have a Silverlight 5.0 Grid with three columns, defined with widths "Auto", "*", and "Auto". Inside the second column, I have another Grid with four columns, defined with width "25*". Each of these four columns is a ComboBox.

Even though the widths are all defined the same, the ComboBoxes "Auto" size themselves, and when I select one, the box itself narrows to just larger than the down arrow, although the items are sized to fit.

<Grid>     <Grid.ColumnDefinitions>         <ColumnDefinition Width="Auto"/>         <ColumnDefinition Width="*"/>         <ColumnDefinition Width="Auto"/>     </Grid.ColumnDefinitions> <ContentControl Grid.Column="0" FontSize="20" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="10,1,0,1">     <ContentPresenter Content="This is a Label" /> </ContentControl>     <Grid Grid.Column="1" HorizontalAlignment="Center">         <Grid.ColumnDefinitions>             <ColumnDefinition Width="25*"/>             <ColumnDefinition Width="25*"/>             <ColumnDefinition Width="25*"/>             <ColumnDefinition Width="25*"/>         </Grid.ColumnDefinitions>         <ComboBox Grid.Column="0" Name="comboView" FontSize="14" Margin="2,1,2,1" >             <ComboBox.Items>                 <ComboBoxItem Content="Item1" IsSelected="True" />                 <ComboBoxItem Content="Item2" />             </ComboBox.Items>         </ComboBox>         <ComboBox Grid.Column="1" Name="comboField" FontSize="14" Margin="2,1,2,1" >             <ComboBox.Items>                 <ComboBoxItem Content="Field1" IsSelected="True" />                 <ComboBoxItem Content="Field2" />             </ComboBox.Items>         </ComboBox> 

...

What have I missed? When I had just one grid, with the first column set to Auto and all the rest set to something like Width=9*, the ComboBoxes did not behave this way.

After further observation, it appears that the HorizontalAlignment="Center" in the inner grid is the culprit. If I remove it, the ComboBoxes return to retaining their size, but they take up the whole outer Column 1, when I want them to take up their necessary space and then be centered within the outer Column.

Answers & Comments...

Answer: 1

If I now understand correctly, your biggest issue is that you want all the comboboxes to be the same width, all taking up the same amount of space (that is: all sized equal to the combobox with the maximum size). I believe you have everything else straightened away.

This would be very easy in WPF; they have a property named 'IsSharedSizeScope' which would evenly distribute out the grid width.

There is no such property in Silverlight. To do this, you're likely going to need to bind the size of each of them and do it in code behind. It's a bit hacky, but it should work. Something like this for all of them:

<ComboBox Grid.Column="1" Name="comboField" FontSize="14" Margin="2,1,2,1" Width="{Binding Path=Width}" SizeChanged="comboField_SizeChanged"> 

Then in code behind:

GridLength Width = new GridLength(10);  private void comboField_SizeChanged(object sender, SizeChangedEventArgs e) {     if (e.NewSize.Width > len.Value)     {         Width = new GridLength( e.NewSize.Width );     } } 

EDIT: There's also this library that seems to do the same thing you want.

by : DanTheManhttp://stackoverflow.com/users/538133




No comments:

Post a Comment

Send us your comment related to the topic mentioned on the blog