C# WPF仿360安全卫士11

首先上效果图：

这是我的第一篇随笔，最近因为写一个播放器，开始学习WPF相关技术，随着不断入坑，播放器倒是做出来了，掉坑里了... 本着闲着也是闲着的精神，拿360开刀了；

主界面主要使用DMSkin for WPF 的无边框解决方案；

通过提取360自带的素材，绘制自定义控件；如下：

1.导航栏（TabControl-TabItem）

 1 <Style x:Key="TopTabItem" TargetType="TabItem" >
 2         <Setter Property="Width" Value="100"></Setter>
 3         <Setter Property="FontSize" Value="16"></Setter>
 4         <Setter Property="Height" Value="100"></Setter>
 5         <Setter Property="Foreground" Value="#FF888888"></Setter>
 6         <Setter Property="Template" >
 7             <Setter.Value>
 8                 <ControlTemplate  TargetType="{x:Type TabItem}">
 9                     <Grid>
10                        
11                         <Border x:Name="back" CornerRadius="0" Background="Transparent">
12                             <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" 
13                                         >
14                                 <Image Source="{TemplateBinding Tag}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="40" Height="40"/>
15                                 <TextBlock x:Name="Content" Text="{TemplateBinding Header}"  Foreground="White" FontSize="14" FontFamily="{StaticResource FontFamily}"
16                             HorizontalAlignment="Center"  Margin="0,5,0,0"
17                             VerticalAlignment="Center" ></TextBlock>
18                             </StackPanel>
19                         </Border>
20                     </Grid>
21                     <ControlTemplate.Triggers>
22                         <Trigger Property="IsSelected" Value="true">
23                             <Setter Property="Background" TargetName="back">
24                                 <Setter.Value>
25                                     <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
26                                         <GradientStopCollection>
27                                             <GradientStop Offset="0" Color="Transparent"  />
28                                             <GradientStop Offset="1" Color="#33000000"  />
29                                         </GradientStopCollection>
30                                     </LinearGradientBrush>
31                                 </Setter.Value>
32                             </Setter>
33                         </Trigger>
34                     </ControlTemplate.Triggers>
35                 </ControlTemplate>
36             </Setter.Value>
37         </Setter>
38         <Setter Property="ContentTemplate">
39             <Setter.Value>
40                 <DataTemplate>
41                     <ContentPresenter  Margin="0,0,0,0"  Content="{TemplateBinding Content}"  >
42                     </ContentPresenter>
43                 </DataTemplate>
44             </Setter.Value>
45         </Setter>
46     </Style>

View Code

2.按钮（自定义Button）

 1  <Style x:Key="Button360" TargetType="Button">
 2         <Setter Property="Width" Value="200"></Setter>
 3         <Setter Property="FontSize" Value="25"></Setter>
 4         <Setter Property="Height" Value="60"></Setter>
 5         <Setter Property="Foreground" Value="White"></Setter>
 6         <Setter Property="Template" >
 7             <Setter.Value>
 8                 <ControlTemplate TargetType="Button">
 9                     <Border Background="{StaticResource MainColor}" x:Name="back" CornerRadius="30">
10                         <Border x:Name="for"  CornerRadius="30">
11                             <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"></ContentPresenter>
12                         </Border>
13                     </Border>
14                     <ControlTemplate.Triggers>
15                         <Trigger Property="IsMouseOver" Value="true">
16                             <Setter Property="Background" TargetName="for" Value="#33000000"></Setter>
17                         </Trigger>
18                         <Trigger Property="IsPressed" Value="True">
19                             <Setter Property="Width" TargetName="back" Value="199"></Setter>
20                             <Setter Property="Height" TargetName="back" Value="59"></Setter>
21                         </Trigger>
22                     </ControlTemplate.Triggers>
23                 </ControlTemplate>
24             </Setter.Value>
25         </Setter>
26     </Style>    

View Code

3.图片按钮（自定义Button）

 1 <Style x:Key="ImageButton" TargetType="Button">
 2         <Setter Property="Width" Value="60"></Setter>
 3         <Setter Property="FontSize" Value="12"></Setter>
 4         <Setter Property="Height" Value="60"></Setter>
 5         <Setter Property="Foreground" Value="#FF888888"></Setter>
 6         <Setter Property="Template" >
 7             <Setter.Value>
 8                 <ControlTemplate TargetType="Button">
 9                     <Border x:Name="back" CornerRadius="0" Background="Transparent">
10                         <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" >
11                             <Image Source="{TemplateBinding Tag}" x:Name="icon" HorizontalAlignment="Center" VerticalAlignment="Center" Width="35" Height="35"/>
12                             <ContentPresenter></ContentPresenter>
13                         </StackPanel>
14                     </Border>
15                     <ControlTemplate.Triggers>
16                         <Trigger Property="IsMouseOver" Value="true">
17                             <Setter Property="Background" TargetName="back" Value="#33000000"></Setter>
18                         </Trigger>
19                         <Trigger Property="IsPressed" Value="True">
20                             <Setter Property="Width" TargetName="icon" Value="34"></Setter>
21                             <Setter Property="Height" TargetName="icon" Value="34"></Setter>
22                         </Trigger>
23                     </ControlTemplate.Triggers>
24                 </ControlTemplate>
25             </Setter.Value>
26         </Setter>
27     </Style>

View Code

以上就是界面核心控件的样式了

另外，球的水波动态是真做不来，求指教。。。

源码：

https://pan.baidu.com/s/1yBNYuZTSTLiAm7ObEb1_ig

密码: sizk