首页 > 其他分享 >Avalonia使用d:DataContext实现设计时预览

Avalonia使用d:DataContext实现设计时预览

时间:2023-05-04 12:12:54浏览次数:46  
标签:DataContext 预览 namespace public using DesignDataDemo Avalonia

​ 在我们使用MVVM开发项目时,免不了要用到绑定,但是数据通过绑定获取的时候,就不能再预览器里看到效果了,只能调试起来才能看到,这样就很麻烦。

​ 我们可以通过 d.DataContext 来解决,这个属性仅在设计时应用 DataContext。官网建议将此属性与 {x:Static} 指令结合使用,下面我们新建个MVVM模板的项目来看一下使用效果。

​ 新建的项目视图上就有这个Design.DataContext标签,默认值是写在ViewMode 里面,假如我们是个列表数据,就会显的 ViewModel很臃肿了。所以我们使用官网建议的{x:Static} 来改一下。

​ 首选改一下ViewModel

using System.Collections.ObjectModel;

namespace DesignDataDemo.ViewModels;

public class MainWindowViewModel : ViewModelBase
{
    public string Greeting { get; set; }

    public ObservableCollection<string> List { get; set; }
}

加一个静态的设计数据类

using System.Collections.ObjectModel;
using DesignDataDemo.ViewModels;

namespace DesignDataDemo;

public static class DesignData
{
    public static readonly MainWindowViewModel DesignMainWindowViewModel = new()
    {
        Greeting = "Hello Avalonia",
        List = new ObservableCollection<string>
        {
            "Hello",
            "Avalonia",
            "WPF"
        }
    };
}

View上指定DataContext

      xmlns:dd="clr-namespace:DesignDataDemo"
      d:DataContext="{x:Static dd:DesignData.DesignMainWindowViewModel}"

View完整代码

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:DesignDataDemo.ViewModels"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        xmlns:dd="clr-namespace:DesignDataDemo"
        d:DataContext="{x:Static dd:DesignData.DesignMainWindowViewModel}"
        x:Class="DesignDataDemo.Views.MainWindow"
        x:DataType="vm:MainWindowViewModel"
        Icon="/Assets/avalonia-logo.ico"
        Title="DesignDataDemo">


    <StackPanel Spacing="20">
        <TextBlock Text="{Binding Greeting}" HorizontalAlignment="Center" VerticalAlignment="Center" />
        
        <ItemsControl Items="{Binding List}" HorizontalAlignment="Center">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding}" Foreground="Red"></TextBlock>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </StackPanel>

</Window>

标签:DataContext,预览,namespace,public,using,DesignDataDemo,Avalonia
From: https://www.cnblogs.com/mchuang/p/17370757.html

相关文章

  • Avalonia 实现一条虚线
    Avalonia版本V0.10.18BorderHeight="1"><Border.Background><VisualBrushAlignmentX="Left"AlignmentY="Top"SourceRect="0,0,0,0"......
  • Vue插件图片预览hevue-img-preview
    安装#安装npminstallhevue-img-preview--save#main.js引入importhevueImgPreviewfrom'hevue-img-preview'Vue.use(hevueImgPreview)#使用#//给任意对象添加任意事件,例如<img:src="imgurl"@click="previewImg(imgurl)">#//在事件里调用方法进行预......
  • [独家放送]Unity2020规划预览,可视化编程又双叒叕来了!
    你好,我是你的技术探路者郑洪智,你可以叫我大智。欢迎一起进入2020年,在新的一年里Unity有什么大动作呢?本文带你速览你最关心的Unity2020的核心功能!你最可能关心的功能有哪些呢?Unity2019.3在哪里???(乱入)下面从四个方面来看Unity有哪些更新:核心功能和性能更多的DOTS(Data-OrientedTechSt......
  • 直播电商平台开发,发布多图片上传到服务器并实现图片预览功能
    直播电商平台开发,发布多图片上传到服务器并实现图片预览功能vue页面<viewclass="container1"><imagesrc="../../static/errorImage.jpg"mode="scaleToFill"@click="upload"></image><imagev-for="iteminimglist":src=&q......
  • 阿里oss自定义域名从默认的预览改成下载
    阿里oss自定义域名从默认的预览改成下载今天测试人员反馈,说oss绑定的自定义域名,在电脑端的QQ浏览器打开的excel文件,打开显示黑屏,而不是下载。微软的Edge浏览器还算正常点,QQ浏览器直接黑屏。如下图:(1)Edge浏览器: (2)QQ浏览器: 以前我试过把已经上传到oss的图片,批量地从......
  • blob实现在线预览二进制流pdf
    <iframeclass="prism-player"frameborder="0"scrolling="no":src="imgUrl+'#toolbar=0'"allowTransparency="true"></iframe>//如果要隐藏下载和打印按钮,在嵌入的地址后面加’#......
  • web前端pdf.js预览pdf实例创建报错:Array. prototype` contains unexpected enumerable
    使用pdf.min.js是预览pdf文件,但是在实例化时异常报错,下面是实例化的代码varloadingTask=window.pdfjsLib.getDocument(url);console.log(loadingTask);this.pageNum=1;this.pageRendering=false;this.pageNumPending=null;loadingTask.promise.then((pdfDoc_)=>......
  • vue移动端使用(pdfh5) 组件预览PDF
    1、安装插件npmipdfh52、在页面内引入组件importPdfh5from"pdfh5";import"pdfh5/css/pdfh5.css";3、写一个展示pdf文件的容器  <divid="pdfType"></div>4、封装在事件中 initPdf(){      this.pdfh5=''      this.pdfh......
  • uniapp轮播图预览
    <swiper:indicator-dots="true":autoplay="true":interval="3000":duration="1000":circular="true"><!--把当前点击的图片的索引,传递到preview()处理函数中点击图片预览--><swiper-itemv-for="(item......
  • Avalonia属性编辑器控件(Avalonia.PropertyGrid)
    Nuget: https://www.nuget.org/packages/bodong.Avalonia.PropertyGridGitHub: https://github.com/bodong1987/Avalonia.PropertyGrid ......