2012-12-04 160 views
3

我開始使用C#/ XAML編程Windows Phone 8。目前我正在開發一個有問題(textblock)和4個選項(以按鈕形式)的測驗類型WP8應用程序。我想要做的是在按鈕中顯示這些選項的圖像。我該怎麼做?C#/ XAML將圖像添加到按鈕

請你檢查什麼我已經開始 這是我的DataEntry類:

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" }); 
    } 
} 

我的MainPage類:

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; 
    } 
} 

我的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> 

正如你所看到的,到目前爲止我所完成的是它只是在按鈕中顯示字符串(答案)。我想知道如何顯示我從我的和絃文件夾中調用的圖像。任何幫助表示讚賞。謝謝。

+0

你正在分配一個字符串按鈕Content屬性,你應該創建一個圖像控件的實例(我不知道Windows Phone 8的名稱空間,谷歌它),並將其分配給按鈕的內容。 – BenCr

回答

13

嘗試以下操作:

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

我不知道是否加入Content="Answer4"將顯示在圖像中的文本。

+0

我嘗試了以上,但是,我的應用程序應該顯示隨機圖像。 –

+0

'隨機'部分將由您的ViewModel實現。只需使用Binding作爲Source屬性即可。 –

+0

@HenkHolterman對不起,你能舉一些例子來說明綁定源屬性的感謝。新手在這裏。 –

0

這是一種很漂亮的方式,我發現將圖像添加到按鈕(from this website)。將圖像源設置爲圖像的位置。 (這可以在代碼隱藏,因爲你的具體問題需要。)

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