动态调色板

今天抽空做了一个简单的动态的调色板，当做对MVVM的复习吧

效果如下：

功能比较简单，通过调节滑块来调节A,R,G,B的值来改变窗口的透明度和颜色,颜色的绑定上，还没找到更好的方案来改变笔刷的值

主要代码如下：

<Window.Resources>
        <Style TargetType="Slider">
            <Setter Property="IsSnapToTickEnabled" Value="True"/>
            <Setter Property="TickFrequency" Value="1"/>
            <Setter Property="Minimum" Value="0"/>
            <Setter Property="Maximum" Value="255"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Margin" Value="10,0"/>
        </Style>
        <Style TargetType="TextBlock">
            <Setter Property="VerticalAlignment" Value="Center"/>
        </Style>
    </Window.Resources>

<Border Name="border1" BorderBrush="{Binding ColorBrush}" BorderThickness="4" CornerRadius="10" Padding="8" PreviewMouseLeftButtonDown="border1_PreviewMouseLeftButtonDown">
        <Border BorderBrush="{Binding ColorBrush}" BorderThickness="6" CornerRadius="8">
            <Grid Background="{Binding ColorBrush}" >
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"></RowDefinition>
                    <RowDefinition Height="*"></RowDefinition>
                    <RowDefinition Height="*"></RowDefinition>
                    <RowDefinition Height="*"></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="40"></ColumnDefinition>
                    <ColumnDefinition Width="200"></ColumnDefinition>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <TextBlock Text="Alpha" HorizontalAlignment="Right"/>
                <TextBlock Text="R" Grid.Row="1" HorizontalAlignment="Right" />
                <TextBlock Text="G" Grid.Row="2" HorizontalAlignment="Right"/>
                <TextBlock Text="B" Grid.Row="3" HorizontalAlignment="Right" />
                <Slider  Grid.Column="1"  Value="{Binding A}" Name="slider1" />
                <Slider Grid.Row="1" Grid.Column="1" Value="{Binding R}" Name="slider2"/>
                <Slider Grid.Row="2" Grid.Column="1" Value="{Binding G}" Name="slider3"/>
                <Slider Grid.Row="3" Grid.Column="1" Value="{Binding B}" Name="slider4"/>
                <TextBlock Text="{Binding ElementName=slider1,Path=Value,UpdateSourceTrigger=PropertyChanged}" Grid.Column="2" />
                <TextBlock Text="{Binding ElementName=slider2,Path=Value,UpdateSourceTrigger=PropertyChanged}" Grid.Row="1" Grid.Column="2" />
                <TextBlock Text="{Binding ElementName=slider3,Path=Value,UpdateSourceTrigger=PropertyChanged}" Grid.Row="2" Grid.Column="2" />
                <TextBlock Text="{Binding ElementName=slider4,Path=Value,UpdateSourceTrigger=PropertyChanged}" Grid.Row="3" Grid.Column="2" />
            </Grid>
        </Border>
    </Border>

下载 动态调色板

动态调色板,布布扣,bubuko.com