在做微信公众平台的同时，还有另外一个开发的事情在我身上，就是在类似字典的东西，我觉得做成一般的样子，没什么新颖，我想把它改进成漂亮一点的，比如是360桌面 盒子那个样式那样，在网上搜索了一下还果真搜到了，在这里要再次感谢前辈。
显示效果：
因为截图的时候，背景还是vs，所以看起来还有一些代码在后面，这样子是不是很好看？是不是很动心？也像给自己WPF添加这样的样式？code就在下面，自己去尝试吧。
WindowBaseStyle.xaml
1 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 2 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 3 4 <!--自定义窗体外框样式--> 5 <Style x:Key="winStyle" TargetType="Border"> 6 <Setter Property="Background" Value="#00000000" /> 7 </Style> 8 9 <!--窗体标题样式--> 10 <Style x:Key="titleStyle" TargetType="Border"> 11 <Setter Property="Cursor" Value="Hand"></Setter> 12 <Setter Property="Width" Value="Auto"></Setter> 13 <Setter Property="Height" Value="28"></Setter> 14 <Setter Property="DockPanel.Dock" Value="Top"></Setter> 15 <Setter Property="Cursor" Value="Hand"></Setter> 16 <Setter Property="Padding" Value="10,5,10,5"></Setter> 17 </Style> 18 19 <!--最小化按钮样式--> 20 <Style x:Key="minBtnStyle" TargetType="Button"> 21 <Setter Property="Margin" Value="2,0,2,0"></Setter> 22 <Setter Property="Cursor" Value="Hand"></Setter> 23 <Setter Property="Opacity" Value=".75"></Setter> 24 <Setter Property="Template"> 25 <Setter.Value> 26 <ControlTemplate TargetType="Button"> 27 <Grid> 28 <Rectangle Width="18" Height="16" Fill="White" Opacity=".1" RadiusX="4" RadiusY="4" StrokeThickness="2"></Rectangle> 29 <Rectangle Width="18" Height="16" StrokeThickness="2" RadiusX="4" RadiusY="4" Stroke="White"></Rectangle> 30 <!--按钮内容--> 31 <Grid> 32 <Canvas HorizontalAlignment="Left" VerticalAlignment="Top" Margin="5"> 33 <Line StrokeThickness="2" Stroke="White" X1="0" Y1="4" X2="8" Y2="4"></Line> 34 </Canvas> 35 </Grid> 36 </Grid> 37 <ControlTemplate.Triggers> 38 <Trigger Property="Button.IsMouseOver" Value="True"> 39 <Setter Property="Opacity" Value="1" /> 40 </Trigger> 41 </ControlTemplate.Triggers> 42 </ControlTemplate> 43 </Setter.Value> 44 </Setter> 45 </Style> 46 47 <!--关闭按钮样式--> 48 <Style x:Key="closeBtnStyle" TargetType="Button"> 49 <Setter Property="Margin" Value="2,0,2,0"></Setter> 50 <Setter Property="Cursor" Value="Hand"></Setter> 51 <Setter Property="Opacity" Value=".75"></Setter> 52 <Setter Property="Template"> 53 <Setter.Value> 54 <ControlTemplate TargetType="Button"> 55 <Grid> 56 <Ellipse x:Name="borderBtn" Width="18" Height="18" StrokeThickness="2" Fill="#4f535d" Stroke="White"></Ellipse> 57 58 <!--按钮内容--> 59 <Grid> 60 <Canvas HorizontalAlignment="Left" VerticalAlignment="Top" Margin="5"> 61 <Line StrokeThickness="2" Stroke="White" X1="0" Y1="0" X2="8" Y2="8"></Line> 62 <Line StrokeThickness="2" Stroke="White" X1="0" Y1="8" X2="8" Y2="0"></Line> 63 </Canvas> 64 </Grid> 65 </Grid> 66 <ControlTemplate.Triggers> 67 <Trigger Property="Button.IsMouseOver" Value="True"> 68 <Setter Property="Opacity" Value="1" /> 69 </Trigger> 70 </ControlTemplate.Triggers> 71 </ControlTemplate> 72 </Setter.Value> 73 </Setter> 74 </Style> 75 76 <!--官方网站--> 77 <Style x:Key="btnStyle" TargetType="Button"> 78 <Setter Property="Margin" Value="5,5,5,5"></Setter> 79 <Setter Property="Cursor" Value="Hand"></Setter> 80 <Setter Property="Opacity" Value=".75"></Setter> 81 <Setter Property="Template"> 82 <Setter.Value> 83 <ControlTemplate TargetType="Button"> 84 <Grid> 85 <Border BorderBrush="White" BorderThickness="1" HorizontalAlignment="Center" Background="Transparent" Width="{TemplateBinding Width}"> 86 <TextBlock Grid.Column="1" Text="{TemplateBinding Content}" HorizontalAlignment="Center" Margin="3 0 3 0" Foreground="White"></TextBlock> 87 </Border> 88 </Grid> 89 <ControlTemplate.Triggers> 90 <Trigger Property="Button.IsMouseOver" Value="True"> 91 <Setter Property="Opacity" Value="1" /> 92 </Trigger> 93 </ControlTemplate.Triggers> 94 </ControlTemplate> 95 </Setter.Value> 96 </Setter> 97 </Style> 98 99 <!--窗口圆角--> 100 <CornerRadius x:Key="winCorner"> 101 <CornerRadius.BottomLeft>5</CornerRadius.BottomLeft> 102 <CornerRadius.BottomRight>5</CornerRadius.BottomRight> 103 <CornerRadius.TopLeft>5</CornerRadius.TopLeft> 104 <CornerRadius.TopRight>5</CornerRadius.TopRight> 105 </CornerRadius> 106 107 <!--标题栏圆角--> 108 <CornerRadius x:Key="winTitleCorner"> 109 <CornerRadius.BottomLeft>0</CornerRadius.BottomLeft> 110 <CornerRadius.BottomRight>0</CornerRadius.BottomRight> 111 <CornerRadius.TopLeft>5</CornerRadius.TopLeft> 112 <CornerRadius.TopRight>5</CornerRadius.TopRight> 113 </CornerRadius> 114 115 <!--状态栏圆角--> 116 <CornerRadius x:Key="winStatusCorner"> 117 <CornerRadius.BottomLeft>5</CornerRadius.BottomLeft> 118 <CornerRadius.BottomRight>5</CornerRadius.BottomRight> 119 <CornerRadius.TopLeft>0</CornerRadius.TopLeft> 120 <CornerRadius.TopRight>0</CornerRadius.TopRight> 121 </CornerRadius> 122 123 <!--基窗口模板--> 124 <ControlTemplate x:Key="BaseWindowControlTemplate" TargetType="{x:Type Window}"> 125 <Grid Width="{Binding ElementName=w, Path=Width}" Height="{Binding ElementName=w, Path=Height}"> 126 <Border BorderThickness="5" CornerRadius="6" BorderBrush="#000000" Opacity=".15"></Border> 127 <Border x:Name="borderBg" Margin="5" Background="#000000" BorderBrush="#ffffff" Opacity=".8" BorderThickness="0" CornerRadius="{StaticResource winCorner}" Style="{StaticResource winStyle}"> 128 <Grid> 129 <Grid.RowDefinitions> 130 <RowDefinition Height="auto"></RowDefinition> 131 <RowDefinition Height="*"></RowDefinition> 132 <RowDefinition Height="1"></RowDefinition> 133 <!--<RowDefinition Height="30"></RowDefinition>--> 134 </Grid.RowDefinitions> 135 <Border Grid.Row="0" Background="#4f535d" CornerRadius="{StaticResource winTitleCorner}" Style="{StaticResource titleStyle}"></Border> 136 <Canvas Grid.Row="2" Background="#42464d"></Canvas> 137 <Border Grid.Row="3" CornerRadius="{StaticResource winStatusCorner}"></Border> 138 </Grid> 139 </Border> 140 141 <Grid Margin="7"> 142 <Grid.RowDefinitions> 143 <RowDefinition Height="auto"></RowDefinition> 144 <RowDefinition Height="*"></RowDefinition> 145 <RowDefinition Height="1"></RowDefinition> 146 <!--<RowDefinition Height="30"></RowDefinition>--> 147 </Grid.RowDefinitions> 148 <!--标题栏框--> 149 150 <Border x:Name="borderTitle" Grid.Row="0" CornerRadius="{StaticResource winTitleCorner}" Style="{StaticResource titleStyle}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> 151 <Grid Background="Transparent"> 152 <TextBlock Text="Japanese RS Typing Tool" Foreground="White" Opacity=".75" HorizontalAlignment="Left"></TextBlock> 153 <StackPanel HorizontalAlignment="Right" VerticalAlignment="Top" Visibility="Visible" 154 Orientation="Horizontal"> 155 <!--关闭按钮--> 156 <Button x:Name="btnMin" Style="{StaticResource minBtnStyle}"></Button> 157 <Button x:Name="btnClose" Style="{StaticResource closeBtnStyle}"></Button> 158 </StackPanel> 159 </Grid> 160 </Border> 161 <!--内容--> 162 <Grid x:Name="gridContent" Grid.Row="1"> 163 <ContentPresenter /> 164 </Grid> 165 166 <!--<Border Grid.Row="3" CornerRadius="{StaticResource winStatusCorner}"> 167 <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" > 168 <Button x:Name="btnYes" Style="{StaticResource btnStyle}"></Button> 169 <Button x:Name="btnNo" Style="{StaticResource btnStyle}"></Button> 170 </StackPanel> 171 </Border>--> 172 </Grid> 173 174 </Grid> 175 </ControlTemplate> 176 177 <!--基窗口样式--> 178 <Style x:Key="BaseWindowStyle" TargetType="{x:Type Window}"> 179 <Setter Property="Template" Value="{StaticResource BaseWindowControlTemplate}"/> 180 <Setter Property="Background" 181 Value="Transparent" /> 182 <Setter Property="WindowStyle" 183 Value="None" /> 184 <Setter Property="AllowsTransparency" 185 Value="True" /> 186 </Style> 187 188 <Style x:Key="TabItemStyle1"> 189 <Style.Triggers> 190 <Trigger Property="TabItem.IsSelected" Value="True"> 191 <Setter Property="TabItem.Template" > 192 <Setter.Value> 193 <ControlTemplate> 194 <Canvas Name="canvas" Background="#FF8E9090" Width="40" Height="20"> 195 <TextBlock HorizontalAlignment="Left" 196 VerticalAlignment="Center" 197 Canvas.Top="1" 198 Text="{TemplateBinding HeaderedContentControl.Header}" 199 Canvas.Left="2"> 200 </TextBlock> 201 </Canvas> 202 </ControlTemplate> 203 </Setter.Value> 204 </Setter> 205 <Setter Property="TabItem.FontWeight" Value="Bold"/> 206 <Setter Property="TabItem.Foreground" Value="White"/> 207 </Trigger> 208 209 <Trigger Property="TabItem.IsSelected" Value="False"> 210 <Setter Property="TabItem.Template" > 211 <Setter.Value> 212 <ControlTemplate> 213 <Canvas Name="canvas" Background="#0F8E9090" Width="40" Height="20"> 214 <TextBlock HorizontalAlignment="Left" 215 VerticalAlignment="Center" 216 Canvas.Top="1" 217 Text="{TemplateBinding HeaderedContentControl.Header}" 218 Canvas.Left="2"> 219 </TextBlock> 220 </Canvas> 221 </ControlTemplate> 222 </Setter.Value> 223 </Setter> 224 <Setter Property="TabItem.FontWeight" Value="Bold"/> 225 <Setter Property="TabItem.Foreground" Value="White"/> 226 </Trigger> 227 </Style.Triggers> 228 </Style> 229 </ResourceDictionary>
这个项目有碰到一个比较棘手的问题就是当初需要修改TabItemStyle的样式，我给他设置了颜色就是不能铺满，在网络上也找了很久，尝试都没有效果，最后还是在msdn的论坛上找到一个解决方案。为了避免重复造轮子，特分享这一次的代码。
<Style x:Key="TabItemStyle1"> <Style.Triggers> <Trigger Property="TabItem.IsSelected" Value="True"> <Setter Property="TabItem.Template" > <Setter.Value> <ControlTemplate> <Canvas Name="canvas" Background="#FF8E9090" Width="40" Height="20"> <TextBlock HorizontalAlignment="Left" VerticalAlignment="Center" Canvas.Top="1" Text="{TemplateBinding HeaderedContentControl.Header}" Canvas.Left="2"> </TextBlock> </Canvas> </ControlTemplate> </Setter.Value> </Setter> <Setter Property="TabItem.FontWeight" Value="Bold"/> <Setter Property="TabItem.Foreground" Value="White"/> </Trigger> <Trigger Property="TabItem.IsSelected" Value="False"> <Setter Property="TabItem.Template" > <Setter.Value> <ControlTemplate> <Canvas Name="canvas" Background="#0F8E9090" Width="40" Height="20"> <TextBlock HorizontalAlignment="Left" VerticalAlignment="Center" Canvas.Top="1" Text="{TemplateBinding HeaderedContentControl.Header}" Canvas.Left="2"> </TextBlock> </Canvas> </ControlTemplate> </Setter.Value> </Setter> <Setter Property="TabItem.FontWeight" Value="Bold"/> <Setter Property="TabItem.Foreground" Value="White"/> </Trigger> </Style.Triggers> </Style>