如何更改 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>

如您所见，网格使用名为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

正如你所看到的，网格使用一个名为kingscross的图像.jpg作为它的背景。我正在尝试使单击按钮"下一个答案"将导致网格背景更改为名为SKV_8915_s.jpg的图像。

根据您的要求，您可以为 Grid 的背景属性设置ImageBrush，然后将ImageSource与 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，您可以参考。

Answer 2

感谢您的提示，但在这一点上，这个解决方案将在我的头顶上，我不熟悉 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;
}