none
请教鼠标悬停效果方法 RRS feed

  • 问题

  •  <Grid x:Name="grid1" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
            <Border x:Name="bd1" PointerEntered="Border_PointerEntered_1" Background="#434343" Width="175" Height="134">
                <TextBlock Text="使用代码审阅提高质量" FontSize="22" TextWrapping="Wrap"/>
            </Border>
        </Grid>

    xaml结构是这样的,请问一下,怎么制作悬停的效果呀,悬停会出现一个按钮。


    2013年1月29日 10:36

答案

  • Hi,

    我实验了几种方案,感觉如果把上面一层和下面的分成两个控件,使用事件来控制感觉效果不好。

    所以我推荐把Button的模板输出,在里面的模板加上一个控件,之后再PointerOver或者其他根据你自己需要修改里面的VisualState,比如我修改了PointerOver,去掉了鼠标移动到上面显示的背景效果,加上了一个自己的控件的显示,这是我XAML,用Button控件的原因是里面的VisualState写的很完整方便我们自己修改。下面是我的代码:

     <Style x:Key="ButtonStyle1" TargetType="Button">
            	<Setter Property="Background" Value="{StaticResource ButtonBackgroundThemeBrush}"/>
            	<Setter Property="Foreground" Value="{StaticResource ButtonForegroundThemeBrush}"/>
            	<Setter Property="BorderBrush" Value="{StaticResource ButtonBorderThemeBrush}"/>
            	<Setter Property="BorderThickness" Value="{StaticResource ButtonBorderThemeThickness}"/>
            	<Setter Property="Padding" Value="12,4,12,4"/>
            	<Setter Property="HorizontalAlignment" Value="Left"/>
            	<Setter Property="VerticalAlignment" Value="Center"/>
            	<Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/>
            	<Setter Property="FontWeight" Value="SemiBold"/>
            	<Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}"/>
            	<Setter Property="Template">
            		<Setter.Value>
            			<ControlTemplate TargetType="Button">
            				<Grid>
            					<VisualStateManager.VisualStateGroups>
            						<VisualStateGroup x:Name="CommonStates">
            							<VisualState x:Name="Normal"/>
            							<VisualState x:Name="PointerOver">
            								<Storyboard>
            									<!--<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
            										<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverBackgroundThemeBrush}"/>
            									</ObjectAnimationUsingKeyFrames>-->
            									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
            										<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverForegroundThemeBrush}"/>
            									</ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="myControl">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
            							</VisualState>
            							<VisualState x:Name="Pressed">
            								<Storyboard>
            									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
            										<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedBackgroundThemeBrush}"/>
            									</ObjectAnimationUsingKeyFrames>
            									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
            										<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedForegroundThemeBrush}"/>
            									</ObjectAnimationUsingKeyFrames>
            								</Storyboard>
            							</VisualState>
            							<VisualState x:Name="Disabled">
            								<Storyboard>
            									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
            										<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBackgroundThemeBrush}"/>
            									</ObjectAnimationUsingKeyFrames>
            									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Border">
            										<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBorderThemeBrush}"/>
            									</ObjectAnimationUsingKeyFrames>
            									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
            										<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledForegroundThemeBrush}"/>
            									</ObjectAnimationUsingKeyFrames>
            								</Storyboard>
            							</VisualState>
            						</VisualStateGroup>
            						<VisualStateGroup x:Name="FocusStates">
            							<VisualState x:Name="Focused">
            								<Storyboard>
            									<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualWhite"/>
            									<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualBlack"/>
            								</Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Unfocused"/>
                                        <VisualState x:Name="PointerFocused"/>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="3">
                                    <Grid>
                                        <ContentControl x:Name="myControl" Visibility="Collapsed" Content="My Control" Foreground="Red" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                                        <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                    </Grid>
                                </Border>
                                <Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/>
                                <Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
    
        </Page.Resources>
    
        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
            <Grid Height="200" Width="200">
                <Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Content="Button" Style="{StaticResource ButtonStyle1}" />
            </Grid>
        </Grid>


    Aaron
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    2013年1月31日 7:12
    版主