首先上效果图：
这是我的第一篇随笔，最近因为写一个播放器，开始学习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