前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >WPF桌面端开发3-数据绑定

WPF桌面端开发3-数据绑定

作者头像
码客说
发布2020-05-09 14:57:16
3570
发布2020-05-09 14:57:16
举报
文章被收录于专栏:码客码客

数据绑定

定义基类

代码语言:javascript
复制
using System.ComponentModel;

namespace ZJClassTool.Utils
{
    public class MyNotifyModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        public void OnPropertyChanged(string propertyName)
        {
            PropertyChangedEventHandler handler = this.PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

定义数据源的类

代码语言:javascript
复制
public class ToolbarModel : MyNotifyModel
{
    public ObservableCollection<ToolbarMenu> menuList { get; set; }
    bool _IsRight = true;
    public bool IsRight
    {
        get { return _IsRight; }
        set { _IsRight = value; OnPropertyChanged("IsRight"); }
    }
    public ToolbarModel()
    {
        menuList = new ObservableCollection<ToolbarMenu>();
    }
}

public class ToolbarMenu : MyNotifyModel
{
    string _name;
    public string Name
    {
        get { return _name; }
        set { _name = value; OnPropertyChanged("Name"); }
    }

    public string Pic { get; set; }
}

上面例子中我们可以看到,

如果我们要在数据改变时通知页面改变的属性都要在Set方法中调用OnPropertyChanged

而列表不再用List,而是使用ObservableCollection

代码中也要进行数据源的设置

代码语言:javascript
复制
pageData.IsRight = true;
pageData.menuList.Add(new ToolbarMenu()
    {
        Name = "开始直播",
        Pic = "Images/ToolBar/toobar_12_1.png"
    });
DataContext = pageData;

上面设置整个页面的数据,当然也可以设置某个组件的数据源

代码语言:javascript
复制
this.toolbar_list.DataContext = mydata;

页面中绑定值

代码语言:javascript
复制
<Window.Resources>
    <DataTemplate x:Key="ToolbarMenu">
        <Button x:Name="toolbar_item"  Background="Transparent" BorderThickness="0" Cursor="Hand" Height="60" Click="toolbar_item_Click">
            <Button.Content>
                <StackPanel Width="Auto" Background="Transparent">
                    <Image HorizontalAlignment="Center" Width="44" Source="{Binding Pic}"/>
                    <TextBlock HorizontalAlignment="Center" Text="{Binding Name}" Foreground="#3C525B"/>
                </StackPanel>
            </Button.Content>
        </Button>
    </DataTemplate>
</Window.Resources>
<ItemsControl 
    x:Name="toolbar_list"
    ItemsSource="{Binding menuList}"
    ItemTemplate="{StaticResource ToolbarMenu}"
    ScrollViewer.VerticalScrollBarVisibility="Disabled"
    ScrollViewer.HorizontalScrollBarVisibility="Disabled"
    Grid.Row="1" Background="#f3f3f3" BorderThickness="0">
</ItemsControl>

双向绑定

代码语言:javascript
复制
<TextBox Grid.Row="0" Text="{Binding Title,UpdateSourceTrigger=PropertyChanged,Mode=TwoWay}"/>
<TextBlock Grid.Row="0" Text="{Binding Path=Title}"/>

关键属性 UpdateSourceTrigger=PropertyChanged,Mode=TwoWay

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-12-30,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 数据绑定
  • 双向绑定
相关产品与服务
云直播
云直播(Cloud Streaming Services,CSS)为您提供极速、稳定、专业的云端直播处理服务,根据业务的不同直播场景需求,云直播提供了标准直播、快直播、云导播台三种服务,分别针对大规模实时观看、超低延时直播、便捷云端导播的场景,配合腾讯云视立方·直播 SDK,为您提供一站式的音视频直播解决方案。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档