使用Win2D在UWP程序中2D绘图(一)

在新的Windows UWP程序中,引入了一个新的API库: Win2D。它是一个d2d的封装,可以直接使用C#来快速实现高效2D绘图了。这个API虽然在Win8.1时代就开始着手开发了,但最近才完善了下来。本文这里就简单的介绍一下它的基本用法:

 

安装

Win2D并不是Win10 SDK里面的一部分,需要从Nuget上安装,在程序包管理器里直接安装Win2D.uwp即可。

    PM> Install-Package Win2D.uwp

这个是Win10下的库,Win8下需要使用Win2D.win81库。安装完后在Project.json中可以看到相应的库依赖:

    

 

示例:

Win2D引入了一个新的画布:Microsoft.Graphics.Canvas.UI.Xaml.CanvasControl,所有的绘制必须在它上面进行。因此首先在XAML中添加CanvasControl作为底图:

    xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml"

    <Grid>
         <canvas:CanvasControl Draw="canvasControl_Draw" ClearColor="CornflowerBlue" />
    </Grid>

然后响应其Draw事件,在里面添加绘制动作:

    void canvasControl_Draw(CanvasControl sender, CanvasDrawEventArgs args)
    {
        args.DrawingSession.DrawEllipse(155, 115, 80, 30, Colors.Black, 3);
        args.DrawingSession.DrawText("Hello, world!", 100, 100, Colors.Yellow);
    }

运行效果如下:

    

这种方式与WinForm和WPF中的自绘制比较像,只是一些API有些差异。目前这里只是一个简单的示例,后面会再写几篇文章对Win2D相关API做更详细点的介绍。感兴趣的朋友可以看下下面的相关文档。

 

相关文档:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当然,我可以为你提供一个在UWP项目写自定义卡片组件的示例。是一个基本的示例: ```csharpusing Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Media; using Windows.UI.Xaml; namespace CustomCardComponent { public partial class CardComponent : { public CardComponent() this.InitializeComponent(); } // 自定义属性 public string Title { get { return titleLabel.Text; } set { titleLabel.Text = value; } } public string Description { get { return descriptionTextBlock.Text; } set { descriptionTextBlock.Text = value; } } public ImageSource Image { get { return image.Source; } set { image.Source = value; } } } } ``` 在XAML文件,你可以使用以下代码来定义卡片组件的外观和布局: ```xaml <UserControl x:Class="CustomCardComponent.CardComponent" ... > <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <TextBlock x:Name="titleLabel" Grid.Row="0" FontSize="16" FontWeight="Bold" VerticalAlignment="Center" HorizontalAlignment="Center"/> <Grid Grid.Row="1"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Image x:Name="image" Grid.Row="0" Stretch="UniformToFill"/> <TextBlock x:Name="descriptionTextBlock" Grid.Row="1" TextWrapping="Wrap" Margin="5"/> </Grid> </Grid> </UserControl> ``` 通过使用上述代码,你可以在UWP项目创建和使用自定义的卡片组件。你可以进一步根据你的需求来定制和扩展该组件。希望这可以帮助到你!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值