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

看效果



  1. 

    

    

    

        <Grid>
    

    2. 

  2. 

    

    

    

        	<Grid.ColumnDefinitions>
    

    3. 

  3. 

    

    

    

        		<ColumnDefinition Width="212*"/>
    

    4. 

  4. 

    

    

    

        		<ColumnDefinition Width="9*"/>
    

    5. 

  5. 

    

    

    

        		<ColumnDefinition Width="296*"/>
    

    6. 

  6. 

    

    

    

        	</Grid.ColumnDefinitions>
    

    7. 

  7. 

    

    

    

        	<Grid.RowDefinitions>
    

    8. 

  8. 

    

    

    

        		<RowDefinition Height="161*"/>
    

    9. 

  9. 

    

    

    

        		<RowDefinition Height="6*"/>
    

    10. 

  10. 

    

    

    

        		<RowDefinition Height="153*"/>
    

    11. 

  11. 

    

    

    

        	</Grid.RowDefinitions>
    

    12. 

  12. 

    

    

    

        	<Button Content="Button" Margin="0"/>
    

    13. 

  13. 

    

    

    

        	<Button Content="Button" Margin="0,0,0,1" Grid.Row="2"/>
    

    14. 

  14. 

    

    

    

        	<Button Content="Button" Grid.Column="2"/>
    

    15. 

  15. 

    

    

    

        	<Button Content="Button" Grid.Column="2" Grid.Row="2"/>
    

    16. 

  16. 

    

    

    

        	<GridSplitter HorizontalAlignment="Center" Margin="2,0" Grid.RowSpan="3" Width="5" Grid.Column="1" RenderTransformOrigin="0.5,0.5">
    

    17. 

  17. 

    

    

    

        		<GridSplitter.RenderTransform>
    

    18. 

  18. 

    

    

    

        			<TransformGroup>
    

    19. 

  19. 

    

    

    

        				<ScaleTransform/>
    

    20. 

  20. 

    

    

    

        				<SkewTransform/>
    

    21. 

  21. 

    

    

    

        				<RotateTransform Angle="0.349"/>
    

    22. 

  22. 

    

    

    

        				<TranslateTransform/>
    

    23. 

  23. 

    

    

    

        			</TransformGroup>
    

    24. 

  24. 

    

    

    

        		</GridSplitter.RenderTransform>
    

    25. 

  25. 

    

    

    

        	</GridSplitter>
    

    26. 

  26. 

    

    

    

        	<GridSplitter Grid.ColumnSpan="3" HorizontalAlignment="Stretch" Margin="0,3" Grid.Row="1" VerticalAlignment="Center" Height="5"/>
    

    27. 

  27. 

    

    

    

            
    

    28. 

  28. 

    

    

    

        </Grid>

效果2

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

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

