首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在AdaptiveTrigger UWP中设置绑定到页面元素ActualWidth的ScrollViewer宽度

在AdaptiveTrigger UWP中,可以通过以下步骤设置绑定到页面元素ActualWidth的ScrollViewer宽度:

  1. 首先,在XAML文件中创建一个ScrollViewer元素,并设置其名称和水平滚动条的可见性:
代码语言:txt
复制
<ScrollViewer x:Name="myScrollViewer" HorizontalScrollBarVisibility="Auto">
    <!-- 内容 -->
</ScrollViewer>
  1. 接下来,使用AdaptiveTrigger来设置ScrollViewer的宽度适应不同的布局状态。可以在VisualStateManager.VisualStateGroups中添加一个AdaptiveTrigger,并设置相应的MinWindowWidth:
代码语言:txt
复制
<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState>
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="0" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <!-- 设置ScrollViewer的宽度 -->
                <Setter Target="myScrollViewer.Width" Value="{Binding ElementName=myScrollViewer, Path=ActualWidth}" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>
  1. 最后,确保在页面的Loaded事件中注册VisualStateGroup,以便在页面加载时应用适当的布局状态:
代码语言:txt
复制
private void Page_Loaded(object sender, RoutedEventArgs e)
{
    VisualStateManager.GoToState(this, "DefaultState", false);
}

这样,当页面的布局状态发生变化时,ScrollViewer的宽度将自动适应页面元素ActualWidth的值。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)

  • 产品介绍链接地址:https://cloud.tencent.com/product/cvm
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

XAML响应式布局技术

