码迷,mamicode.com
首页 > Windows程序 > 详细

【Win10】实现控件倒影效果

时间:2015-09-25 23:01:52      阅读:332      评论:0      收藏:0      [点我收藏+]

标签:

先引入个小广告:

最近买了台小米盒子折腾下,发觉 UI 还是挺漂亮的,特别是主页那个倒影效果。

技术分享

(图随便找的,就是上面图片底部的那个倒影效果。)

 

好了,广告结束,回归正题,这个倒影效果我个人觉得是挺不错的,那么有没有办法在 Win10 中实现呢?

稍微分析了一下,大概层次是这样的:

技术分享

简单点来说,就是倒影显示跟控件显示一样,然后往下翻转,再平移一下就好了。最后再对倒影加个渐变透明就 perfect 了。

 

翻转、平移都很容易,使用 RenderTransform 就可以了。麻烦就麻烦在如何让倒影的显示跟控件的显示相同。

在 WinRT 里,是没有 VisualBrush 这种东西的,因此我们得另寻他径。俗语说:上帝关闭一扇门的同时也为你打开一扇窗。微软虽然去掉 VisualBrush,但是给了我们 RenderTargetBitmap 这种获取绝大部分控件当前样貌的神器。(MediaElement 获取不了,WebView 则需另外使用 WebViewBrush 来获取,这里我们忽略掉这两个不是常见需求的家伙。)

 

那么我们就可以将倒影设置为 Image 控件,然后赋值上 RenderTargetBitmap 就可以了。但问题又来了,我们应该什么时候去抓一次控件的外貌?查阅 MSDN 得知,LayoutUpdated 事件可以帮到我们。

还等什么,立马开始编写我们的代码。

 

创建我们的项目,新建一个名字叫做 ReflectionPanel 的模板化控件。

然后定义我们的控件模板如下:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="using:ReflectionPanelDemo"
                    xmlns:controls="using:ReflectionPanelDemo.Controls">
    <Style TargetType="controls:ReflectionPanel">
        <Setter Property="HorizontalAlignment"
                Value="Center" />
        <Setter Property="VerticalAlignment"
                Value="Center" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="controls:ReflectionPanel">
                    <Grid x:Name="RootLayout"
                          Background="{TemplateBinding Background}">
                        <!--#region 倒影-->
                        <!--以控件底部中心作为变换点-->
                        <Image x:Name="ReflectionImage"
                               Stretch="None"
                               RenderTransformOrigin="0.5,1">
                            <Image.RenderTransform>
                                <TransformGroup>
                                    <!--以控件底部反转控件-->
                                    <ScaleTransform ScaleY="-1" />
                                    <!--倒影与实际内容的间距-->
                                    <TranslateTransform x:Name="SpacingTransform"
                                                        Y="0" />
                                </TransformGroup>
                            </Image.RenderTransform>
                        </Image>
                        <!--#endregion-->
                        <!--#region 实际内容-->
                        <ContentControl x:Name="ContentBorder"
                                        Content="{TemplateBinding Content}" />
                        <!--#endregion-->
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

这样对应上之前的分析了。

 

接下来编写 cs 代码。

protected override void OnApplyTemplate()
{
    FrameworkElement rootLayout = (FrameworkElement)this.GetTemplateChild("RootLayout");

    // 实际内容容器。
    this._contentBorder = (ContentControl)this.GetTemplateChild("ContentBorder");

    // 倒影图片。
    this._reflectionImage = (Image)this.GetTemplateChild("ReflectionImage");

    // 倒影位移。
    this._spacingTransform = (TranslateTransform)this.GetTemplateChild("SpacingTransform");
    this._spacingTransform.Y = this.ReflectionSpacing;

    if (DesignMode.DesignModeEnabled == false)
    {
        rootLayout.LayoutUpdated += this.RootLayoutChanged;
    }
}

private async void RootLayoutChanged(object sender, object e)
{
    try
    {
        // 呈现控件到图像源。
        RenderTargetBitmap contentRender = new RenderTargetBitmap();
        await contentRender.RenderAsync(this._contentBorder);

        // 设置倒影图片。
        this._reflectionImage.Source = contentRender;
    }
    catch
    {
    }
}

这里是最关键的代码。详细可以看文章末尾提供的 demo。

 

接下来尝试一下吧。

技术分享

感觉还不错的说。

 

最后,我们来做渐变的半透明效果。

在 WinRT 里,由于没了 OpacityMask 属性,因此我们还是从图片入手吧。

RenderTargetBitmap 有一个叫 GetPixelsAsync 的方法,可以获取到图片的数据,格式是以 BGRA8 的格式,这里联动一下老周的 blog 好了(http://www.cnblogs.com/tcjiaan/p/4231886.html)。

简单点说,就是每 4 个 byte 代表一个像素。我们再简单分析下需求,那么可以得出,图片最顶部是最透明的,最底部是最不透明的。

经过简单的数学计算,我们可以写出以下代码:

// 获取图像数据。
byte[] bgra8 = (await contentRender.GetPixelsAsync()).ToArray();

// 获取图像高度和宽度。
int width = contentRender.PixelWidth;
int height = contentRender.PixelHeight;

for (int i = 0; i < bgra8.Length; i += 4)
{
    // 获取该像素原来的 A 通道。
    byte a = bgra8[i + 3];

    // 计算该像素的 Y 轴坐标。
    int y = (i / 4) / width;

    // 计算新的 A 通道值。
    bgra8[i + 3] = (byte)(a * y / height);
}

最后我们将修改后的 data 弄到 Image 控件上去就 ok 了。这里我们使用 WriteableBitmap。

WriteableBitmap outputBitmap = new WriteableBitmap(width, height);
bgra8.CopyTo(outputBitmap.PixelBuffer);

// 设置倒影图片。
this._reflectionImage.Source = outputBitmap;

 

大功告成,看一下 Demo 的效果。

技术分享

最后附带完整 Demo 下载:ReflectionPanelDemo.zip


最后的最后,冰天雪地裸体 360 度跪求一份 UWP/WP8.1 相关的工作技术分享。(折腾 Winform 快吐血了)(长期有效)

【Win10】实现控件倒影效果

标签:

原文地址:http://www.cnblogs.com/h82258652/p/4839649.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!