如何綁定多個顏色來填充WPF中的矩形？

Question

我將一個ItemsControl綁定到名爲SwatchThumbnails的可觀察集合，該集合將包含數據以生成矩形。矩形可以有1-3個與之相關的顏色，並且在渲染時需要顯示多種顏色。我想我明白如何將一種顏色綁定到填充，但我需要一種方法來綁定多達三個，並讓它們均勻顯示。如何才能做到這一點？

這是我的XAML：

<ScrollViewer x:Name="sv_Thumbnails" Grid.ColumnSpan="2" Grid.Row="1" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto"> 
    <ItemsControl x:Name="ug_Thumbnails" ItemsSource="{Binding SwatchThumbnails, ElementName=mainWindow}"> 
     <ItemsControl.ItemsPanel > 
      <ItemsPanelTemplate> 
       <UniformGrid Columns="6" RenderTransformOrigin="0,0.5" Cursor="Hand"> 
        <Rectangle Width="50" Height="50" Fill="{Binding Color}" Margin="0 0 5 0" /> 
       </UniformGrid> 
      </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 
    </ItemsControl> 
</ScrollViewer> 

我最初將通過C＃代碼中的矩形進UniformGrid，所以我有一個用於分離出的顏色寫的原代碼。基本上，這是我用於生成矩形的原始代碼：

 System.Windows.Shapes.Rectangle swatch = new System.Windows.Shapes.Rectangle(); 
     swatch.Width = 50; 
     swatch.Height = 50; 
     swatch.Margin = new Thickness(0, 5, 5, 0); 
     swatch.StrokeThickness = 1; 
     swatch.Stroke = System.Windows.Media.Brushes.Gray; 
     swatch.Name = "s_" + _name.ToString(); 
     double groupsize = 100/_colors.Count(); 
     DrawingBrush blackBrush = new DrawingBrush(); 
     DrawingGroup checkersDrawingGroup = new DrawingGroup(); 
     List<SolidColorBrush> brushes = _colors; 
     double location = 0; 
     for (int i = 0; i < _colors.Count(); i++) 
     { 
      GeometryDrawing drawing = new GeometryDrawing(brushes[i], null, 
       new RectangleGeometry(new Rect(0, location, groupsize, groupsize))); 
      checkersDrawingGroup.Children.Add(drawing); 
      location += groupsize; 
     } 
     blackBrush.Drawing = checkersDrawingGroup; 
     swatch.Fill = blackBrush; 
     swatch.MouseUp += new MouseButtonEventHandler(loadSwatchResources); 

最後，這裏是我可觀察的集合和色板縮略圖定義。

private ObservableCollection<SwatchThumbnail> swatchThumbnails = new ObservableCollection<SwatchThumbnail>(); 
    public ObservableCollection<SwatchThumbnail> SwatchThumbnails 
    { 
     get { return swatchThumbnails; } 
     set { swatchThumbnails = value; } 
    } 

public class SwatchThumbnail : INotifyPropertyChanged 
{ 
    public string name { get; set; } 
    public List<Color> colors { get; set; } 
    public bool selected { get; set; } 

    public event PropertyChangedEventHandler PropertyChanged; 
} 

Answer 1

要用於其實每個縮略圖的背景看起來像一個垂直LinearGradientBrush所以這裏最好的選擇是LinearGradientBrush，不DrawingBrush這也太複雜（矯枉過正）對於這種情況。您需要一些Colors屬性（使用INotifyPropertyChanged）來保存顏色範圍。要將其轉換爲LinearGradientBrush，您需要一個Converter。我知道所有的顏色帶應該有相同的高度（和全寬）。幸運的是，LinearGradientBrush中的Offset與整個Height相對（按某種比例），所以我們不需要關於相關Rectangle的實際高度的任何信息。這裏是轉換器類：

public class ColorsToLinearGradientBrushConverter : IValueConverter { 
    public object Convert(object value, Type targetType, object parameter, 
                 CultureInfo culture){ 
     var colors = (List<Color>) value; 
     var brush = new LinearGradientBrush(){ StartPoint = new Point(), 
              EndPoint = new Point(0,1)}; 
     var w = 1d/colors.Count; 
     for(var i = 0; i < colors.Count - 1; i++){ 
     var offset = w * (i+1); 
     var stop1 = new GradientStop(colors[i], offset); 
     var stop2 = new GradientStop(colors[i+1], offset); 
     brush.GradientStops.Add(stop1); 
     brush.GradientStops.Add(stop2); 
     } 
     return brush; 
    } 
    //this way back is not needed (bind OneWay) 
    public object ConvertBack(object value Type targetType, object parameter, 
                  CultureInfo culture){ 
     throw new NotImplementedException(); 
    } 
} 

注意，Colors屬性應該有List<Color>型（原爲酒店的List<SolidColorBrush>型）。

定義你的轉換器的一些資源在XAML並正常使用的綁定（我希望你知道這一點）。這裏是XAML代碼：

<ScrollViewer x:Name="sv_Thumbnails" Grid.ColumnSpan="2" Grid.Row="1" 
    VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto"> 
    <ScrollViewer.Resources> 
    <local:ColorsToLinearGradientBrushConverter x:Key="brushConverter"/> 
    </ScrollViewer.Resources> 
    <ItemsControl x:Name="ug_Thumbnails" ItemsSource="{Binding SwatchThumbnails, 
                 ElementName=mainWindow}"> 
    <!--ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <UniformGrid Columns="6" RenderTransformOrigin="0,0.5" Cursor="Hand"> 
      </UniformGrid> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel--> 

    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
      <Rectangle Width="50" Height="50" Fill="{Binding Colors, 
            Converter={StaticResource brushConverter}}" 
         Margin="0 0 5 0" /> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 
    </ItemsControl> 
</ScrollViewer> 

請注意，您必須在這裏使用了一些ItemTemplate，你原來的XAML只是有ItemsPanel這改變了項目的整個容器。如果這是你想要的，只是指定面板正常，但請記住，它只是涉及到如何安排和佈局的項目。這意味着我們不能爲每個項目綁定背景。

更新：我以爲你實現SwatchThumbnail正常。但看起來你沒有。因此，請嘗試下面的實施，看它是否有效：

public class SwatchThumbnail : INotifyPropertyChanged { 
    public event PropertyChangedEventHandler PropertyChanged; 
    protected void OnPropertyChanged(string prop){ 
    var handler = PropertyChanged; 
    if(handler != null) handler(this, new PropertyChangedEventArgs(prop)); 
    } 
    string _name; 
    public string name { 
    get { return _name;} 
    set { 
     if(_name != value) { 
      _name = value; 
      OnPropertyChanged("name"); 
     } 
    } 
    } 
    List<SolidColorBrush> _colors; 
    public List<SolidColorBrush> colors { 
    get { 
     return _colors; 
    } 
    set { 
     _colors = value; 
     OnPropertyChanged("colors"); 
    } 
    } 
    bool _selected; 
    public bool selected { 
    get { 
     return selected; 
    } 
    set { 
     if(_selected != value){ 
      _selected = value; 
      OnPropertyChanged("selected"); 
     } 
    } 
    } 
} 

Answer 2

據我所知道的最簡單的方法是使用一個DrawingBrush代替SolidColorBrush的。

你DrawingBrush形容你用它來填補你的矩形圖案（在你的情況，你會用你的三個的SolidColor筆刷繪製DrawingBrush的內容）。 矩形的Fill屬性應該綁定到DrawingBrush。

參見如何使用DrawingBrush爲矩形填充here的描述。