维护可视树中的布局关系

时间:2016-01-15 16:09:16

标签: wpf layout

<Grid Margin="5">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="10" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="80" />
        <ColumnDefinition Width="80" />
        <ColumnDefinition Width="80" />
        <ColumnDefinition Width="80" />
        <ColumnDefinition Width="10" />
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition Height="20"/>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="10"/>
        <RowDefinition Height="10"/>
        <RowDefinition Height="20"/>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="10"/>
    </Grid.RowDefinitions>


    <GroupBox Header="Chart Area" Grid.ColumnSpan="7" Grid.RowSpan="6"/>

    <Label Grid.Column="1" Grid.Row="1" HorizontalAlignment="Right">Title:</Label>
    <TextBox Grid.Column="2" Grid.Row="1" Grid.ColumnSpan="4" Margin="10,0,10,0"></TextBox>

    <Label Grid.Column="2" Grid.Row="2" HorizontalAlignment="Center">X</Label>
    <Label Grid.Column="3" Grid.Row="2" HorizontalAlignment="Center">Y</Label>
    <Label Grid.Column="4" Grid.Row="2" HorizontalAlignment="Center">Width</Label>
    <Label Grid.Column="5" Grid.Row="2" HorizontalAlignment="Center">Height</Label>

    <Label Grid.Column="1" Grid.Row="3" HorizontalAlignment="Right">Position:</Label>
    <TextBox Grid.Column="2" Grid.Row="3" Width="60"></TextBox>
    <TextBox Grid.Column="3" Grid.Row="3" Width="60"></TextBox>
    <TextBox Grid.Column="4" Grid.Row="3" Width="60"></TextBox>
    <TextBox Grid.Column="5" Grid.Row="3" Width="60"></TextBox>

    <Label Grid.Column="1" Grid.Row="4" HorizontalAlignment="Right">Colour:</Label>
    <Rectangle Margin="10,2,10,2" Fill="LightGreen" Stroke="Black" StrokeThickness="1" Grid.Column="2" Grid.Row="4" />


    <GroupBox Header="Plot Area" Grid.Column="0" Grid.Row="7" Grid.ColumnSpan="7" Grid.RowSpan="3" />
    <Label Grid.Column="1" Grid.Row="8" HorizontalAlignment="Right">Imagine this was a particularly long title:</Label>
    <Rectangle Margin="10,2,10,2" Fill="AliceBlue" Grid.Column="2" Grid.Row="8" Stroke="Black" StrokeThickness="1" />

</Grid>

enter image description here

在上面的例子中,我在布局上被黑了&#34; /作弊。似乎在GroupBox的可视树下的控件不是。我做到了这一点,所以所有标签的宽度都是一样的,它们很好地对齐。

这感觉就像顽皮/糟糕的做事方式(尽管它非常有效)。

我可以使用硬编码宽度完成此操作,但对于长度不同的标签,这样做效果不佳。

我想我可以以某种方式绑定宽度。

有人可以建议替代/更好的解决方案吗?

谢谢大卫

2 个答案:

答案 0 :(得分:1)

WPF有一个通过附加属性Grid.IsSharedSizeScope='True'内置的机制,可以将其添加到可视树上方的容器控制器中。

所以你可以这样做: -

<StackPanel Grid.IsSharedSizeScope="True">
    ... add controls

    <GroupBox>
      <Grid>
        <Grid.ColumnDefinitions>
          <ColumnDefinition SharedSizeGroup="ColA"/>
          <ColumnDefinition SharedSizeGroup="ColB"/>
        </Grid.ColumnDefinitions>

      .... add controls

      </Grid>
    </GroupBox>

    <GroupBox>
      <Grid>
        <Grid.ColumnDefinitions>
          <ColumnDefinition SharedSizeGroup="ColA"/>
        </Grid.ColumnDefinitions>

      .... add controls

      </Grid>
    </GroupBox>

两个单独的网格部分中具有相同文本名称的列(例如“ColA”)现在将同步宽度。

答案 1 :(得分:0)

您可以在群组内添加网格,代码会更好

(CASE WHEN @YESNOActivity = 'Yes' 
           THEN ',' + @ServiceActivity + ','
           ELSE NULL 
 END)
LIKE
(CASE WHEN @YESNOActivity = 'Yes' 
           THEN '%,' + TblActivity.ActivityServActId + ',%'
           ELSE 0 
 END)