我正在尝试创建一个自定义用户控件,允许用户在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值传递给该绑定,以便可以将其他颜色绑定到该绑定。我希望能够解决问题。
答案 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属性。我对此进行了测试,但它确实有效。
再次感谢大家的帮助。