响应式布局概念是一个页面适配多个终端及不同分辨率。在针对特定屏幕宽度优化应用 UI 时,我们将此称为创建响应式设计。...UWP提供了AdaptiveTrigger这个状态触发器,它以MinWindowWidth和MinWindowHeight未条件,根据页面宽度或高度进入设定好不同状态(通常来说只使用MinWindowWidth...在下面的示例StackPanel默认使用垂直排列,当页面宽度超过720像素时改为水平排列。...使用AdaptiveTrigger可以做到前一节中提到UWP响应式设计常用6个技术,除了UWP自带AdaptiveTrigger,也可以自定义StateTriggerBase,这将在下一篇文章中介绍...ViewBox ViewBox可以根据自身大小放大或缩小它Content元素,某些情况下它是WPF和UWP平台终极响应式设计解决方案,因为WPF/UWP元素都是矢量元素所以大部分元素都可以无损缩放(

2.3K10

New UWP Community Toolkit - AdaptiveGridView

- 元素高度 ItemWidth - 元素宽度 OneRowModeEnabled - 单行模式可用性标志,布尔值 DesiredWidth - 元素期望宽度 StretchContentForSingleRow...- 内容知否已经拉伸去填充一行,布尔值  另外类还有一个方法 CalculateColumns(containerWidth, itemWidth), 根据容器宽度元素宽度,确定控件应该包含几列,...或 container 为空时,设置为需要 container Margin;最后根据 每一列在 container 宽度,减掉 itemMargin,得到 itemWidth; protected...OneRowMode 时使用,作用是把原高度,加上 padding 和 margin 变成新高度,效果就是单行模式时,元素在高度上没有空隙;设置 Item padding 和 margin 会失效...总结 这里我们就把 UWP Community Toolkit  AdaptiveGridView 控件源代码实现过程和简单调用示例讲解完成了,希望能对大家更好理解和使用这个控件有所帮助。

1.4K70
  • UIElement.Clip虽然残废,但它还可以这样玩

    UWPUIElement.Clip WPFClip真的为所欲为,然而到了UWP就变得绑手绑脚了,因为UWPUIElement.Clip居然是个RectangleGeometry属性,也就是说UIElement...或者可以绑定ActualHeight和ActualWidth?反正我没有试过。...不过UWP有个神奇功能,CornerRadius设置为大于0值就会裁剪范围外内容,毕竟有了圆角不裁剪的话会很难看?所以UWP贴心地帮忙做了这个操作?...算了不管原理了,反正一个像素圆角,你不说我不说没人会看得出来,安心地这样用比自己设置Clip方便多了。...结语 UWP其实有几种裁剪方案,最残废是UIElement.Clip,也就是这篇文章提到这个。上一篇文章还讲解了Win2D裁剪。

    79820

    Extensions in UWP Community Toolkit - FrameworkElement Extensions

    ; 而通过扩展设置绑定,和直接设置 ActualHeight 和 ActualWidth 绑定区别就是,直接设置方式,对于 Width 和 Height 未指定情况绑定无效,且不会更新,而扩展方式可以获取初始尺寸且可以实时更新...可以看到绑定目标的 ActualHeight 和 ActualWidth 在改变时,会实时赋值,这样绑定属性就能得到实时更新。...,然后把扩展后类提 PR UWPCOmmunityToolkit Github 。 ...调用示例 我们创建了三个 Rectangle,第一个是绑定目标,第二和第三个去绑定第一个实际尺寸;可以看到因为第二个红色矩形使用 ActualHeight 和 ActualWidth 直接进行绑定,所以并没有绑定正确值...总结 这里我们就把 UWP Community Toolkit Extensions  FrameworkElement Extensions 源代码实现过程和简单调用示例讲解完成了,希望能对大家更好理解和使用这个扩展有所帮助

    78680

    win10 uwp 简单MasterDetail UWP 导航List点击后退按钮页面更改大小修改显示修改我代码源码左右列表和内容相互操作

    ,可以去下我源代码https://github.com/lindexi/UWP 然后在按后退按钮,就把我们hasFrame=false; 大概我们就把一个页面做好,Detail就显示我们点击传str...如果看不懂我上面说,可以看我代码https://github.com/lindexi/UWP/tree/master/uwp/src/DetailMaster 我们开始大屏幕是使用Grid有分开,左边列表...我首先新建 Model,放下随意类,作为显示内容,然后在ViewModel使用ObservableCollection,当然给他也是随意 在界面我们需要Grid,这时我绑定了GridLength...,设置这个简单。...,一般建议使用 MVVM 然后绑定 ViewModel ,通过 ViewModel 可以直接操作两边,因为 ViewModel 知道左右数据。

    1.9K00

    dotnet 从入门放弃 500 篇文章合集

    本文是记录我从入门放弃写博客 博客包括 C#、WPF、UWP、dotnet core 、git 和 VisualStudio 和一些算法,所有博客使用 docx 保存 下载:dotnet 从入门放弃...win10 uwp 获取文件夹出错 win10 uwp 获得元素绝对坐标 win10 uwp 获得缩略图 win10 uwp 萤火虫效果 win10 uwp 让焦点在点击在页面空白处时回到textbox... win10 uwp 设置 HttpClient 浏览器标识 win10 UWP 访问网页 win10 uwp 读写csv win10 uwp 读写XML win10 uwp 调试软件启动 win10...win10-uwp-应用转后台清理内存 win10-uwp-弹起键盘不隐藏界面元素 win10-uwp-快捷键 win10-uwp-截图-获取屏幕显示界面保存图片 win10-uwp-打包第三方字体应用...好看矢量图标 wpf 如何使用 Magick.NET 播放 gif 图片 WPF 如何在 WriteableBitmap 写文字 WPF 如何在应用程序调试启动 WPF 如何在绑定失败异常 WPF

    10.4K20

    win10 uwp 进度条 Marquez

    MaximumProperty); } set { SetValue(MaximumProperty, value); } } 所有值变化时,需要修改文字和进度条,因为进度条没有绑定代码...依赖属性是很好用,他自己就带了绑定,如果想用绑定,那么可以使用依赖属性,依赖属性可以使用 dep 和tab打出来,一般依赖属性是比较长,最小值用就是 vs 自带依赖属性,也就是经常这样写。...` w / 2 ,w就是控件宽度。...但是还需要乘以现在 v / t` 于是算法就是 sc.X = w / 2 * v / t ,但是因为文字有宽度,显示是文字左边,所以需要减去文字,但是可能让文字在控件看不到,因为sc.X < 0,于是代码就是.../uwp/control/Progress 如果 想写一个控件,建议先在我库找找,可能我做了,所以可以让你省点时间。

    44210

    Extensions in UWP Community Toolkit - Visual Extensions

    概述 UWP Community Toolkit Extensions 中有一个为可视元素提供扩展 - VisualExtensions,本篇我们结合代码详细讲解 VisualExtensions 实现...VisualExtensions 为可视元素提供了一种简单在 XAML 修改通用属性方法,这些通用属性包括 AnchorPoint,CenterPoint,Offset,Opacity,RotationAngle...; Nuget: Microsoft.Toolkit.Uwp.UI; 开发过程 代码分析 VisualExtensions 处理逻辑在 VisualExtensions.cs 类,下面我们先来看看类结构... SizeChanged 事件绑定;把 normalizedValue 转为 Vector3 类型,然后设置 element VIsual CenterPoint,根据 ActualSize 和...总结 这里我们就把 UWP Community Toolkit Extensions VisualExtensions 源代码实现过程和简单调用示例讲解完成了,希望能对大家更好理解和使用这个扩展有所帮助

    63750

    用画中画模式(CompactOverlay Mode)让用总在最前端显示

    什么是,以及怎么用画中画 Windows 10 Creators Update以后UWP提供了一个新视图模式CompactOverlay,中文翻译成 紧凑覆盖层?...窗体首先缩小并移动到屏幕右上方,并且有以下行为: • 窗口置于顶层; • 最大化、最小化按钮消失; • 标题栏会在失去焦点并且鼠标离开后几秒钟消失; • 使用`Window.Current.SetTitleBar`设置为标题栏元素内容也会在鼠标离开后消失...通过自定义StateTrigger响应画中画模式 上一篇文章介绍过如何使用AdaptiveTrigger实现响应式布局,CompactOverlay情况更加极端,毕竟有可能从1920 x 1050突然变成...这个类继承自StateTriggerBase,在监视FrameworkElementSizeChanged事件调用SetActive改变State激活状态。...或者索性导航页面 使用 StateTrigger毕竟还是有些繁琐,大部分情况下需要用到画中画模式应用,CompactOverlay视图都是固定那几个,所以可以直接导航一个新页面

    1.4K10

    New UWP Community Toolkit - DeveloperTools

    ,日记应用网格等 UI 显示; FocusTracker - 可以显示当前聚焦 XAML 元素信息,包括 name,type,AutomationProperties.Name 和 first parent...Stop(); ClearContent(); } 来看一下 updateTimer Tick 处理方法: 使用 FocusManager 获取当前获得焦点元素,清空上一次获取焦点控件内容信息...,AlignmentGrid 定义了 AlignmentGrid 作为矩形边框画刷,我们可以根据矩形位置,绘制出左边右边渐变画刷,或者虚线画刷;或者跨度更大一些,使用 ImageBrush...FocusTracker 我们使用 FocusTracker 来跟踪对 TextBox 聚焦事件,XAML 设置属性和下面运行显示信息一致; <Grid Background="{ThemeResource...总结 <em>到</em>这里我们就把 <em>UWP</em> Community Toolkit <em>中</em><em>的</em> DeveloperTools <em>的</em>实现过程和简单<em>的</em>调用示例讲解完成了,希望这些工具对大家开发 <em>UWP</em> 应用有所帮助,如果大家有更好用<em>的</em>工具类

    87570

    扩展GridView控件——为内容项添加拖放及分组功能

    在BeforeDrop事件Handler,使用 NewGroupIndex 创建新数据组,并插入已有组集合。最后,需要实现扩展GridView控件模板。...在用户可拖拽项目的位置创建新分组,并使用占位符来代替。一旦用户拖某一内容放置控件边界时,触发创建新分组,ItemsPresenter两个边界元素是新组占位符。...因为指定Item尺寸逻辑必须放在数据模型,而不是控件内部。 想将某一项显示较大一点,需要在数据项创建一个属性返回比1大整型数值,来设置RowSpanhuoColumnSpan属性。...,我们继续改善此前实现功能,当用户离开当前页面,将当前布局暂存。...到此已经实现了GridView项与Windows8开始菜单具有的相同用户体验,如果你想了解如何在Windows10平台下开发UWP引用,请持续关注下篇文章:如何在Windows10开发UWP应用

    2.9K50

    UWP第三方简书客户端分享

    异步线程处理我在上一篇《讲讲我在Windows10(uwp)开发遇到一些坑》已经说过了.这里说下贴一下异步Command代码: public class AsyncCommand : AsyncCommandBase...对于UWP下拉刷新,我在博客园里看到了几种实现方式: UWP一种下拉刷新实现 只贴了一种,因为目前实现下拉刷新方式都是ListView外部套一个ScrollViewer来实现,这种实现方式有个严重问题就是...使用了MVVMLight,所有的界面都以嵌入方式放入MainPage.... 这里有个注意地方就是View只是作为一个资源方式存在,当MainPage中发生页面转换时,会将ViewModel名字作为一个Key(所以类名必须是...总体来说,因为是全新平台,相应开源组件比较少,上手还需要一些时间来熟悉这个平台,平台不足之处也需要自己从无有.

    1.6K50

    Extensions in UWP Community Toolkit - Overview

    来指定是否允许绑定实际尺寸 ActualWidth 和 ActualHeight。...来看一下简单代码示例: 我们使用两个 TextBlock 来显示实际绑定尺寸宽度和高度,图一是 EnableActualSizeBinding 为 True 时显示,图二时为 False 时错误信息显示...设置为 Both;可以看到运行显示 test01 test03 这些元素显示和设置是一致。...Visual Extensions 通过组件附加属性,让开发者可以直接在 XAML 修改可视元素通用属性。...总结 这里我们就把 UWP Community Toolkit  Extensions 种类和简单代码调用讲解完成了,希望这些扩展对大家开发 UWP 应用有所帮助,如果大家有更好用扩展类,也欢迎大家给

    1.4K120
    领券