[英]how to set ColorPickerSlider element, ColorChannel Property in UWP?
我不知道,如何在 c# 中动态设置 ColorPickerSlider 的 colorChannel 属性。我需要像我添加的图片一样的 ColorPickerSlider,基于从 colorSpectrum 中选择的颜色。我不想使用 ColorPicker 元素。我需要这个作为单独的组件。
ColorSpectrum ColorSpectrum = new ColorSpectrum();
ColorPickerSlider ColorPickerSlider = new ColorPickerSlider();
ColorPickerSlider.ColorChannel=???????;
在风格方面,我们可以考虑一种组合方式:
Rectangle
+ ColorPickerSlider
使用Rectangle
作为背景,使用ColorPickerSlider
作为实际的 function slider。
<Grid Width="300" Height="40">
<Rectangle Height="15" VerticalAlignment="Center" Width="300" x:Name="BackgroundRect"/>
<ColorPickerSlider ColorChannel="Hue" Style="{StaticResource ColorPickerSliderStyle}"/>
</Grid>
修改矩形背景颜色
var stopCollection = new GradientStopCollection();
stopCollection.Add(new GradientStop() { Color = Colors.Black, Offset=0 });
stopCollection.Add(new GradientStop() { Color = Colors.Purple, Offset=1 });
var brush = new LinearGradientBrush(stopCollection,0);
BackgroundRect.Fill = brush;
颜色选择器滑块样式
<Style x:Key="ColorPickerSliderStyle" TargetType="ColorPickerSlider">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Slider">
<Grid>
<Grid.Resources>
<Style x:Key="SliderThumbStyle" TargetType="Thumb">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Background" Value="{ThemeResource ColorPickerSliderThumbBackground}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="4" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="HorizontalThumb.Background" Value="{ThemeResource ColorPickerSliderThumbBackgroundPressed}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="HeaderContentPresenter.Foreground" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
<Setter Target="HorizontalThumb.Background" Value="{ThemeResource ColorPickerSliderThumbBackgroundDisabled}" />
<Setter Target="HorizontalTrackRect.Fill" Value="{ThemeResource ColorPickerSliderTrackFillDisabled}" />
<Setter Target="HorizontalDecreaseRect.Fill" Value="{ThemeResource ColorPickerSliderTrackFillDisabled}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="HorizontalThumb.Background" Value="{ThemeResource ColorPickerSliderThumbBackgroundPointerOver}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusEngagementStates">
<VisualState x:Name="FocusDisengaged" />
<VisualState x:Name="FocusEngagedHorizontal">
<VisualState.Setters>
<Setter Target="SliderContainer.(Control.IsTemplateFocusTarget)" Value="False" />
<Setter Target="HorizontalThumb.(Control.IsTemplateFocusTarget)" Value="True" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="FocusEngagedVertical">
<VisualState.Setters>
<Setter Target="SliderContainer.(Control.IsTemplateFocusTarget)" Value="False" />
<Setter Target="VerticalThumb.(Control.IsTemplateFocusTarget)" Value="True" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="HeaderContentPresenter" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="{ThemeResource SliderHeaderForeground}" FontWeight="{ThemeResource SliderHeaderThemeFontWeight}" Margin="{ThemeResource SliderHeaderThemeMargin}" TextWrapping="Wrap" Visibility="Collapsed" x:DeferLoadStrategy="Lazy" />
<Grid x:Name="SliderContainer" Background="Transparent" Control.IsTemplateFocusTarget="True" Grid.Row="1">
<Grid x:Name="HorizontalTemplate" MinHeight="44">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="18" />
<RowDefinition Height="Auto" />
<RowDefinition Height="18" />
</Grid.RowDefinitions>
<Rectangle x:Name="HorizontalTrackRect" Grid.ColumnSpan="3" Fill="Transparent" Height="{ThemeResource SliderTrackThemeHeight}" Grid.Row="1" Opacity="0" />
<Rectangle x:Name="HorizontalDecreaseRect" Fill="Transparent" Grid.Row="1" Opacity="0" />
<Thumb x:Name="HorizontalThumb" AutomationProperties.AccessibilityView="Raw" Grid.Column="1" DataContext="{TemplateBinding Value}" Height="24" Grid.Row="0" Grid.RowSpan="3" Style="{StaticResource SliderThumbStyle}" Width="8">
<ToolTipService.ToolTip>
<ToolTip x:Name="ToolTip" VerticalOffset="20" />
</ToolTipService.ToolTip>
</Thumb>
</Grid>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
更新
关于计算渐变色
我们有两个 colors:黑色和紫色:
黑色(RGB):0 0 0
紫色 (RGB):128 0 128
我们假设ColorPickerSlider
的Thumb在中间,取值为50(Slider最大值为100)
所以我们可以得到中间颜色为 (RGB) 64 0 64
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.