问题
I got a question about changing the background image of a button when it's clicked.
I tried searching on google but i couldn't find something that worked for me.
Well here's my code
<Button Grid.Column="0" Grid.Row="0" x:Name="btnHome" VerticalAlignment="Stretch" BorderBrush="{x:Null}" HorizontalAlignment="Stretch" Click="btnHome_Click" PointerEntered="btnHome_PointerEntered">
<Button.Template>
<ControlTemplate TargetType="Button">
<Border x:Name="RootElement">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="MouseOver">
<Storyboard>
//I want my background change here
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
//And here
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border.Background>
<ImageBrush ImageSource="images/back_button.png"/>
</Border.Background>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
i also tried this
private void btnHome_PointerEntered(object sender, PointerRoutedEventArgs e)
{
BitmapImage bmp = new BitmapImage();
Uri u = new Uri("ms-appx:images/back_button_mouseover.png", UriKind.RelativeOrAbsolute);
bmp.UriSource = u;
ImageBrush i = new ImageBrush();
i.ImageSource = bmp;
btnHome.Background = i;
}
But unfortunately this worked neither
回答1:
With WinRT Xaml Toolkit, you can have all the effects. Reference binaries from the toolkit. Add xml namespace to your page:
xmlns:controls="using:WinRTXamlToolkit.Controls"
Use button like:
<controls:ImageButton HorizonalAlignment="Center"
NormalStateImageSource="normal.png"
HoverStateImageSource="hover.png"
PressedStateImageSource="pressed.png" />
Other than this, it has a lot of useful things.
回答2:
I found the anwser on this question.
You have to edit the template of your control.
You can do it with Blend, or "by hand".
Retrieve the default template of your button(by pressing right button, edit template, edit copy, give it a name and press ok) and then customize it in order to fit to your needs
EDIT : Here is MSDN Ressource on RadioButton template customization.
回答3:
Here is a style that turns visibility on and off for some extra images you add in Blend. The images are transparent and go behind the button background image by using "Send to Back" .. so in other words, you get to keep using a different background image brush for each button, plus the swapped Normal, Pointer, and Pressed images. So two background images overlaid.
<Style x:Key="qButtonStyle" 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="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 x:Name="grid">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" >
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="imageNormal" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush)" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Null}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Thickness>0</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="imageNormal">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="imagePressed">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="imagePointer" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
Storyboard.TargetName="Border"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush)" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Null}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill)" Storyboard.TargetName="FocusVisualWhite">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="#7F006400"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill)" Storyboard.TargetName="FocusVisualBlack">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="#7F006400"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="imagePressed" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="imagePointer" d:IsOptimized="True"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="imageNormal">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="imagePointer">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To="0.25" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
</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>
<Image x:Name="imagePointer" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Source="ms-appx:///Assets/btnBGPointer.png" Opacity="0"/>
<Image x:Name="imagePressed" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Source="ms-appx:///Assets/btnBGPressed.png" Opacity="0"/>
<Image x:Name="imageNormal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Source="ms-appx:///Assets/bgButtonBase.png"/>
<Border x:Name="Border"
Background="{TemplateBinding Background}" Margin="3">
<ContentPresenter x:Name="ContentPresenter"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</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>
回答4:
I'm using this code:
<Button Style="{StaticResource anyButton}" Cursor="Hand" ClickMode="Press" Click="Button_Click_1" />
Style:
<Style x:Key="anyButton" TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border"
BorderThickness="0"
Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Background" TargetName="border">
<Setter.Value>
<ImageBrush ImageSource="C:\Users\image1.png" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="border">
<Setter.Value>
<ImageBrush ImageSource="C:\Users\image2.png" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Background" TargetName="border">
<Setter.Value>
<ImageBrush ImageSource="C:\Users\image3.png" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
来源：https://stackoverflow.com/questions/13623610/how-can-i-change-background-image-of-a-button-when-hover-or-click-in-xaml-for-wi