首先上效果图:
这是我的第一篇随笔,最近因为写一个播放器,开始学习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>
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>
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>
以上就是界面核心控件的样式了
另外,球的水波动态是真做不来,求指教。。。
源码:
https://pan.baidu.com/s/1yBNYuZTSTLiAm7ObEb1_ig
密码: sizk