Avalonia Converter 颜色转化器系列不完全盘点

011 Avalonia Converter 颜色转化器系列不完全盘点

1. 前言

我们选择的 Converter 是严格意义上实现了 IValueConverter 接口的正儿八经的及其地道的 Converter，不是随便一个叫做 Converter 的对象就能收录到本文的。

2. AccentColorConverter 强调色转换器

有的时候你有一个动态的背景，上面有一行小字，小字的颜色起码得和背景不一样而且能看清吧？
试试 AccentColorConverter。
感觉目前版本的的强调色转换存在一些问题，比如对于输入颜色，需要手动填入强调的强度才能看出区别，深色的表现力会好很多，但是浅色的话，会导致颜色更白，进而看不见。

嘛，先来看看怎么使用，以及使用后的效果吧。

命名空间：using:Avalonia.Controls.Primitives.Converters

<UserControl x:Class="WebTest.Views.MainView"
             xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:cv="using:Avalonia.Controls.Primitives.Converters"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:vm="clr-namespace:WebTest.ViewModels"
             Width="300"
             Height="200"
             x:DataType="vm:MainViewModel"
             mc:Ignorable="d">
    <UserControl.Resources>
        <cv:AccentColorConverter x:Key="AccentColorConverter" />
    </UserControl.Resources>
    <Design.DataContext>
        <vm:MainViewModel />
    </Design.DataContext>

    <Grid Background="{Binding Brush}">
        <TextBlock HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   Foreground="{Binding Brush, Converter={StaticResource AccentColorConverter}, ConverterParameter=8}"
                   Text="hello" />
    </Grid>

</UserControl>

注意看这里的用法：

<TextBlock HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Foreground="{Binding Brush, Converter={StaticResource AccentColorConverter}, ConverterParameter=8}"
            Text="hello" />

ConverterParameter属性是表示其颜色发白的程度，最大似乎到 10。范围是 -10 ~ 10，0 的话就没有任何效果。

如果是深绿色的话，效果是这个样子：

如果是浅色的话，是这个样子：

根本就看不清，为此可以将 ConverterParameter 改成负数，比如 -8。

<TextBlock HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Foreground="{Binding Brush, Converter={StaticResource AccentColorConverter}, ConverterParameter=-8}"
            Text="hello" />

2. ColorToDisplayNameConverter 颜色取名转换器

顾名思义，就是一个颜色转为字符串名称的一个转换器，我不知道这个有什么用，但是既然有，就试一下吧，如果网上都没有什么人写的话，那以后还会有别人在这个地方浪费时间。

命名空间：using:Avalonia.Controls.Converters

<UserControl x:Class="WebTest.Views.MainView"
             xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:cv="using:Avalonia.Controls.Converters"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:vm="clr-namespace:WebTest.ViewModels"
             Width="300"
             Height="200"
             x:DataType="vm:MainViewModel"
             mc:Ignorable="d">
    <UserControl.Resources>
        <cv:ColorToDisplayNameConverter x:Key="ColorToDisplayNameConverter" />
    </UserControl.Resources>
    <Design.DataContext>
        <vm:MainViewModel />
    </Design.DataContext>

    <Grid Background="{Binding Brush}">
        <TextBlock HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   Text="{Binding Brush, Converter={StaticResource ColorToDisplayNameConverter}}" />
    </Grid>
</UserControl>

效果如下：

因为我取得颜色是来自 Colors.LightGreen 的一模一样的对象，所以结果也是 LightGreen。
如果我们采用一个 Color.FromRgb() 进行调用。

[ObservableProperty]
private SolidColorBrush _brush = new SolidColorBrush(Color.FromRgb(123,50,1));

居然在这里也有对应的名称，让我有些意外。

备注：ColorHelper 中有方法 ColorHelper.ToDisplayName()，使用它也可以进行转换，但是这不是IValueConverter转换器，可能用处还是 ColorToDisplayNameConverter 大一些。

4. ColorToHexConverter 颜色转 Hex 转换器

ColorToConverter 不仅是一个转换器，而且还有不少静态方法供以在 C# 代码中调用，ColorToHexConverter.ToHexString() 将颜色传入后得到对应的颜色十六进制 Hex 格式字符串。

命名空间：using:Avalonia.Controls.Converters

<UserControl x:Class="WebTest.Views.MainView"
             xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:cv="using:Avalonia.Controls.Converters"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:vm="clr-namespace:WebTest.ViewModels"
             Width="300"
             Height="200"
             x:DataType="vm:MainViewModel"
             mc:Ignorable="d">
    <UserControl.Resources>
        <cv:ColorToHexConverter x:Key="ColorToHexConverter" />
    </UserControl.Resources>
    <Design.DataContext>
        <vm:MainViewModel />
    </Design.DataContext>

    <Grid Background="{Binding Brush}">
        <TextBlock HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   Text="{Binding Brush, Converter={StaticResource ColorToHexConverter}}" />
    </Grid>

