C#/XAML add image to button
c#, windows-phone-8, xaml
Solution
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.
Problem
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.