none
如何为自定义的图片提供类似于TiltEffect效果?我添加了一个图片来充当按钮,但是按下去没有效果,觉得太单调了! RRS feed

  • 问题

  • 如何为自定义的图片提供类似于TiltEffect效果?我添加了一个图片来充当按钮,但是按下去没有效果,觉得太单调了!如何改进?
    2012年6月4日 17:19

答案

  • 你好,你需要自定义Style:

    <UserControl.Resources>
            <Style TargetType="Button" x:Key="ButtonStyle">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Grid>
                                <vsm:VisualStateManager.VisualStateGroups>
                                    <vsm:VisualStateGroup x:Name="CommonStates">
                                        <vsm:VisualState x:Name="Normal" />
                                        <vsm:VisualState x:Name="MouseOver">
                                            <Storyboard>
                                            </Storyboard>
                                        </vsm:VisualState>
                                        <vsm:VisualState x:Name="Pressed">
                                            <Storyboard>
                                            </Storyboard>
                                        </vsm:VisualState>
                                        <vsm:VisualState x:Name="Disabled">
                                            <Storyboard>
                                            </Storyboard>
                                        </vsm:VisualState>
                                    </vsm:VisualStateGroup>
                                    <vsm:VisualStateGroup x:Name="FocusStates">
                                        <vsm:VisualState x:Name="Focused">
                                            <Storyboard>
                                            </Storyboard>
                                        </vsm:VisualState>
                                        <vsm:VisualState x:Name="Unfocused" />
                                    </vsm:VisualStateGroup>
                                </vsm:VisualStateManager.VisualStateGroups>
                                <Border x:Name="Background" CornerRadius="3" Background="White" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
                                    <Grid Background="{TemplateBinding Background}" Margin="1">
                                    </Grid>
                                </Border>
                                <ContentPresenter x:Name="contentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" />
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </UserControl.Resources>

    Button Style="{StaticResource ButtonStyle}" 

    • 已标记为答案 Otomii Lu 2012年6月14日 1:54
    2012年6月5日 3:33

全部回复

  • 你好,

    关于TiltEffect效果的使用,可以参考MSDN:How to: Use the Control Tilt Effect for Windows Phone

    里面有实例工程可以下载。

    需要使用TiltEffect时,在XAML文件中,为页面添加 local:TiltEffect.IsTiltEnabled="True",这样所有控件都具有了TiltEffect效果。

    如果某个控件不需要这个效果,可以在XAML中,使用local:TiltEffect.SuppressTilt="True"


    Keep Fighting

    • 已建议为答案 Otomii Lu 2012年6月5日 1:49
    2012年6月5日 1:02
  • 我已经这样做了,但是添加的Image图片控件,设置为MouseLeftButtonDown事件,但是单击后却没有TiltEffect效果。

    2012年6月5日 2:18
  • Hi,

    你可以仍旧使用Button控件,然后设置Content为空.

    设置Button的background为你需要的图片:

                    <Button.Background>
                        <ImageBrush ImageSource="1.jpg" />
                    </Button.Background>

    2012年6月5日 2:42
  • 但是按钮按下的变成白色效果还在,就等于图片按下后变成白色的了,不好看呀,能否屏蔽这个效果。
    2012年6月5日 3:03
  • 你好,你需要自定义Style:

    <UserControl.Resources>
            <Style TargetType="Button" x:Key="ButtonStyle">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Grid>
                                <vsm:VisualStateManager.VisualStateGroups>
                                    <vsm:VisualStateGroup x:Name="CommonStates">
                                        <vsm:VisualState x:Name="Normal" />
                                        <vsm:VisualState x:Name="MouseOver">
                                            <Storyboard>
                                            </Storyboard>
                                        </vsm:VisualState>
                                        <vsm:VisualState x:Name="Pressed">
                                            <Storyboard>
                                            </Storyboard>
                                        </vsm:VisualState>
                                        <vsm:VisualState x:Name="Disabled">
                                            <Storyboard>
                                            </Storyboard>
                                        </vsm:VisualState>
                                    </vsm:VisualStateGroup>
                                    <vsm:VisualStateGroup x:Name="FocusStates">
                                        <vsm:VisualState x:Name="Focused">
                                            <Storyboard>
                                            </Storyboard>
                                        </vsm:VisualState>
                                        <vsm:VisualState x:Name="Unfocused" />
                                    </vsm:VisualStateGroup>
                                </vsm:VisualStateManager.VisualStateGroups>
                                <Border x:Name="Background" CornerRadius="3" Background="White" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
                                    <Grid Background="{TemplateBinding Background}" Margin="1">
                                    </Grid>
                                </Border>
                                <ContentPresenter x:Name="contentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" />
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </UserControl.Resources>

    Button Style="{StaticResource ButtonStyle}" 

    • 已标记为答案 Otomii Lu 2012年6月14日 1:54
    2012年6月5日 3:33