C# WPF透明黑色样式窗口

在做微信公众平台的同时,还有另外一个开发的事情在我身上,就是在类似字典的东西,我觉得做成一般的样子,没什么新颖,我想把它改进成漂亮一点的,比如是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>

 

posted @ 2013-04-27 14:02 重庆Debug 阅读(...) 评论(...) 编辑 收藏