如何将三个滑块的值转换为颜色?

时间:2015-04-16 14:42:55

标签: c# wpf colors multibinding imultivalueconverter

我正在尝试创建一个自定义用户控件,允许用户在WPF中定义颜色。我之前在WinForms中做过这个,但在WPF中,它似乎并不那么直截了当。这也是我第一次使用多转换器。

控件有3个滑块 - 就像这样:

<Slider x:Name="sdrRed" Height="32" LargeChange="5" SmallChange="1" Maximum="255" Width="321" TickPlacement="Both"/>

唯一的区别是每个的名称 - sdrRed,sdrGreen和sdrBlue。

这是多值转换器:

public class ByteToColorConverter : IMultiValueConverter 
{
    public object Convert( object[ ] values, Type targetType, object parameter, System.Globalization.CultureInfo culture ) {
        return Color.FromArgb( (byte)values[0], (byte)values[1], (byte)values[2], (byte)values[3]);
    }

    public object[ ] ConvertBack( object value, Type[ ] targetTypes, object parameter, System.Globalization.CultureInfo culture ) {
        Color C = ( Color )value;
        return new object[ ] { C.A, C.R, C.G, C.B };
    }
}

这是我能够得到的 - 我无法找到如何继续的例子。

另外 - 如何将值传递给静止的多路变换器,这样我就可以定义一个只有一个滑块的颜色(比方说,我可以定义红色,蓝色或绿色的阴影)?

修改

为了清楚起见;控件本身将具有依赖属性:

private static readonly DependencyProperty
    _Color = DependencyProperty.Register( "Color", typeof( Color ), typeof( ColorDefiner ), new PropertyMetadata( Colors.Black ) );

public Color Color {
    get { return ( Color )this.GetValue( ColorDefiner._Color ); }
    set { this.SetValue( ColorDefiner._Color, value ); }
}

此控件将转换后的Color值传递给该绑定,以便可以将其他颜色绑定到该绑定。我希望能够解决问题。

2 个答案:

答案 0 :(得分:1)

首先,我建议对ByteToColorConverter进行这些更改:

public class DoubleToColorConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        // Values bound to sliders are going to be doubles.
        return Color.FromScRgb((float)(double)values[0], (float)(double)values[1], (float)(double)values[2], (float)(double)values[3]);
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
    {
        Color C = (Color)value;
        return new object[] { (double)C.ScA, (double)C.ScR, (double)C.ScG, (double)C.ScB };
    }
}

我已经从字节切换到双精度,因为您尝试绑定的滑块值只会返回/接受双精度数。 (float)(double)强制转换用于处理数组中的值的拆箱。

通过这个XAML,我能够得到一个基本的ARGB色彩混音器。注意我已经更改了滑块上的最小/最大值,现在我们不再处理字节了。

<StackPanel>
    <Slider x:Name="sdrAlpha" Height="32" LargeChange="0.5" SmallChange="0.1" Minimum="0" Maximum="1" Width="321" TickPlacement="Both"/>
    <Slider x:Name="sdrRed" Height="32" LargeChange="0.5" SmallChange="0.1" Minimum="0" Maximum="1" Width="321" TickPlacement="Both"/>
    <Slider x:Name="sdrGreen" Height="32" LargeChange="0.5" SmallChange="0.1" Minimum="0" Maximum="1" Width="321" TickPlacement="Both"/>
    <Slider x:Name="sdrBlue" Height="32" LargeChange="0.5" SmallChange="0.1" Minimum="0" Maximum="1" Width="321" TickPlacement="Both"/>
    <Border x:Name="colourBorder" Height="200" HorizontalAlignment="Stretch">
        <Border.Background>
            <SolidColorBrush>
                <SolidColorBrush.Color>
                    <MultiBinding Converter="{StaticResource colorConverter}">
                        <Binding ElementName="sdrAlpha" Path="Value" Mode="TwoWay" />
                        <Binding ElementName="sdrRed" Path="Value" Mode="TwoWay" />
                        <Binding ElementName="sdrGreen" Path="Value" Mode="TwoWay" />
                        <Binding ElementName="sdrBlue" Path="Value" Mode="TwoWay" />
                    </MultiBinding>
                </SolidColorBrush.Color>
            </SolidColorBrush>
        </Border.Background>
    </Border>
</StackPanel>

