在UWP中，如果宽度大于高度，有没有办法在设计之间切换？

在UWP中，如果宽度大于高度，可以通过使用VisualStateManager来实现在设计之间切换。VisualStateManager是UWP中的一个控件，用于管理控件在不同视觉状态下的外观和行为。

要在宽度大于高度时切换设计，可以按照以下步骤进行操作：

在XAML中，定义两种不同的视觉状态，一种是宽度大于高度的状态，另一种是宽度小于等于高度的状态。可以使用VisualStateGroup和VisualState来定义这些状态。

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState x:Name="WideState">
            <!-- 宽度大于高度的状态 -->
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="600" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <!-- 设置宽度大于高度时的样式 -->
                <Setter Target="YourControl.Style" Value="{StaticResource WideStyle}" />
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="NarrowState">
            <!-- 宽度小于等于高度的状态 -->
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowHeight="600" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <!-- 设置宽度小于等于高度时的样式 -->
                <Setter Target="YourControl.Style" Value="{StaticResource NarrowStyle}" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

在资源中定义两种不同的样式，分别对应宽度大于高度和宽度小于等于高度的情况。

<Page.Resources>
    <Style x:Key="WideStyle" TargetType="YourControl">
        <!-- 宽度大于高度时的样式 -->
    </Style>
    <Style x:Key="NarrowStyle" TargetType="YourControl">
        <!-- 宽度小于等于高度时的样式 -->
    </Style>
</Page.Resources>

在需要切换设计的控件上应用VisualStateManager。

<YourControl>
    <VisualStateManager.VisualStateGroups>
        <!-- 引用定义的视觉状态 -->
    </VisualStateManager.VisualStateGroups>
</YourControl>

通过以上步骤，当宽度大于高度时，控件会应用WideStyle样式，当宽度小于等于高度时，控件会应用NarrowStyle样式，从而实现在设计之间的切换。

关于UWP开发和VisualStateManager的更多信息，可以参考腾讯云的相关文档和资源：

相关·内容

XAML中的响应式布局技术

在针对特定屏幕宽度优化应用 UI 时，我们将此称为创建响应式设计。WPF设计之初响应式设计的概念并不流行，那时候大部分网页设计师都按着宽度960像素的标准设计。...响应式设计技术微软的官方文档介绍了UWP中响应式设计常用的6个技术，包括重新定位、调整大小、重新排列、显示/隐藏、替换和重新构建，具体可见以下网站： ?...UWP提供了AdaptiveTrigger这个状态触发器，它以MinWindowWidth和MinWindowHeight未条件，根据页面宽度或高度进入设定好的不同状态（通常来说只使用MinWindowWidth...在下面的示例中StackPanel默认使用垂直排列，当页面的宽度超过720像素时改为水平排列。...使用AdaptiveTrigger可以做到前一节中提到的UWP中响应式设计常用的6个技术，除了UWP自带的AdaptiveTrigger，也可以自定义StateTriggerBase，这将在下一篇文章中介绍

2.3K1 0

New UWP Community Toolkit - AdaptiveGridView

- 内容知否已经拉伸去填充一行，布尔值另外类中还有一个方法 CalculateColumns(containerWidth, itemWidth), 根据容器宽度和元素宽度，确定控件应该包含几列，...或 container 为空时，设置为需要 container 的 Margin；最后根据每一列在 container 中的宽度，减掉 itemMargin，得到 itemWidth； protected...AdaptiveHeightValueConverter.cs 自适应高度转换器，单向转换，根据传入的 value: ItemHeight，以及 padding、margin 等参数得到自适应高度；转换只在...OneRowMode 时使用，作用是把原高度，加上 padding 和 margin 变成新的高度，效果就是单行模式时，元素在高度上没有空隙；设置的 Item padding 和 margin 会失效...，列数和 Item 尺寸都发生了变化；如果不设置 ItemHeight，则每一行都会占满宽度；第三张图，当设置单行模式时，Item 在一行排列； <Grid Background="{ThemeResource

1.4K7 0

New UWP Community Toolkit - Staggered panel

