Wie kombiniere ich ein Farbbild getrenntes CMYB in XAML

Question

Ich würde gerne ein Farbbild in Cyan/Magenta/Gelb/Schwarz Teile in eine Windows 10 IOT-Anwendung mit XAML in C# ..

Dies ist einfach in CSS (siehe Demo https://css-tricks.com/basics-css-blend-modes/).

Wie mache ich das in XAML?

Answer 1

Sie können es mit einem UserControl tun, hier habe ich ein Steuerelement namens "SeparateLetterControl" erstellt.

XAML-Code:

<Grid> 
    <StackPanel x:Name="stackPanel" Orientation="{x:Bind LetterOritation}" /> 
</Grid> 

-Code hinter:

public sealed partial class SeparateLetterControl : UserControl 
{ 
    private char[] Letterlist; 

    private Color[] ColorList; 

    public SeparateLetterControl() 
    { 
     this.InitializeComponent(); 
     this.Loaded += SeparateLetterControl_Loaded; 
    } 

    private void SeparateLetterControl_Loaded(object sender, RoutedEventArgs e) 
    { 
     Letterlist = WordToArray(OriginalText); 
     var LetterstringColorArray = LetterColors.Split(','); 
     int colorcount = 0; 
     ColorList = new Color[LetterstringColorArray.Count()]; 
     foreach (var color in LetterstringColorArray) 
     { 
      ColorList[colorcount] = ConvertToColor(color); 
      colorcount++; 
     } 
     int count = 0; 
     if (LetterOritation == Orientation.Horizontal) 
     { 
      foreach (var i in Letterlist) 
      { 
       TextBlock tb = new TextBlock(); 
       tb.Text = i.ToString(); 
       tb.FontSize = 30; 
       tb.Margin = new Thickness(0, 0, LetterSpacing, 0); 
       tb.Foreground = new SolidColorBrush(ColorList[count % ColorList.Count()]); 
       stackPanel.Children.Add(tb); 
       count++; 
      } 
     } 
     else 
     { 
      foreach (var i in Letterlist) 
      { 
       TextBlock tb = new TextBlock(); 
       tb.Text = i.ToString(); 
       tb.FontSize = 30; 
       tb.Margin = new Thickness(0, 0, 0, LetterSpacing); 
       tb.Foreground = new SolidColorBrush(ColorList[count % ColorList.Count()]); 
       stackPanel.Children.Add(tb); 
       count++; 
      } 
     } 
    } 

    //change original word to string[] 
    private char[] WordToArray(string originalword) 
    { 
     return originalword.ToCharArray(); 
    } 

    //convert string to color 
    public static Color ConvertToColor(string colorName) 
    { 
     if (string.IsNullOrEmpty(colorName)) throw new ArgumentNullException("colorName"); 
     MethodBase getColorMethod = FindGetColorMethod(colorName); 
     if (getColorMethod == null) 
     { 
      // Using FormatException like the WPF System.Windows.Media.ColorConverter 
      throw new FormatException(string.Format(CultureInfo.InvariantCulture, "Color name {0} not found in {1}", 
       colorName, typeof(Colors).FullName)); 
     } 
     return (Color)getColorMethod.Invoke(null, null); 
    } 

    private static MethodBase FindGetColorMethod(string colorName) 
    { 
     foreach (PropertyInfo propertyInfo in typeof(Colors).GetTypeInfo().DeclaredProperties) 
     { 
      if (propertyInfo.Name.Equals(colorName, StringComparison.OrdinalIgnoreCase)) 
      { 
       MethodBase getMethod = propertyInfo.GetMethod; 
       if (getMethod.IsPublic && getMethod.IsStatic) 
        return getMethod; 
       break; 
      } 
     } 
     return null; 
    } 

    public static readonly DependencyProperty TextProperty = DependencyProperty.Register("OriginalText", typeof(string), typeof(SeparateLetterControl), new PropertyMetadata(string.Empty)); 

    public string OriginalText 
    { 
     get { return (string)GetValue(TextProperty); } 
     set { SetValue(TextProperty, value); } 
    } 

    public static readonly DependencyProperty LetterSpacingProperty = DependencyProperty.Register("LetterSpacing", typeof(int), typeof(SeparateLetterControl), new PropertyMetadata(0)); 

    public int LetterSpacing 
    { 
     get { return (int)GetValue(LetterSpacingProperty); } 
     set { SetValue(LetterSpacingProperty, value); } 
    } 

    public static readonly DependencyProperty LetterOritationProperty = DependencyProperty.Register("LetterOritation", typeof(Orientation), typeof(SeparateLetterControl), new PropertyMetadata(Orientation.Horizontal)); 

    public Orientation LetterOritation 
    { 
     get { return (Orientation)GetValue(LetterOritationProperty); } 
     set { SetValue(LetterOritationProperty, value); } 
    } 

    public static readonly DependencyProperty LetterSizeProperty = DependencyProperty.Register("LetterSize", typeof(double), typeof(SeparateLetterControl), new PropertyMetadata(15)); 

    public double LetterSize 
    { 
     get { return (double)GetValue(LetterSizeProperty); } 
     set { SetValue(LetterSizeProperty, value); } 
    } 

    public static readonly DependencyProperty LetterColorProperty = DependencyProperty.Register("LetterColors", typeof(string), typeof(SeparateLetterControl), new PropertyMetadata("Black")); 

    public string LetterColors 
    { 
     get { return (string)GetValue(LetterColorProperty); } 
     set { SetValue(LetterColorProperty, value); } 
    } 
} 

Jetzt können Sie es verwenden, zB in Ihnen diese gerne MainPage.xaml:

<local:SeparateLetterControl OriginalText="Hello, World!" LetterOritation="Horizontal" LetterSpacing="-10" LetterSize="50" 
          LetterColors="Cyan,Magenta,Yellow,Black" VerticalAlignment="Center" HorizontalAlignment="Center" /> 

Jetzt werden Sie sehen, Das Renderbild:

Bitte beachten Sie, dass ich vier Eigenschaften dieses Steuerelements verfügbar gemacht habe, sie sind "OriginalText", "LetterSpacing", "LetterOritation", "LetterSize" und "LetterColors".

Sie den Text in die Eigenschaft kann OriginalText, die LetterSpacing Eigenschaft der Raum zwischen jedem Buchstaben ist, kann die LetterOritation eingestellt werden, um „Horizontal“ oder „Vertikal“, stellt die LetterSize die FontSize jedes Buchstabens und LetterColors.

[Wichtig!] Inzwischen die LetterColors Typ der Eigenschaft ist String und das Format dieser Eigenschaft sollte wie „Farbe, Farbe, Farbe“ sein, Sie jede Farbe, die Sie wünschen und eine beliebige Anzahl von Farben definieren können Sie mag, aber bitte buchstabieren Sie den Namen der Farbe und verwenden Sie kein Symbol außer "," in dieser Eigenschaft, habe ich nicht behandelt diese Ausnahmen, auch ein Leerzeichen kann hier den Fehler verursachen.