UWP 绑定：使用 C# 在 XAML 中更改背景

Question

假设我正在制作一个简单的 UWP 应用程序，它可以在多个页面之间导航。我希望所有页面都有一个共同的背景，具体取决于用户从“设置”页面选择的背景。

我有一个带有组合框的 SettingsPage.xaml（以及需要更改的网格背景）：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <ComboBox Name="ColourSelect" SelectionChanged="ComboBox_SelectionChanged">
        <ComboBoxItem Name="Red">Red</ComboBoxItem>
        <ComboBoxItem Name="Green">Green</ComboBoxItem>
        <ComboBoxItem Name="Blue">Blue</ComboBoxItem>
    </ComboBox>
</Grid>

与我的 SettingsPage.xaml.cs 文件接口：

private void ComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        // Change background
        if (Red.IsSelected) { } // Change to Red.png
        else if (Green.IsSelected) { } // Change to Green.png
        else if (Blue.IsSelected) { } // Change to Blue.png
    }

我已将我的 App.xaml 设置为包含后台资源，但我不确定如何将其绑定到 Settings.xaml.cs 中的 C#。

<Application.Resources>
    <Style TargetType="Grid" x:Key="CommonBackground">
        <Setter Property="Background" Value="{ <!-- Some image. How to bind? --> }"
    </Style>
</Application.Resources>

我应该如何 return 将用户决定绑定到应用程序资源？

提前致谢！

Answer 1

[更新]您可以使用它，并在保存您的设置后。

SettingsPage.xaml

    <Grid>
    <Grid.Background>
        <ImageBrush x:Name="colorImage" Stretch="UniformToFill"/>
    </Grid.Background>
    <ComboBox Name="ColourSelect" SelectionChanged="ComboBox_SelectionChanged">
        <ComboBoxItem Name="Red">Red</ComboBoxItem>
        <ComboBoxItem Name="Green">Green</ComboBoxItem>
        <ComboBoxItem Name="Blue">Blue</ComboBoxItem>
    </ComboBox>
</Grid>

SettingsPage.xaml.cs

private void ComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        if (Red.IsSelected)
        {
            ChangeColorImage("ms-appx:///Assets/Red.png");
        } 
        else if (Green.IsSelected)
        {
            ChangeColorImage("ms-appx:///Assets/Green.png");
        }
        else if (Blue.IsSelected)
        {
            ChangeColorImage("ms-appx:///Assets/Blue.png");
        }
    }

    private void ChangeColorImage(string imageUrl)
    {
        // using Windows.UI.Xaml.Media.Imaging;
        BitmapImage imageSource = new BitmapImage(new Uri(imageUrl));
        colorImage.ImageSource = imageSource;
    }

Answer 2

这需要在不同的应用程序中进行少量更改。按照我的步骤。

在这种情况下，我正在创建两个资源。一个将维护设置 Combobox 配色方案。第二个是资源中的BitMapImage。

所以我的 Application.Resource 将如下所示。

<Application.Resources>
    <image:BitmapImage x:Key="BackgroundSource" UriSource="ms-appx:///Assets/Red.png" />
    <x:String x:Key="BackgroundBrush">Red</x:String>
</Application.Resources>

确保在 App.xaml 中添加 xmlns:image="using:Windows.UI.Xaml.Media.Imaging"。

现在在 App.xaml.cs 中创建一个静态方法，用于在运行时间内将 Background 更新到页面。它应该像下面这样。

public static void UpdateBGColors(string Color)
{
    switch (Color)
    {
        case "Red":
            Current.Resources["BackgroundSource"] = "ms-appx:///Assets/Red.png";
            break;
        case "Green":
            Current.Resources["BackgroundSource"] = "ms-appx:///Assets/Green.png";
            break;
        case "Blue":
            Current.Resources["BackgroundSource"] = "ms-appx:///Assets/Blue.png";
            break;
        default:
            Current.Resources["BackgroundSource"] = "ms-appx:///Assets/Red.png";
            break;
    }
}

现在您的 combobox_SelectionChanged 应该如下所示。

private void ComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    ComboBox cb = sender as ComboBox;

    ApplicationDataContainer localSettings = ApplicationData.Current.LocalSettings;
    localSettings.Values["BackgroundBrush"] = (cb.SelectedValue as ComboBoxItem).Content;
    App.UpdateBGColors((cb.SelectedValue as ComboBoxItem).Content.ToString());
}

现在您需要将每个页面的背景连接到资源 BackgroundSource。所以任何你想要根据设置设置背景的地方添加下面的代码行

<Grid>
    <Grid.Background>
        <ImageBrush ImageSource="{StaticResource BackgroundSource}" />
    </Grid.Background>
    ......
</Grid>

此时，如果您在设置页面中更改设置，并且导航回到您进入设置页面的原始页面，背景应该自动设置为您在设置中选择的任何内容。

但您还想确保下次打开应用时加载相同的背景。要在 App.xaml.cs 中执行此操作，请在 OnLaunched 事件的开头添加以下行。

ApplicationDataContainer localSettings = ApplicationData.Current.LocalSettings;
if (localSettings.Values["BackgroundBrush"] != null)
{
    UpdateBGColors(localSettings.Values["BackgroundBrush"].ToString());
}

因为在设置页面中，您正在保存 BackgroundBrush 每次您更改组合框项目时，每当您的应用程序加载时，基于 BackgroundBrush BackgroundSource 将被分配到正确的 Uri并将用作页面背景。

完整回购可用 Here

祝你好运。

UWP 绑定：使用 C# 在 XAML 中更改背景

UWP Binding: Changing backgrounds in XAML using C#

data-binding

xaml

uwp

uwp-xaml