未加星标

How To Blur An Image Using UWP With XAML And C#

字体大小 | |
[系统(windows) 所属分类 系统(windows) | 发布者 店小二03 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏

Before reading this article, please go through the following article.

Introduction To Universal windows Platform (UWP) App Development Using Windows 10 And Visual Studio 2015

The Blur animation behavior selectively blurs a XAML element by increasing or decreasing pixel size. Sometimes you want an element to appear slightly out of focus, but to be familiar to the user from other locations within an app. Rather than having to rasterize the XAML into an image and apply a blur, you can apply a BlurBehavior to the original element at run time.

Reading this article, you can learn how to blur an image in Universal Windows Apps development with XAML and Visual C#.

The following important tools are required for developing UWP,

Windows 10 (Recommended) Visual Studio 2015 Community Edition (It is a free software available online)

Now we can discuss step by step App development.

Step 1

Open Visual studio 2015 -> Start -> New Project-> Select Universal (under Visual C#->Windows)-> Blank App -> Give the Suitable Name for your App (UWPBlurImage)->OK.
How To Blur An Image Using UWP With XAML And C#

After Choosing the Target and minimum platform version for your Windows Universal Application will support and the Project creates App.xaml and MainPage.xaml.

Step 2

Open (double Click) the file MainPage.xaml in the Solution Explorer and add the Microsoft.Toolkit.Uwp.UI.Animations reference in the project.

For adding Reference, RightClick Your Project (UWPBlurImage) and Select Manage Nuget Packages.


How To Blur An Image Using UWP With XAML And C#

Accept the Licence


How To Blur An Image Using UWP With XAML And C#

Reference added your project


How To Blur An Image Using UWP With XAML And C#

Step 3

Add TextBlock control and change the Name and text property for title,
How To Blur An Image Using UWP With XAML And C#

Step 4

Add images in the Assets folder, images for Blurring
How To Blur An Image Using UWP With XAML And C#

Step 5

Add the image control for displaying the image for Blurring
How To Blur An Image Using UWP With XAML And C#

Step 6

Add the following Xaml namespaces and code for Blur in Mainpage.xaml, xmlns:interactivity="using:Microsoft.Xaml.Interactivity" xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Animations.Behaviors" xmlns:core="using:Microsoft.Xaml.Interactions.Core" <interactivity:Interaction.Behaviors> <behaviors:Blurx:Name="blur"/> </interactivity:Interaction.Behaviors>

Add a button control and add a Click Event method for blurring action


How To Blur An Image Using UWP With XAML And C#
How To Blur An Image Using UWP With XAML And C#

Note

Automatically the following code will be generated in XAML code view, while we are done in the design view. <Pagex:Class="UWPImageBlur.MainPage"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:UWPImageBlur"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:interactivity="using:Microsoft.Xaml.Interactivity"xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Animations.Behaviors"xmlns:core="using:Microsoft.Xaml.Interactions.Core"mc:Ignorable="d"> <GridBackground="{ThemeResourceApplicationPageBackgroundThemeBrush}"> <TextBlockx:Name="tblTitle"HorizontalAlignment="Left"Margin="222,45,0,0"TextWrapping="Wrap"Text="BlurImageTest"VerticalAlignment="Top"Height="33"Width="203"FontWeight="Bold"FontSize="24"/> <Imagex:Name="imgblur"HorizontalAlignment="Left"Height="92"Margin="222,143,0,0"VerticalAlignment="Top"Width="159"Source="Assets/01.jpg"> <interactivity:Interaction.Behaviors> <behaviors:Blurx:Name="blur"/></interactivity:Interaction.Behaviors> </Image> <Buttonx:Name="btnBlur"Content="ClicktoBlur"HorizontalAlignment="Left"Margin="516,213,0,0"VerticalAlignment="Top"Click="btnBlur_Click"/></Grid> </Page>

Step 7

Add namespace and the following code in MainPage.xaml.cs, usingMicrosoft.Toolkit.Uwp.UI.Animations; privateasyncvoidbtnBlur_Click(objectsender,RoutedEventArgse) { awaitimgblur.Blur(duration:10,delay:0,value:3).StartAsync(); }
How To Blur An Image Using UWP With XAML And C#

Step 8

Deploy your App in Local Machine, and the output of the UWPBlurImage App is,
How To Blur An Image Using UWP With XAML And C#

After the Click to blur button clicked


How To Blur An Image Using UWP With XAML And C#

Summary

Now you have successfully tested UWP ToolKit Blurring image in Visual C# - UWP environment.

本文系统(windows)相关术语:三级网络技术 计算机三级网络技术 网络技术基础 计算机网络技术

主题: C#WindowsUWVisual StudioVisual Studi
分页:12
转载请注明
本文标题:How To Blur An Image Using UWP With XAML And C#
本站链接:http://www.codesec.net/view/483378.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 系统(windows) | 评论(0) | 阅读(65)