none
怎样让一个控件和它的子控件整体产生明暗渐变效果? RRS feed

  • 问题

  • 比如说一个  panel  里面有几个button
    希望panel左边的亮度是 100%   到最右边的亮度是  50%

    似乎可以用渐变刷子 但是我不知道怎么用在控件表面  还不影响正常使用

    还请大家指教
    紫柔版主的头像真叫萌得一个不行啊。。。。
    答案800 撒花
    2009年6月18日 8:04

答案

  • <UserControl
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" x:Class="Social.BackGradually.MainPage" 
        Width="400" Height="300" mc:Ignorable="d">
    	<UserControl.Resources>
    		<Style x:Key="ButtonStyleTransBack" TargetType="Button">
    			<Setter Property="Background" Value="#7F1F3B53"/>
    			<Setter Property="Foreground" Value="#FF000000"/>
    			<Setter Property="Padding" Value="3"/>
    			<Setter Property="BorderThickness" Value="1"/>
    			<Setter Property="BorderBrush">
    				<Setter.Value>
    					<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    						<GradientStop Color="#7FA3AEB9" Offset="0"/>
    						<GradientStop Color="#7F8399A9" Offset="0.375"/>
    						<GradientStop Color="#7F718597" Offset="0.375"/>
    						<GradientStop Color="#7F617584" Offset="1"/>
    					</LinearGradientBrush>
    				</Setter.Value>
    			</Setter>
    			<Setter Property="Template">
    				<Setter.Value>
    					<ControlTemplate TargetType="Button">
    						<Grid>
    							<vsm:VisualStateManager.VisualStateGroups>
    								<vsm:VisualStateGroup x:Name="CommonStates">
    									<vsm:VisualState x:Name="Normal"/>
    									<vsm:VisualState x:Name="MouseOver">
    										<Storyboard>
    											<DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity">
    												<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
    											</DoubleAnimationUsingKeyFrames>
    											<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
    												<SplineColorKeyFrame KeyTime="0" Value="#72FFFFFF"/>
    											</ColorAnimationUsingKeyFrames>
    											<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
    												<SplineColorKeyFrame KeyTime="0" Value="#4CFFFFFF"/>
    											</ColorAnimationUsingKeyFrames>
    											<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
    												<SplineColorKeyFrame KeyTime="0" Value="#0FFFFFFF"/>
    											</ColorAnimationUsingKeyFrames>
    										</Storyboard>
    									</vsm:VisualState>
    									<vsm:VisualState x:Name="Pressed">
    										<Storyboard>
    											<ColorAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
    												<SplineColorKeyFrame KeyTime="0" Value="#7F6DBDD1"/>
    											</ColorAnimationUsingKeyFrames>
    											<DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity">
    												<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
    											</DoubleAnimationUsingKeyFrames>
    											<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
    												<SplineColorKeyFrame KeyTime="0" Value="#58FFFFFF"/>
    											</ColorAnimationUsingKeyFrames>
    											<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
    												<SplineColorKeyFrame KeyTime="0" Value="#C6FFFFFF"/>
    											</ColorAnimationUsingKeyFrames>
    											<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
    												<SplineColorKeyFrame KeyTime="0" Value="#1CFFFFFF"/>
    											</ColorAnimationUsingKeyFrames>
    											<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
    												<SplineColorKeyFrame KeyTime="0" Value="#00FFFFFF"/>
    											</ColorAnimationUsingKeyFrames>
    										</Storyboard>
    									</vsm:VisualState>
    									<vsm:VisualState x:Name="Disabled">
    										<Storyboard>
    											<DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity">
    												<SplineDoubleKeyFrame KeyTime="0" Value=".55"/>
    											</DoubleAnimationUsingKeyFrames>
    										</Storyboard>
    									</vsm:VisualState>
    								</vsm:VisualStateGroup>
    								<vsm:VisualStateGroup x:Name="FocusStates">
    									<vsm:VisualState x:Name="Focused">
    										<Storyboard>
    											<DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity">
    												<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
    											</DoubleAnimationUsingKeyFrames>
    										</Storyboard>
    									</vsm:VisualState>
    									<vsm:VisualState x:Name="Unfocused"/>
    								</vsm:VisualStateGroup>
    							</vsm:VisualStateManager.VisualStateGroups>
    							<Border x:Name="Background" Background="#00FFFFFF" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3">
    								<Grid Margin="1" Background="#00FFFFFF">
    									<Border x:Name="BackgroundAnimation" Opacity="0" Background="#00448DCA"/>
    									<Rectangle x:Name="BackgroundGradient">
    										<Rectangle.Fill>
    											<LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
    												<GradientStop Color="#7FFFFFFF" Offset="0"/>
    												<GradientStop Color="#79FFFFFF" Offset="0.375"/>
    												<GradientStop Color="#65FFFFFF" Offset="0.625"/>
    												<GradientStop Color="#56FFFFFF" Offset="1"/>
    											</LinearGradientBrush>
    										</Rectangle.Fill>
    									</Rectangle>
    								</Grid>
    							</Border>
    							<ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
    							<Rectangle x:Name="DisabledVisualElement" Fill="#7FFFFFFF" RadiusX="3" RadiusY="3" IsHitTestVisible="false" Opacity="0"/>
    							<Rectangle x:Name="FocusVisualElement" Stroke="#7F6DBDD1" StrokeThickness="1" RadiusX="2" RadiusY="2" Margin="1" IsHitTestVisible="false" Opacity="0"/>
    						</Grid>
    					</ControlTemplate>
    				</Setter.Value>
    			</Setter>
    		</Style>
    	</UserControl.Resources>
        <Grid x:Name="LayoutRoot" Background="White" Height="Auto" Width="Auto">
        	<StackPanel Orientation="Horizontal" Width="150" Height="50">
        		<StackPanel.Clip>
        			<GeometryGroup>					
        				<RectangleGeometry Rect="5,5,40,40" RadiusX="3" RadiusY="3"/>
        				<RectangleGeometry Rect="55,5,40,40" RadiusX="3" RadiusY="3"/>
        				<RectangleGeometry Rect="105,5,40,40" RadiusX="3" RadiusY="3"/>
        			</GeometryGroup>
        		</StackPanel.Clip>
        		<StackPanel.Background>
        			<LinearGradientBrush EndPoint="0.724,0.901" StartPoint="0.276,0.099">
        				<GradientStop Color="#FFFF0000"/>
        				<GradientStop Color="#FFFFFFFF" Offset="0.929"/>
        			</LinearGradientBrush>				
        		</StackPanel.Background>
        		<Button Content="按钮1" Width="40" Height="40" Margin="5" Style="{StaticResource ButtonStyleTransBack}"/>
        		<Button Content="按钮2" Width="40" Height="40" Margin="5" Style="{StaticResource ButtonStyleTransBack}"/>
        		<Button Content="按钮3" Width="40" Height="40" Margin="5" Style="{StaticResource ButtonStyleTransBack}"/>
        	</StackPanel>
        </Grid>
    </UserControl>
    
    看看这是不是想要的效果,我的主要思路是,修改Button样式,使其变为透明按钮,背景色进行渐变跟遮罩,当然要达到这个效果方法不唯一啦

    要做更复杂的效果可能就要再写代码,或者韦同学你看到哪个人也用你说的这个渐变了,咱们可以一起分析分析他的程序:)
    2009年6月19日 0:39
    版主

