WPF Binding值轉換器ValueConverter使用簡介(二)-IMultiValueConverter

注：

需要繼承IMultiValueConverter接口，接口使用和IValueConverter邏輯相同。

一、MultiBinding+Converter 多值綁定及多值轉換實例

當縱向流量大於橫向流量時指示燈應為綠色，當縱向流量小於橫向流量時指示燈應為紅色，否則指示燈為黃色。

1、定制ColorConverter類，此時Convert中參數是object[] values，values[0]對應MultiBinding中的第一個Binding值，這里是縱向流量值，依此類推，可以在MultiBinding對象中指定多個綁定。

public class ColorConverter : IMultiValueConverter
{
    //正向修改
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        if (values == null || values.Length < 2)
            return DependencyProperty.UnsetValue;
        double verValue = (double)values[0];
        double horValue = (double)values[1];
        if (verValue > horValue)
            return new SolidColorBrush(Colors.Green);
        else if (verValue < horValue)
            return new SolidColorBrush(Colors.Red);
        return new SolidColorBrush(Colors.Yellow);
    }
    //反向修改
    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        //返回空，標記不可雙向轉換
        return null;
    }
}

2.Xaml定義

添加命名空間

 xmlns:local="clr-namespace:AudioDemo.View"

<Window.Resources>
    <local:ColorConverter x:Key="cvtColor"/>
</Window.Resources>
<Grid>
    <Label x:Name="label" Content="縱向值：" HorizontalAlignment="Left" Margin="10,40,0,0" VerticalAlignment="Top"/>
    <Label x:Name="label1" Content="橫向值：" HorizontalAlignment="Left" Margin="10,80,0,0" VerticalAlignment="Top"/>
    <Slider x:Name="sliderVer" HorizontalAlignment="Left" Margin="75,43,0,0" VerticalAlignment="Top" Width="192"/>
    <Slider x:Name="sliderHor" HorizontalAlignment="Left" Margin="75,81,0,0" VerticalAlignment="Top" Width="192"/>
    <Ellipse   HorizontalAlignment="Left" Height="100" Margin="75,120,0,0" Stroke="Black" VerticalAlignment="Top" Width="100">
        <Ellipse.Fill>
            <MultiBinding Converter="{StaticResource cvtColor}">
                <Binding Path="Value" ElementName="sliderVer"/>
                <Binding Path="Value" ElementName="sliderHor"/>
            </MultiBinding>
        </Ellipse.Fill>
    </Ellipse>
</Grid>

二、RGB顏色混合實例

1.轉換器定義

public class RGBConverter : IMultiValueConverter
{
    //正向修改，整合顏色值
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        if (values == null || values.Length < 3)
            return null;
        byte r = System.Convert.ToByte(values[0]);
        byte g = System.Convert.ToByte(values[1]);
        byte b = System.Convert.ToByte(values[2]);
        Color col = Color.FromRgb(r, g, b);
        SolidColorBrush brush = new SolidColorBrush(col);
        return brush;
    }
    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        return null;
    }
}

2.Xaml定義

別忘先添加命名空間

xmlns:local="clr-namespace:AudioDemo.View"

<Window.Resources>
    <local:RGBConverter  x:Key="rgbCvt"/>
</Window.Resources>
<Grid>
    <Label x:Name="label" Content="Red:" HorizontalAlignment="Left" Margin="10,48,0,0" VerticalAlignment="Top"/>
    <Label x:Name="label_Copy" Content="Green:" HorizontalAlignment="Left" Margin="7,85,0,0" VerticalAlignment="Top"/>
    <Label x:Name="label_Copy1" Content="Blue:" HorizontalAlignment="Left" Margin="7,123,0,0" VerticalAlignment="Top"/>
    <Slider x:Name="slider_r" Minimum="0" Maximum="255" Ticks="1"   HorizontalAlignment="Left" Margin="68,53,0,0" VerticalAlignment="Top" Width="207"/>
    <Slider x:Name="slider_g" Minimum="0" Maximum="255"  Ticks="1" HorizontalAlignment="Left" Margin="68,91,0,0" VerticalAlignment="Top" Width="207"/>
    <Slider x:Name="slider_b" Minimum="0" Maximum="255"  Ticks="1" HorizontalAlignment="Left" Margin="68,124,0,0" VerticalAlignment="Top" Width="207"/>
    <Rectangle  HorizontalAlignment="Left" Height="90" Margin="68,160,0,0" Stroke="Black" VerticalAlignment="Top" Width="142">
        <Rectangle.Fill>
            <MultiBinding Converter="{StaticResource rgbCvt}">
                <Binding ElementName="slider_r" Path="Value"></Binding>
                <Binding ElementName="slider_g" Path="Value"></Binding>
                <Binding ElementName="slider_b" Path="Value"></Binding>
            </MultiBinding>
        </Rectangle.Fill>
    </Rectangle>

</Grid>

運行結果：

 更多參考：WPF Binding值轉換器ValueConverter使用簡介(一)