none
Showing a specific image after an event RRS feed

  • Question

  • Hi, I am trying to show an image following an event.  What I am doing is creating a mathematical quiz and when the Checkanswers event is raised if an answer is correct the image shown should be a tick and if incorrect a cross.

    private bool CheckAnswers()
            {
                if (Val1 + Val2 == int.Parse(ans1.Text))
                    return true;
                //Todo add code to display tick beside answer
                else
                    return false;
                //Todo add code to display cross beside answer
            }

    I have an image box created in the Xaml setup for the page at the end of the row beside the answer box (ans1) and tick.jpg and cross.jpg are both in my image files but how do I allocate the correct one to the empty image box?
    <Image x:Name="isCorrect1" HorizontalAlignment="Left" Height="23" Margin="551,118,0,0" VerticalAlignment="Top" Width="24"/>


    Nigel..

    Monday, December 9, 2019 3:19 PM

Answers

  • Hi,

    I do n’t see your event, I only see one method.Do you want to use event to trigger method?

            public delegate void Mydelegate();
            public event Mydelegate MyCheckanswers;
          
    
            private void Button_Click(object sender, RoutedEventArgs e)
            {
       
                MyCheckanswers += CheckAnswers;
                MyCheckanswers.Invoke();
           
            }
       
    
            private void CheckAnswers()
            {
                if (Val1 + Val2 == int.Parse(ans1.Text))
                    isCorrect1.Source = new BitmapImage(new Uri(@"D:\image\xx1.jpg", UriKind.RelativeOrAbsolute));
                
               
                else
                    isCorrect1.Source = new BitmapImage(new Uri(@"D:\image\xx2.jpg", UriKind.RelativeOrAbsolute));
            }

    Best Regards,

    Alex


    MSDN Community Support Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    • Marked as answer by m0cvo Thursday, December 12, 2019 9:00 AM
    Tuesday, December 10, 2019 3:02 AM
    Moderator

All replies

  • Hello m0cvo,

    Here is how I would approach it. You have 3 states; not answered yet, correct answer, false answer. You will need to create a property that hold these three states. You can use a bool? or use a enum to hold the three states, I will demonstrate the bool? Property below:

    First you need a Property that you use for Binding that is in a class that implements INotifyPropertyChanged
    
            private bool? _IsCorrectAnswer = null;
            public bool? IsCorrectAnswer
            {
                get
                {
                    return this._IsCorrectAnswer;
                }
                set
                {
                    this._IsCorrectAnswer = value;
                    RaisePropertyChanged("IsCorrectAnswer");
                }
            }
    
    
    
    Your xaml markup of the image tag:
    
    
    <Image Source="/YourProject;component/Images/tick.jpg" Height="24" Width="24">
                    <Image.Style>
                        <Style TargetType="Image">
                            <Setter Property="Visibility" Value="Hidden"/>
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding IsCorrectAnswer}" Value="True">
                                    <Setter Property="Visibility" Value="Visible"/>
                                </DataTrigger>
                                <DataTrigger Binding="{Binding IsCorrectAnswer}" Value="False">
                                    <Setter Property="Visibility" Value="Visible"/>
                                    <Setter Property="Source" Value="/YourProject;component/Images/cross.jpg"/>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Image.Style>
    </Image>
    
    
    
    Now instead of returning true/false, just set the property:
    
    this.IsCorrectAnswer = true;   // or false

    Here your property is instantiated as null. In XAML your image Visibility is set to 'Hidden' (reserves the space, but does not show any image). The two triggers handle when it is set to true or false. If you set to null it will again be 'Hidden'. If the property is set to true, then the image just shows (it's check.jpg). If the Property is set to false, it not only shows the image, but switches the image to cross.jpg. Make sure you DO NOT set the starting Visibility to Hidden on the tag since it will not let the triggers work (you have to set it in the setter)

    Good luck, and happy coding.


    noorbakhsh حميد نوربخش






    • Edited by noorbakhsh Monday, December 9, 2019 11:53 PM
    Monday, December 9, 2019 11:44 PM
  • Hi,

    I do n’t see your event, I only see one method.Do you want to use event to trigger method?

            public delegate void Mydelegate();
            public event Mydelegate MyCheckanswers;
          
    
            private void Button_Click(object sender, RoutedEventArgs e)
            {
       
                MyCheckanswers += CheckAnswers;
                MyCheckanswers.Invoke();
           
            }
       
    
            private void CheckAnswers()
            {
                if (Val1 + Val2 == int.Parse(ans1.Text))
                    isCorrect1.Source = new BitmapImage(new Uri(@"D:\image\xx1.jpg", UriKind.RelativeOrAbsolute));
                
               
                else
                    isCorrect1.Source = new BitmapImage(new Uri(@"D:\image\xx2.jpg", UriKind.RelativeOrAbsolute));
            }

    Best Regards,

    Alex


    MSDN Community Support Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    • Marked as answer by m0cvo Thursday, December 12, 2019 9:00 AM
    Tuesday, December 10, 2019 3:02 AM
    Moderator
  • Hi Alex, 

    Incorporating this into my solution and replacing the Uri with images\tick.jpg (or images\wrong.jpg) it builds and runs but still does not show the images once the button is clicked.

     private void CheckBtn_Click(object sender, RoutedEventArgs e)
            {
                MyCheckanswers += CheckAnswers;
                MyCheckanswers.Invoke();
    
                //CheckAnswers();
            }
    
    
            private void CheckAnswers()
            {
                if (Val1 + Val2 == int.Parse(ans1.Text))
                    isCorrect1.Source = new BitmapImage(new Uri(@"images\tick.jpg", UriKind.RelativeOrAbsolute));
                    //isCorrect();
    
    
                else
                    isCorrect1.Source = new BitmapImage(new Uri(@"images\wrong.jpg", UriKind.RelativeOrAbsolute));
                    //isWrong();
    
            }
    Am I missing something here?


    Nigel..

    Wednesday, December 11, 2019 2:15 PM
  • Hi,

    Did you add a click event for the Button?

      public MainWindow()
            {
                InitializeComponent();
                ButtonName.Click += Button_Click;
            }

    Best Regards,

    Alex


    MSDN Community Support Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Thursday, December 12, 2019 1:27 AM
    Moderator
  • Doh! How could I have missed that... Thanks.

    Nigel..

    Thursday, December 12, 2019 8:59 AM