天道酬勤,学无止境

使用数据绑定处理样式(Handling styling with data binding)

问题

重写

我有一个接收文件的应用程序。 该文件有大量可编辑内容。 此内容有多种可能的类型(即布尔复选框、文本框等)。 问题是,这些值可以是单独的,也可以是一组(最多 8 个),因此它们以数组的形式出现。 我们将这些值绑定到ListView ,并使用DataTemplates来显示它们。 实际上,我从数组列表中创建了ListView

这些数组中的项目需要进行数据绑定和正确设置样式(例如,布尔数组需要创建复选框,而字符串数组需要文本框)。 每个创建的元素都需要放入ListView的列中。 当前的样式是使用带有数据绑定的DataTemplates ,即

<DataTemplate x:Key="testTemplate2">
    <TextBlock Text="{Binding Path=Value[0]}" 
               Margin="2" 
               HorizontalAlignment="Center" 
               VerticalAlignment="Center" />
</DataTemplate>

这对输入数组中的每个值重复,所以你有Value[1]Value[2]等。

这意味着重复几乎相同的代码 8 次,然后对下一个类型执行相同的操作。 由于有大量的输入类型,这意味着大量的重复代码。

我的问题是:有没有更好的方法来做到这一点,所以我们不必重复数据模板,同时继续使用列?

顺便说一句,我使用的是 .NET 3.5。

行的外观示例。 每个元素将在其自己的列中。 组合框是从数组构建的。

编辑示例数据模板:

<DataTemplate x:Key="textBoxTemplate2">
    <TextBox Text="{Binding Path=Value[2], NotifyOnSourceUpdated=True, UpdateSourceTrigger=PropertyChanged}" 
                     BorderBrush="{DynamicResource ComboBorder}"
                     Tag="{Binding Path=AllowedChars}"
                     PreviewTextInput="PreviewTextInputHandler"
                     DataObject.Pasting="PastingHandler"
                     ToolTip="{Binding Path=Title}" 
                     Margin="2" 
                     SourceUpdated="BindingSourceUpdated"
                     MaxLength="{Binding Path=DataLength}"
                     HorizontalAlignment="Stretch" 
                     VerticalAlignment="Center" >
        <TextBox.IsEnabled>
            <MultiBinding Converter="{StaticResource isEnabledConverter}">
                <Binding Path="IsLocked" Mode="OneWay" />
                <Binding Path="IsVisible[2]" Mode="OneWay" />
            </MultiBinding>
        </TextBox.IsEnabled>
    </TextBox>
</DataTemplate>

示例图:

我有一个视图模型。 这个 ViewModel 有一个 List,由 ItemData 组成。 类 ItemData 有一个名为 Values 的数组。 列表绑定到视图。 我们需要根据要访问的 ItemData 的属性来选择要使用的 DataTemplate:

  1. 一为名
  2. 一个或多个选项数组。

目前,我们在 ListView 中显示 List。 生成ListView时,列有不同的DataTemplates附加到它们的CellTemplate s,每个索引一个,总共 8 个 DataTemplates。

回答1

我的答案集中在您的话上:由于输入类型很多,这意味着大量重复代码。

代码重用:

由于您在Item template中需要为不同的DataTypes定义不同类型的控件,因此无法完全减少代码。 我的意思是,如果您想要String类型的TextBoxBool类型的Checkbox ,那么代码不能明显减少。 但是,您可以减少的是为不同的template一次又一次地定义Binding语法,正如我在您的TextBox Template示例中看到的那样。 您可以定义一次Biniding ,然后使用 n 个控件(在您的情况下为 8 个)一次又一次地重复使用它们。 以下是您的操作方法:

public class BindingResourceExtension : StaticResourceExtension
{
    public BindingResourceExtension() : base() { }

    public BindingResourceExtension(object resourceKey) : base(resourceKey) { }

    public override object ProvideValue(IServiceProvider serviceProvider)
    {
        var binding = base.ProvideValue(serviceProvider) as BindingBase;
        if (binding != null)
            return binding.ProvideValue(serviceProvider);
        else
            return null; //or throw an exception
    }
}