</UserControl>

结果如下：

这个的输出 Hex 字符串的格式可以在声明 ColorToHexConverter 对象的时候进行调用，你可以改成这样的声明：

<cv:ColorToHexConverter x:Key="ColorToHexConverter"  AlphaPosition="Leading" IsAlphaVisible="False"/>

就像这样：

如果你想要前缀有 #，你可以在 ConverterParameter 中传入参数 x:True。

下面是用法：

<TextBlock HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Text="{Binding Brush, Converter={StaticResource ColorToHexConverter}, ConverterParameter={x:True}}" />

结果如下：

5. ContrastBrushConverter

这个转换器会将颜色转换为只有黑或者只有白的Brush，特别地，浅色时转换结果为黑，深色时转换结果为白。
这个非常好！前面内容有对 AccentColorConverter 非常的失望，但是这个反倒就很好，很适合作为前景色。

命名空间：using:Avalonia.Controls.Primitives.Converters

<UserControl x:Class="WebTest.Views.MainView"
             xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:cv="using:Avalonia.Controls.Primitives.Converters"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:vm="clr-namespace:WebTest.ViewModels"
             Width="300"
             Height="200"
             x:DataType="vm:MainViewModel"
             mc:Ignorable="d">
    <UserControl.Resources>
        <cv:ContrastBrushConverter x:Key="ConstrastBrushConverter" />
    </UserControl.Resources>
    <Design.DataContext>
        <vm:MainViewModel />
    </Design.DataContext>

    <Grid Background="{Binding Brush}">
        <TextBlock HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   Foreground="{Binding Brush, Converter={StaticResource ConstrastBrushConverter}}"
                   Text="hello" />
    </Grid>

</UserControl>

结果是这样的：

如果是浅色系背景，那么结果是这样的：

6. DoNothingForNullConverter Null 值时什么都不干转换器

如果绑定的是个空值时，这个转换器将会什么都不做。
没搞懂。待补完。

github 链接如下：https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls.ColorPicker/Converters/DoNothingForNullConverter.cs

7. ToBrushConverter 颜色转为 Brush 转换器

可以将各种颜色对象比如 Color，HslColor，HsvColor 转为 Brush，这样就可以在绑定内容的时候，直接使用颜色对象，而不用再转一遍。

命名空间：using:Avalonia.Controls.Converters

<UserControl x:Class="WebTest.Views.MainView"
             xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:cv="using:Avalonia.Controls.Converters"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:vm="clr-namespace:WebTest.ViewModels"
             Width="300"
             Height="200"
             x:DataType="vm:MainViewModel"
             mc:Ignorable="d">
    <UserControl.Resources>
        <cv:ToBrushConverter x:Key="ToBrushConverter" />
    </UserControl.Resources>
    <Design.DataContext>
        <vm:MainViewModel />
    </Design.DataContext>

    <Grid Background="White">
        <TextBlock HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   Foreground="{Binding Color, Converter={StaticResource ToBrushConverter}}"
                   Text="hello" />
    </Grid>

</UserControl>

结果：

8. ToColorConverter 转为 Color 转换器

可以将 HslColor，HsvColor，SolidColorBrush 转为 Color。

你可能会问我们在哪里会绑定 Color 而不是 Brush 呢？这个可以在渐变色的时候用到！

命名空间：using:Avalonia.Controls.Converters

<UserControl x:Class="WebTest.Views.MainView"
             xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:cv="using:Avalonia.Controls.Converters"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:vm="clr-namespace:WebTest.ViewModels"
             Width="300"
             Height="200"
             x:DataType="vm:MainViewModel"
             mc:Ignorable="d">
    <UserControl.Resources>
        <cv:ToColorConverter x:Key="ToColorConverter" />
    </UserControl.Resources>
    <Design.DataContext>
        <vm:MainViewModel />
    </Design.DataContext>

    <Grid Background="White">
        <Border Width="120" Height="30">
            <Border.Background>
                <LinearGradientBrush StartPoint="0,0" EndPoint="120,0">
                    <GradientStop Offset="0" Color="{Binding Brush, Converter={StaticResource ToColorConverter}}" />
                    <GradientStop Offset="1" Color="White" />
                </LinearGradientBrush>
            </Border.Background>
        </Border>
    </Grid>

</UserControl>

这是截图：