2）设置GridSplitter 所在列或行  SharedSizeGroup



  1. 

    

    

    

    	<Grid Grid.IsSharedSizeScope="True" >
    

    2. 

  2. 

    

    

    

        <Grid Margin="19,182,60,48" Background="White">
    

    3. 

  3. 

    

    

    

    		<Grid.ColumnDefinitions>
    

    4. 

  4. 

    

    

    

    			<ColumnDefinition Width="377*"/>
    

    5. 

  5. 

    

    

    

    			<ColumnDefinition Width="16*" />
    

    6. 

  6. 

    

    

    

    			<ColumnDefinition Width="Auto"  SharedSizeGroup="aaa"/>
    

    7. 

  7. 

    

    

    

    		</Grid.ColumnDefinitions>
    

    8. 

  8. 

    

    

    

    		<Grid.RowDefinitions>
    

    9. 

  9. 

    

    

    

    			<RowDefinition Height="9*"/>
    

    10. 

  10. 

    

    

    

    			<RowDefinition/>
    

    11. 

  11. 

    

    

    

    			<RowDefinition Height="8*"/>
    

    12. 

  12. 

    

    

    

    		</Grid.RowDefinitions>
    

    13. 

  13. 

    

    

    

    		<Button Content="Button" Margin="0"/>
    

    14. 

  14. 

    

    

    

    		<Button Content="Button" Margin="0,0,0,1" Grid.Row="2"/>
    

    15. 

  15. 

    

    

    

    		<Button Content="Button" Grid.Column="2"/>
    

    16. 

  16. 

    

    

    

    		<Button Content="Button" Grid.Column="2" Grid.Row="2"/>
    

    17. 

  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. 

  18. 

    

    

    

    			<GridSplitter.RenderTransform>
    

    19. 

  19. 

    

    

    

    				<TransformGroup>
    

    20. 

  20. 

    

    

    

    					<ScaleTransform/>
    

    21. 

  21. 

    

    

    

    					<SkewTransform/>
    

    22. 

  22. 

    

    

    

    					<RotateTransform Angle="0.349"/>
    

    23. 

  23. 

    

    

    

    					<TranslateTransform/>
    

    24. 

  24. 

    

    

    

    				</TransformGroup>
    

    25. 

  25. 

    

    

    

    			</GridSplitter.RenderTransform>
    

    26. 

  26. 

    

    

    

    		</GridSplitter>
    

    27. 

  27. 

    

    

    

    		<GridSplitter Grid.ColumnSpan="3" HorizontalAlignment="Stretch" VerticalAlignment="Center" Height="5" Grid.Row="1"/>
    

    28. 

  28. 

    

    

    

            
    

    29. 

  29. 

    

    

    

    	</Grid>
    

    30. 

  30. 

    

    

    

        <Grid Margin="19,61,60,169" Background="White">
    

    31. 

  31. 

    

    

    

        	<Grid.ColumnDefinitions>
    

    32. 

  32. 

    

    

    

        		<ColumnDefinition Width="377*" />
    

    33. 

  33. 

    

    

    

        		<ColumnDefinition Width="16*" />
    

    34. 

  34. 

    

    

    

        		<ColumnDefinition Width="Auto" SharedSizeGroup="aaa"/>
    

    35. 

  35. 

    

    

    

        	</Grid.ColumnDefinitions>
    

    36. 

  36. 

    

    

    

        	<Grid.RowDefinitions>
    

    37. 

  37. 

    

    

    

        		<RowDefinition Height="15*" />
    

    38. 

  38. 

    

    

    

        		<RowDefinition Height="2*"/>
    

    39. 

  39. 

    

    

    

        		<RowDefinition Height="13*"/>
    

    40. 

  40. 

    

    

    

        	</Grid.RowDefinitions>
    

    41. 

  41. 

    

    

    

        	<Button Content="Button" Margin="0"/>
    

    42. 

  42. 

    

    

    

        	<Button Content="Button" Margin="0,0,0,1" Grid.Row="2"/>
    

    43. 

  43. 

    

    

    

        	<Button Content="Button" Grid.Column="2"/>
    

    44. 

  44. 

    

    

    

        	<Button Content="Button" Grid.Column="2" Grid.Row="2"/>
    

    45. 

  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. 

  46. 

    

    

    

        		<GridSplitter.RenderTransform>
    

    47. 

  47. 

    

    

    

        			<TransformGroup>
    

    48. 

  48. 

    

    

    

        				<ScaleTransform/>
    

    49. 

  49. 

    

    

    

        				<SkewTransform/>
    

    50. 

  50. 

    

    

    

        				<RotateTransform Angle="0.349"/>
    

    51. 

  51. 

    

    

    

        				<TranslateTransform/>
    

    52. 

  52. 

    

    

    

        			</TransformGroup>
    

    53. 

  53. 

    

    

    

        		</GridSplitter.RenderTransform>
    

    54. 

  54. 

    

    

    

        	</GridSplitter>
    

    55. 

  55. 

    

    

    

        	<GridSplitter Grid.ColumnSpan="3" HorizontalAlignment="Stretch" Margin="0,1,0,0" VerticalAlignment="Center" Height="5" Grid.Row="1"/>
    

    56. 

  56. 

    

    

    

            
    

    57. 

  57. 

    

    

    

        </Grid>
    

    58. 

  58. 

    

    

    

    	</Grid>