在期望列宽和可用宽度间获得正确的列宽，根据列宽计算当前布局中可用的列数；如果当前控件的横向对齐方式对拉伸，重新设置列宽，这时列宽实际就是期望列宽度； 3....在 columnHeights 数组中，找到最大值，返回新的尺寸：宽度为可用尺寸的宽度，高度为列数组的最大值；可以看出，这个尺寸就是根据子元素计算出的 panel 需要的空间大小； protected...计算列数，根据 panel 横向对齐方式，在居中和靠右时，重新设置横向偏移值，考虑最终宽度和实际元素宽度的偏差； 2....遍历 panel 的 children，在排列时对 child 宽度做矫正，如果 child 宽度大于列宽，则把宽度调整到列宽，根据宽高比调整高度； 3....大家也可以看到，StaggeredPanel 中 child 的排列规则，确实是按照每个列高度最小的列来排列；而在 panel 宽度变化时，也对应作了重新的计算和排列。

1K6 0

Visual->UIElement->FrameworkElement，带来更多功能的同时也带来了更多的限制

WPF 或 UWP 中，我们平时开发所遇到的那些 UI 控件或组件，都直接或间接继承自 Framework。...---- 宽度和高度如果问 Width/Height 属性来自谁，只要在 WPF 和 UWP 里混了一点儿时间都会知道——FrameworkElement。...其处理了各种布局、变换过程中的情况。由于 FrameworkElement 的出现是为了让我们编程中像对待一个有固定尺寸的物体一样，所以也在切除上模拟了这样的空间有限的效果。...如果希望不被切掉，有两种方法修正：确保布局的时候所需尺寸不大于可用尺寸（一点也不能大于，就算是 double 精度问题导致的细微偏大都不行） MeasureOverride 返回的尺寸不大于参数传入的尺寸...我们在宽度和高度一节中已经说了不是，前面一段也说了不是——它们真的只是布局属性！然而，这真的很容易形成误解！

6193 0

将 UWP 中 CommandBar 的展开方向改为向下展开

2018-10-16 08:57 在 UWP 中使用 CommandBar 来迅速添加一组功能按钮是非常迅速的，是 UWP 中推荐的交互方案之一。...▲ CommandBar 在不合适的方向展开理论上标题栏是挡不住的。不过，由于流畅设计（Fluent Design）的存在，越来越多的应用开始使用自定义的标题栏，以获得浑然天成的流畅设计效果。...在我们一开始的例子中，我们需要留出标题栏的高度，而标题栏高度为 32，所以使用 Minimal 模式时，我们的展开方向自然因为顶部空间不足而向下展开。...而 Closed、Up 和 Down 之间的状态切换有四种 —— Closed 到 Up、Up 到 Closed、Closed 到 Down 以及 Down 到 Closed。...如果你对其他控件有小型样式的修改需求，可以阅读我的另一篇文章：UWP 轻量级样式定义（Lightweight Styling）。

1.7K1 0

Android屏幕适配很难嘛？其实也就那么回事

