技术开发 频道

Expression Blend 3技巧Make Into Control

 此时,打开右边的"Properties"(属性)选项卡,设置按钮控件的填充色为另一个颜色,如图7所示。

 图7  在新建控件的MouseOver事件录制状态填充新的颜色

 现在,停止录制操作,保存刚才的工作(File-Save)。

 此时转到xaml文件的标记状态下观察,你会发现有如下内容:

 <UserControl.Resources>

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

 <Setter Property="Template">

 <Setter.Value>

 <ControlTemplate TargetType="Button">

 <Grid>

 <VisualStateManager.VisualStateGroups>

 <VisualStateGroup x:Name="FocusStates">

 <VisualState x:Name="Focused"/>

 <VisualState x:Name="Unfocused"/>

 </VisualStateGroup>

 <VisualStateGroup x:Name="CommonStates">

 <VisualState x:Name="Normal"/>

 <VisualState x:Name="MouseOver">

 <Storyboard>

 <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">

 <EasingColorKeyFrame KeyTime="00:00:00" Value="#FFF200FF"/>

 </ColorAnimationUsingKeyFrames>

 </Storyboard>

 </VisualState>

 <VisualState x:Name="Pressed"/>

 <VisualState x:Name="Disabled"/>

 </VisualStateGroup>

 </VisualStateManager.VisualStateGroups>

 <Path x:Name="path" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" Data="M73.611115,181.94444 C86.962151,170.29263 84.722221,180.84279 84.722221,154.16667 C84.722221,138.78079 86.111115,123.42919 86.111115,108.33334 C86.111115,86.345619 87.5,65.706612 87.5,44.444443 C110.16323,44.444443 126.76094,82.515137 130.55556,116.66666 C133.69991,144.96585 144.44444,166.29266 144.44444,197.22223 C121.78442,197.22223 102.99593,172.35312 81.944443,159.72223 C67.342331,150.96095 59.193172,141.79919 55.555557,123.61111 C54.629631,123.61111 53.703705,123.61111 52.777779,123.61111 C54.022728,116.14142 155.51205,39.511379 137.5,105.55556 C127.33724,142.81902 121.06282,167.95105 77.777779,183.33333">

 <Path.Fill>

 <RadialGradientBrush GradientOrigin="0.577,0.504">

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

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

 </RadialGradientBrush>

 </Path.Fill>

 </Path>

 <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

 </Grid>

 </ControlTemplate>

 </Setter.Value>

 </Setter>

 </Style>

 </UserControl.Resources>

 <Grid x:Name="LayoutRoot">

 <Button Height="153.778" HorizontalAlignment="Left" Margin="52.778,44.444,0,0" Style="{StaticResource pentagonButton}" VerticalAlignment="Top" Width="92.666" Click="Button_Click"/>

0
相关文章