Blend Grid行列拖拽控制宽高

原文:Blend Grid行列拖拽控制宽高

看效果

1. <Grid>
2. <Grid.ColumnDefinitions>
3. <ColumnDefinition Width="212*"/>
4. <ColumnDefinition Width="9*"/>
5. <ColumnDefinition Width="296*"/>
6. </Grid.ColumnDefinitions>
7. <Grid.RowDefinitions>
8. <RowDefinition Height="161*"/>
9. <RowDefinition Height="6*"/>
10. <RowDefinition Height="153*"/>
11. </Grid.RowDefinitions>
12. <Button Content="Button" Margin="0"/>
13. <Button Content="Button" Margin="0,0,0,1" Grid.Row="2"/>
14. <Button Content="Button" Grid.Column="2"/>
15. <Button Content="Button" Grid.Column="2" Grid.Row="2"/>
16. <GridSplitter HorizontalAlignment="Center" Margin="2,0" Grid.RowSpan="3" Width="5" Grid.Column="1" RenderTransformOrigin="0.5,0.5">
17. <GridSplitter.RenderTransform>
18. <TransformGroup>
19. <ScaleTransform/>
20. <SkewTransform/>
21. <RotateTransform Angle="0.349"/>
22. <TranslateTransform/>
23. </TransformGroup>
24. </GridSplitter.RenderTransform>
25. </GridSplitter>
26. <GridSplitter Grid.ColumnSpan="3" HorizontalAlignment="Stretch" Margin="0,3" Grid.Row="1" VerticalAlignment="Center" Height="5"/>
28. </Grid>

效果2

主要设置俩个地方 注意设置列 auto

1）最外层gridGrid.IsSharedSizeScope="True"

2）设置GridSplitter 所在列或行  SharedSizeGroup

1. <Grid Grid.IsSharedSizeScope="True" >
2. <Grid Margin="19,182,60,48" Background="White">
3. <Grid.ColumnDefinitions>
4. <ColumnDefinition Width="377*"/>
5. <ColumnDefinition Width="16*" />
6. <ColumnDefinition Width="Auto" SharedSizeGroup="aaa"/>
7. </Grid.ColumnDefinitions>
8. <Grid.RowDefinitions>
9. <RowDefinition Height="9*"/>
10. <RowDefinition/>
11. <RowDefinition Height="8*"/>
12. </Grid.RowDefinitions>
13. <Button Content="Button" Margin="0"/>
14. <Button Content="Button" Margin="0,0,0,1" Grid.Row="2"/>
15. <Button Content="Button" Grid.Column="2"/>
16. <Button Content="Button" Grid.Column="2" Grid.Row="2"/>
17. <GridSplitter HorizontalAlignment="Center" Margin="1.313,0,1.312,0" Grid.RowSpan="3" Width="5" Grid.Column="1" RenderTransformOrigin="0.5,0.5">
18. <GridSplitter.RenderTransform>
19. <TransformGroup>
20. <ScaleTransform/>
21. <SkewTransform/>
22. <RotateTransform Angle="0.349"/>
23. <TranslateTransform/>
24. </TransformGroup>
25. </GridSplitter.RenderTransform>
26. </GridSplitter>
27. <GridSplitter Grid.ColumnSpan="3" HorizontalAlignment="Stretch" VerticalAlignment="Center" Height="5" Grid.Row="1"/>
29. </Grid>
30. <Grid Margin="19,61,60,169" Background="White">
31. <Grid.ColumnDefinitions>
32. <ColumnDefinition Width="377*" />
33. <ColumnDefinition Width="16*" />
34. <ColumnDefinition Width="Auto" SharedSizeGroup="aaa"/>
35. </Grid.ColumnDefinitions>
36. <Grid.RowDefinitions>
37. <RowDefinition Height="15*" />
38. <RowDefinition Height="2*"/>
39. <RowDefinition Height="13*"/>
40. </Grid.RowDefinitions>
41. <Button Content="Button" Margin="0"/>
42. <Button Content="Button" Margin="0,0,0,1" Grid.Row="2"/>
43. <Button Content="Button" Grid.Column="2"/>
44. <Button Content="Button" Grid.Column="2" Grid.Row="2"/>
45. <GridSplitter HorizontalAlignment="Center" Margin="1.313,0,1.312,0" Grid.RowSpan="3" Width="5" Grid.Column="1" RenderTransformOrigin="0.5,0.5">
46. <GridSplitter.RenderTransform>
47. <TransformGroup>
48. <ScaleTransform/>
49. <SkewTransform/>
50. <RotateTransform Angle="0.349"/>
51. <TranslateTransform/>
52. </TransformGroup>
53. </GridSplitter.RenderTransform>
54. </GridSplitter>
55. <GridSplitter Grid.ColumnSpan="3" HorizontalAlignment="Stretch" Margin="0,1,0,0" VerticalAlignment="Center" Height="5" Grid.Row="1"/>
57. </Grid>
58. </Grid>