C# WPF仿360安全衛士11

時間 2019-12-01

標籤 c# wpf 安全衛士欄目 C# 简体版

原文原文鏈接

首先上效果圖：ide

這是個人第一篇隨筆，最近由於寫一個播放器，開始學習WPF相關技術，隨着不斷入坑，播放器卻是作出來了，掉坑裏了... 本着閒着也是閒着的精神，拿360開刀了；學習

主界面主要使用DMSkin for WPF 的無邊框解決方案；spa

經過提取360自帶的素材，繪製自定義控件；以下：code

1.導航欄（TabControl-TabItem）blog

 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）get

 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>