如果要将单个滑块绑定到转换器,可以更新转换器以检查values[]数组中的值的数量。您也许可以使用ConverterParameter传递您希望单个滑块影响的颜色......如下所示:

<MultiBinding Converter="{StaticResource colorConverter}" ConverterParameter="Red">
    <Binding ElementName="sdrRed" Path="Value" Mode="TwoWay" />
</MultiBinding>

答案 1 :(得分:0)

好的 - 我要感谢大家的帮助;我终于能够提出一个解决方案 - 如果有人对此感兴趣或偶然发现,它也是MVVM的一个很好的教训(也许;我不知道......)。

无论如何:

这是我实施的MVVM:

public class ColorViewModel : INotifyPropertyChanged {

    public event PropertyChangedEventHandler PropertyChanged;

    private Color _Color = Colors.Black;

    public double A {
        get { return this.Color.ScA; }
        set {
            this._Color.ScA = ( float )value;
            if ( this.PropertyChanged != null ) {
                this.PropertyChanged( this, new PropertyChangedEventArgs( "A" ) );
                this.PropertyChanged( this, new PropertyChangedEventArgs( "Color" ) );
            }
        }
    }
    public double R {
        get { return this.Color.ScR; }
        set {
            this._Color.ScR = ( float )value;
            if ( this.PropertyChanged != null ) {
                this.PropertyChanged( this, new PropertyChangedEventArgs( "R" ) );
                this.PropertyChanged( this, new PropertyChangedEventArgs( "Red" ) );
                this.PropertyChanged( this, new PropertyChangedEventArgs( "Color" ) );
            }
        }
    }
    public double G {
        get { return this.Color.ScG; }
        set {
            this._Color.ScG = ( float )value;
            if ( this.PropertyChanged != null ) {
                this.PropertyChanged( this, new PropertyChangedEventArgs( "G" ) );
                this.PropertyChanged( this, new PropertyChangedEventArgs( "Green" ) );
                this.PropertyChanged( this, new PropertyChangedEventArgs( "Color" ) );
            }
        }
    }
    public double B {
        get { return this._Color.ScB; }
        set {
            this._Color.ScB = ( float )value;
            if ( this.PropertyChanged != null ) {
                this.PropertyChanged( this, new PropertyChangedEventArgs( "B" ) );
                this.PropertyChanged( this, new PropertyChangedEventArgs( "Blue" ) );
                this.PropertyChanged( this, new PropertyChangedEventArgs( "Color" ) );
            }
        }
    }

    public Color Color {
        get { return this._Color; }
        set {
            this._Color = value;
            if ( this.PropertyChanged != null )
                this.AllChanged( );
        }
    }
    public Color Red { get { return Color.FromScRgb( 1.0F, ( float )this.R, 0.0F, 0.0F ); } }
    public Color Green { get { return Color.FromScRgb( 1.0F, 0.0F, ( float )this.G, 0.0F ); } }
    public Color Blue { get { return Color.FromScRgb( 1.0F, 0.0F, 0.0F, ( float )this.B ); } }

    private void AllChanged( ) {
        this.PropertyChanged( this, new PropertyChangedEventArgs( "A" ) );
        this.PropertyChanged( this, new PropertyChangedEventArgs( "R" ) );
        this.PropertyChanged( this, new PropertyChangedEventArgs( "G" ) );
        this.PropertyChanged( this, new PropertyChangedEventArgs( "B" ) );
        this.PropertyChanged( this, new PropertyChangedEventArgs( "Red" ) );
        this.PropertyChanged( this, new PropertyChangedEventArgs( "Green" ) );
        this.PropertyChanged( this, new PropertyChangedEventArgs( "Blue" ) );
        this.PropertyChanged( this, new PropertyChangedEventArgs( "Color" ) );
    }
}

这是控制类:

public partial class ColorDefiner : UserControl {

    public static readonly DependencyProperty
        _Color = DependencyProperty.Register( "Color", typeof( Color ), typeof( ColorDefiner ) );

    public Color Color {
        get { return ( Color )this.GetValue( ColorDefiner._Color ); }
        set { this.SetValue( ColorDefiner._Color, value ); }
    }

    private ColorViewModel CVM { get { return this.DataContext as ColorViewModel; } }

