示例UI效果:

 

具体代码:

<!-- 焦点样式,边距2,1像素宽度的淡蓝色虚线 -->
<Style x:Key="FocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="2" StrokeThickness="1" Stroke="LightBlue" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

<!-- 选项卡容器样式,无边距的选项卡样式 -->
<Style x:Key="TabControlStyle" TargetType="{x:Type TabControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="ColumnDefinition0"/>
<ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition x:Name="RowDefinition0" Height="Auto"/>
<RowDefinition x:Name="RowDefinition1" Height="*"/>
</Grid.RowDefinitions>
<TabPanel x:Name="HeaderPanel" Grid.Column="0" IsItemsHost="true" Margin="0" Background="#FF212121" Grid.Row="0" />
<Border x:Name="ContentPanel" BorderThickness="0" Background="#FF424242" Grid.Column="0" Grid.Row="1">
<ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="0" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- 选项卡标签样式,宽度为120,高度40的定死的选项卡标签 -->
<Style x:Key="TabItemStyle" TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid Width="120" Height="40">
<Border x:Name="Border" BorderThickness="0" CornerRadius="0">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="12,6,12,6" />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Border" Property="Background" Value="#FF424242" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Border" Property="Background" Value="#FF212121" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

<!--定义按钮样式,最简单的纯色按钮,改下颜色即可实现-->
<Style TargetType="Button">
<Setter Property="Foreground" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="back" CornerRadius="5" BorderBrush="#FF03A9F4" BorderThickness="2" Background="#FF03A9F4">
<ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center" Content="{TemplateBinding Content}" >
</ContentPresenter>
</Border>
<!--触发器-->
<ControlTemplate.Triggers>
<!--鼠标移入移出-->
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="back" Property="Background" Value="#FF0277BD" />
<Setter TargetName="back" Property="BorderBrush" Value="#FF0277BD" />
</Trigger>
<!--按钮按下弹起-->
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="back" Property="BorderBrush" Value="#FF0277BD" />
<Setter TargetName="back" Property="Background" Value="#00000000" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

posted on 2015-01-22 17:27  HalfmanG2  阅读(925)  评论(0编辑  收藏  举报