如何使用背景图像切换背景颜色[重复]

Posted 2023-02-21

【中文标题】如何使用背景图像切换背景颜色[重复]

【英文标题】：How to toggle background colors with a background image [duplicate]

【发布时间】：2019-03-31 13:40:48

【问题描述】：

我有一个用户在设置菜单中构建的控件。我将让他们选择上传图像作为控件的背景，或设置背景颜色。我如何允许用户切换此功能而不必创建一个全新的控件，或者不必创建两个具有切换可见性的父网格（这会使页面 xaml 翻倍）？

这里是 xaml。当我手动注释掉其中一个 Grid.Background 标记时，我可以在颜色和图像之间切换。如何以编程方式执行此操作？

<Grid Name="myGrid">        
      <Grid.Background>
           <ImageBrush ImageSource="c:/sports.jpeg" Stretch="UniformToFill"/>
      </Grid.Background>

      <Grid.Background>
           <LinearGradientBrush StartPoint="0,1" EndPoint="0,.5">
                 <LinearGradientBrush.GradientStops>
                      <GradientStop Color="Binding ColorsBo.PageBackgroundPrimary" Offset="1"/>
                        <GradientStop Color="Binding ColorsBo.PageBackgroundGradient" Offset="0"/>
                    </LinearGradientBrush.GradientStops>
           </LinearGradientBrush>
      </Grid.Background> 

       .... more xaml to fill the page
</Grid>

【问题讨论】：

myGrid.Background = new ImageBrush(...) 或 myGrid.Background = new LinearGradientBrush(...)

我不同意。如果有人像我一样在如何用图像画笔切换渐变画笔上苦苦挣扎，他们会选择迈克尔的绝妙答案，因为您将其标记为重复。

您可以简单地将任何 Brush 派生类的实例分配给元素的 Background 属性。这是微不足道的，并不需要视图模型。虽然绑定 Background 属性很好，但并不是绝对必要的。当您询问如何以编程方式在 ImageBrush 和 LinearGradientBrush 之间切换背景时，一个直接的答案是将属性设置为每个的实例。

重复链接，可以在侧边栏中看到。苦苦挣扎的人经常会访问重复的链接以阅读其他答案。将帖子标记为重复不会丢失任何内容。

【参考方案1】：

基本上你自己在代码中回答了这个问题。

Grid.Background 是 DependencyProperty 的 Type Brush。这意味着我们可以将bind 任何Brush 发送到Grid。

您如何选择执行此绑定取决于您，并且可以从中获得许多很酷的样式/功能。

这是一个非常基本的 ViewModel 来演示这一点。

using System.ComponentModel;
using System.Windows.Media;

namespace Question_Answer_WPF_App

    public class BackgroundViewModel : INotifyPropertyChanged
    
        private readonly SolidColorBrush DefaultBrush = new SolidColorBrush(Colors.BlueViolet);
        private Brush background;
        public event PropertyChangedEventHandler PropertyChanged;
        public BackgroundViewModel() => background = DefaultBrush;

        public Brush Background
        
            get => background;
            set
            
                background = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Background)));
            
        
    

那么你可以这样使用它......

<Grid Name="myGrid"
      Background="Binding Background"> 
...

---

只是为了帮助你，我给你做了一个更好的。这是 ViewModel 中的一些预设画笔，以及 View 中的 Grid。您可以按原样复制和粘贴此内容，无需任何代码，它会起作用。 （请注意，我故意使用了 3 种不同的画笔；SolidColorBrush、ImageBrush 和 LinearGradientBrush。还有更多，任何一种都可以使用。）

视图模型

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Windows.Media;
using System.Windows.Media.Imaging;

namespace Question_Answer_WPF_App.ViewModels

    public class BackgroundViewModel : INotifyPropertyChanged
    
        private Brush selectedBackground;

        public BackgroundViewModel()
        
            var brushes = new List<Brush>
            
                new SolidColorBrush(Colors.BlueViolet),
                new ImageBrush(new BitmapImage(new Uri("http://i.stack.imgur.com/jGlzr.png", UriKind.Absolute))),
                new LinearGradientBrush(Colors.Black, Colors.White, 45)
            ;
            BackgroundOptions = brushes;
            SelectedBackground = BackgroundOptions.FirstOrDefault();
        

        public event PropertyChangedEventHandler PropertyChanged;
        public IEnumerable<Brush> BackgroundOptions  get; 

        public Brush SelectedBackground
        
            get => selectedBackground;
            set
            
                selectedBackground = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(SelectedBackground)));
            
        
    

查看

<Window x:Class="Question_Answer_WPF_App.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:ViewModels="clr-namespace:Question_Answer_WPF_App.ViewModels"
        mc:Ignorable="d"
        Title="MainWindow"
        Height="500"
        Width="800">

    <Window.DataContext>
        <ViewModels:BackgroundViewModel />
    </Window.DataContext>

    <Grid Background="Binding SelectedBackground">
        <ComboBox ItemsSource="Binding BackgroundOptions"
                  SelectedItem="Binding SelectedBackground"
                  Width="250"
                  Height="40"
                  VerticalAlignment="Top"
                  HorizontalAlignment="Left"
                  Margin="12">
            <ComboBox.ItemTemplate>
                <DataTemplate>
                    <Grid Background="Binding"
                          Height="40"
                          Width="200" />
                </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>
    </Grid>

</Window>

屏幕截图

【讨论】：

天哪！！！很好的答案！！！这正是我要找的！谢谢！！！