    public ColorDefiner( ) {
        InitializeComponent( );
        Binding B = new Binding( "Color" ) { Source = this.DataContext };
        this.SetBinding( ColorDefiner._Color, B );
    }
}

这是用户控件的XAML(是的,我是用UserControl做的;这需要一个数据上下文,我真的不想在自定义控件中大惊小怪 - 这实际上只是无论如何,我将成为我自己的个人控制权):

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:Components="clr-namespace:WPFTools.Components"
    xmlns:Controls="clr-namespace:WPFTools.Controls"
    x:Class="WPFTools.Controls.ColorDefiner"
    mc:Ignorable="d"
    Width="100" Height="100" FontFamily="Arial" FontWeight="Bold">
    <UserControl.DataContext>
        <Controls:ColorViewModel/>
    </UserControl.DataContext>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="20"/>
            <RowDefinition Height="5"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Viewbox HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <Components:WPFGLabel Text="A" StrokeThickness="0.5" TextAlignment="Right" Stroke="#99000000">
                <Components:WPFGLabel.Fill>
                    <SolidColorBrush Color="{Binding Color}"/>
                </Components:WPFGLabel.Fill>
            </Components:WPFGLabel>
        </Viewbox>
        <Viewbox HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="1">
            <Components:WPFGLabel Text="R" StrokeThickness="0.5" TextAlignment="Right" Stroke="#99000000">
                <Components:WPFGLabel.Fill>
                    <SolidColorBrush Color="{Binding Red, Mode=OneWay}"/>
                </Components:WPFGLabel.Fill>
            </Components:WPFGLabel>
        </Viewbox>
        <Viewbox HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="2">
            <Components:WPFGLabel Text="G" StrokeThickness="0.5" TextAlignment="Right" Stroke="#99000000">
                <Components:WPFGLabel.Fill>
                    <SolidColorBrush Color="{Binding Green, Mode=OneWay}"/>
                </Components:WPFGLabel.Fill>
            </Components:WPFGLabel>
        </Viewbox>
        <Viewbox HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="3">
            <Components:WPFGLabel Text="B" StrokeThickness="0.5" TextAlignment="Right" Stroke="#99000000" RenderTransformOrigin="-7.272,0.575">
                <Components:WPFGLabel.Fill>
                    <SolidColorBrush Color="{Binding Blue, Mode=OneWay}"/>
                </Components:WPFGLabel.Fill>
            </Components:WPFGLabel>
        </Viewbox>
        <Viewbox HorizontalAlignment="Stretch" Grid.Row="2" VerticalAlignment="Stretch">
            <Slider Orientation="Vertical" TickPlacement="Both" LargeChange="0.1" Maximum="1" SmallChange="0.01" TickFrequency="0.02" Height="90" TabIndex="0" Value="{Binding A, Mode=TwoWay}"/>
        </Viewbox>
        <Viewbox HorizontalAlignment="Stretch" Grid.Row="2" Grid.Column="1"  VerticalAlignment="Stretch">
            <Slider Orientation="Vertical" TickPlacement="Both" LargeChange="0.1" Maximum="1" SmallChange="0.01" TickFrequency="0.02" Height="90" TabIndex="1" Value="{Binding R, Mode=TwoWay}"/>
        </Viewbox>
        <Viewbox HorizontalAlignment="Stretch" Grid.Row="2" Grid.Column="2"  VerticalAlignment="Stretch">
            <Slider Orientation="Vertical" TickPlacement="Both" LargeChange="0.1" Maximum="1" SmallChange="0.01" TickFrequency="0.02" Height="90" TabIndex="2" Value="{Binding G, Mode=TwoWay}"/>
        </Viewbox>
        <Viewbox HorizontalAlignment="Stretch" Grid.Row="2" Grid.Column="3"  VerticalAlignment="Stretch">
            <Slider Orientation="Vertical" TickPlacement="Both" LargeChange="0.1" Maximum="1" SmallChange="0.01" TickFrequency="0.02" Height="90" Value="{Binding B, Mode=TwoWay}"/>
        </Viewbox>
    </Grid>
</UserControl>

我将标签的画笔颜色绑定到视图模型中各自的颜色(A得到了全部内容)。 I Two-Way将每个滑块的值绑定到视图模型中的相应值,并在代码中将Dependency属性绑定到视图模型Color属性。我对此进行了测试,但它确实有效。

再次感谢大家的帮助。