全部回复

  • 目前我的想法是  把目标控件放在一个 黑色背景的panel 里面  然后对他做  透明 mask

    感觉这样似乎很差劲涅


    紫柔版主的头像真叫萌得一个不行啊。。。。
    答案800 撒花
    2009年6月18日 8:27
  • <UserControl
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" x:Class="Social.BackGradually.MainPage" 
        Width="400" Height="300" mc:Ignorable="d">
    	<UserControl.Resources>
    		<Style x:Key="ButtonStyleTransBack" TargetType="Button">
    			<Setter Property="Background" Value="#7F1F3B53"/>
    			<Setter Property="Foreground" Value="#FF000000"/>
    			<Setter Property="Padding" Value="3"/>
    			<Setter Property="BorderThickness" Value="1"/>
    			<Setter Property="BorderBrush">
    				<Setter.Value>
    					<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    						<GradientStop Color="#7FA3AEB9" Offset="0"/>
    						<GradientStop Color="#7F8399A9" Offset="0.375"/>
    						<GradientStop Color="#7F718597" Offset="0.375"/>
    						<GradientStop Color="#7F617584" Offset="1"/>
    					</LinearGradientBrush>
    				</Setter.Value>
    			</Setter>
    			<Setter Property="Template">
    				<Setter.Value>
    					<ControlTemplate TargetType="Button">
    						<Grid>
    							<vsm:VisualStateManager.VisualStateGroups>
    								<vsm:VisualStateGroup x:Name="CommonStates">
    									<vsm:VisualState x:Name="Normal"/>
    									<vsm:VisualState x:Name="MouseOver">
    										<Storyboard>
    											<DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity">
    												<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
    											</DoubleAnimationUsingKeyFrames>
    											<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
    												<SplineColorKeyFrame KeyTime="0" Value="#72FFFFFF"/>
    											</ColorAnimationUsingKeyFrames>
    											<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
    												<SplineColorKeyFrame KeyTime="0" Value="#4CFFFFFF"/>
    											</ColorAnimationUsingKeyFrames>
    											<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
    												<SplineColorKeyFrame KeyTime="0" Value="#0FFFFFFF"/>
    											</ColorAnimationUsingKeyFrames>
    										</Storyboard>
    									</vsm:VisualState>
    									<vsm:VisualState x:Name="Pressed">
    										<Storyboard>
    											<ColorAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
    												<SplineColorKeyFrame KeyTime="0" Value="#7F6DBDD1"/>
    											</ColorAnimationUsingKeyFrames>
    											<DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity">
    												<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
    											</DoubleAnimationUsingKeyFrames>
    											<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
    												<SplineColorKeyFrame KeyTime="0" Value="#58FFFFFF"/>
    											</ColorAnimationUsingKeyFrames>
    											<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
    												<SplineColorKeyFrame KeyTime="0" Value="#C6FFFFFF"/>
    											</ColorAnimationUsingKeyFrames>
    											<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
    												<SplineColorKeyFrame KeyTime="0" Value="#1CFFFFFF"/>
    											</ColorAnimationUsingKeyFrames>
    											<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
    												<SplineColorKeyFrame KeyTime="0" Value="#00FFFFFF"/>
    											</ColorAnimationUsingKeyFrames>
    										</Storyboard>
    									</vsm:VisualState>
    									<vsm:VisualState x:Name="Disabled">
    										<Storyboard>
    											<DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity">
    												<SplineDoubleKeyFrame KeyTime="0" Value=".55"/>
    											</DoubleAnimationUsingKeyFrames>
    										</Storyboard>
    									</vsm:VisualState>
    								</vsm:VisualStateGroup>
    								<vsm:VisualStateGroup x:Name="FocusStates">
    									<vsm:VisualState x:Name="Focused">
    										<Storyboard>
    											<DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity">
    												<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
    											</DoubleAnimationUsingKeyFrames>
    										</Storyboard>
    									</vsm:VisualState>
    									<vsm:VisualState x:Name="Unfocused"/>
    								</vsm:VisualStateGroup>
    							</vsm:VisualStateManager.VisualStateGroups>
    							<Border x:Name="Background" Background="#00FFFFFF" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3">
    								<Grid Margin="1" Background="#00FFFFFF">
    									<Border x:Name="BackgroundAnimation" Opacity="0" Background="#00448DCA"/>
    									<Rectangle x:Name="BackgroundGradient">
    										<Rectangle.Fill>
    											<LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
    												<GradientStop Color="#7FFFFFFF" Offset="0"/>
    												<GradientStop Color="#79FFFFFF" Offset="0.375"/>
    												<GradientStop Color="#65FFFFFF" Offset="0.625"/>
    												<GradientStop Color="#56FFFFFF" Offset="1"/>
    											</LinearGradientBrush>
    										</Rectangle.Fill>
    									</Rectangle>
    								</Grid>
    							</Border>
    							<ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
    							<Rectangle x:Name="DisabledVisualElement" Fill="#7FFFFFFF" RadiusX="3" RadiusY="3" IsHitTestVisible="false" Opacity="0"/>
    							<Rectangle x:Name="FocusVisualElement" Stroke="#7F6DBDD1" StrokeThickness="1" RadiusX="2" RadiusY="2" Margin="1" IsHitTestVisible="false" Opacity="0"/>
    						</Grid>
    					</ControlTemplate>
    				</Setter.Value>
    			</Setter>
    		</Style>
    	</UserControl.Resources>
        <Grid x:Name="LayoutRoot" Background="White" Height="Auto" Width="Auto">
        	<StackPanel Orientation="Horizontal" Width="150" Height="50">
        		<StackPanel.Clip>
        			<GeometryGroup>					
        				<RectangleGeometry Rect="5,5,40,40" RadiusX="3" RadiusY="3"/>
        				<RectangleGeometry Rect="55,5,40,40" RadiusX="3" RadiusY="3"/>
        				<RectangleGeometry Rect="105,5,40,40" RadiusX="3" RadiusY="3"/>
        			</GeometryGroup>
        		</StackPanel.Clip>
        		<StackPanel.Background>
        			<LinearGradientBrush EndPoint="0.724,0.901" StartPoint="0.276,0.099">
        				<GradientStop Color="#FFFF0000"/>
        				<GradientStop Color="#FFFFFFFF" Offset="0.929"/>
        			</LinearGradientBrush>				
        		</StackPanel.Background>
        		<Button Content="按钮1" Width="40" Height="40" Margin="5" Style="{StaticResource ButtonStyleTransBack}"/>
        		<Button Content="按钮2" Width="40" Height="40" Margin="5" Style="{StaticResource ButtonStyleTransBack}"/>
        		<Button Content="按钮3" Width="40" Height="40" Margin="5" Style="{StaticResource ButtonStyleTransBack}"/>
        	</StackPanel>
        </Grid>
    </UserControl>
    
    看看这是不是想要的效果,我的主要思路是,修改Button样式,使其变为透明按钮,背景色进行渐变跟遮罩,当然要达到这个效果方法不唯一啦

    要做更复杂的效果可能就要再写代码,或者韦同学你看到哪个人也用你说的这个渐变了,咱们可以一起分析分析他的程序:)
    2009年6月19日 0:39
    版主
  • 多谢提供思路  :")


    紫柔版主的头像真叫萌得一个不行啊。。。。
    答案800 撒花
    2009年6月19日 2:14
  •    控件中的文字和图片仍然不会跟着改变 :(    还是有点郁闷涅


    紫柔版主的头像真叫萌得一个不行啊。。。。
    答案800 撒花
    2009年6月19日 2:48