C# WPF仿360安全衛士11
阿新 • • 發佈：2019-04-01
stop tab pre wpf header ali cti con aid 原文:C# WPF仿360安全衛士11
首先上效果圖：
這是我的第一篇隨筆，最近因為寫一個播放器，開始學習WPF相關技術，隨著不斷入坑，播放器倒是做出來了，掉坑裏了... 本著閑著也是閑著的精神，拿360開刀了；
主界面主要使用DMSkin for WPF 的無邊框解決方案；
通過提取360自帶的素材，繪制自定義控件；如下：
1.導航欄（TabControl-TabItem）
1 <Style x:Key="TopTabItem" TargetType="TabItem" > 2 <Setter Property="Width" ValueView Code="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 <StackPanelHorizontalAlignment="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>
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
C# WPF仿360安全衛士11