使用Blend設計出符合效果的WPF界面

之前不會用blend，感覺好難的，但美工給出的效果自己有沒辦法實現，所以研究了一下blend，感覺沒有想象中的那么難

廢話不多說，開始界面設計

今天拿到美工給的一個界面效果圖

這個界面說實話，還可以吧，勉強說得過去。拿到界面效果圖，難的兩個部分都讓我框起來的，這一看就是wpf里面的控件TabControl美化而來，其他部分都是很好弄得，這一篇我們下來美化一個tabControl控件。如下圖:

這里我們借助vs 2015 自帶的blend，，這個軟件安裝vs2015就會默認安裝上。

我們來新建一個wpf項目，然后在里面修改這個控件

這是我的blend for vs2015

根據圖中的標識，我們拖拽一個TabControl控件到界面上去，然后調整好大小，如下圖:

接下來我們就拿它開刀吧

首先分析，明顯的TabItem部分不符合我們的要求，這樣我們就編輯這部分樣式即可

 

 這樣我們可以看到代碼會變為如下

<Grid>
        <TabControl x:Name="tabControl" Margin="97.847,87.164,121.924,82.721">
            <TabItem Header="TabItem" Style="{DynamicResource TabItemStyle1}">
                <Grid Background="#FFE5E5E5"/>
            </TabItem>
            <TabItem Header="TabItem" Style="{DynamicResource TabItemStyle1}">
                <Grid Background="#FFE5E5E5"/>
            </TabItem>
        </TabControl>

    </Grid>

后面的一個樣式是我后加上去的，這樣方便查看效果

我們在樣式中找到key=”TabItemStyle1”，這個樣式就決定了我們現在TabItem展示樣式。

我們可以看到，這個樣式中有個邊框，我們可以在樣式中找到這個邊框，然后去掉它，看樣是

 <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,0" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
                                <ContentPresenter x:Name="Content" ContentSource="Header" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
                            </Border>

修改為

 <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,0,0,0" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
                                <ContentPresenter x:Name="Content" ContentSource="Header" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
                            </Border>

現在就可以看到邊框消失了

下面我們將背景圖改為白色，我們先來看他目前的背景顏色定義 <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>，這個就是定義了背景顏色，下面我們修改key=ButtonNormalBackground的顏色即可修改TabItem的背景顏色了。

我們可以找到現在定義為：

<LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#F3F3F3" Offset="0"/>
            <GradientStop Color="#EBEBEB" Offset="0.5"/>
            <GradientStop Color="#DDDDDD" Offset="0.5"/>
            <GradientStop Color="#CDCDCD" Offset="1"/>
        </LinearGradientBrush>

我們把漸變去掉，只要白色即可修改為：<SolidColorBrush x:Key="ButtonNormalBackground" Color="White"/>，現在我們再來看效果

，怎么樣，是不是接近了美工給的效果圖呢，好吧，還是差挺多，我們繼續修改

TabItem下面有個橫線，而選中的下面還有個粗橫線，並且被選中額TabItem文字為淺藍色背景，接下來我們逐一進行修改。

先來添加TabItem下面的橫線，我們可以看到這個橫線在TabItem與下面的面板之間，所以我們不能修改TabItem來添加這條橫線，所以我們來修改整個TabControl的樣式，

在代碼中查找新生成的TabControlStyle1樣式

我們可以看到以下代碼

<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="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>
                            <Border x:Name="ContentPanel" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="0" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="1" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">
                                <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                            </Border>
                        </Grid>

我們可以分析看出，控件是分了兩行兩列，TabItem在上面一行，Panel放在了下面一樣，我們可以巧妙的加入一個Grid控件（將兩行改為3行，Grid放在第二行，而原來的panel改為第三行），並設置背景顏色，及高度，然后讓Grid控件位於TabItem及panel之間，代碼如下

<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="RowDefinition2" Height="Auto"/>
                                <RowDefinition x:Name="RowDefinition1" Height="*"/>
                            </Grid.RowDefinitions>
                            <TabPanel x:Name="HeaderPanel" Grid.Column="0" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>
                            <Grid Grid.Row="1" Background="#A8D3FE" VerticalAlignment="Top" Height="2">
                                
                            </Grid>
                            <Border x:Name="ContentPanel" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="0" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="2" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">
                                <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                            </Border>
                        </Grid>

現在我們再來看一下效果

是不是離成功又進了一步呢，下面我們來添加選中狀態下的比較粗的下划線

這次我們又該回來修改TabItem的樣式了。

在代碼中找到如下：

<Trigger Property="IsSelected" Value="true">
       <Setter Property="Panel.ZIndex" Value="1"/>
       <Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemSelectedBackground}"/>
</Trigger>

 這個樣式定義了被選中是的狀態，這樣我們可以在TabItem中添加一個粗的下划線，平時的時候讓其hidden，而選中時隱藏。同樣這個下划線使用Grid控件來構造

代碼修改后如下:

<Grid SnapsToDevicePixels="true">
                           
     <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,0,0,0" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
              <ContentPresenter x:Name="Content" ContentSource="Header" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
     </Border>
     <Grid Height="3" x:Name="bottomLine" VerticalAlignment="Bottom" Background="#498FD7" Visibility="Hidden">
      </Grid>
</Grid>

注意，上面的代碼只由6,7行是后添加的

下面我們來修改被選中狀態的屬性值

<Trigger Property="IsSelected" Value="true">
     <Setter Property="Panel.ZIndex" Value="1"/>
     <Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemSelectedBackground}"/>
     <Setter Property="Visibility" TargetName="bottomLine" Value="Visible"/>
</Trigger>

同樣需要注意的是，只有第4行是我后添加的代碼

現在我們可以來看下效果了

怎么樣，已經無限接近了吧，還剩下一個被選中狀態是文字的顏色，我想大家都知道怎么修改了吧。

來，這就修改一下，添加一行代碼即可，

 <Setter Property="Foreground" Value="#498FD7"/>

好了，這個簡單的控件樣式到此就全部結束了

是不是跟美工設計的差不多呢，如果運行起來看，還有些地方需要修改，例如鼠標在頭部懸浮，頭部的樣式就會發生變化，這樣我們還需要繼續修改樣式。

我們可以通過刪除一行代碼就可以達到效果了

<Trigger Property="IsMouseOver" Value="true">
                                <!--
                                <Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemHotBackground}"/>
                                -->
                            </Trigger>

over，有時間我還會將美工設計的另一個控件美化篇貼出來