views:

72

answers:

2

I wish to have a set of elements have the same width, I can not simply put them in a grid as this is a content control and the elements being bound is unknown.

As a simple example, how do I bind all widths of the first child of each stack panel together along with the second element.

  <StackPanel>
    <StackPanel Orientation="Horizontal">
      <Label Content="First column"/>
      <Label Content="Second Column" Background="Green"/>
    </StackPanel>
    <StackPanel Orientation="Horizontal">
      <Label Content="One"/>
      <Label Content="Two" Background="Green"/>
    </StackPanel>
  </StackPanel>
A: 
    <StackPanel>
        <StackPanel Orientation="Horizontal">
            <Label x:Name="FirstColumnLabel" Content="First column"/>
            <Label x:Name="SecondColumnLabel" Content="Second Column" Background="Green"/>
        </StackPanel>
        <StackPanel Orientation="Horizontal">
            <Label Content="One" Width="{Binding ElementName=FirstColumnLabel, Path=ActualWidth}"/>
            <Label Content="Two" Width="{Binding ElementName=SecondColumnLabel, Path=ActualWidth}" Background="Green"/>
        </StackPanel>
    </StackPanel>
qntmfred
Thanks qntmfred, this partially works, however this assumes there is a header row to bind to, it will also only have a width matching the first row, not all rows.
Brett Ryan
if you don't want to show a header row, just set the visibility of the header Labels to hidden.
qntmfred
But again, it will only use the widths for the first row, not all rows.
Brett Ryan
oh, i see. you want all the cells in a given column to have the same width as whichever cell in that column is widest by itself. not just the second column to whatever the first column happens to be
qntmfred
Yeah, that's it, the simplest example is as above with a "Grid" type arangement, however I wish to apply this same principle to other use-cases.
Brett Ryan
+2  A: 

I'm not clear on your reason for not using a Grid from the sample code here but Grid gives you a built-in mechanism to do this:

 <StackPanel Grid.IsSharedSizeScope="True">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" SharedSizeGroup="Col1"/>
            <ColumnDefinition Width="Auto" SharedSizeGroup="Col2"/>
        </Grid.ColumnDefinitions>
        <Label Content="First column" Grid.Column="0"/>
        <Label Content="Second Column" Background="Green" Grid.Column="1"/>
    </Grid>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition SharedSizeGroup="Col1"/>
            <ColumnDefinition SharedSizeGroup="Col2"/>
        </Grid.ColumnDefinitions>
        <Label Content="One" Grid.Column="0"/>
        <Label Content="Two" Background="Green" Grid.Column="1"/>
    </Grid>
</StackPanel>

Will this work for you or do you have other constraints that won't allow you to do this?

John Bowen
Ah thankyou, I think this will work nicely, I was not aware of the `IsSharedSizeScope` attached property, but that's pretty much what I was looking for. I was looking in the wrong place though, thinking there was some sort of way of binding elements dimensions together.
Brett Ryan