Blend Grid行列拖拽控制宽高的更多相关文章

  1. FMX ScrollBox 拖拽控制

    Firemonkey下的ScrollBox 拖拽控制,滚动控制,拖拽,滚动条 AniCalculations 仅允许纵向拖拽,拖拽 scrlbx.AniCalculations.TouchTracki ...

  2. 案例(拖拽对话框、高清放大镜、自制滚动条、元素的隐藏方式、表格隔行变色、tab切换效果、字符串拼接、刷新评论)

    一.拖拽对话框 <style> .of{ width: 500px; } #link,#close{ text-decoration: none; margin: 0 10px; font ...

  3. textarea拖拽控制

    一.用处 textarea默认时允许用户以拖拽形式来改变textarea大小,但textarea的大小变化会撑大其父节点,有时会破坏整体布局,有时我们并不希望textarea随意拖拽. forklif ...

  4. el-table实现行列拖拽

    element ui 表格没有自带的拖拽排序的功能,只能借助第三方插件Sortablejs来实现. 实现步骤: 安装Sortable.js npm install sortablejs --save ...

  5. element ui + sortablejs实现表格的行列拖拽

    <template> <div class="container"> <el-table :data="tableData" bo ...

  6. div拖拽的问题

    今天看到一篇写的很好的文章,摘抄如下: 思路 父盒子相对定位,子元素,也就是被拖拽的元素绝对定位 当鼠标在子元素中按下时,绑定鼠标移动事件,根据鼠标位置改变元素位置 设置鼠标当前位置(offsetX, ...

  7. JQUERY 拖拽 draggable droppable resizable selectable sortable

    今天用了jq ui的拖动碰撞功能,好不容易看到有详细的API解说,记录如下:   <script language="JavaScript" type="text/ ...

  8. html5 Sortable.js 拖拽排序源码分析

    最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的.   本帖属于原创,转载请出名出处. 官网http:// ...

  9. CSS 奇思妙想 | 使用 resize 实现强大的图片拖拽切换预览功能

    本文将介绍一个非常有意思的功能,使用纯 CSS 利用 resize 实现强大的图片切换预览功能.类似于这样: 思路 首先,要实现这样一个效果如果不要求可以拖拽,其实有非常多的办法. 将两张图片叠加在一 ...

随机推荐

  1. 数据挖掘--OPTICS

    OPTICS是基于DBSCAN算法的缺陷提出来的一个算法. 核心思想:为每个数据对象计算出一个顺序值(ordering).这些值代表了数据对象的基于密度的族结构,位于同一个族的数据对象具有相近的顺序值 ...

  2. Docker 清理日志

    docker 长时间运行后,日志文件会逐渐变大可以使用下面命令进行清除 #!/bin/bash echo "==================== start clean docker c ...

  3. day08 作业

    1. 有如下值集合 [11,22,33,44,55,66,77,88,99,90...],将所有大于 66 的值保存至字典的第一个key中,将小于 66 的值保存至第二个key的值中 即: {'k1' ...

  4. Codeforces Round #590 (Div. 3) F

    传送门 题意: 给出一个只含前\(20\)个字符的字符串,现在可以选择一段区间进行翻转,问区间中字符各不相同时,最长长度为多少. 思路: 首先,容易将题意转换为选择两个字符各不相同的区间,然后长度相加 ...

  5. flask的request如何获取参数

    1.request.form.get("key", type=str, default=None) 获取表单数据 2.request.args.get("key" ...

  6. 201871010118-唐敬博 《面向对象程序设计（java)》第十五周学习总结

    博文正文开头格式:(2分) 项目 内容 这个作业属于哪个课程 <https://www.cnblogs.com/nwnu-daizh/> 这个作业的要求在哪里 <https://ww ...

  7. 201871010132-张潇潇-《面向对象程序设计（java）》第七周总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...

  8. 69.x的平方根 （平）（简单）

    实现 int sqrt(int x) 函数. 计算并返回 x 的平方根,其中 x 是非负整数. 由于返回类型是整数,结果只保留整数的部分,小数部分将被舍去. 示例 1: 输入: 4输出: 2示例 2: ...

  9. Python前言之编程语言

    编程语言分类(语言) ​ 编程语言是用来和计算机进行交互的,计算机只认识0和1. 机器语言(低级语言) 直接和硬件进行交互 用0和1和计算机进行沟通 缺点:开发效率低 优点:执行效率高 汇编语言 直接 ...

  10. LG3812 「模板」线性基 线性基

    问题描述 LG3812 题解 线性基是一类擅长解决异或问题的数据结构(也不算数据结构吧...就是一种玄学的东西) 对于数列 \(a\) ,它的线性基 \(d\) 为 出现 \(1\) 的最高位在第 \ ...