none
sliverlight 按钮能设置图片样式吗 RRS feed

答案

  • 		<Style x:Key="ButtonStyle" TargetType="Button">
    			<Setter Property="Background" Value="#FF1F3B53"/>
    			<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="#FFA3AEB9" Offset="0"/>
    						<GradientStop Color="#FF8399A9" Offset="0.375"/>
    						<GradientStop Color="#FF718597" Offset="0.375"/>
    						<GradientStop Color="#FF617584" 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="#F2FFFFFF"/>
    											</ColorAnimationUsingKeyFrames>
    											<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
    												<SplineColorKeyFrame KeyTime="0" Value="#CCFFFFFF"/>
    											</ColorAnimationUsingKeyFrames>
    											<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
    												<SplineColorKeyFrame KeyTime="0" Value="#7FFFFFFF"/>
    											</ColorAnimationUsingKeyFrames>
    										</Storyboard>
    									</vsm:VisualState>
    									<vsm:VisualState x:Name="Pressed">
    										<Storyboard>
    											<ColorAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
    												<SplineColorKeyFrame KeyTime="0" Value="#FF6DBDD1"/>
    											</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="#D8FFFFFF"/>
    											</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="#8CFFFFFF"/>
    											</ColorAnimationUsingKeyFrames>
    											<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
    												<SplineColorKeyFrame KeyTime="0" Value="#3FFFFFFF"/>
    											</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="White" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3">
    								<Grid Margin="1" Background="{TemplateBinding Background}">
    									<Border x:Name="BackgroundAnimation" Opacity="0" Background="#FF448DCA"/>
    									<Rectangle x:Name="BackgroundGradient">
    										<Rectangle.Fill>
    											<LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
    												<GradientStop Color="#FFFFFFFF" Offset="0"/>
    												<GradientStop Color="#F9FFFFFF" Offset="0.375"/>
    												<GradientStop Color="#E5FFFFFF" Offset="0.625"/>
    												<GradientStop Color="#C6FFFFFF" 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="#FFFFFFFF" RadiusX="3" RadiusY="3" IsHitTestVisible="false" Opacity="0"/>
    							<Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1" StrokeThickness="1" RadiusX="2" RadiusY="2" Margin="1" IsHitTestVisible="false" Opacity="0"/>
    						</Grid>
    					</ControlTemplate>
    				</Setter.Value>
    			</Setter>
    		</Style>
    你可以先定义好MouseOver的样式,透明设置为0%,然后在MouseOver事件中加个StoryBoard把透明变为100%就可以了
    方法很多
    2009年5月26日 8:48
    版主

全部回复

  • 可以,编辑Button的Style Template
    2009年5月26日 5:59
    版主
  • 版主,能给个小例了吗,先谢谢了
    2009年5月26日 7:22
  • 		<Style x:Key="ButtonStyle" TargetType="Button">
    			<Setter Property="Background" Value="#FF1F3B53"/>
    			<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="#FFA3AEB9" Offset="0"/>
    						<GradientStop Color="#FF8399A9" Offset="0.375"/>
    						<GradientStop Color="#FF718597" Offset="0.375"/>
    						<GradientStop Color="#FF617584" 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="#F2FFFFFF"/>
    											</ColorAnimationUsingKeyFrames>
    											<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
    												<SplineColorKeyFrame KeyTime="0" Value="#CCFFFFFF"/>
    											</ColorAnimationUsingKeyFrames>
    											<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
    												<SplineColorKeyFrame KeyTime="0" Value="#7FFFFFFF"/>
    											</ColorAnimationUsingKeyFrames>
    										</Storyboard>
    									</vsm:VisualState>
    									<vsm:VisualState x:Name="Pressed">
    										<Storyboard>
    											<ColorAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
    												<SplineColorKeyFrame KeyTime="0" Value="#FF6DBDD1"/>
    											</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="#D8FFFFFF"/>
    											</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="#8CFFFFFF"/>
    											</ColorAnimationUsingKeyFrames>
    											<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
    												<SplineColorKeyFrame KeyTime="0" Value="#3FFFFFFF"/>
    											</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="White" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3">
    								<Grid Margin="1" Background="{TemplateBinding Background}">
    									<Border x:Name="BackgroundAnimation" Opacity="0" Background="#FF448DCA"/>
    									<Rectangle x:Name="BackgroundGradient">
    										<Rectangle.Fill>
    											<LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
    												<GradientStop Color="#FFFFFFFF" Offset="0"/>
    												<GradientStop Color="#F9FFFFFF" Offset="0.375"/>
    												<GradientStop Color="#E5FFFFFF" Offset="0.625"/>
    												<GradientStop Color="#C6FFFFFF" 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="#FFFFFFFF" RadiusX="3" RadiusY="3" IsHitTestVisible="false" Opacity="0"/>
    							<Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1" StrokeThickness="1" RadiusX="2" RadiusY="2" Margin="1" IsHitTestVisible="false" Opacity="0"/>
    						</Grid>
    					</ControlTemplate>
    				</Setter.Value>
    			</Setter>
    		</Style>
    你可以先定义好MouseOver的样式,透明设置为0%,然后在MouseOver事件中加个StoryBoard把透明变为100%就可以了
    方法很多
    2009年5月26日 8:48
    版主
  • <Button x:Name="testButton" Margin="137,185,226,182" Padding="0" MouseEnter="testButton_MouseEnter" MouseLeave="testButton_MouseLeave" MouseLeftButtonUp="testButton_MouseLeftButtonUp">
    		<Button.Content>
    		<Image Name="backGroundImage" Source="http://silverlight.net/Themes/silverlight/images/logo.jpg" Width="277" Height="111" Stretch="Fill"></Image>
    		</Button.Content>
    		</Button>
    设置testButton的事件,然后在代码中直接操作backGroundImage设置其Source属性即可!
    努力着就不会放弃!http://hi.baidu.com/1987raymond
    2009年5月26日 9:15
    版主