Question

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

我有一个带有comboBox的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并且用作Page Backhground。

完整回购可用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;
    }

UWP绑定：使用C＃更改XAML中的背景

2 个答案: