Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The Interactivity dll doesn't exist for Windows Store apps. You should use Visual States instead. It's easy to achieve with Blend.</p> <p>If you open your app in Blend and edit a copy of your button's Template, you'll end up with a complete default button style in your xaml. You just have to edit the PointerOver visual state to achieve what you want. </p> <p>Your button will look like this :</p> <pre><code>&lt;Button Height="100" Width="100" Margin="0,0,0,0" Style="{StaticResource ButtonStyle1}"&gt; &lt;Button.Background&gt; &lt;ImageBrush ImageSource="/Assets/Images/home.png"&gt;&lt;/ImageBrush&gt; &lt;/Button.Background&gt; &lt;/Button&gt; </code></pre> <p>and you'll have to define the style in the resources of your app, so that you can use it everywhere. </p> <p>In the code below, look at the PointerOver visual state. It defines how the button should change when it enters that state. Here, we say that the opacity of the border (which is the content that displays your background image), should be 0.5 : </p> <pre><code>&lt;DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Border" d:IsOptimized="True"/&gt; </code></pre> <p>Here is the complete style :</p> <pre><code>&lt;Style x:Key="ButtonStyle1" TargetType="Button"&gt; &lt;Setter Property="Background" Value="{StaticResource ButtonBackgroundThemeBrush}"/&gt; &lt;Setter Property="Foreground" Value="{StaticResource ButtonForegroundThemeBrush}"/&gt; &lt;Setter Property="BorderBrush" Value="{StaticResource ButtonBorderThemeBrush}"/&gt; &lt;Setter Property="BorderThickness" Value="{StaticResource ButtonBorderThemeThickness}"/&gt; &lt;Setter Property="Padding" Value="12,4,12,4"/&gt; &lt;Setter Property="HorizontalAlignment" Value="Left"/&gt; &lt;Setter Property="VerticalAlignment" Value="Center"/&gt; &lt;Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/&gt; &lt;Setter Property="FontWeight" Value="SemiBold"/&gt; &lt;Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}"/&gt; &lt;Setter Property="Template"&gt; &lt;Setter.Value&gt; &lt;ControlTemplate TargetType="Button"&gt; &lt;Grid&gt; &lt;VisualStateManager.VisualStateGroups&gt; &lt;VisualStateGroup x:Name="CommonStates"&gt; &lt;VisualState x:Name="Normal"/&gt; &lt;VisualState x:Name="PointerOver"&gt; &lt;Storyboard&gt; &lt;DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Border" d:IsOptimized="True"/&gt; &lt;/Storyboard&gt; &lt;/VisualState&gt; &lt;VisualState x:Name="Pressed"&gt; &lt;Storyboard&gt; &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border"&gt; &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedBackgroundThemeBrush}"/&gt; &lt;/ObjectAnimationUsingKeyFrames&gt; &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"&gt; &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedForegroundThemeBrush}"/&gt; &lt;/ObjectAnimationUsingKeyFrames&gt; &lt;/Storyboard&gt; &lt;/VisualState&gt; &lt;VisualState x:Name="Disabled"&gt; &lt;Storyboard&gt; &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border"&gt; &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBackgroundThemeBrush}"/&gt; &lt;/ObjectAnimationUsingKeyFrames&gt; &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Border"&gt; &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBorderThemeBrush}"/&gt; &lt;/ObjectAnimationUsingKeyFrames&gt; &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"&gt; &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledForegroundThemeBrush}"/&gt; &lt;/ObjectAnimationUsingKeyFrames&gt; &lt;/Storyboard&gt; &lt;/VisualState&gt; &lt;/VisualStateGroup&gt; &lt;VisualStateGroup x:Name="FocusStates"&gt; &lt;VisualState x:Name="Focused"&gt; &lt;Storyboard&gt; &lt;DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualWhite"/&gt; &lt;DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualBlack"/&gt; &lt;/Storyboard&gt; &lt;/VisualState&gt; &lt;VisualState x:Name="Unfocused"/&gt; &lt;VisualState x:Name="PointerFocused"/&gt; &lt;/VisualStateGroup&gt; &lt;/VisualStateManager.VisualStateGroups&gt; &lt;Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="3"&gt; &lt;ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/&gt; &lt;/Border&gt; &lt;Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/&gt; &lt;Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/&gt; &lt;/Grid&gt; &lt;/ControlTemplate&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;/Style&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload