WPF元素的绑定

一、两个元素的简单绑

    WPF元素的绑定,是指将两个控件绑在一起,比如利用滑动条Slider,改变刻度时,相应的标签元素中的字体的大小就会增加。

这种元素的绑定,要知道谁是目标元素,谁是源元素。比如用滑动条的刻度大小去绑定标签元素中的字体的大小。这里面滑动条的刻度就是源元素,标签字体大小就是目标元素。

在标签元素中字体大小的属性中就可以去直接绑定,绑定语句是:

       FontSize="{Binding ElementName=slider1,Path=Value}

解释:Binding ElementName需要绑定的元素的名称,Path需要绑定元素的属性

完整的代码

<Window x:Class="BandingWPF.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="560" Width="522.5">
    <Grid>
        <StackPanel HorizontalAlignment="Left" Height="388" Margin="53,31,0,0" VerticalAlignment="Top" Width="373" >
            <Slider Name="slider1" HorizontalAlignment="Left" Margin="10" VerticalAlignment="Top" Height="24" Width="353" Maximum="40" Value="10" TickPlacement="TopLeft" TickFrequency="1" />
            <TextBlock Width="Auto" Name="textBlock1" HorizontalAlignment="Left" Margin="10" TextWrapping="Wrap" Text="TextBlock11" VerticalAlignment="Top"  FontSize="{Binding ElementName=slider1,Path=Value}" />
        </StackPanel>

    </Grid>
</Window>

效果

二、多个元素的绑定

接着上面的例子,再添加一个文本框元素;当滑动块滑动的时候不仅仅改变标签元素的字体大小,还会在文本框元素中显示字体的具体大小;当直接在文本框元素中输入字体大小的时,标签框的字体大小也会发生相应变化。

上面的简单例子中实现的仅仅是源元素改变目标元素,而这个例子增加了目标元素改变源元素,目标元素就是文本框的内容,而源元素就是标签的字体大小。如果是目标元素改变源元素,需要再绑定语句中增加一个属性“UpdateSourceTrigger=PropertyChanged”;

完整代码

<Window x:Class="BandingWPF.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="587.5" Width="440">
    <Grid >
        <StackPanel HorizontalAlignment="Left" Height="388" Margin="10" VerticalAlignment="Top" Width="Auto" >
            <Slider Name="slider1" HorizontalAlignment="Left" Margin="10" VerticalAlignment="Top" Height="24" Width="353" Maximum="40" Value="10" TickPlacement="TopLeft" TickFrequency="1" />
            <TextBlock Width="Auto" Name="textBlock1" HorizontalAlignment="Left" Margin="10" TextWrapping="Wrap" Text="TextBlock11" VerticalAlignment="Top"  FontSize="{Binding ElementName=slider1,Path=Value}" />
            <TextBox Height="23"  TextWrapping="Wrap" Text="{Binding ElementName=textBlock1,Path=FontSize,UpdateSourceTrigger=PropertyChanged}" />
        </StackPanel>

    </Grid>
</Window>

总结

WPF元素的绑定,算是一个小应用,其实还可以拓展到通过选择颜色去修改字体的颜色等等。

时间: 2024-08-03 18:46:58

WPF元素的绑定的相关文章

学习WPF——元素绑定

概念 从源对象提取一些信息,并用这些信息设置目标对象的属性 示例 在给TextBlock控件的FontSize属性赋值时,我们使用了绑定表达式 数据绑定表达式使用XAML的标记扩展(因此具有花括号)(参见:) 这里创建了一个System.Windows.Data.Binding对象,所以绑定表达式以单词binding开头 在本例中只设置了Binding对象的两个属性ElementName和Path属性 ElementName 指定源元素 Path 指定源元素中的属性 Mode OneWay: 当

WPF元素绑定

原文:WPF元素绑定 数据绑定简介:数据绑定是一种关系,该关系告诉WPF从源对象提取一些信息,并用这些信息设置目标对象的属性.目标属性是依赖项属性.源对象可以是任何内容,从另一个WPF元素乃至ADO.NET数据对象(如DataTable)或自行创建出数据对象.绑定用的是Binding类的一个实例,用的名称空间是:System.Windows.Data: 1.绑定表达式. 数据绑定表达式使用的是XAML标记扩展(因此具有花括号),用到的是System.Windows.Data.Bingding类的

WPF系列——简单绑定学习

1. 绑定到元素对象.(实际项目中用处不大) 界面上两个关联的控件之间绑定,比如一个TextBlock 的FontSize和一个Slider 的Value绑定: <Slider Name="sliderFontText" Minimum="1" Maximum="100" Value="10"/> <TextBox Name="txtValue" Width="200"

AngularJS之一个元素上绑定多个指令作用域

前言 众所周知,我们在自定义指令时,会指定它的作用域,即scope设置项(默认值为false). 且,scope设置项,可以有三种值,从而也就代表三种不同的作用域,下面我们再来一起回顾下: 指令之scope scope: false 默认值,指令不会新建一个作用域,使用父级作用域. scope: true 指令会创建一个新的子作用域,原型继承于父级作用域. scope: {…} 指令会新建一个隔离作用域,不会原型继承父作用域. 好了,通过上面,我们很容易知道,在一个元素绑定一个指令,那么仅仅看这

Wpf使用Winform控件后Wpf元素被Winform控件遮盖问题的解决

有人会说不建议Wpf中使用Winform控件,有人会说建议使用Winform控件在Wpf下的替代方案,然而在实际工作中由于项目的特殊需求,考虑到时间.成本等因素,往往难免会碰到在WPF中使用Winfrom控件的问题,我们知道Wpf可以通过使用WindowsFormsHost容器调用Winform控件,但是在一些场合需要将Wpf元素显示在Winform控件的上层,此时就会出现Wpf元素被Winform控件遮盖的问题. 一.场景再现 接到公司命令,在时间紧迫的情况下,需要将原来的Winform程序(

WPF之Menu绑定XML

一.XML文件 <?xml version="1.0" encoding="utf-8" ?> <MenuData xmlns=""> <Operation Name="文件" Gesture="F"> <Operation Name="新建" Gesture="N"> <Operation Name="

用JS动态创建SVG元素并绑定事件

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.setAttribute("width", "800"); svg.setAttribute("height", "500"); svg.addEventListener("load", function () {

动态生成元素动作绑定,jquery 1.9如何实现

1.7后增加了 live()1.9后被移除了 网上说可以用 on() 代替 可以实际在动态生成元素上绑定动作,没效果,求解绝方法(用低版本的jQuery这种方法,求别说..) 答: 之前有老兄回答过类似这个问题,我把他的写法给你贴一下吧: 你应该使用 on 事件进行绑定,这样新插入的元素就可以触发点击事件了.http://api.jquery.com/on/ $(function(){ $("body").on("click", '.a', function(){

jQuery查看dom元素上绑定的事件列表

作为技术狂热分子的职业本能,看到一个技术产品的功能,总会忍不住想知道它是怎么被实现的.比如我每每看到别人网站一个很炫的界面或者很酷的功能,就忍不住打开了浏览器的控制台... 好,不扯远,说说当你想看到网站上某个元素绑定的事件函数的代码时应该怎么做吧. 查看原生绑定的事件函数代码 所谓原生就是通过addEventListener方法绑定到dom元素上.这个好办: 审查绑定事件的元素(对着它右键->审查元素) 在弹出的Elements视图的控制台,右侧点击“Event Listeners”页签 然后