C#/XAML add image to button

Question

I'm beginning to program in Windows Phone 8 using C#/XAML. Currently I'm developing a quiz type WP8 app which has a question (textblock) and 4 options (in the form of buttons). What I'd like to do is, to display the images of those options in buttons. How am I gonna do that?

Please do check what I have started this is my DataEntry class:

    class DataEntry
{
    List<DataModel> dataModelList = new List<DataModel>();
    public List<DataModel> GetData()
    {
        dataModelList.Add(new DataModel { ID = 0, Question = "A major", Answer1 = "chords/g_major.gif", Answer2 = "chords/c_major.gif", Answer3 = "chords/b_major.gif", CorrectAnswer = "chords/a_major.gif" });
        dataModelList.Add(new DataModel { ID = 1, Question = "B major", Answer1 = "chords/g_major.gif", Answer2 = "chords/d_major.gif", Answer3 = "chords/e_major.gif", CorrectAnswer = "chords/b_major.gif" });
    }
}

And my MainPage class:

public partial class MainPage : PhoneApplicationPage
{
    List<DataModel> dataModelList = new List<DataModel>();
    List<ScoreModel> scoreModelList = new List<ScoreModel>();
    Random rand = new Random();
    DataEntry dataEntry = new DataEntry();
    int number1, number2, number3, number4, score = 0, scoreToHave = 4;
    string CorrectAnswer;
    int QuestionID = 0;

    public MainPage()
    {
        InitializeComponent();
        dataModelList = dataEntry.GetData();
        Question();
    }

    private void Question()
    {

        foreach (var item in dataModelList)
        {
            if (item.ID == QuestionID)
            {
                TextBlock_Question.Text = item.Question;
                CorrectAnswer = item.CorrectAnswer;
                RandomAnswerPlaces(item.Answer1, item.Answer2, item.Answer3, item.CorrectAnswer);
            }
        }
    }

    public void RandomAnswerPlaces(string Answer1, string Answer2, string Answer3, string Answer4)
    {
        String[] Answers = new string[4];
        noRepeat();
        Answers[number1] = Answer1;
        Answers[number2] = Answer2;
        Answers[number3] = Answer3;
        Answers[number4] = Answer4;
        btnAnswer1.Content = Answers[0];
        btnAnswer2.Content = Answers[1];
        btnAnswer3.Content = Answers[2];
        btnAnswer4.Content = Answers[3];
    }

    private void noRepeat()
    {
        number1 = rand.Next(0, 4);
        number2 = rand.Next(0, 4);
        number3 = rand.Next(0, 4);
        number4 = rand.Next(0, 4);
        if (number1 == number2 ||
            number1 == number3 ||
            number1 == number4 ||
            number2 == number3 ||
            number2 == number4 ||
            number3 == number4)
        {
            noRepeat();
        }
    }

    private void btnStartGame(object sender, RoutedEventArgs e)
    {
        Canvas_StartGame.Visibility = System.Windows.Visibility.Collapsed;
        Canvas_Game.Visibility = System.Windows.Visibility.Visible;
    }

    private void Button_AnswerClick(object sender, RoutedEventArgs e)
    {
        string ClickedAnswer = ((System.Windows.Controls.Button)(sender)).Content.ToString();
        string ClickedButtonName = ((System.Windows.Controls.Button)(sender)).Name.ToString();

        switch (ClickedButtonName)
        {
            case "btnAnswer1":
                btnAnswer1.IsEnabled = false;
                break;
            case "btnAnswer2":
                btnAnswer2.IsEnabled = false;
                break;
            case "btnAnswer3":
                btnAnswer3.IsEnabled = false;
                break;
            case "btnAnswer4":
                btnAnswer4.IsEnabled = false;
                break;
            default:
                break;
        }
        if (CorrectAnswer == ClickedAnswer)
        {
            if (QuestionID < (dataModelList.Count() - 1))
            {
                QuestionID++;
            }
            else
            {
                MessageBox.Show(string.Format("Game Over! your final score : {0}", score));
                SaveHighScore();
            }

            score += scoreToHave;
            scoreToHave = 5;
            Question();
            btnAnswer1.IsEnabled = true;
            btnAnswer2.IsEnabled = true;
            btnAnswer3.IsEnabled = true;
            btnAnswer4.IsEnabled = true;
        }
        else
        {
            scoreToHave -= 2;
        }
        TextBlock_ScoreToHave.Text = string.Format("Score you can get: {0}", scoreToHave.ToString());
        TextBlock_Score.Text = string.Format("Score: {0}", score.ToString());
    }

