locked
Create Custom Button and Edit its states

    Question

  • Hello,

    Iam Creating a Custom Button i added a rectangle and make it a button control and set its background by one image from assets and i tried to change the states of button when button pressed the background is changed to red and when pointerOver the background becomes green

    but when pointer exites  it never shows the original background image it shows the pointer over color green why?

    full xaml code

    <Page
        x:Class="App2.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App2"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    	<Page.Resources>
    		<Style x:Key="ButtonStyle1" TargetType="Button">
    			<Setter Property="Template">
    				<Setter.Value>
    					<ControlTemplate TargetType="Button">
    						<Grid>
    							<VisualStateManager.VisualStateGroups>
    								<VisualStateGroup x:Name="CommonStates">
    									<VisualState x:Name="Pressed">
    										<Storyboard>
    											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill)" Storyboard.TargetName="rectangle">
    												<DiscreteObjectKeyFrame KeyTime="0">
    													<DiscreteObjectKeyFrame.Value>
    														<SolidColorBrush Color="#FFFB2C0B"/>
    													</DiscreteObjectKeyFrame.Value>
    												</DiscreteObjectKeyFrame>
    											</ObjectAnimationUsingKeyFrames>
    										</Storyboard>
    									</VisualState>
    									<VisualState x:Name="Disabled"/>
    									<VisualState x:Name="PointerOver">
    										<Storyboard>
    											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill)" Storyboard.TargetName="rectangle">
    												<DiscreteObjectKeyFrame KeyTime="0">
    													<DiscreteObjectKeyFrame.Value>
    														<SolidColorBrush Color="#FF16FB0B"/>
    													</DiscreteObjectKeyFrame.Value>
    												</DiscreteObjectKeyFrame>
    											</ObjectAnimationUsingKeyFrames>
    										</Storyboard>
    									</VisualState>
    								</VisualStateGroup>
    								<VisualStateGroup x:Name="FocusStates">
    									<VisualState x:Name="Focused"/>
    									<VisualState x:Name="PointerFocused"/>
    								</VisualStateGroup>
    							</VisualStateManager.VisualStateGroups>
    							<Rectangle x:Name="rectangle" Stroke="Black">
    								<Rectangle.Fill>
    									<ImageBrush ImageSource="Assets/SplashScreen.png" Stretch="UniformToFill"/>
    								</Rectangle.Fill>
    							</Rectangle>
    							<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    						</Grid>
    					</ControlTemplate>
    				</Setter.Value>
    			</Setter>
    		</Style>
    	</Page.Resources>
    
        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        	<Button Content="Button" HorizontalAlignment="Left" Height="110" Margin="670,355,0,0" Style="{StaticResource ButtonStyle1}" VerticalAlignment="Top" Width="250"/>
        </Grid>
    </Page>
    


    Santana George

    Monday, December 24, 2012 10:06 AM

Answers