使用数据绑定 xaml UWP 更改其他页面中网格的颜色答案

【问题标题】：Change color of the grid in other page with data-binding xaml UWP使用数据绑定 xaml UWP 更改其他页面中网格的颜色
【发布时间】：2018-02-24 16:19:28
【问题描述】：

我在 UWP 应用程序中有 MainPage 中的一个网格和 BlankPage1 中的另一个网格，我想同时通过数据绑定更改 MainPage 中的网格和 BlankPage1 中的网格的颜色。

代码。

颜色类：

class ColorGridClass : INotifyPropertyChanged
{
    private SolidColorBrush _coloreGenerale = new SolidColorBrush(Color.FromArgb(255, 16, 111, 151));
    public SolidColorBrush ColoreGenerale
    {
        get => _coloreGenerale;
        set
        {
            _coloreGenerale = value;
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(ColoreGenerale)));
        }
    }
    public event PropertyChangedEventHandler PropertyChanged;
}

主页 xaml：

 <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.DataContext>
        <local:ColorGridClass x:Name="ColorOfGrid" ColoreGenerale="Aquamarine"/>
    </Grid.DataContext>
    <Button x:Name="btnChangeColor" Content="Change Color" Click="btnChangeColor_Click" HorizontalAlignment="Left" Margin="10,10,0,0" Foreground="{Binding }" VerticalAlignment="Top"/>
    <Grid Background="{Binding ColoreGenerale, Mode=OneWay}" HorizontalAlignment="Left" Height="500" Margin="10,52,0,0" VerticalAlignment="Top" Width="500">
        <TextBlock Text="Grid One" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="30,30,0,0"/>
    </Grid>
    <Frame x:Name="MainFrame" Content="" HorizontalAlignment="Left" Margin="532,10,0,0" VerticalAlignment="Top" Height="1060" Width="1378"/>
</Grid>

MainPage xaml.cs:

public MainPage()
{
    this.InitializeComponent();
    MainFrame.Navigate(typeof(BlankPage1));
}

private void btnChangeColor_Click(object sender, RoutedEventArgs e)
{
    ColorOfGrid.ColoreGenerale = new SolidColorBrush(Colors.Blue);
}

BlankPage1 xaml：

<Grid Background="LightSalmon">
    <Grid.DataContext>
        <local:ColorGridClass x:Name="ColorOfGrid" ColoreGenerale="Aquamarine"/>
    </Grid.DataContext>
    <TextBlock Text="Page1" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="30,30,0,0"/>
    <Grid Background="{Binding ColoreGenerale, Mode=OneWay}" HorizontalAlignment="Center" Height="500" Margin="0" VerticalAlignment="Center" Width="500">
        <TextBlock Text="Grid Two" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="30,30,0,0"/>
    </Grid>
</Grid>

如何使用数据绑定更改第二个网格的颜色？

提前致谢。

【问题讨论】：

您可以使用 StaticResource 或 ThemeResource 很好地实现这一目标
你能给我举个例子吗？
docs.microsoft.com/en-us/windows/uwp/controls-and-patterns/…。这应该让你开始
我看过一些例子，但使用的资源无法更改。我怎样才能让它充满活力？
你能解释一下use a resource that can not change是什么意思吗？

标签： xaml data-binding uwp

【解决方案1】：

在这种情况下，您希望在整个应用程序中保持一致性，您可以使用Application.Resources 并创建一个SolidColorBrush 并在需要时使用它来绑定颜色/更改颜色。

在 App.xaml 中创建 Application.Resources 并添加要用作默认 Background 的 SolidColorBrush。就我而言，我想使用Red。

<Application.Resources>
    <SolidColorBrush x:Key="GridColorSolidBrush" Color="Red" />
</Application.Resources>

现在将您的Mainpage.xaml 和BlankPage.xaml 网格Background 更改为此资源Key。如下所示。

<Grid Background="{StaticResource GridColorSolidBrush}">

现在在您的 Button.Tapped 事件中，您可以更改颜色，如下所示。

(Application.Current.Resources["GridColorSolidBrush"] as SolidColorBrush).Color = Colors.Green;

这将改变所有FrameworkElements（在本例中为Grid）的颜色。

Here你可以找到一个简单的 GitHub Repo。

下面是我的示例程序的输出。

【讨论】：