新手用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不會。
直接修改樣式文件內的元素會提示只讀，百度了下也只有換膚能做，不知道其他辦法~
我的換膚是臨時的，保存不了，重運行就恢復，不知道怎么解決呀~在此請教下高手們...
下次記錄快速通道滑屏效果