XAML制作Win8磁贴样式

最新推荐文章于 2024-07-02 09:10:56 发布

duan_hy

最新推荐文章于 2024-07-02 09:10:56 发布

阅读量2.2k

点赞数

分类专栏： Silverlight 文章标签： win8 windows phone 磁贴

本文链接：https://blog.csdn.net/xiahn1a/article/details/24889737

版权

Silverlight 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文主要讲述使用使用XAML制作Win8磁贴样式的方法。

应用范围包括Silverlight网页，Windows Phone，Win8应用商店，WPF等使用XAML作为界面设计的功能。

首先看下效果(网格线是XAML设计器中辅助设计使用，在最终应用中不会出现)：

为了实现这样的效果，需要自定义Button控件的样式，即修改Button.Template。

在模板中加入一个Grid，中间置入一个Image控件，放在中央。一个TextBlock控件，放在最下方。

相应的XAML代码如下：

                <Button Height="160" Width="320" BorderBrush="{x:Null}" FontWeight="Bold">
                    <Button.Background>
                        <SolidColorBrush Color="{StaticResource PhoneAccentColor}"/>
                    </Button.Background>
                    <Button.Template>
                        <ControlTemplate>
                            <Grid>
                                <Grid.Background>
                                    <SolidColorBrush Color="{StaticResource PhoneAccentColor}"/>
                                </Grid.Background>
                                <TextBlock Text="新游戏" VerticalAlignment="Bottom"/>
                                <Image Source="/pic/game.png" Width="110"></Image>
                            </Grid>
                        </ControlTemplate>
                    </Button.Template>
                </Button>

在开发Windows Phone应用时，为了在按下Button时有磁贴倾斜的效果(TiltEffect)，可以引用WP Toolkit，并添加：

TiltEffect.IsTiltEnabled="True"

在开发Win8或者WPF的桌面应用时，需要鼠标放在上面可以显示边框。需要自己添加一个触发器(Trigger)，对应MouseOver事件。

在ControlTemplate标签内，添加如下代码：

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="BorderBrush" TargetName="border" Value="#FF3C7FB1"/>
                        </Trigger>
                    </ControlTemplate.Triggers>