0

我有以下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将导致 Grid 背景更改为名为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，那将是非常棒的！

4

2 回答 2

0

如您所见，网格使用名为 kingscross.jpg 的图像作为其背景。我正在尝试这样做，以便单击 Next Answer 按钮将导致网格背景更改为名为 SKV_8915_s.jpg 的图像。

根据您的要求，您可以ImageBrush为 Grid 设置 Background 属性，然后绑定ImageSourcewith 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，您可以参考。

于 2018-10-16T06:46:27.247 回答
0

感谢您的提示，但此时此解决方案将超出我的想象，我不熟悉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;
            }
于 2018-11-20T19:20:41.650 回答