locked
Making two controls the same width. RRS feed

  • Question

  • I have scenario where two user controls can be displayed on the same page side by side. The visibility of the second control can be toggled by a button. The first control is always visible. When the first control is visible, I want it to take up all the available width. When the second control is visible I want the two controls to evenly split the width.

    I cannot figure out how to do this in XAML. Is there a way to do this using the ColumnDefinition Width property?

     
            <Grid ShowGridLines="True" Grid.Column="1" Grid.Row="1" Name="myGrid">
                <Grid ShowGridLines="True" >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                
                    <uc:ExamViewer x:Name="PrimaryViewer" DataContext="{Binding Manager}" Grid.Column="0">
                    </uc:ExamViewer>
    
                    <uc:ExamViewer x:Name="RelatedViewer" DataContext="{Binding Worker}" Grid.Column="1" Visibility="{Binding IsRelatedVisible}" >
                    </uc:ExamViewer>
    
                </Grid>
            </Grid>
    

     

    Thursday, July 28, 2011 2:35 PM

Answers

  • Hi. I can think of several possibilities to solve this. You can for example use a star sizing of the columns to get the basic layout. If you set both column widths to "*" the two columns will take up the same space and hence split the available width.

    The second part then would be to e.g. bind the Grid.ColumnSpan property of the first control to the same condition that you bind the Visibility of the second control to. Since that is a Visibility value, not an integer (what you need for the column span), you need to either add a value converter for that, or add yet another property to your data context. That would return 1 or 2, depending on whether the second control is visible or not.

    So, all in all:

    <Grid ShowGridLines="True" Grid.Column="1" Grid.Row="1" Name="myGrid">
                <Grid ShowGridLines="True" >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                
                    <uc:ExamViewer x:Name="PrimaryViewer" DataContext="{Binding Manager}" Grid.Column="0" Grid.ColumnSpan="{Binding IsRelatedVisible, Converter={StaticResource VisibilityToColumnSpanConverter}}">
                    </uc:ExamViewer>
    
                    <uc:ExamViewer x:Name="RelatedViewer" DataContext="{Binding Worker}" Grid.Column="1" Visibility="{Binding IsRelatedVisible}" >
                    </uc:ExamViewer>
    
                </Grid>
            </Grid>

    Thursday, July 28, 2011 3:13 PM

All replies

  • Hi. I can think of several possibilities to solve this. You can for example use a star sizing of the columns to get the basic layout. If you set both column widths to "*" the two columns will take up the same space and hence split the available width.

    The second part then would be to e.g. bind the Grid.ColumnSpan property of the first control to the same condition that you bind the Visibility of the second control to. Since that is a Visibility value, not an integer (what you need for the column span), you need to either add a value converter for that, or add yet another property to your data context. That would return 1 or 2, depending on whether the second control is visible or not.

    So, all in all:

    <Grid ShowGridLines="True" Grid.Column="1" Grid.Row="1" Name="myGrid">
                <Grid ShowGridLines="True" >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                
                    <uc:ExamViewer x:Name="PrimaryViewer" DataContext="{Binding Manager}" Grid.Column="0" Grid.ColumnSpan="{Binding IsRelatedVisible, Converter={StaticResource VisibilityToColumnSpanConverter}}">
                    </uc:ExamViewer>
    
                    <uc:ExamViewer x:Name="RelatedViewer" DataContext="{Binding Worker}" Grid.Column="1" Visibility="{Binding IsRelatedVisible}" >
                    </uc:ExamViewer>
    
                </Grid>
            </Grid>

    Thursday, July 28, 2011 3:13 PM
  • Thanks!  That works perfect.  I got too focused on trying to do it from within the ColumnDefiniton. 

    Thursday, July 28, 2011 4:26 PM