C # WPF imitation 360 security guard 11

First, put on the renderings:

 

This is my first essay. Recently, I started to learn WPF related technology because of writing a player. As I kept going into the pit, the player was made and fell into the pit In the spirit of being idle, I took 360 to operate;

The main interface mainly uses the borderless solution of DMSkin for WPF;

Draw custom controls by extracting 360's own materials; As follows:

1. Navigation bar (TabControl TabItem)

 one  < Style x:Key ="TopTabItem" TargetType ="TabItem"  >
 two          < Setter Property ="Width" Value ="100" ></ Setter >
 three          < Setter Property ="FontSize" Value ="16" ></ Setter >
 four          < Setter Property ="Height" Value ="100" ></ Setter >
 five          < Setter Property ="Foreground" Value ="#FF888888" ></ Setter >
 six          < Setter Property ="Template"  >
 seven              < Setter.Value >
 eight                  < ControlTemplate TargetType =" {x:Type TabItem} " >
 nine                      < Grid >
 ten                        
 eleven                          < Border x:Name ="back" CornerRadius ="0" Background ="Transparent" >
 twelve                              < StackPanel HorizontalAlignment ="Center" VerticalAlignment ="Center" 
 thirteen                                          >
 fourteen                                  < Image Source =" {TemplateBinding Tag} " HorizontalAlignment ="Center" VerticalAlignment ="Center" Width ="40" Height ="40" />
 fifteen                                  < TextBlock x:Name ="Content" Text =" {TemplateBinding Header} " Foreground ="White" FontSize ="14" FontFamily =" {StaticResource FontFamily} "
 sixteen  HorizontalAlignment ="Center" Margin ="0,5,0,0"
 seventeen  VerticalAlignment ="Center"  ></ TextBlock >
 eighteen                              </ StackPanel >
 nineteen                          </ Border >
 twenty                      </ Grid >
 twenty-one                      < ControlTemplate.Triggers >
 twenty-two                          < Trigger Property ="IsSelected" Value ="true" >
 twenty-three                              < Setter Property ="Background" TargetName ="back" >
 twenty-four                                  < Setter.Value >
 twenty-five                                      < LinearGradientBrush StartPoint ="0.5,0" EndPoint ="0.5,1" >
 twenty-six                                          < GradientStopCollection >
 twenty-seven                                              < GradientStop Offset ="0" Color ="Transparent"   />
 twenty-eight                                              < GradientStop Offset ="1" Color ="#33000000"   />
 twenty-nine                                          </ GradientStopCollection >
 thirty                                      </ LinearGradientBrush >
 thirty-one                                  </ Setter.Value >
 thirty-two                              </ Setter >
 thirty-three                          </ Trigger >
 thirty-four                      </ ControlTemplate.Triggers >
 thirty-five                  </ ControlTemplate >
 thirty-six              </ Setter.Value >
 thirty-seven          </ Setter >
 thirty-eight          < Setter Property ="ContentTemplate" >
 thirty-nine              < Setter.Value >
 forty                  < DataTemplate >
 forty-one                      < ContentPresenter Margin ="0,0,0,0" Content =" {TemplateBinding Content} "   >
 forty-two                      </ ContentPresenter >
 forty-three                  </ DataTemplate >
 forty-four              </ Setter.Value >
 forty-five          </ Setter >
 forty-six      </ Style >
View Code

2. Button (user-defined Button)

 one   < Style x:Key ="Button360" TargetType ="Button" >
 two          < Setter Property ="Width" Value ="200" ></ Setter >
 three          < Setter Property ="FontSize" Value ="25" ></ Setter >
 four          < Setter Property ="Height" Value ="60" ></ Setter >
 five          < Setter Property ="Foreground" Value ="White" ></ Setter >
 six          < Setter Property ="Template"  >
 seven              < Setter.Value >
 eight                  < ControlTemplate TargetType ="Button" >
 nine                      < Border Background =" {StaticResource MainColor} " x:Name ="back" CornerRadius ="30" >
 ten                          < Border x:Name ="for" CornerRadius ="30" >
 eleven                              < ContentPresenter HorizontalAlignment ="Center" VerticalAlignment ="Center" ></ ContentPresenter >
 twelve                          </ Border >
 thirteen                      </ Border >
 fourteen                      < ControlTemplate.Triggers >
 fifteen                          < Trigger Property ="IsMouseOver" Value ="true" >
 sixteen                              < Setter Property ="Background" TargetName ="for" Value ="#33000000" ></ Setter >
 seventeen                          </ Trigger >
 eighteen                          < Trigger Property ="IsPressed" Value ="True" >
 nineteen                              < Setter Property ="Width" TargetName ="back" Value ="199" ></ Setter >
 twenty                              < Setter Property ="Height" TargetName ="back" Value ="59" ></ Setter >
 twenty-one                          </ Trigger >
 twenty-two                      </ ControlTemplate.Triggers >
 twenty-three                  </ ControlTemplate >
 twenty-four              </ Setter.Value >
 twenty-five          </ Setter >
 twenty-six      </ Style >
View Code

3. Picture button (user-defined Button)

 one  < Style x:Key ="ImageButton" TargetType ="Button" >
 two          < Setter Property ="Width" Value ="60" ></ Setter >
 three          < Setter Property ="FontSize" Value ="12" ></ Setter >
 four          < Setter Property ="Height" Value ="60" ></ Setter >
 five          < Setter Property ="Foreground" Value ="#FF888888" ></ Setter >
 six          < Setter Property ="Template"  >
 seven              < Setter.Value >
 eight                  < ControlTemplate TargetType ="Button" >
 nine                      < Border x:Name ="back" CornerRadius ="0" Background ="Transparent" >
 ten                          < StackPanel HorizontalAlignment ="Center" VerticalAlignment ="Center"  >
 eleven                              < Image Source =" {TemplateBinding Tag} " x:Name ="icon" HorizontalAlignment ="Center" VerticalAlignment ="Center" Width ="35" Height ="35" />
 twelve                              < ContentPresenter ></ ContentPresenter >
 thirteen                          </ StackPanel >
 fourteen                      </ Border >
 fifteen                      < ControlTemplate.Triggers >
 sixteen                          < Trigger Property ="IsMouseOver" Value ="true" >
 seventeen                              < Setter Property ="Background" TargetName ="back" Value ="#33000000" ></ Setter >
 eighteen                          </ Trigger >
 nineteen                          < Trigger Property ="IsPressed" Value ="True" >
 twenty                              < Setter Property ="Width" TargetName ="icon" Value ="34" ></ Setter >
 twenty-one                              < Setter Property ="Height" TargetName ="icon" Value ="34" ></ Setter >
 twenty-two                          </ Trigger >
 twenty-three                      </ ControlTemplate.Triggers >
 twenty-four                  </ ControlTemplate >
 twenty-five              </ Setter.Value >
 twenty-six          </ Setter >
 twenty-seven      </ Style >
View Code

The above is the style of the interface core control

In addition, the water wave dynamics of the ball is really impossible...

Source code:

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

Password: sizk

posted @ 2018-06-28 16:20   Xiaoyu   Reading（ three thousand four hundred and sixty-seven )  Comments（ seventeen )  edit   Collection   report