Question

我有一个用户可以在设置菜单中构建的控件。我将为他们提供选择，要么上传图像作为控件的背景，要么设置背景颜色。我将如何允许用户切换此功能而不必创建一个全新的控件，也不必创建两个具有可见性切换的父网格（这会使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>

Answer 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中的网格。您可以按原样复制和粘贴此内容，没有任何代码在后面，它将起作用。（请注意，我故意使用了3种不同的Brushes； SolidColorBrush，ImageBrush和LinearGradientBrush。可以使用的画笔更多且更多。）

ViewModel

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>

屏幕截图

如何用背景图像切换背景颜色

1 个答案: