silverlight 之 – Blend 之 Style for Button （三）

通过把定义的样式加入资源字典(Style.xaml)的方法大大方便的我们后续的工作，我们再次使用时只有选择“样式库”标签就可以快速设置，同时有利于设计的统一性；

 

但是当我们尝试用我们定义的样式来填充一个按钮时，发现他还是白色的，几乎没什么变化：

 

（分别是：Border，Grid，Canvas，StackPanel，Button）

那么下面我们就来研究下 button的样式制作？

开始之前我们准备足够用的“库样式”；

在这里纠正一下我发现在新的方法来定义资源字典（我很菜的，也才研究，请原谅）

在填充后面会有一个小白色的框，点击以后里面有转换为新资源这一项

  

 

同时我们准备几个将要用到的“单色填充”，做完以后 ColorCard.xaml 页面是这样：

ColorCard.xaml  代码：

	<Grid x:Name="LayoutRoot" Background="#FF6A6A6A">

		<Rectangle Fill="{StaticResource FA}" Stroke="Black" Height="50" HorizontalAlignment="Left" Margin="33,37,0,0" VerticalAlignment="Top" Width="151"/>

		<Rectangle Stroke="Black" Height="50" HorizontalAlignment="Left" Margin="33,113,0,0" VerticalAlignment="Top" Width="151" Fill="{StaticResource FB}"/>

		<Rectangle Stroke="Black" Height="50" HorizontalAlignment="Left" Margin="33,181,0,0" VerticalAlignment="Top" Width="151" Fill="{StaticResource FC}"/>

		<Rectangle Stroke="Black" Height="50" HorizontalAlignment="Left" Margin="33,0,0,177" VerticalAlignment="Bottom" Width="151" Fill="{StaticResource FD}"/>

		<Rectangle Stroke="Black" Height="50" HorizontalAlignment="Left" Margin="33,0,0,103" VerticalAlignment="Bottom" Width="151" Fill="{StaticResource FE}"/>

		<Rectangle Stroke="Black" Height="50" HorizontalAlignment="Left" Margin="33,0,0,32" VerticalAlignment="Bottom" Width="151" Fill="{StaticResource FF}"/>

		<Rectangle Fill="{StaticResource CA}" Stroke="Black" Height="50" Margin="217,37,272,0" VerticalAlignment="Top"/>

		<Rectangle Fill="{StaticResource CB}" Stroke="Black" Height="50" Margin="217,113,272,0" VerticalAlignment="Top"/>

		<Rectangle Fill="{StaticResource CC}" Stroke="Black" Height="50" Margin="217,181,272,0" VerticalAlignment="Top"/>

		<Rectangle Fill="{StaticResource CD}" Stroke="Black" Height="50" Margin="217,0,272,177" VerticalAlignment="Bottom"/>

		<Rectangle Fill="{StaticResource CE}" Stroke="Black" Height="50" Margin="217,0,272,103" VerticalAlignment="Bottom"/>

		<Rectangle Fill="{StaticResource CF}" Stroke="Black" Height="50" Margin="217,0,272,32" VerticalAlignment="Bottom"/>

		<TextBlock Height="17" HorizontalAlignment="Left" Margin="73,54,0,0" VerticalAlignment="Top" Width="69" Foreground="White" TextWrapping="Wrap"><Run Text="F"/><Run Text="A"/></TextBlock>

		<TextBlock Height="17" HorizontalAlignment="Left" Margin="73,133,0,0" VerticalAlignment="Top" Width="69" Foreground="White" TextWrapping="Wrap" Text="FB"/>

		<TextBlock Height="17" HorizontalAlignment="Left" Margin="73,196,0,0" VerticalAlignment="Top" Width="69" Foreground="White" TextWrapping="Wrap" Text="FC"/>

		<TextBlock Height="17" HorizontalAlignment="Left" Margin="73,0,0,195" VerticalAlignment="Bottom" Width="69" Foreground="White" TextWrapping="Wrap" Text="FD"/>

		<TextBlock Height="17" HorizontalAlignment="Left" Margin="73,0,0,119" VerticalAlignment="Bottom" Width="69" Foreground="White" TextWrapping="Wrap" Text="FE"/>

		<TextBlock Height="17" HorizontalAlignment="Left" Margin="73,0,0,51" VerticalAlignment="Bottom" Width="69" Foreground="White" TextWrapping="Wrap" Text="FF"/>

		<TextBlock Height="17" Margin="268,54,303,0" VerticalAlignment="Top" Foreground="White" Text="CA" TextWrapping="Wrap"/>

		<TextBlock Height="17" Margin="268,133,303,0" VerticalAlignment="Top" Foreground="White" Text="CB" TextWrapping="Wrap"/>

		<TextBlock Height="17" Margin="268,196,303,0" VerticalAlignment="Top" Foreground="White" Text="CC" TextWrapping="Wrap"/>

		<TextBlock Height="17" Margin="268,0,303,195" VerticalAlignment="Bottom" Foreground="White" Text="CD" TextWrapping="Wrap"/>

		<TextBlock Height="17" Margin="268,0,303,119" VerticalAlignment="Bottom" Foreground="White" Text="CE" TextWrapping="Wrap"/>

		<TextBlock Height="17" Margin="268,0,303,51" VerticalAlignment="Bottom" Foreground="White" Text="CF" TextWrapping="Wrap"/>

	</Grid>	

 

Style.xaml  代码：

<LinearGradientBrush x:Key="FA" EndPoint="0.5,1" StartPoint="0.5,0">

					<GradientStop Color="#FF606060" Offset="0"/>

					<GradientStop Color="Black" Offset="1"/>

					<GradientStop Color="#FE333333" Offset="0.487"/>

					<GradientStop Color="#FE161515" Offset="0.574"/>

	</LinearGradientBrush>

	<LinearGradientBrush x:Key="FB" EndPoint="0.5,1" StartPoint="0.5,0">

		<GradientStop Color="#FF6A6A6A"/>

		<GradientStop Color="#FF1A1A1A" Offset="1"/>

		<GradientStop Color="#FF504F4F" Offset="0.481"/>

		<GradientStop Color="#FF333232" Offset="0.553"/>

	</LinearGradientBrush>

	<LinearGradientBrush x:Key="FC" EndPoint="0.5,1" StartPoint="0.5,0">

		<GradientStop Color="#FFD0C3C3" Offset="0.004"/>

		<GradientStop Color="#FF393939" Offset="1"/>

		<GradientStop Color="#FF6A6A6A" Offset="0.523"/>

		<GradientStop Color="#FFA39D9D" Offset="0.469"/>

	</LinearGradientBrush>

	<LinearGradientBrush x:Key="FD" EndPoint="0.5,1" StartPoint="0.5,0">

		<GradientStop Color="#FFE6E6E6" Offset="0"/>

		<GradientStop Color="#FF979393" Offset="1"/>

		<GradientStop Color="#FFA19898" Offset="0.542"/>

		<GradientStop Color="#FFC2C0C0" Offset="0.485"/>

	</LinearGradientBrush>

	<LinearGradientBrush x:Key="FE" EndPoint="0.5,1" StartPoint="0.5,0">

		<GradientStop Color="Black" Offset="0"/>

		<GradientStop Color="#FF5C5C5C" Offset="1"/>

		<GradientStop Color="#FF1A1A1A" Offset="0.42"/>

	</LinearGradientBrush>

	<LinearGradientBrush x:Key="FF" EndPoint="0.5,1" StartPoint="0.5,0">

		<GradientStop Color="#FF4484F7" Offset="0"/>

		<GradientStop Color="#FF012D7C" Offset="1"/>

		<GradientStop Color="#FF255FC8" Offset="0.489"/>

		<GradientStop Color="#FF0343B6" Offset="0.557"/>

	</LinearGradientBrush>

	<SolidColorBrush x:Key="CA" Color="Black"/>

	<SolidColorBrush x:Key="CB" Color="#FF2B2B2B"/>

	<SolidColorBrush x:Key="CC" Color="#FF686666"/>

	<SolidColorBrush x:Key="CD" Color="#FFBCBCBC"/>

	<SolidColorBrush x:Key="CE" Color="#FFED6D00"/>

	<SolidColorBrush x:Key="CF" Color="#FF034BCE"/>

 

这样我们的色卡就走完了，这个页面留着到时候参考用；

突然发现还没进入 关于 button 的主题，

》 1. 好新建一个 UserControlCard.xaml；

》 2. 从左边选择 button 工具创建一个button；

》 3. 选择这个button 从左上角依次点开到 》 编辑副本见下图：

确认后进入编辑页面：在左下角依次选择他们，然后在右边设置相应的画笔：（使用我们刚才定义的资源库）

 

从上面下来，大概分别是（我也不太确定）：

背景》

     》 鼠标移动到上面时的动画

     》 好像是类似于遮罩

文本》

不可用时》

获得焦点时》

 

最后效果看起来是这样：

 

如果不满意可以反复修改，（反复修改？ 设计师的痛！）：

》 选择按钮以后，

》 依次展开到编辑当前模板

 

 

恩，蓝色按钮就到这里，最重要是反复研究，而且最好编译一下在浏览器里面看实际鼠标动作的样子！

放代码了：

UserControlCard.xaml

	<Grid x:Name="LayoutRoot">

		<Rectangle Fill="{StaticResource FA}" Stroke="Black" Height="57" HorizontalAlignment="Left" VerticalAlignment="Top" Width="163"/>

		<Button Height="41" HorizontalAlignment="Left" Margin="23,7,0,0" Style="{StaticResource BlueButtonStyle}" VerticalAlignment="Top" Width="112" Content="by zhanxp" BorderThickness="2"/>

	</Grid>

Style.xaml 中自动生成的：

	<Style x:Key="BlueButtonStyle" TargetType="Button">

		<Setter Property="Background" Value="#FF1F3B53"/>

		<Setter Property="Foreground" Value="#FFFFFFFF"/>

		<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>

						<VisualStateManager.VisualStateGroups>

							<VisualStateGroup x:Name="CommonStates">

								<VisualState x:Name="Normal"/>

								<VisualState x:Name="MouseOver">

									<Storyboard>

										<DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity">

											<SplineDoubleKeyFrame KeyTime="0" Value="1"/>

										</DoubleAnimationUsingKeyFrames>

									</Storyboard>

								</VisualState>

								<VisualState x:Name="Pressed">

									<Storyboard>

										<DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity">

											<SplineDoubleKeyFrame KeyTime="0" Value="1"/>

										</DoubleAnimationUsingKeyFrames>

									</Storyboard>

								</VisualState>

								<VisualState x:Name="Disabled">

									<Storyboard>

										<DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity">

											<SplineDoubleKeyFrame KeyTime="0" Value=".55"/>

										</DoubleAnimationUsingKeyFrames>

									</Storyboard>

								</VisualState>

							</VisualStateGroup>

							<VisualStateGroup x:Name="FocusStates">

								<VisualState x:Name="Focused">

									<Storyboard>

										<DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity">

											<SplineDoubleKeyFrame KeyTime="0" Value="1"/>

										</DoubleAnimationUsingKeyFrames>

									</Storyboard>

								</VisualState>

								<VisualState x:Name="Unfocused"/>

							</VisualStateGroup>

						</VisualStateManager.VisualStateGroups>

						<Border x:Name="Background" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3" BorderBrush="{StaticResource FE}" Background="{StaticResource FF}">

							<Grid Margin="1">

								<Border x:Name="BackgroundAnimation" Opacity="0">

									<Border.Background>

										<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

											<GradientStop Color="#FF1464F3" Offset="0"/>

											<GradientStop Color="#FF01215A" Offset="1"/>

											<GradientStop Color="#FF064BC6" Offset="0.489"/>

											<GradientStop Color="#FF013AA1" Offset="0.557"/>

										</LinearGradientBrush>

									</Border.Background>

								</Border>

								<Rectangle x:Name="BackgroundGradient" Fill="{StaticResource FF}" Opacity="0" OpacityMask="{StaticResource FE}"/>

							</Grid>

						</Border>

						<Rectangle x:Name="FocusVisualElement" StrokeThickness="2" RadiusX="2" RadiusY="2" Margin="1" IsHitTestVisible="false" Opacity="0">

							<Rectangle.Fill>

								<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

									<GradientStop Color="#FF085BF1" Offset="0"/>

									<GradientStop Color="#FF022F80" Offset="1"/>

									<GradientStop Color="#FF125BDE" Offset="0.489"/>

									<GradientStop Color="#FF0343B6" Offset="0.557"/>

								</LinearGradientBrush>

							</Rectangle.Fill>

						</Rectangle>

						<Rectangle x:Name="DisabledVisualElement" Fill="{StaticResource FC}" IsHitTestVisible="false" Opacity="0" RadiusX="2" RadiusY="2"/>

						<ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>

					</Grid>

				</ControlTemplate>

			</Setter.Value>

		</Setter>

	</Style>

 

 

谢谢收看~~~

 

 

silverlight 之 – Blend 一切源于Brush（一）

silverlight 之 – Blend 之 LinearGradientBrush （二）

silverlight 之 – Blend 之 Style for Button （三）

silverlight 之 – Blend 之图形按钮（四）