Blend Grid行列拖拽控制宽高
看效果
-
<Grid>
-
<Grid.ColumnDefinitions>
-
<ColumnDefinition Width="212*"/>
-
<ColumnDefinition Width="9*"/>
-
<ColumnDefinition Width="296*"/>
-
</Grid.ColumnDefinitions>
-
<Grid.RowDefinitions>
-
<RowDefinition Height="161*"/>
-
<RowDefinition Height="6*"/>
-
<RowDefinition Height="153*"/>
-
</Grid.RowDefinitions>
-
<Button Content="Button" Margin="0"/>
-
<Button Content="Button" Margin="0,0,0,1" Grid.Row="2"/>
-
<Button Content="Button" Grid.Column="2"/>
-
<Button Content="Button" Grid.Column="2" Grid.Row="2"/>
-
<GridSplitter HorizontalAlignment="Center" Margin="2,0" Grid.RowSpan="3" Width="5" Grid.Column="1" RenderTransformOrigin="0.5,0.5">
-
<GridSplitter.RenderTransform>
-
<TransformGroup>
-
<ScaleTransform/>
-
<SkewTransform/>
-
<RotateTransform Angle="0.349"/>
-
<TranslateTransform/>
-
</TransformGroup>
-
</GridSplitter.RenderTransform>
-
</GridSplitter>
-
<GridSplitter Grid.ColumnSpan="3" HorizontalAlignment="Stretch" Margin="0,3" Grid.Row="1" VerticalAlignment="Center" Height="5"/>
-
-
</Grid>
效果2
主要设置俩个地方 注意设置列 auto
1)最外层gridGrid.IsSharedSizeScope="True"
2)设置GridSplitter 所在列或行 SharedSizeGroup
-
<Grid Grid.IsSharedSizeScope="True" >
-
<Grid Margin="19,182,60,48" Background="White">
-
<Grid.ColumnDefinitions>
-
<ColumnDefinition Width="377*"/>
-
<ColumnDefinition Width="16*" />
-
<ColumnDefinition Width="Auto" SharedSizeGroup="aaa"/>
-
</Grid.ColumnDefinitions>
-
<Grid.RowDefinitions>
-
<RowDefinition Height="9*"/>
-
<RowDefinition/>
-
<RowDefinition Height="8*"/>
-
</Grid.RowDefinitions>
-
<Button Content="Button" Margin="0"/>
-
<Button Content="Button" Margin="0,0,0,1" Grid.Row="2"/>
-
<Button Content="Button" Grid.Column="2"/>
-
<Button Content="Button" Grid.Column="2" Grid.Row="2"/>
-
<GridSplitter HorizontalAlignment="Center" Margin="1.313,0,1.312,0" Grid.RowSpan="3" Width="5" Grid.Column="1" RenderTransformOrigin="0.5,0.5">
-
<GridSplitter.RenderTransform>
-
<TransformGroup>
-
<ScaleTransform/>
-
<SkewTransform/>
-
<RotateTransform Angle="0.349"/>
-
<TranslateTransform/>
-
</TransformGroup>
-
</GridSplitter.RenderTransform>
-
</GridSplitter>
-
<GridSplitter Grid.ColumnSpan="3" HorizontalAlignment="Stretch" VerticalAlignment="Center" Height="5" Grid.Row="1"/>
-
-
</Grid>
-
<Grid Margin="19,61,60,169" Background="White">
-
<Grid.ColumnDefinitions>
-
<ColumnDefinition Width="377*" />
-
<ColumnDefinition Width="16*" />
-
<ColumnDefinition Width="Auto" SharedSizeGroup="aaa"/>
-
</Grid.ColumnDefinitions>
-
<Grid.RowDefinitions>
-
<RowDefinition Height="15*" />
-
<RowDefinition Height="2*"/>
-
<RowDefinition Height="13*"/>
-
</Grid.RowDefinitions>
-
<Button Content="Button" Margin="0"/>
-
<Button Content="Button" Margin="0,0,0,1" Grid.Row="2"/>
-
<Button Content="Button" Grid.Column="2"/>
-
<Button Content="Button" Grid.Column="2" Grid.Row="2"/>
-
<GridSplitter HorizontalAlignment="Center" Margin="1.313,0,1.312,0" Grid.RowSpan="3" Width="5" Grid.Column="1" RenderTransformOrigin="0.5,0.5">
-
<GridSplitter.RenderTransform>
-
<TransformGroup>
-
<ScaleTransform/>
-
<SkewTransform/>
-
<RotateTransform Angle="0.349"/>
-
<TranslateTransform/>
-
</TransformGroup>
-
</GridSplitter.RenderTransform>
-
</GridSplitter>
-
<GridSplitter Grid.ColumnSpan="3" HorizontalAlignment="Stretch" Margin="0,1,0,0" VerticalAlignment="Center" Height="5" Grid.Row="1"/>
-
-
</Grid>
-
</Grid>
Blend Grid行列拖拽控制宽高的更多相关文章
- FMX ScrollBox 拖拽控制
Firemonkey下的ScrollBox 拖拽控制,滚动控制,拖拽,滚动条 AniCalculations 仅允许纵向拖拽,拖拽 scrlbx.AniCalculations.TouchTracki ...
- 案例(拖拽对话框、高清放大镜、自制滚动条、元素的隐藏方式、表格隔行变色、tab切换效果、字符串拼接、刷新评论)
一.拖拽对话框 <style> .of{ width: 500px; } #link,#close{ text-decoration: none; margin: 0 10px; font ...
- textarea拖拽控制
一.用处 textarea默认时允许用户以拖拽形式来改变textarea大小,但textarea的大小变化会撑大其父节点,有时会破坏整体布局,有时我们并不希望textarea随意拖拽. forklif ...
- el-table实现行列拖拽
element ui 表格没有自带的拖拽排序的功能,只能借助第三方插件Sortablejs来实现. 实现步骤: 安装Sortable.js npm install sortablejs --save ...
- element ui + sortablejs实现表格的行列拖拽
<template> <div class="container"> <el-table :data="tableData" bo ...
- div拖拽的问题
今天看到一篇写的很好的文章,摘抄如下: 思路 父盒子相对定位,子元素,也就是被拖拽的元素绝对定位 当鼠标在子元素中按下时,绑定鼠标移动事件,根据鼠标位置改变元素位置 设置鼠标当前位置(offsetX, ...
- JQUERY 拖拽 draggable droppable resizable selectable sortable
今天用了jq ui的拖动碰撞功能,好不容易看到有详细的API解说,记录如下: <script language="JavaScript" type="text/ ...
- html5 Sortable.js 拖拽排序源码分析
最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的. 本帖属于原创,转载请出名出处. 官网http:// ...
- CSS 奇思妙想 | 使用 resize 实现强大的图片拖拽切换预览功能
本文将介绍一个非常有意思的功能,使用纯 CSS 利用 resize 实现强大的图片切换预览功能.类似于这样: 思路 首先,要实现这样一个效果如果不要求可以拖拽,其实有非常多的办法. 将两张图片叠加在一 ...
随机推荐
- 搞NDK开发
1.哪些场景下要用到NDK开发? 跨平台的库,如FFmpeg, skip,weex, 加固,防逆向 签名校验 图片压缩 音视频解码 OpenGL ES 高级特效 热修复 andfix 人脸识别 fac ...
- dlopen动态链接库操作
void *dlopen(const char *filename, int flag); //打开一个动态链接库,并返回动态链接库的句柄 char *dlerror(void); void *dls ...
- Django ajax 检测用户名是否已被注册
添加一个 register.html 页面 <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Nginx类
nginx常见错误页面有哪些?对于其解决方法是什么? 404 bad request 请求失败,请求所希望得到的资源未被在服务器上发现.没有信息能够告诉用户这个状况到底是暂时的还是永久的.假如服务器知 ...
- Spring Junit 测试样例
SpringMVC 框架下的junit测试方式 package com.sixeco.user.controller; import org.apache.logging.log4j.LogManag ...
- linux 环境下 apache tomcat 安装jenkins
参考文档: https://blog.51cto.com/12629984/1980034 https://www.cnblogs.com/lxs1314/p/8567652.html https:/ ...
- docker学习12-docker快速搭建禅道环境
前言 bug管理系统是每个公司测试团队必备的,当去一个新的公司组建一个测试团队的时候,需快读搭建一套bug管理系统,使用docker搭建禅道就非常方便. 拉取镜像 先拉取zentao镜像,镜像地址ht ...
- testcontainers 方便的db测试框架
testcontainers是一个强大,简单,基于容器的db测试解决方案 目前已经支持了主流的开发语言 参考资料 https://github.com/testcontainers/testconta ...
- RaxML使用
1.下载 https://github.com/stamatak/standard-RAxML 2.How many Threads shall I use? 重要的是要知道,RAxML PThrea ...
- $O(k^2)$ 求前缀 $k$ 次幂和(与长度无关)
接下来求解前缀幂次和 求解 \(\sum_{i = 1}^{k} i^k\) \[ \begin{aligned} (p+1)^k - 1 = (p+1)^k - p^k + p^k - (p-1)^ ...