新手用WPF山寨QQ管家7.6（一）
http://www.cnblogs.com/channingzhao/archive/2013/04/10/3012587.html
接着上次的来
2.导航最大最小关闭按钮的制作：
效果展示
写一个Border，BorderThickness="1,0,0,0"，只有左边有线条，Border内放关闭按钮图片，接着设计好背景渐进颜色并透明，构成按钮控件，在故事版里做MouseOver和Pressed效果，这里需要做成时间渐变。
关闭按钮样式代码
1 <Style x:Key="CloseButtonStyle" TargetType="{x:Type Button}"> 2 <Setter Property="Template"> 3 <Setter.Value> 4 <ControlTemplate TargetType="{x:Type Button}"> 5 <ControlTemplate.Resources> 6 <Storyboard x:Key="MouseOver"> 7 <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="grid"> 8 <EasingColorKeyFrame KeyTime="0:0:0.3" Value="#33F18C85"/> 9 </ColorAnimationUsingKeyFrames> 10 <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="grid"> 11 <EasingColorKeyFrame KeyTime="0:0:0.3" Value="#99E4241E"/> 12 </ColorAnimationUsingKeyFrames> 13 <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="grid"> 14 <EasingColorKeyFrame KeyTime="0:0:0.3" Value="#7FF75C57"/> 15 </ColorAnimationUsingKeyFrames> 16 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[2].(GradientStop.Offset)" Storyboard.TargetName="grid"> 17 <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.687"/> 18 </DoubleAnimationUsingKeyFrames> 19 </Storyboard> 20 <Storyboard x:Key="Pressed"> 21 <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="grid"> 22 <EasingColorKeyFrame KeyTime="0" Value="#33EF7C74"/> 23 </ColorAnimationUsingKeyFrames> 24 <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="grid"> 25 <EasingColorKeyFrame KeyTime="0" Value="#B2C21813"/> 26 </ColorAnimationUsingKeyFrames> 27 <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="grid"> 28 <EasingColorKeyFrame KeyTime="0" Value="#7FE7312B"/> 29 </ColorAnimationUsingKeyFrames> 30 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[2].(GradientStop.Offset)" Storyboard.TargetName="grid"> 31 <EasingDoubleKeyFrame KeyTime="0" Value="0.578"/> 32 </DoubleAnimationUsingKeyFrames> 33 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="image"> 34 <EasingDoubleKeyFrame KeyTime="0" Value="1"/> 35 </DoubleAnimationUsingKeyFrames> 36 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="image"> 37 <EasingDoubleKeyFrame KeyTime="0" Value="0.5"/> 38 </DoubleAnimationUsingKeyFrames> 39 </Storyboard> 40 </ControlTemplate.Resources> 41 <Grid x:Name="grid"> 42 <Grid.Background> 43 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 44 <GradientStop Color="#00FF332D" Offset="0"/> 45 <GradientStop Color="#00FF332D" Offset="1"/> 46 <GradientStop Color="#00F75C57" Offset="0.474"/> 47 </LinearGradientBrush> 48 </Grid.Background> 49 <Border BorderThickness="1,0,0,0"> 50 <Border.BorderBrush> 51 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 52 <GradientStop Color="#FF666666" Offset="0"/> 53 <GradientStop Color="#FF959595" Offset="1"/> 54 </LinearGradientBrush> 55 </Border.BorderBrush> 56 <Image x:Name="image" Source="../Resource/Image/Close.png" Height="9" Width="9" RenderTransformOrigin="0.5,0.5"> 57 <Image.RenderTransform> 58 <TransformGroup> 59 <ScaleTransform/> 60 <SkewTransform/> 61 <RotateTransform/> 62 <TranslateTransform/> 63 </TransformGroup> 64 </Image.RenderTransform> 65 </Image> 66 </Border> 67 <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 68 </Grid> 69 <ControlTemplate.Triggers> 70 <Trigger Property="IsMouseOver" Value="True"> 71 <Trigger.ExitActions> 72 <RemoveStoryboard BeginStoryboardName="MouseOver_BeginStoryboard"/> 73 </Trigger.ExitActions> 74 <Trigger.EnterActions> 75 <BeginStoryboard x:Name="MouseOver_BeginStoryboard" Storyboard="{StaticResource MouseOver}"/> 76 </Trigger.EnterActions> 77 </Trigger> 78 <Trigger Property="IsPressed" Value="True"> 79 <Trigger.ExitActions> 80 <RemoveStoryboard BeginStoryboardName="Pressed_BeginStoryboard"/> 81 </Trigger.ExitActions> 82 <Trigger.EnterActions> 83 <BeginStoryboard x:Name="Pressed_BeginStoryboard" Storyboard="{StaticResource Pressed}"/> 84 </Trigger.EnterActions> 85 </Trigger> 86 </ControlTemplate.Triggers> 87 </ControlTemplate> 88 </Setter.Value> 89 </Setter> 90 </Style>
最大化按钮MouseOver是红色的，而且比其他按钮宽一些。
最大化按钮样式代码
1 <Style x:Key="MaxButtonStyle" TargetType="{x:Type Button}"> 2 <Setter Property="Template"> 3 <Setter.Value> 4 <ControlTemplate TargetType="{x:Type Button}"> 5 <ControlTemplate.Resources> 6 <Storyboard x:Key="MouseOver"> 7 <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="grid"> 8 <EasingColorKeyFrame KeyTime="0:0:0.3" Value="#19FFFFFF"/> 9 </ColorAnimationUsingKeyFrames> 10 <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="grid"> 11 <EasingColorKeyFrame KeyTime="0:0:0.3" Value="#4CF3F3F3"/> 12 </ColorAnimationUsingKeyFrames> 13 <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="grid"> 14 <EasingColorKeyFrame KeyTime="0:0:0.3" Value="#33FFFFFF"/> 15 </ColorAnimationUsingKeyFrames> 16 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[2].(GradientStop.Offset)" Storyboard.TargetName="grid"> 17 <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.176"/> 18 </DoubleAnimationUsingKeyFrames> 19 </Storyboard> 20 <Storyboard x:Key="Pressed"> 21 <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="grid"> 22 <EasingColorKeyFrame KeyTime="0" Value="#33D8D8D8"/> 23 </ColorAnimationUsingKeyFrames> 24 <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="grid"> 25 <EasingColorKeyFrame KeyTime="0" Value="#B2898989"/> 26 </ColorAnimationUsingKeyFrames> 27 <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="grid"> 28 <EasingColorKeyFrame KeyTime="0" Value="#7FB8B8B8"/> 29 </ColorAnimationUsingKeyFrames> 30 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[2].(GradientStop.Offset)" Storyboard.TargetName="grid"> 31 <EasingDoubleKeyFrame KeyTime="0" Value="0.48"/> 32 </DoubleAnimationUsingKeyFrames> 33 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="image"> 34 <EasingDoubleKeyFrame KeyTime="0" Value="1"/> 35 </DoubleAnimationUsingKeyFrames> 36 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="image"> 37 <EasingDoubleKeyFrame KeyTime="0" Value="0.5"/> 38 </DoubleAnimationUsingKeyFrames> 39 </Storyboard> 40 </ControlTemplate.Resources> 41 <Grid x:Name="grid"> 42 <Grid.Background> 43 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 44 <GradientStop Color="#00FF332D" Offset="0"/> 45 <GradientStop Color="#00FF332D" Offset="1"/> 46 <GradientStop Color="#00F75C57" Offset="0.474"/> 47 </LinearGradientBrush> 48 </Grid.Background> 49 <Border BorderThickness="1,0,0,0"> 50 <Border.BorderBrush> 51 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 52 <GradientStop Color="#FF666666" Offset="0"/> 53 <GradientStop Color="#FF959595" Offset="1"/> 54 </LinearGradientBrush> 55 </Border.BorderBrush> 56 <Image x:Name="image" Source="../Resource/Image/Max.png" Height="9" Width="9" RenderTransformOrigin="0.5,0.5"> 57 <Image.RenderTransform> 58 <TransformGroup> 59 <ScaleTransform/> 60 <SkewTransform/> 61 <RotateTransform/> 62 <TranslateTransform/> 63 </TransformGroup> 64 </Image.RenderTransform> 65 </Image> 66 </Border> 67 <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 68 </Grid> 69 <ControlTemplate.Triggers> 70 <Trigger Property="IsMouseOver" Value="True"> 71 <Trigger.ExitActions> 72 <RemoveStoryboard BeginStoryboardName="MouseOver_BeginStoryboard"/> 73 </Trigger.ExitActions> 74 <Trigger.EnterActions> 75 <BeginStoryboard x:Name="MouseOver_BeginStoryboard" Storyboard="{StaticResource MouseOver}"/> 76 </Trigger.EnterActions> 77 </Trigger> 78 <Trigger Property="IsPressed" Value="True"> 79 <Trigger.ExitActions> 80 <RemoveStoryboard BeginStoryboardName="Pressed_BeginStoryboard"/> 81 </Trigger.ExitActions> 82 <Trigger.EnterActions> 83 <BeginStoryboard x:Name="Pressed_BeginStoryboard" Storyboard="{StaticResource Pressed}"/> 84 </Trigger.EnterActions> 85 </Trigger> 86 </ControlTemplate.Triggers> 87 </ControlTemplate> 88 </Setter.Value> 89 </Setter> 90 </Style>
图标素材.rar 图标是自己从管家上扣的...效果不是立体的，也能用，我实在找不到这种小图标了。
3.登录管家按钮的制作：
效果展示
这个按钮用到了图形间的组合，是一个圆角Rectangle和一个Ellipse排斥组合而成。
先画一个Rectangle，再在上面画一个Ellipse，圈住两个图形，选择对象->合并->排斥，就能做出上面的效果了，空圈放图片，按钮效果同上。
4. 皮肤选择层的制作：
效果展示
资产->形状里有三角形，用它和圆角巨型组合出底层形状（相并），并构成ScrollViewer控件，在ScrollViewer内添加WrapPanel用于放3*3张图片。
皮肤选择层代码
1 <ScrollViewer Margin="0,176,53.5,324" Style="{DynamicResource ScrollViewerStyle1}" HorizontalAlignment="Right" Width="200"> 2 <WrapPanel Margin="4,20,4,0"> 3 <Image Source="Resource/Image/Background.jpg" Width="60" Stretch="Fill" Height="40" Margin="2"/> 4 <Image Source="Resource/Image/Background.jpg" Width="60" Stretch="Fill" Height="40" Margin="2"/> 5 <Image Source="Resource/Image/Background.jpg" Width="60" Stretch="Fill" Height="40" Margin="2"/> 6 <Image Source="Resource/Image/Background.jpg" Width="60" Stretch="Fill" Height="40" Margin="2"/> 7 <Image Source="Resource/Image/Background.jpg" Width="60" Stretch="Fill" Height="40" Margin="2"/> 8 <Image Source="Resource/Image/Background.jpg" Width="60" Stretch="Fill" Height="40" Margin="2"/> 9 <Image Source="Resource/Image/Background.jpg" Width="60" Stretch="Fill" Height="40" Margin="2"/> 10 <Image Source="Resource/Image/Background.jpg" Width="60" Stretch="Fill" Height="40" Margin="2"/> 11 <Image Source="Resource/Image/Background.jpg" Width="60" Stretch="Fill" Height="40" Margin="2"/> 12 </WrapPanel> 13 </ScrollViewer>
皮肤选择层样式代码
1 <Style x:Key="ScrollViewerStyle1" TargetType="{x:Type ScrollViewer}"> 2 <Setter Property="Template"> 3 <Setter.Value> 4 <ControlTemplate TargetType="{x:Type ScrollViewer}"> 5 <Grid> 6 <Path Data="M101,0.5 L112,11.5 194.5,11.5 C197.26142,11.500001 199.5,13.738577 199.5,16.500001 L199.5,155.5 C199.5,158.26143 197.26142,160.5 194.5,160.5 L5.5,160.5 C2.7385788,160.5 0.5,158.26143 0.5,155.5 L0.5,16.500001 C0.5,13.738577 2.7385788,11.500001 5.5,11.5 L89.999999,11.5 z" Fill="White" Stretch="Fill" Stroke="#B27A7A7A" StrokeThickness="0.5"> 7 <Path.Effect> 8 <DropShadowEffect Opacity="0.7" ShadowDepth="2" Direction="310"/> 9 </Path.Effect> 10 </Path> 11 <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 12 </Grid> 13 </ControlTemplate> 14 </Setter.Value> 15 </Setter> 16 </Style>
5. 换肤的实现：
定义ResourceHelper类:
1 static class ResourceHelper 2 { 3 public static void LoadResource(string fileName) 4 { 5 Application.Current.Resources.MergedDictionaries[0] = new ResourceDictionary() 6 { 7 Source = new Uri(fileName,UriKind.RelativeOrAbsolute) 8 }; 9 } 10 }
不同的皮肤分别为不同的Style.xaml
1 <Application.Resources> 2 <ResourceDictionary> 3 <ResourceDictionary.MergedDictionaries> 4 <ResourceDictionary Source="Theme/Theme8.xaml"/> 5 </ResourceDictionary.MergedDictionaries> 6 </ResourceDictionary> 7 </Application.Resources>
换肤按钮事件：
1 private void ThemeImage_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) 2 { 3 Image image = sender as Image; 4 if (image != null && image.Source != null) 5 { 6 string imgName = image.Name; 7 ResourceHelper.LoadResource("pack://application:,,,/项目名;component/Theme/" + imgName + ".xaml"); 8 } 9 }
我的每个Theme.xaml目前只有背景图和导航字色变化：
Theme.xaml内：
<ImageBrush x:Key="WindowBack" ImageSource="../Resource/Image/b8.jpg" Stretch="UniformToFill"/>
MainWindow内：
Background="{DynamicResource WindowBack}"
换肤的时候DynamicResource会跟着换，StaticResource不会。
直接修改样式文件内的元素会提示只读，百度了下也只有换肤能做，不知道其他办法~
我的换肤是临时的，保存不了，重运行就恢复，不知道怎么解决呀~在此请教下高手们...
下次记录快速通道滑屏效果