C# WPF仿360安全卫士11

首先上效果图：

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

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

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

1.导航栏（TabControl-TabItem）

 <Style x:Key="TopTabItem" TargetType="TabItem" >
         <Setter Property="Width" Value="100"></Setter>
         <Setter Property="FontSize" Value="16"></Setter>
         <Setter Property="Height" Value="100"></Setter>
         <Setter Property="Foreground" Value="#FF888888"></Setter>
         <Setter Property="Template" >
             <Setter.Value>
                 <ControlTemplate  TargetType="{x:Type TabItem}">
                     <Grid>

                         <Border x:Name="back" CornerRadius="0" Background="Transparent">
                             <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"
                                         >
                                 <Image Source="{TemplateBinding Tag}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="40" Height="40"/>
                                 <TextBlock x:Name="Content" Text="{TemplateBinding Header}"  Foreground="White" FontSize="14" FontFamily="{StaticResource FontFamily}"
                             HorizontalAlignment="Center"  Margin="0,5,0,0"
                             VerticalAlignment="Center" ></TextBlock>
                             </StackPanel>
                         </Border>
                     </Grid>
                     <ControlTemplate.Triggers>
                         <Trigger Property="IsSelected" Value="true">
                             <Setter Property="Background" TargetName="back">
                                 <Setter.Value>
                                     <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                         <GradientStopCollection>
                                             <GradientStop Offset="0" Color="Transparent"  />
                                             <GradientStop Offset="1" Color="#33000000"  />
                                         </GradientStopCollection>
                                     </LinearGradientBrush>
                                 </Setter.Value>
                             </Setter>
                         </Trigger>
                     </ControlTemplate.Triggers>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
         <Setter Property="ContentTemplate">
             <Setter.Value>
                 <DataTemplate>
                     <ContentPresenter  Margin="0,0,0,0"  Content="{TemplateBinding Content}"  >
                     </ContentPresenter>
                 </DataTemplate>
             </Setter.Value>
         </Setter>
     </Style>

2.按钮（自定义Button）

  <Style x:Key="Button360" TargetType="Button">
         <Setter Property="Width" Value="200"></Setter>
         <Setter Property="FontSize" Value="25"></Setter>
         <Setter Property="Height" Value="60"></Setter>
         <Setter Property="Foreground" Value="White"></Setter>
         <Setter Property="Template" >
             <Setter.Value>
                 <ControlTemplate TargetType="Button">
                     <Border Background="{StaticResource MainColor}" x:Name="back" CornerRadius="30">
                         <Border x:Name="for"  CornerRadius="30">
                             <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"></ContentPresenter>
                         </Border>
                     </Border>
                     <ControlTemplate.Triggers>
                         <Trigger Property="IsMouseOver" Value="true">
                             <Setter Property="Background" TargetName="for" Value="#33000000"></Setter>
                         </Trigger>
                         <Trigger Property="IsPressed" Value="True">
                             <Setter Property="Width" TargetName="back" Value="199"></Setter>
                             <Setter Property="Height" TargetName="back" Value="59"></Setter>
                         </Trigger>
                     </ControlTemplate.Triggers>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
     </Style>    

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

 <Style x:Key="ImageButton" TargetType="Button">
         <Setter Property="Width" Value="60"></Setter>
         <Setter Property="FontSize" Value="12"></Setter>
         <Setter Property="Height" Value="60"></Setter>
         <Setter Property="Foreground" Value="#FF888888"></Setter>
         <Setter Property="Template" >
             <Setter.Value>
                 <ControlTemplate TargetType="Button">
                     <Border x:Name="back" CornerRadius="0" Background="Transparent">
                         <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" >
                             <Image Source="{TemplateBinding Tag}" x:Name="icon" HorizontalAlignment="Center" VerticalAlignment="Center" Width="35" Height="35"/>
                             <ContentPresenter></ContentPresenter>
                         </StackPanel>
                     </Border>
                     <ControlTemplate.Triggers>
                         <Trigger Property="IsMouseOver" Value="true">
                             <Setter Property="Background" TargetName="back" Value="#33000000"></Setter>
                         </Trigger>
                         <Trigger Property="IsPressed" Value="True">
                             <Setter Property="Width" TargetName="icon" Value="34"></Setter>
                             <Setter Property="Height" TargetName="icon" Value="34"></Setter>
                         </Trigger>
                     </ControlTemplate.Triggers>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
     </Style>

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

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

源码：

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

密码: sizk