DCSIMG
Change image on button press xaml - Blend - naimis20 blog - Site Root - StudentGuru

Change image on button press xaml - Blend

Χαιρετώ το λαό ! στο παρακάτω blog post , θα δούμε πως γίνεται να αλλάξουμε το background ενός κουμπιού , όταν το πατάει ο χρήστης! θα εκτελέσσουμε το παραπάνω αποκλειστικά σε Expression Blend.

Στο blend λοιπόν έχουμε ένα button . Αρχικά κάνουμε δεξί κλικ πάνω στο button-> edit template ->edit a copy .

Με το παραπάνω , παίρνουμε το default template ενός button και στη συγκεκριμένη περίπτωση , ενός button για Windows 8 application. Το blend μας δημιουργεί όλο τον κώδικα σε xaml και μπορούμε να τον "πειράξουμε" όπως εμείς θέλουμε. Στο παράθυρο που ανοίγει βάζουμε το όνομα που θέλουμε να έχει το κουμπί , και πατάμε ΟΚ.

Παρατηρούμε πλέον πως έχουμε τη δυνατότητα να αλλάξουμε τις καταστάσεις στις οποίες βρίσκεται το κουμπί.

Έχω σημειώσει με κόκκινο το κουμπί με το οποίο μπορείτε να δείτε τον κώδικα xaml της σελίδας της εφαρμογής στην οποία βρίσκεστε. Έπειτα πλοηγηθείτε στον κώδικά σας στη περιοχή των <Page Resources></Page Resources> και ψάξτε για το template του κουμπιού που δημιουργήσαμε προηγουμένως. Εκεί θα βρείτε τίς εξής γραμμές κώδικα:

<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="Pressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
                                                <DiscreteObjectKeyFrame KeyTime="0" >
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <ImageBrush ImageSource="Assets/toonomatisikonas.png"/>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(ContentPresenter.Foreground)" Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <ImageBrush ImageSource="ms-appx:/toonomatouproject/Assets/toonomatisikonas.png"/>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState> 

Αλλάζετε τις λέξεις με κόκκινο με τα assets και το όνομα της εφαρμογής σας! And you are ready to go !!! :)

Happy codingggggggggggggggggg \m/