C# XAML how to bind source property

Question

I'd like to know how to bind source property. In my quiz app, I'd like to display the 4 options( they are images) in buttons. But what I have accomplished is to view its references.

Please see my code below:

Fragment of my xaml:

        <Canvas Name="Canvas_StartGame" 
            VerticalAlignment="Center"
            HorizontalAlignment="Center" Grid.Row="1"
            Height="200" Width="300"
            Visibility="Visible">
        <Canvas.Background>
            <ImageBrush Stretch="Fill" ImageSource="/images/mainlogo.png"/>
        </Canvas.Background>
        <!--Visibility="Visible">-->

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Button Content="Start Game" Click="btnStartGame" HorizontalAlignment="Left" Margin="-22,205,0,0" VerticalAlignment="Top" Width="325"/>
        </Grid>
    </Canvas>

    <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"   Click="Button_AnswerClick">
                    <Image Source="chords/a_major_chord.gif" />
                </Button>
                <Button Name="btnAnswer2"   Click="Button_AnswerClick"/>
                <Button Name="btnAnswer3"   Click="Button_AnswerClick"/>
                <Button Name="btnAnswer4"   Click="Button_AnswerClick"/>



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

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

If you can help I'll appreciate it. thanks

Answer 1

To bind the source property you can define one datatemplate in resources of page and you can put Canvas_Game element inside it. And you can use listbox control of wpf. And you can set its ItemTemplate property to the datatemplate name defined in resource. Then ItemSource property of Listbox can be set to GetData() method's collection on load of xaml page.