    private void SaveHighScore()
    {
        if (IsolatedStorageSettings.ApplicationSettings.Contains("scoreList"))
        {
            scoreModelList = IsolatedStorageSettings.ApplicationSettings["scoreList"] as List<ScoreModel>;
            scoreModelList.Add(new ScoreModel { Score = score, DateSaved = DateTime.Now.ToShortDateString() });
            IsolatedStorageSettings.ApplicationSettings.Clear();
            IsolatedStorageSettings.ApplicationSettings.Add("scoreList", scoreModelList);
            IsolatedStorageSettings.ApplicationSettings.Save();
        }
        Canvas_StartGame.Visibility = System.Windows.Visibility.Collapsed;
        Canvas_Game.Visibility = System.Windows.Visibility.Collapsed;
        Canvas_HighScore.Visibility = System.Windows.Visibility.Visible;
        var tempList =
           from item in scoreModelList
           where item.Score > 0
           orderby item.Score descending
           select string.Format("Date: {0} Score: {1}", item.DateSaved, item.Score);
        ListBox_HighScore.ItemsSource = tempList.ToList();
        score = 0;
        scoreToHave = 5;
        QuestionID = 0;
        Canvas_StartGame.Visibility = System.Windows.Visibility.Visible;
        Canvas_Game.Visibility = System.Windows.Visibility.Collapsed;
    }

    private void Button_DoneClick(object sender, RoutedEventArgs e)
    {
        Canvas_StartGame.Visibility = System.Windows.Visibility.Visible;
        Canvas_Game.Visibility = System.Windows.Visibility.Collapsed;
        Canvas_HighScore.Visibility = System.Windows.Visibility.Collapsed;
    }
}

And fragment of my xaml:

<Canvas Name="Canvas_Game" 
            VerticalAlignment="Center"
            HorizontalAlignment="Center" 
            Height="800" Width="480"
            Visibility="Collapsed">
        <!--Visibility="Collapsed">-->
        <Grid  Height="800" Width="480">
            <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
                <TextBlock Name="TextBlock_ScoreToHave" Text="Score to have:"/>
                <TextBlock Name="TextBlock_Score" Text="Score:"/>
                <TextBlock Width="480" Text="Question:" FontSize="40"/>
                <TextBlock VerticalAlignment="Top" Name="TextBlock_Question" Text="What is the meaning of life?" FontSize="32" Width="480" TextAlignment="Left" TextWrapping="Wrap" MaxHeight="400"/>
                <Button Name="btnAnswer1"  Content="Answer1" Click="Button_AnswerClick"/>
                <Image Source="/chords/"></Image>
                <Button Name="btnAnswer2"  Content="Answer2" Click="Button_AnswerClick"/>
                <Button Name="btnAnswer3"  Content="Answer3" Click="Button_AnswerClick"/>
                <Button Name="btnAnswer4"  Content="Answer4" Click="Button_AnswerClick"/>



            </StackPanel>
        </Grid>
    </Canvas>

As you can see, what I have accomplished so far is that it's just displaying the strings (answers) in the button. I'd like to know how to display its images that I called from my chords folder. Any help is appreciated. Thanks.

Ostrich

You're assigning a string to the button Content property, you should create an instance of an Image control (I don't know the namespace for Windows-Phone-8, Google it) and assign that to the Content of the button. – Ge

Answer 1

Try the following:

<Button Name="btnAnswer4" Click="Button_AnswerClick">
<Image Source="chords/image.png"></Image>
</Button>

I don't know whether adding Content="Answer4" will show the text over the image.

Carven

The 'random' part is to be realized by your ViewModel. Just use Binding for the Source property. – Iy

@HenkHolterman sorry, can you please give some example for binding the source property thanks. Newbie here. – Ostrich

Its working thanks! Now i want to change button image dynamically from C# code how to do?? – Hoarhound

Its working thanks! Now i want to change button image dynamically from C# code how to do?? – Hoarhound

Answer 2

Here is a nice-looking way I found to add images to a button (from this website). Set your Image Source to the location of your image. (This could be done in code-behind, as your specific question would require.)

<Button Height="26" Width="26" Cursor="Hand">
    <Button.Template>
        <ControlTemplate>
            <Image Source="Resources/OpenFolder_64x.png"/>
        </ControlTemplate>
    </Button.Template>
</Button>

Septuagenarian

Answer 3

If you want a round button I suggest using http://coding4fun.codeplex.com/ and their RoundButton which supports an ImagePath to be set. http://coding4fun.codeplex.com/wikipage?title=RoundButton&referringTitle=Documentation

Bali

Answer 4

It works to me:

<Button>
    <StackPanel Orientation="Horizontal">
        <Image Source="path/image.png"></Image>
        <TextBlock>Text</TextBlock>
    </StackPanel>
</Button>

Porett