我们UI给出的设计图尺寸为1334*720，如果我按照宽度作为适配标准的话，按照设计图720px的宽度，屏幕的宽度应为360dp，也就是这样： final float targetDensity = appDisplayMetrics.widthPixels...Android的开原性导致了Android设备的尺寸的碎片化太严重，而通过查看手机的尺寸参数会发现，如果用这四个手机来测试的话，宽度可以直接整除，而高度不可以(并且我手边的测试机的宽度也可以整除，如果有宽度没法整除的手机呢...使用方法自己创建一个类，将最终方案里面的代码复制粘贴就可以使用了使用方法：在Application的onCreate()方法中如果只是适配一个方向的话，只设置这一句就可以了(我在utils里面设置了默认按照宽度适配...Activity里面切换方向之后，我修改掉的是Activity中的值(activityDensity)，但是返回再点击其他页面之后发现其他页面的适配方向也被修改掉了，于是乎权衡利弊之后我就用了这个相对来说影响最小的办法...(捣鼓了很久实在是想不到更好的办法了，如果各位看官有其他的好办法可以给我留言)。

3012 0

将 UWP 的有效像素（Effective Pixels）引入 WPF

当我们说按钮的有效像素宽度为 200 时，指的是你在 WPF 的 XAML 或 C# 代码中写下了 Width="200"。...▲ 图片来自于微软 UWP 设计指导文档 Introduction to Universal Windows Platform (UWP) app design (Windows apps) 可以看出，...谈物理尺寸：在 Surface Studio 这样的理想设备上，如果用户没有胡乱设置，它的物理宽度是 1 英寸；在同一个显示器设备上，如果显示器的 PPI 是 96 pixels/inch，且用户使用最佳分辨率...DPI 值设置为 96，则它的物理宽度是 1 英寸 DPI 值设置为 144，则它的物理宽度是 1.5 英寸 DPI 值设置为 192，则它的物理宽度是 2 英寸在以上情况下，如果 DPI...，如果用户降低了分辨率居中点对点显示，显示完按钮宽度所用的屏幕像素个数为 96 拉伸显示，显示完按钮宽度所用的屏幕像素个数大于为 96，虚拟的系统像素个数依然等于 96 接受现实看看按钮实际的大小

1.4K2 1

实现动态高度下的不同样式展现

容器查询在新时代布局新特性 -- 容器查询也详细介绍过。简单而言，容器查询它给予了 CSS，在不改变浏览器视口宽度的前提下，只是根据容器的宽度或者高度变化，对布局做调整的能力。...，应用该规则下的样式具体规则为，如果容器的高度小于等于 260px 时，.g-content 元素的伪元素将变得透明这样，我们就非常简单的实现了容器在不同高度下，ICON 元素的显示隐藏切换：完整的代码...方法二：clamp + calc 大显神威上面效果的核心在于：如果容器的高度大于某个值，显示样式 A 如果容器的高度小于等于某个值，显示样式 B 那么想想看，如果拿容器的高度减去一个固定的高度值，会发生什么...有什么办法让它在出现后，一直定位在容器的最下方吗？别忘了，CSS 中，还有几个非常有意思的数学函数：min()、max()、clamp()，它们可以有效限定动态值在某个范围之内！...我们可以清楚的看到，当我们往下拖动容器变高的时候，箭头元素是逐渐慢慢向上出现，而不是突然在某一个高度下，直接出现，所以在实际使用中，会出现这种 ICON 只出现了一半的尴尬场景：但是，莫慌！

3265 0

本地化入门

2.1 在XAML中实现本地化在XAML中实现本地化的过程很简单。...首先是设计时支持，对本地化来说，设计时支持主要包含3部分：在编写XAML时可以得到资源的智能感知有完整的设计视图在不同语言之间切换第一点，没有，而且写错属性名称还不会在编译时报错，而是用最惨烈的方式呈现...只在设置页面及菜单这些在切换语言时不会重新加载的UI上使用Binding，其它地方不变，这样简单的动态切换语言就实现了。运行结果如上，可以看到TextBox右键菜单仍未切换语言，需要重新启动。...上有时没办法获得设计时视图，所有文字都显示为"Item"。...resx本地化方案差不多，设计时支持几乎完美，包括智能感知和错误提示，不过还是没办法解决系统组件中的本地化问题（如TextBox右键菜单）。

2K4 0

实用的Shape指南

在UWP UI系统中，使用Shape是绘制2D图形最简单的方式，小到图标，大到图表都用到Shape的派生类，可以说有举足轻重的地位。...Fill: 形状拉伸其宽度和高度，从而可以正好适应其容器。 Uniform: 按比例改变形状的宽度和高度，直至形状到达容器板边缘。...UniformToFill: 按比例改变形状的宽度和高度，直到形状填满了整个可用控件的高度和宽度。...BezierSegment: 表示在两个点之间绘制的一条三次贝塞尔曲线。 LineSegment: 表示在两个点之间绘制的一条线，它可能是 PathFigure 在 Path 数据内的一部分。...QuadraticBezierSegment: 在 PathFigure 中的两点之间创建二次贝塞尔曲线。

1.2K3 0

静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。...2、设计方法：使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。...缺点：这种rem+js只不过是宽度自适应，高度没有做到自适应，一些对高度，或者元素间距要求比较高的设计，则这种布局没有太大的意义。如果只是宽度自适应，更推荐响应式设计。...响应式和弹性布局之间的对比：响应式布局：改变浏览器宽度，“布局”会随之变化，不是一成不变的，例如导航栏在大屏幕下是横排，在小屏幕下是竖排，在超小屏幕下隐藏为菜单，也就是说如果有足够的耐心，在每一种屏幕下都应该有合理的布局...结论： 1.如果只做pc端，那么静态布局（定宽度）是最好的选择； 2.如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，一份css+一份js调节font-size

10.1K3 3

win10 uwp 兴趣线

行间距我们在ViewModel写一个ObservableCollection，我把它名字叫Str，因为这个是随意的，我们不需要给他他值。然后在我们的界面，用ListView。... 然后把Rectangle放在右边，注意要设置他的高度和宽度... 开始设计我们不知道宽度和高度的值，每次修改都需要改好多个，那么我们如何就修改一个？...，也就是放圆圈的那个Grid宽度，然后定义Rectangle的宽度，作为垂直的Rectangle就是他宽度，水平的就是他高度。...源代码：https://github.com/lindexi/csdn-uwp

3342 0

win10 uwp 九幽图床

，默认-1，上传图片不缩放 Width 默认-1，图片宽度，有设置上传为设置宽度 Height 默认-1，图片高度 public abstract void UploadImage()...我们判断Scale》0，如果是，我们就用这函数上传。...sendFileCustom 上传图片设置图片宽度和高度，我们判断(uploadImageTask.Width > 0) && (uploadImageTask.Height > 0) sendFileOriginal...上传原图 sendFileDefault 当图片的宽或高大于某个值时，将高或宽等比缩放到这个值九幽上传开始需要appKey，这个可以在http://www.windows.sc创建应用然后得到.../tree/master/uwp/control/BitStamp

4624 0

New UWP Community Toolkit - DeveloperTools

概述 UWP Community Toolkit 中有一个开发者工具集 DeveloperTools，可以帮助开发者在开发过程中进行 UI 和功能的调试，本篇我们结合代码详细讲解 DeveloperTools...Rebuild() 方法中，下面我们看看 Rebuild() 方法实现：清空 containerCanvas，获取当前横向和纵向步长，如果 lineBrush 无效，则初始化为 ApplicationForegroundThemeBrush...；横向循环绘制矩形，循环步长是横向步长，总长度是控件实际宽度；绘制矩形宽度为 1，高度为控件实际高度，位置居左为当前总步长；纵向循环绘制矩形，循环步长是纵向步长，总长度是控件实际高度；绘制矩形高度为...DispatcherTimer，在 Start() 方法中实例化并启用它，Stop() 方法中停止它，并清空内容显示； private void Start() { if (updateTimer...总结到这里我们就把 UWP Community Toolkit 中的 DeveloperTools 的实现过程和简单的调用示例讲解完成了，希望这些工具对大家开发 UWP 应用有所帮助，如果大家有更好用的工具类

8517 0

折叠屏 ② | 华为资深专家深入解读折叠屏单页面布局设计

前言据Adobe公布的统计数据显示，如果App设计或布局没有吸引力，38%的用户将直接退出。这类统计数字在提醒设计师们，用户体验是头等大事。...单页面布局提供的高度直观、高效实用的导航将有助于确保为用户提供最佳体验，特别是在应用在屏幕可自由切换的折叠屏手机上时在上篇《折叠屏 ① | 华为资深专家解读折叠屏应用基础体验要求》中，为开发者详细讲解了应用基础体验要求...一界面信息架构及布局设计关于折叠屏手机，我们不妨先提出一个问题：当智能手机在手机和平板两种形态之间来回切换时，它的交互会是怎样的？在折叠态下，基本系统交互信息架构沿袭了普通手机竖屏的定义。...应用内多任务：给予用户可以并行处理多个任务的能力，由于多任务之间没有深度的关联性，因此，在信息架构上是相互独立的分支，每个任务在形态上应该给予用户充分的操作余地，如进入到多任务状态的时机与交互方式、任务之间的切换...适配规则：首先判断布局的区域的是否有明显的“宽高特征”，即横纵比是否大于4:3；其次判断横向宽度，是否能容得下若干个元素，如果容得下就左右排布，容不下就上下排布。

1.4K2 0

LeetCode42题，单调栈、构造法、two pointers，这道Hard题的解法这么多？

但是我们并不知道水坝中的水会被分成几个部分，所以直接求是不行的，那么有没有什么办法可以确定我们找到了一个完整的部分呢？我们先把这个问题简化一下，在什么情况下水坝有存储水的能力呢？...如果水坝的高度递增行吗？那如果递减呢？我们在纸上画一画很容易就想明白，递增和递减都不行，只有先递减再递增可以，也就是下图所示这样。 ?...我们是通过右侧出现大于或者等于它高度的水坝出现作为判断完整水域的条件，如果没有出现，我们就没办法判断究竟完整的水域能够延伸到哪里了。...当然是可以的，难点只有一个，就是我们需要知道当前的水平面的高度，这个是核心问题。我们之前搞那么多高度比来比去本质也是为了求水平面的高度。那么有没有什么办法可以直接求到水平面的高度呢？...我们在读入C的高度的时候，先弹出B的下标，我们计算它和C之间的水域面积，再弹出A，我们同样计算面积，一直到栈空或者栈顶的元素大于C即可，这时候我们插入C。

3291 0

不要再用js设置rem了，现代css自适应方案来了

font-size 来进行页面的自适应，基本原理就是 rem 表示的是 root em ，页面中所有的值都是基于html上的 font-size ，相对的进行对应的变化尤其是智能手机出现之后，我们没有办法在去固定我们的设备宽高...，需要考虑响应式设计，根据浏览器窗口大小有不同的布局方式 css 中的单位绝对单位单位分为绝对单位和相对单位，其中绝对单位有 px、mm、cm、in、pt、pc 这些都可以相互转换 1in =...以及 px 之间相互切换，但是好处也是很明显的如果你想要将当前的内容做一个响应式只需要这样 @media (min-width: 800px){ :root{ font-size: 1em...视口相对单位 vh: 视口高度的1/100 vw: 视口宽度的1/100 vmin: 视口宽度或者高度中较小的一方1/100 vmax: 视口宽度或者高度中较大的一方1/100 50vh 也就是视口高度的一半...有没有什么办法呢？

5.4K4 1

LeetCode 图解 | 42. 接雨水

题目描述：给定 n 个非负整数表示每个宽度为 1 的柱子的高度图，计算按此排列的柱子，下雨之后能接多少雨水。示例: 输入: [0,1,0,2,1,0,1,3,2,1,2,1] 输出: 6 ?...min - height[i]); } } return sum; } 复杂度分析时间复杂度：O(n^2) 空间复杂度：O(n^2) 那么有没有更好的办法来解决这个问题...如果左边挡板的高度小于右边的挡板高度，那么左边指针之前的雨水量取决于leftMax和height[left]的大小关系，如果前者大于后者，那么容量等与前者减去后者；反之，容量为0（可以参考解法一中的图来理解...）如果左边挡板的高度大于等于右边挡板的高度，与上一种情况基本相同，只不过是求的右边的雨水量。...在每次移动指针之后，我们要将挡板更新到最大值。其实道理也是比较简单，用宏观的思维去看待整个问题，最起码先保证两边的墙的高度（两块挡板），然后依次去到其中各个墙之间能装多少雨水的问题上。

9681 0

创建一个ProgressControl

前言博客园终于新增了UWP的分类，我来为这个分类贡献第一篇博客吧。 UWP有很多问题，先不说生态的事情，表单、验证、输入、设计等等一堆基本问题缠身。...在之前写的文章创建一个进度按钮中我实现了一个ProgressButton，它主要有以下几个功能：有Ready、Started、Completed、Faulted四种状态；从Ready状态切换到Started...状态按钮会从方形变成圆形；在Started状态下使用Ellipse配合StrokeDashArray显示进度；完成后可切换到Completed状态；出错后可切换到Faulted状态；运行效果如下...3.2.2 AnimationSet 在Started到Paused之间有一个平移的过渡，为了使位移根据元素自身的宽度决定我写了个RelativeOffsetBehavior，里面用到了UWP Community...为了减轻VisualTransition的负担，在VisualTransition中只改变Ellipse的Visibility，Opacity的动画使用了UWP Community Toolkit 的

6973 0

New UWP Community Toolkit - RotatorTile

，或设置当前索引，或更新上下文；对 Replace action，如果当前索引介于新的开始索引和结束索引之间，则更新下一个元素；对 Move action，如果当前索引介于新的开始索引和结束索引之间...Start(); } } 接着来看 OnCurrentItemPropertyChanged(d, e) 方法的处理，主要处理逻辑在 RotateToNextItem() 中：首先判断是否有两个或者更多的元素...，如果没有则退出处理；定义 Storyboard，动画时间是 500ms，方向和轮播的目标属性根据当前轮播的方向去计算；在动画结束时，开始准备下一个显示的元素； private void RotateToNextItem...UpdateTranslateXY() 方法，来更新平移时的 X 或 Y：对于 Left 和 Up，只需要充值 X 或 Y 为 0；对于 Right 和 Down，需要把对应的 X 或 Y 设置为 -1 × 对应的高度或宽度...总结到这里我们就把 UWP Community Toolkit 中的 RotatorTile 控件的源代码实现过程和简单的调用示例讲解完成了，希望能对大家更好的理解和使用这个控件有所帮助。

6158 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云