XAML

<Window.Resources>
    <ResourceDictionary>
        <Binding x:Key="MyBinding" Path="MyProperty" Mode="TwoWay" />
    </ResourceDictionary>
</Window.Resources>

(...)

<TextBox Text="{ns:BindingResource MyBinding}" />
<CheckBox IsChecked="{ns:BindingResource MyBinding}" />

因此可以实现一些代码的重用(在具有大型和复杂bindings的代码上成像)。 在您发布您的问题后,我正在搜索类似的内容,因此我发布了另一个关于绑定重用的问题,它有所帮助。 此外,由于Bindings将集中,它们将很容易更新。

项目模板:

除了您的代码重用问题之外,您还可以通过查看您的类图来使用嵌套的ItemsControl ,我可以看到并在另一个答案中提出建议:

<ListBox ItemsSource="{Binding CollectionOfArrays}">
<ListBox.ItemTemplate>
    <DataTemplate>
        <ItemsControl ItemsSource="{Binding Array}" />
    </DataTemplate>
</ListBox.ItemTemplate>

现在对于内部ItemsControl你必须实际定义Templates ,但我认为你已经很清楚那部分了。

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • WPF 数据绑定异常处理(WPF Data Binding exception handling)
    问题 我有一个绑定到 Integer 属性的文本框。 当用户在文本框中输入无法转换为整数(例如名称)的内容时,将引发异常并且原始属性值不会更改。 我想捕获异常以便我可以禁用连接到该属性的命令? 如果可能的话,我该如何从定义属性的视图模型中做到这一点? 回答1 我最近遇到了同样的问题,我使用行为来解决它(但如果你不想,你不需要它们,它只是为了在不同的视图中重用我需要的一些代码)。 主要思想是在 ViewModel 中定义一些方法,允许视图通知输入中 ViewModel 无法检测到的错误。 因此,首先在您的 ViewModel 中定义这些方法。 为简单起见,我只会跟踪错误的数量,但您可以存储有关它们的更多信息(例如实际错误): private int _errorCount = 0; void AddUIValidationError() { _errorCount++; } void RemoveUIValidationError() { _errorCount--; } 然后,在您的视图中,您注册System.Windows.Controls.Validation.ErrorEvent ,这是一个路由事件,可让您知道组件(之前配置为通知数据错误)何时检测到错误(如异常验证错误): public partial class MyView : UserControl // or
  • VUE学习03--VUE数据绑定(绑定数据,绑定属性,绑定样式,双向数据绑定)
    今天我们一起来学一学 VUE的绑定。 一、数据绑定 首先可以先把数据定义在Vue页面中的<script>标签内,然后在<template>标签中通过{{变量名去取}}。 另一种方法:<div v-text="变量名"></div> 如果变量是对象,可以{{对象.属性}}去取。 如果变量是集合,可以通过 v-for 遍历去取。 请看下面实例(我们在新建项目中的App.vue): <template> <div id="app"> <h2>hello vue 绑定数据: {{msg}}</h2> <br> 绑定数据的另一种方法: <div v-text="msg"></div> <br> <h3>{{obj.name}}</h3> <br> <hr> <ul><li v-for ="item in list" > {{item}} </li></ul> <br> <ul><li v-for ="item in list1" > {{item.title}} </li></ul> <ul><li v-for ="item in list2" > {{item.cate}} <ol> <li v-for ="news in item.list" > {{news.title}} </li> </ol> </li></ul> <br> </div> </template> <script>
  • v-model指令,mvvm,v-on指令,事件修饰符,``按键修饰符,v-bind指令绑定(对象,数组,style属性...)
    v-model指令,mvvm,v-on指令,事件修饰符,``按键修饰符,v-bind指令绑定(对象,数组,style属性...) 1. v-model指令(表单元素value的绑定指令,双向数据绑定) 当数据发生变化的时候,视图会发生变化; 当视图发生变化的时候,数据也会跟着同步变化; v-model指令 限制在 <input> <select> <textarea> components组件中使用 <div id="app"> <div>{{msg}}</div> <div> 当输入框中内容改变的时候, 页面上的msg 会自动更新 <input type="text" v-model='msg'> </div> </div> 双向数据绑定原理: vue双向数据绑定原理主要通过数据劫持Object.defineProperty和发布订阅模式实现的,通过Object.defineProperty监听数据发生变化然后通知订阅者(watcher),订阅者触发响应订阅; 2.mvvm mvvm把前端的视图层,分为三部分Model,View, VM:ViewModel m:model 数据层Vue中数据层都放在data里面; v:view 视图 Vue中view就是html页面; vm:view-model 控制器 将数据和视图层建立联系 vm就是Vue实例 通常用vm; 2.1
  • 将成员函数指针传递给C样式函数(Passing member function pointer to the c-style function)
    问题 我正在尝试将成员函数指针传递给c样式函数(因为它在C语言中是lib) 它想要的指针定义为: void (*)(int, const char*) 所以我想传递的函数是: void Application::onError(int error, const char *description) 我正在尝试通过以下代码传递它: setCallback(bind(&Game::onError, this, placeholders::_1, placeholders::_2)); 这给了我以下错误: cannot convert ‘std::_Bind_helper<false, void (Application::*)(Application*, int, const char*), Application* const, const std::_Placeholder<1>&, const std::_Placeholder<2>&>::type {aka std::_Bind<std::_Mem_fn<void (Application::*) (Application*, int, const char*)>(Application*, std::_Placeholder<1>, std::_Placeholder<2>)>}’ to ‘GLFWerrorfun {aka
  • Vue学习路线(上)
    Vue开发基础👆 Vue实例创建Vue实例el唯一根标签data初始数据methods定义方法computed计算属性watch状态监听filters过滤器 Vue数据绑定绑定样式内联样式绑定样式类 内置指令 Vue事件事件监听事件修饰符 Vue组件什么是组件局部注册组件template模板组件之间数据传递组件转换 Vue生命周期钩子函数实例创建页面挂载数据更新实例销毁请简述什么是Vue组件化开发 Vue实例 创建Vue实例 Vue实例:通过new关键字实例化Vue({})构造函数。 <script> var vm = new Vue({ // 选项 }) <script> Vue实例配置对象: el唯一根标签 el唯一根标签:在创建Vue实例时,el表示唯一根标签,class或id选择器可用来将页面结构与Vue实例对象vm中的el绑定。 data初始数据 data初始数据:Vue实例的数据对象为data,Vue会将data的属性转换为getter、setter,从而让data的属性能够响应数据变化。 methods定义方法 methods基本概念: 1️⃣methods属性用来定义方法,通过Vue实例可以直接访问这些方法 2️⃣在定义的方法中,this指向Vue实例本身 3️⃣定义在methods属性中的方法可以作为页面中的事件处理方法使用 4️⃣当事件触发后
  • Vue.js的Class 与 Style 绑定 && 事件处理 @stage3---week1--day5-1
    Class 与 Style 绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。 绑定 HTML Class 对象语法 我们可以传给 v-bind:class 一个对象,以动态地切换 class: <style> .size { width: 100px; height: 100px; } .bg { background: red; } .bg1 { background: blue; } </style> <body> <section id="app"> <p class="size bg"></p> <h3> vue - class - 对象形式 </h3> <p :class="{size:true,bg:true}"></p> <p :class="{size:flag,bg:5 > 3}"></p> //这里的size是属性'size',指的是类名 <!-- 拓展 --> <p :class="{[size]:true,[bg]:true}"></p> //这里的size是变量
  • vue输出语句_原生JS如何输出Vue中的data数据
    从vue.js的框架安装开始讲起,讲解vue中用到的常用的语法、数据绑定、指令、条件语句、循环语句、样式绑定、事件处理、监听、表单相关以及和后台数据库的交互。 学完本课程可以做一些基本的实战项目 学习Axios的使用 学习vue的基础语法 学习vue和后台数据库的交互 00-课程说明 【Vue起步】2 01-第一个Vue页面 02-VUE.JS框架的引入和安装 03-Vue.js起步-属性的定义和使用 04-Vue.js起步-函数的定义和使用 05-Vue中data数据的第2种定义方式 06-Vue中data数据的改变和设置方式1 07-Vue中data数据的改变和设置方式2 08-原生JS如何输出Vue中的data数据 09-Vue中的系统属性的使用 【Vue.js模板数据绑定和form元素】3 10-数据绑定-文本插值 11-数据绑定之v-html指令 12-Vue.js中提供了完全的JavaScript表达式支持 13-数据绑定之实现双向数据绑定v-model指令(input应用) 14-数据绑定之v-model指令-textarea中应用 15-数据绑定之v-model指令-select下拉列表应用 16-数据绑定之v-model指令-checkbox单选应用 17-数据绑定之v-model指令-checkbox多选应用 18-数据绑定之v-model指令
  • vue点击改变data_Vue中data数据的改变和设置方式1
    从vue.js的框架安装开始讲起,讲解vue中用到的常用的语法、数据绑定、指令、条件语句、循环语句、样式绑定、事件处理、监听、表单相关以及和后台数据库的交互。 学完本课程可以做一些基本的实战项目 学习Axios的使用 学习vue的基础语法 学习vue和后台数据库的交互 00-课程说明 【Vue起步】2 01-第一个Vue页面 02-VUE.JS框架的引入和安装 03-Vue.js起步-属性的定义和使用 04-Vue.js起步-函数的定义和使用 05-Vue中data数据的第2种定义方式 06-Vue中data数据的改变和设置方式1 07-Vue中data数据的改变和设置方式2 08-原生JS如何输出Vue中的data数据 09-Vue中的系统属性的使用 【Vue.js模板数据绑定和form元素】3 10-数据绑定-文本插值 11-数据绑定之v-html指令 12-Vue.js中提供了完全的JavaScript表达式支持 13-数据绑定之实现双向数据绑定v-model指令(input应用) 14-数据绑定之v-model指令-textarea中应用 15-数据绑定之v-model指令-select下拉列表应用 16-数据绑定之v-model指令-checkbox单选应用 17-数据绑定之v-model指令-checkbox多选应用 18-数据绑定之v-model指令
  • Vue中Class和Style几种v-bind绑定的用法-详解案例
    项目开发中给元素添加/删除 class 是非常常见的行为之一, 例如网站导航都会给选中项添加一个 active 类用来区别选与未选中的样式,除了导航之外其他很多地方也都会用到这种方式处理选中与未选中。 除了设置 class 我们在项目中也经常设置元素的内联样式 style,在 jquery 时代我们大多数都是利用 addClass 与 removeClass 结合使用来处理 class 的添加/删除,利用 css() 方法设置/获取元素的内联样式。 那么在 vue 中 我们如何处理这类的效果呢?在 vue 中我们可以利用 v-bind 指令绑定我们的 class 与 style,接下来我们看看 vue 中给我们提供了哪些绑定它们的方式。 对象语法绑定 Class Tab 页的切换是我们最常见的一个效果之一,如何让选中的标题高亮,常用的方式就是动态切换 class 。 <div id="app"> <div class="button-group"> <button v-for="(tab, index) in tabs" v-bind:key="index" v-bind:class="{active: currentTab === tab}" v-on:click="currentTab = tab" >{{tab}}</button> </div> <component v
  • vue学习记录:事件修饰符、v-model、Class 与 Style 绑定
    一、vue.js事件修饰符 .stop 阻止冒泡.prevent 阻止默认行为.self 实现只有点击当前元素时候,才会触发事件处理函数.capture 实现捕获触发事件的机制.once 只触发一次事件处理函数 <div id="app"> <!-- 使用 .stop 阻止冒泡 --> <div class="inner" @click="div1_out"> <input type="button" value="stop" @click.stop="stop_thing"> <!-- 使用 .prevent 阻止默认行为 --> <a href="http://www.baidu.com" @click.prevent="linkClick">有问题,先去百度</a> <!-- 使用 .self 实现只有点击当前元素时候,才会触发事件处理函数 --> <input type="button" value="self" @click.self="self_thing"> <!-- 使用 .capture 实现捕获触发事件的机制 --> <input type="button" value="capture" @click.capture="capture_thing"> <!-- 使用 .once 只触发一次事件处理函数 --> <a href="http://www.baidu
  • WPF 样式的绑定(Binding for WPF Styles)
    问题 我正在尝试创建一个自定义控件 - 一个按钮 - 它将根据数据上下文中的属性值应用多种样式。 我在想的是使用类似的东西: <Button Style="{Binding Path=ButtonStyleProperty, Converter={StaticResource styleConverter}}" Text="{Binding Path=TextProp}" /> 在代码中...实现一个 IValueConverter,它在ConvertTo方法中执行类似于以下代码的操作: switch(value as ValueEnums) { case ValueEnums.Enum1: FindResource("Enum1ButtonStyle") as Style; break; ... and so on. } 但是我不完全确定如何拉出样式对象,即使这是可能的...... 同时我正在做的是处理DataContextChanged事件,然后将处理程序附加到绑定到按钮的对象的PropertyChanged事件 - 然后在那里运行 switch 语句。 它不是很完美,但在我找到更好的解决方案之前,这似乎是我必须使用的。 回答1 如果您想替换整个样式(而不仅仅是它的元素),那么您可能会将这些样式存储在资源中。 您应该能够执行以下操作: <Button> <Button
  • 在 AngularJS 服务中处理数据绑定(Handling data binding in AngularJS Services)
    问题 我试图弄清楚当我的数据存储在服务中时如何正确处理绑定。 如果它将服务放入 $scope 中,然后让模板直接绑定到它,我可以让事情正常工作,但这似乎是一个非常糟糕的主意。 我基本上希望拥有它,以便我的视图/控制器能够轻松地更改服务中的状态并将其反映到任何地方。 感觉我应该能够做类似以下的事情,但它不起作用(http://jsfiddle.net/aidankane/AtRVD/1/)。 HTML <div ng-controller="MyCtl"> <select ng-model="drawing" ng-options="d.file for d in drawings"></select> </div> <div ng-controller="MyOtherCtl"> {{ drawing }} </div> JS var myApp = angular.module('myApp', []); myApp.factory('myService', function(){ var me = { drawings: [{'file':'a'}, {'file':'b'}] }; // selected drawing me.drawing = me.drawings[0]; return me; }); function MyCtl($scope, myService){
  • VUE(一)初识VUE.JS
    初识VUE.JS DOM操作频繁,代码繁杂;DOM操作与逻辑代码混合,可维护性差;不同功能区域书写在一起,可维护性低;模块依赖关系复杂 Vue.js简介 遵循vue.js规则来使用这个工具提高我们的开发 数据驱动视图 **单向数据绑定:**数据变化会自动更新到对应元素视图中,无需手动操作DOM **双向数据绑定:**自动将元素输入内容更新给数据,实现数据和元素内容的双向绑定(可输入元素) **MVVM:**软件开发思想 model—代表数据view—试图模板viewmodel—业务逻辑处理代码 基于MVVM模型的数据驱动试图解放了DOM操作,View和Model处理分离,降低代码的耦合度 双向绑定时的Bug调试难度增大,维护成本低 组件化开发 将网页功能封装为自定义HTML标签,复用时书写自定义标签名,可以封装结构、封装样式和逻辑代码,提高了开发效率和可维护性 基础语法 el选项 用于选取一个DOM元素作为VUE实例的挂载目标,挂载元素内部才会被VUE进行处理,代表MVVM中的View层 vm.$el()用来获取el挂载元素 var vm=new Vue({ el:'#app' }); vm.$mount() 后期进行挂载内容添加 var vm=new Vue({}); app=document.getElementById('app') vm.$mount(app); 插值表达式
  • 如何在 KnockoutJS 中用 {{}} 样式绑定替换数据绑定标签?(How replace data-bind tag with {{}} style bindings in KnockoutJS?)
    问题 我想像使用 AngularJS 一样声明我的绑定,但我使用的是 KnockoutJS 库。 也就是说,我想使用 Knockout,但使用我从 Angular 知道的语法。 例如: Today's message is: <span data-bind="visible:true,text:myMessage"></span> 我想使用{{}}表示法编写,如下所示: Today's message is: <span {{visible:true,text:myMessage}}></span> 如何在 KnockoutJS 中使用基于{{}}的语法替换data-bind属性? 回答1 http://mbest.github.io/knockout.punches/ 就是你所需要的。 Knockout Punches 将传统的 KO 语法转换为 AngularJS 之类的东西 <div>Hello {{name}}.</div> 我个人觉得它非常容易使用。
  • Vue基本用法、Vue模板语法
    Vue概述 vue:渐进式JavaScript框架 渐进式:声明式渲染 --> 组件系统 --> 客户端路由 --> 集中式状态管理 --> 项目构建 vue官网 优点:(官方) 易用:熟悉HTML、CSS、JavaScript知识后,可快速上手vue灵活:在一个库和一套完整框架之间自如伸缩高效:20kB运行大小,超快虚拟DOM Vue基本使用 实例参数分析 el:元素的挂载位置(值可以是CSS选择器或者DOM元素)data:模型数据(值是一个对象)methods: 能定义很多我们需要的方法 var vm = new Vue({ el: '#app', data: { msg: 'Hello Vue', msg1:'<h1>html</h1>' }, methods:{ handle:function(){ //this是vue的实例对象 this.num++; } } }); 插值表达式用法 将数据填充到HTML标签中插值表达式支持基本的计算操作 <div>{{msg}}</div> Vue代码运行原理分析 概述编译过程的概念(Vue语法 —(Vue框架)—>原生语法) Vue模板语法 模板语法概述 1、如何理解前端渲染? 把数据填充到HTML标签中 --> 静态HTML内容 2、前端渲染方式 原生JS拼接字符串: 将数据以字符串的方式拼接到HTML标签中 缺点:
  • 以编程方式添加的 MenuItem 导致绑定错误(MenuItem added programmatically causes Binding error)
    问题 我有一个主菜单mnuMainMenu由几个子菜单组成。 其中一个子菜单mnuMostRecentDirs本身就是另一个菜单,它的项目在运行时生成,使用绑定到 ObservableCollection 的 ItemSource 属性。 基本上它显示了最近使用的文件夹的列表。 问题是动态添加的MenuItems产生如下数据绑定错误: System.Windows.Data 错误:4:无法找到引用“RelativeSource FindAncestor, AncestorType='System.Windows.Controls.ItemsControl', AncestorLevel='1''的绑定源。 BindingExpression:Path=Horizo​​ntalContentAlignment; 数据项=空; 目标元素是 'MenuItem' (Name=''); 目标属性是“Horizo​​ntalContentAlignment”(类型“Horizo​​ntalAlignment”) 主菜单的 XAML 声明如下所示: <!-- Main Menu --> <Menu x:Name="mnuMainMenu" Height="Auto" IsMainMenu="True"> <!--- ... more menu declarations before ... -
  • Vue理论到实战
    引在前面 自己学习Vue也有很长一段时间了,这里是学习过程中总结的一些知识,希望能帮助到大家 这里有一些开源项目,也可以拿去练手: https://github.com/Ramenbear(欢迎star) 一.vue前言 1.Vue.js是一套响应式系统,前端开发库 2.Vue.js是一套构建用户界面的渐进式框架,采用自底向上增量开发的设计,核心库只关心视图层,提供了MVVM数据绑定和一个 可组合的组件系统通过简单的API实现响应式的数据绑定和可组合的视图组件 3.完整网页是由DOM组合与嵌套形成最基本的视图结构,再加上css样式的修饰,使用JS接受用户的交互请求使用事件响应把最 基本的视图结构拿出来,称为视图层,传统开发数据和视图全部混合在HTML中,处理起来十分不易 4.主要特点 1.轻量级框架 2.双向数据绑定 1.声明式渲染是双向数据绑定的主要体现 1.声明式渲染:用简洁的模板语法声明式地将数据渲染进DOM,只需要指明最后效果 2.命令式渲染:告诉程序去做什么,按照你的命令一步一步去做 2.数据发生变化,视图自动更新 利用ES6中的Object.definedProperty中的setter/getter代理数据、监控数据操作 3.指令 与页面交互,主要靠内置指令来完成,表达式改变,相应的将某种行为应用到DOM上 4.组件化 1.组件可以扩展HTML元素,封装可重用的代码
  • WPF 绑定到样式中的另一个属性的绑定(WPF binding to another property's binding in a style)
    问题 我不确定问这个问题的最佳方式(抱歉问题标题含糊不清),但基本上我想使用从数据上下文传入属性的值转换器在 TextBox 上设置 MaxLength 属性,以及传入属性上的属性作为转换器参数。 我想以一种风格来做这一切,而不是在逐个控制的基础上。 这是以非样式方式执行此操作的示例: <TextBox Text="{Binding MyPropertyName.TheirPropertyName}" MaxLength="{Binding MyPropertyName, Converter={StatocRespirceMyCoolConverter}, ConverterParameter=TheirPropertyName}" /> (如果您想知道,他们的PropertyName 表示 MyPropertyName 类型上的一个属性,该属性具有类似 [StringMaxLength(15)] 的属性,我可以在值转换器中访问并返回该属性。)此外,是否有什么方法可以传入 MyPropertyName 的类型而不是实例? 我只需要类型来执行 StringMaxLength 属性查找。 无论如何,我怎么能以一种风格去做这样的事情呢? 我已经到了: <Setter Property="MaxLength"> <Setter.Value> <Binding Converter="
  • 如何使用数据绑定更改 XAML 文件的样式?(How can I change styles of XAML file using Data Binding?)
    问题 我正在将一组对象绑定到 WPF 中的列表框,为简单起见,我们将说我正在绑定的对象具有 3 个属性:名称、URL、IsBold。 我想要做的是,如果 IsBold 设置为 true,则显示不同,再次作为示例,我想将出现 Name 的 TextBlock 设置为粗体。 这样的事情甚至可能吗? 如果我的一个属性是某个值,我可以使用不同的样式或其他东西吗? (我可以在 XAML 中执行类似 if/else 的操作吗)? 我真的不知道从哪里开始。 假设我的 DataTemplate 中有这个 <TextBlock Style="{StaticResource notBold}" Text="{Binding Path=Name}"></TextBlock> 如果 IsBold 为该特定项目设置为 true 我希望它是(注意样式从“notBold”更改为“isBold”) <TextBlock Style="{StaticResource isBold}" Text="{Binding Path=Name}"></TextBlock> 或者类似的东西。 我想更普遍的问题。 是否可以根据数据绑定的项目更改某些内容的外观? 如果这是不可能的,如何做这样的事情? 通过代码隐藏不知何故? 谢谢 回答1 您通常会为列表中的对象编写一个 DataTemplate,然后让 DataTrigger 根据
  • Vue Class与Style绑定【五】
    Class与Style绑定 操作元素的class列表和内联样式是数据绑定的一个常见需求,因为他们都是attribute,所以我们可以用v-bind来处理他们 绑定HTML Class 对象语法 通过v-bind:class,借助data或计算属性,来动态改变某个class是否存在 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> .active, .active2, .active3 { border: 3px solid red; width: 100px; height: 100px; } </style> </head> <body> <div id="app"> <!-- <div v-bind:class="{'active': isactive}">我是DIV</div> --> <!-- <div v-bind:class="classObject