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>

我应该返回什么来将用户决策绑定到应用程序资源？

提前谢谢你！

Answer 1

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

在这种情况下，我正在创建两个资源。一种将保持设置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

祝你好运。

Answer 2

[更新]你可以使用这个，保存你的设置后。

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;
    }