如何创建类似MSN News UWP App的瓷砖 [英] How to create tiles similar like MSN News UWP App

问题描述

我们正在uwp中实现新闻应用程序，所以正在查看msn新闻应用程序。 

是否有任何示例或代码演示如何创建像msn news app。

截至目前，我已经使用gridview实现了简单的图块。

解决方案

Hi Sharathm1

>>如何创建类似MSN News UWP App的瓷砖

您可以添加窥视图像和一些adaptiveText来创建类似于新闻APP的图块。

指定从图块顶部"窥视"的图像。窥视图像使用动画从图块顶部的
向下/向上滑动，窥视视图，然后稍后向后滑出以显示瓷砖上的主要内容。

您可以参考以下代码来创建图块：

 TileContent content = new TileContent（）
 {
 Visual = new TileVisual（）
 {
 //绑定默认名称和徽标
 Branding = TileBranding.NameAndLogo，
 //显示客户名称
 DisplayName =" Wedne"，
 
 TileMedium = new TileBinding（）
 {
 //定义Medium tiles的图像和文本
 // Branding = TileBranding.Logo，
 // DisplayName =" ; medium 22"，
 Content = new TileBindingContentAdaptive（）
 {
 PeekImage = new TilePeekImage（）
 {
 Source =" Assets / image2.jpg&qu OT; 
}，
儿童= 
 {
 new AdaptiveText（）
 {
 Text =" medium Parker"，
}，
 
 new AdaptiveText（）
 {
 Text =" medium from our trip"，
 HintStyle = AdaptiveTextStyle.CaptionSubtle 
}，
 new AdaptiveText （）
 {
 Text ="介绍我在新西兰拍摄的这些精美照片！"，
 HintStyle = AdaptiveTextStyle.CaptionSubtle 
} 
 } 
} 
}，
} 
}; 

您可以在此处了解有关如何创建具有不同样式的图块的更多信息：
创建自适应图块 ，

请参考"窥视图像"的部分来创建新闻应用程序等图块。

最好的问候，

罗伊

We are implementing the news app in uwp so was looking at the msn news app. 

Is there any sample or code which demonstrates how to create tiles something like msn news app.

As of now I have implemented simple tiles with gridview.

解决方案

Hi Sharathm1

>>How to create tiles similar like MSN News UWP App

You could add peek images and some adaptiveText to create tiles similar to News APP.

Specify an image that "peeks" in from the top of the tile. The peek image uses an animation to slide down/up from the top of the tile, peeking into view, and then later sliding back out to reveal the main content on the tile.

You could refer the following codes to create tiles:

            TileContent content = new TileContent()
            {
                Visual = new TileVisual()
                {
                    //binding default name and logo
                    Branding = TileBranding.NameAndLogo,
                    //show custome name
                    DisplayName = "Wedne",

                    TileMedium = new TileBinding()
                    {
                        //define the images and text of the Medium tiles
                        // Branding = TileBranding.Logo,
                        // DisplayName = "medium 22",
                        Content = new TileBindingContentAdaptive()
                        {
                            PeekImage = new TilePeekImage()
                            {
                                Source = "Assets/image2.jpg"
                            },
                            Children =
                            {
                                new AdaptiveText()
                                {
                                     Text = "medium Parker",
                                },

                                new AdaptiveText()
                                {
                                     Text = "medium from our trip",
                                     HintStyle = AdaptiveTextStyle.CaptionSubtle
                                },
                                new AdaptiveText()
                                {
                                     Text = "medium out these awesome photos I took while in New Zealand!",
                                     HintStyle = AdaptiveTextStyle.CaptionSubtle
                                }
                            }
                        }
                    },
                }
            };

You could learn more about how to create tiles with different styles here: Create adaptive tiles,

Please refer the part of "Peek image" to create tiles like News app.

Best regards,

Roy

这篇关于如何创建类似MSN News UWP App的瓷砖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！