Comment lier les couleurs GradientStop ou la propriété GradientStops dans Silverlight?

Question

Je veux être en mesure d'avoir un gradient dynamique dans Silverlight, comme ci-dessous:

<RadialGradientBrush GradientOrigin="0.20,0.5" Center="0.25,0.50" 
        RadiusX="0.75" RadiusY="0.5"> 
    <GradientStop Color="{Binding Path=GradientStart}" Offset="0" /> 
    <GradientStop Color="{Binding Path=GradientEnd}" Offset="1" /> 
</RadialGradientBrush> 

Je lient à deux propriétés qui renvoient le type « couleur » mais je reçois toujours ce message:

AG_E_PARSER_BAD_PROPERTY_VALUE 

Si je tente de se lier à une collection GradientStop ce qui a le même problème, quelle est la solution à ce problème:

1. Permet le début et la fin d'un G radient à modifier lors de l'exécution
2. Works dans Silverlight 3.0 et n'est pas une solution WPF

S'il y a un travail autour ou de toute façon de reproduire ce comportement ce serait acceptable, j'ai des solutions qui fonctionnent avec LinearGradients comme Je peux simplement lier quelque chose à la propriété "Remplir" - mais dans cette situation cela ne marchera pas, et il y a peut-être d'autres types de dégradés que je peux utiliser et que d'autres utiliseront à l'avenir.

Answer 1

Le problème est que GradientStop ne dérive pas de FrameworkElement ne peut donc pas être données liées. Malheureusement, cela signifie que vous devez le définir à partir du code.

Answer 2

Avez-vous confirmé le type utilisé comme DataContext où votre brosse de dégradé est définie? Comme vous n'avez pas spécifié de Source dans votre liaison, elle utilisera par défaut le DataContext.

Answer 3

Pour vraiment y arriver, vous avez deux choix.

Bind les éléments d'affichage propriété Brush à une propriété brosse dans les données

ont la source de données portent une propriété qui Expose qui brosse que vous souhaitez utiliser sur pour chaque élément et vous lier la propriété de l'écran élément qui prend le pinceau, par exemple une propriété Fill. Cela fonctionne si l'ensemble des valeurs distinctes que vous auriez pour les paires de valeurs Start et Stop est petit. Vous créez une instance de chaque pinceau pour chaque paire, puis l'élément de données expose le bon.

Bind les éléments d'affichage propriété Brush en utilisant une valeur Convertisseur

Si votre démarrage et d'arrêt des valeurs d'une variable plus vous aurez besoin d'une nouvelle instance d'un type de brosse pour chaque élément affiché. Dans ce cas, vous lier la propriété des éléments d'affichage de la brosse à l'aide d'un convertisseur de valeur, par exemple: -

<Rectangle Fill="{Binding Converter={StaticResource MyBrushBuilder} }" ... > 

Voir cette answer pour une description complète de la construction d'un convertisseur.

Dans ce cas, si votre implémentation de la méthode de conversion ressemblerait à ceci: -

public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
{ 
    YourItemsType item = (YourItemsType)value; 

    var start = new GradientStop(); 
    start.Offset = 0; 
    start.Color = item.GradientStart; 

    var stop = new GradientStop(); 
    stop.Offset = 1; 
    stop.Color = item.GradientStop; 

    var result = new RadialGradientBrush(); 
    result.GradientOrigin = new Point(0.20, 0.5); 
    result.Center = new Point(0.25, 0.5); 
    result.RadiusX = 0.75; 
    result.RadiusY = 0.5; 
    result.GradientStops = new GradientStopCollection(); 
    result.GradientStops.Add(start); 
    result.GradientStops.Add(stop); 

    return result; 
} 

caveat

Chaque fois que la liaison de données se produit un tas de pinceaux sont créés l'un pour chaque élément. Cela peut être coûteux et indésirable. Par conséquent, si cette approche du convertisseur de liaison est jugée nécessaire, je vous recommande d'utiliser un dictionnaire statique de brosses. La clé dans ce dictionnaire serait le hachage des deux couleurs. Vous ne créerez un nouveau pinceau que si nécessaire et réutiliserez un pinceau créé si possible.

Answer 4

Assez vieux Post, mais c'est possible (maintenant), alors voici ma solution. Mon code XAML:

<Ellipse.Resources> 
    <local:ColorConverter x:Key="ColorConverter"/> 
</Ellipse.Resources> 
<Ellipse.Fill> 
    <RadialGradientBrush> 
     <GradientStop Color="{Binding MenuColor2, Source={x:Static p:Settings.Default}, Converter={StaticResource ColorConverter}}" Offset="1" /> 
     <GradientStop Color="{Binding MenuColor1, Source={x:Static p:Settings.Default}, Converter={StaticResource ColorConverter}}" Offset="0.85" /> 
    </RadialGradientBrush> 
</Ellipse.Fill> 

Et voici mon C# -Code.

[ValueConversion(typeof(System.Drawing.Color), typeof(System.Windows.Media.Color))] 
public class ColorConverter : IValueConverter 
{ 

    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
     if (value is System.Drawing.Color) 
     { 
      var clr = (System.Drawing.Color)value; 
      return System.Windows.Media.Color.FromArgb(clr.A, clr.R, clr.G, clr.B); 
     } 
     return value; 
    } 

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
     if (value is Color) 
     { 
      var clr = (Color)value; 
      return System.Drawing.Color.FromArgb(clr.A, clr.R, clr.G, clr.B); 
     } 
     return value; 
    } 
}