Как изменить фоновую сетку XAML

Question

У меня есть следующий код XAML для создания универсального приложения для Windows:

<Page
x:Class="CalculationQuizzer.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CalculationQuizzer"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Image Source="ms-appx:///Images/kingscross.jpg" Opacity=".3" Stretch="Fill"></Image>
    <StackPanel VerticalAlignment="Center">
        <TextBlock Text="Calculation Quizzer" TextAlignment="Center" Margin="4" FontSize="16"></TextBlock>
        <TextBlock Name="questionTextBlock" Text="" TextAlignment="Center" Margin="4"></TextBlock>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="4">
            <TextBox Name="answerTextBox" Width="100" Margin="4" TextAlignment="Center"></TextBox>
            <Button Content="Check Answer" Name="checkAnswerButton" HorizontalAlignment="Center"  Margin="4" Click="checkAnswerButton_Click" ></Button>
        </StackPanel>
        <Button Content="Next Question" Name="getNextQuestionButton" HorizontalAlignment="Center"  Margin="4" Click="getNextQuestionButton_Click" ></Button>
        <TextBlock Name="resultTextBlock" Text="" TextAlignment="Center" Margin="4"></TextBlock>
    </StackPanel>
    <MediaElement Name="soundMediaElement"></MediaElement>
</Grid>

Как вы можете видеть, Grid использует изображение под названием kingscross.jpg дляэто фон.Я пытаюсь сделать так, чтобы нажатие на кнопку Next Answer заставило фон сетки измениться на изображение с именем SKV_8915_s.jpg.

Вот код, стоящий за XAML:

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using Windows.UI.Xaml.Media.Imaging;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409

namespace CalculationQuizzer
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        IQuizObject activeQuiz;

        public MainPage()
        {
            this.InitializeComponent();

            activeQuiz = new AdditionQuizObject();
            questionTextBlock.Text = activeQuiz.GetQuestion();
        }

        private void getNextQuestionButton_Click(object sender, RoutedEventArgs e)
        {
            activeQuiz.NextQuestion();
            questionTextBlock.Text = activeQuiz.GetQuestion();
            answerTextBox.Text = "";
            resultTextBlock.Text = "";
        }

        private void checkAnswerButton_Click(object sender, RoutedEventArgs e)
        {
            if (activeQuiz.CheckAnswer(answerTextBox.Text))
            {
                resultTextBlock.Text = "Correct! Well done.";
                Uri soundsource = new Uri("ms-appx:///Sounds/right.wav");
                soundMediaElement.Source = soundsource;
                soundMediaElement.Play();
            }
            else
            {
                resultTextBlock.Text = "Sorry, that is not correct.";
                Uri soundsource = new Uri("ms-appx:///Sounds/wrong.wav");
                soundMediaElement.Source = soundsource;
                soundMediaElement.Play();
            }
        }
    }

Если бы некоторые из вас, ребята, могли бы сказать мне, какой код мне нужно подключить к обработчику событий для CheckAnswerButton_Click, чтобы он изменил фон сетки, на SKV_8915_s.jpg, это было бы супер поразительно!

Answer 1

спасибо за совет, но на данный момент это решение было бы выше моей головы, я не знаком с Resault.Но вместо этого я нашел простой способ сделать это, зайдя в окно предварительного просмотра XAML и создав новый элемент изображения imgbg2.Тогда это позволило бы мне изменить его из кода, например, так:

  public MainPage()
        {
            this.InitializeComponent();           
        }

        private void Button1_Click(object sender, RoutedEventArgs e)
        {
            //Brush newBackgroundBrushRed = new SolidColorBrush(Colors.Red);           

            if (grid1.Background == newBackgroundBrushImage)
            {
                grid1.Background = bgimg2brush;
            }
else
            {
                grid1.Background = newBackgroundBrushImage;
            }

Answer 2

Как видите, для фона используется изображение под названием kingscross.jpg.Я пытаюсь сделать так, чтобы нажатие кнопки «Следующий ответ» привело к изменению фона сетки на изображение с именем SKV_8915_s.jpg.

. По вашему требованию вы можете установить ImageBrush дляСвойство Background для Grid, затем свяжите ImageSource со свойством bool, как показано ниже.И используйте конвертер для передачи различного изображения для каждого типа bool.

<Grid>
    <Grid.Background>
        <ImageBrush ImageSource="{x:Bind Resault,Converter={StaticResource IMConverter},Mode=OneWay}" Stretch="UniformToFill"/>
    </Grid.Background>
    <Button Content="Check" Click="Button_Click"/>
</Grid>

Код позади

public sealed partial class MainPage : Page, INotifyPropertyChanged
{
    public MainPage()
    {
        this.InitializeComponent();
    }
    private bool _resault;

    public event PropertyChangedEventHandler PropertyChanged;
    private void onPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    public bool Resault
    {
        get => _resault;
        set
        {
            _resault = value;
            onPropertyChanged();
        }
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        Resault = !Resault;
    }
}
public class ImageConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        return (bool)value ? new BitmapImage(new Uri("ms-appx:///Assets/bc1.jpg")) : new BitmapImage(new Uri("ms-appx:///Assets/bc2.jpg"));
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

И у меня есть пример кода на github, на который вы могли ссылаться.