新手用WPF山寨QQ管家7.6（一）

      剛剛入門WPF，界面方面參考《基於Expression Blend 4中文版WPF和Silverlight項目設計基礎》 一書學了一些，由於本人不是搞前台設計的，可是WPF做前台確實蠻好，加上公司要求做一個比較炫的界面，所以最后決定參考QQ管家的界面來做，接下來就是分享一下我這個新手邊學邊做的過程，因為都是笨辦法來畫，所以代碼難免存在冗余.....

先來展示一下目前的成果吧~~2013-04-10

額....導航圖標隨便找的，湊合湊合

支持換膚，不是完全按照QQ管家界面走的，大部分包含的界面做了些，尤其是項目中可能用到的

1.導航TabItem的制作：

打開Blend4新建個WPF項目，然后在MainWindow里畫一個Border，並設置BorderThickness="0.7" CornerRadius="5"  BorderBrush="Transparent"分別表示線、圓角、邊框透明。

在屬性面板里設置Border背景色為線性漸變，顏色設置成你想要的效果，但是最后要都變成透明，因為這里不做設計，后面做MouseOver觸發效果的時候，系統會自動給你生成默認狀態下的顏色，比如黑色，到時候返回頭再做就浪費時間了，這是個人體會，可能還有更高明的辦法吧~

在Border里放一個Grid，並分2行RowDefinition，上面放導航圖片，下面寫對應文本。

圈住Border包裹住的這些控件，然后在選工具->構成控件，選擇TabItem，可以生成在當前Window下，也可以直接生成到全局，個人感覺在當前Window下設計比較方便，之后再剪切到資源字典里。

按F6切換到設計界面，方便做效果，如圖：

 

 

Blend4設計界面

“觸發器”界面里能添加和修改針對控件的點擊、焦點、可用、鼠標移動等事件，選擇IsMouseOver=True屬性，然后在下面的“激活時的操作”點+號，就能添加一個故事版了，不過名字是系統給起的，個人推薦在“對象和時間線”里先添加一個命名好的故事版再在觸發器里選擇剛才添加的比較好，這樣不會再到代碼里手動修改名字。

可能會有發現IsMouseOver=False在觸發器里不能寫成True，那么手動在代碼里改，添加好“激活時操作”，別忘了在“取消激活時的操作”里添加同樣的故事版，並設置為Remove，如果是做的時間漸變效果就單獨做一個故事版來做消失效果，在“取消激活時的操作”里指定故事版並Begin。

選好故事版就能開始設計針對不同觸發器的效果了，在“對象和時間線”選擇要設計的元素Border分別修改將之前做的邊框和背景色變為可見。

在時間線上會出現一個原點表示在當前時刻觸發，如果想做一個0.5秒漸變出現的效果就先把黃色指針放到0.5然后修改邊框和背景色。

IsPressed點擊事件可以把MouseOver最后的動畫點復制過來，再加深顏色或者其他想要的效果，這樣過度會好，尤其是有時間的漸變，個人觀點....

樣品展示

再細節的地方就不寫啦，看看代碼，自己多點點就明白了，反正我這都是笨辦法，最后也沒做出跟官方類似的效果，但是也有70%吧~

 最后把做好的TabItem引用到TabControl中，Style="{DynamicResource NavTabItem}"， DynamicResource和StaticResource的區別百度找找，基本就是換膚的時候DynamicResource會跟着換，StaticResource不會。

 

<!--選項卡導航-->
    <Style x:Key="NavTabItem" TargetType="{x:Type TabItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <ControlTemplate.Resources>
                        <Storyboard x:Key="TabItemMouseOver">
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border">
                                <EasingColorKeyFrame KeyTime="0" Value="#8C454545"/>
                            </ColorAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="border">
                                <EasingColorKeyFrame KeyTime="0" Value="#4CFFFFFF"/>
                            </ColorAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="border">
                                <EasingColorKeyFrame KeyTime="0" Value="#19FFFFFF"/>
                            </ColorAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[2].(GradientStop.Offset)" Storyboard.TargetName="border">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0.217"/>
                            </DoubleAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="border">
                                <EasingColorKeyFrame KeyTime="0" Value="#26FFFFFF"/>
                            </ColorAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[3].(GradientStop.Offset)" Storyboard.TargetName="border">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0.888"/>
                            </DoubleAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="border">
                                <EasingColorKeyFrame KeyTime="0" Value="#0CFFFFFF"/>
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                        <Storyboard x:Key="TabItemSelected">
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border">
                                <EasingColorKeyFrame KeyTime="0" Value="#CC3D3B3B"/>
                            </ColorAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="border">
                                <EasingColorKeyFrame KeyTime="0" Value="#7FFFFFFF"/>
                            </ColorAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="border">
                                <EasingColorKeyFrame KeyTime="0" Value="#66FFFFFF"/>
                            </ColorAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[2].(GradientStop.Offset)" Storyboard.TargetName="border">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0.104"/>
                            </DoubleAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="border">
                                <EasingColorKeyFrame KeyTime="0" Value="#66FFFFFF"/>
                            </ColorAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[3].(GradientStop.Offset)" Storyboard.TargetName="border">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0.892"/>
                            </DoubleAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="border">
                                <EasingColorKeyFrame KeyTime="0" Value="#19FFFFFF"/>
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                    </ControlTemplate.Resources>
                    <Grid>
                        <Border x:Name="border" BorderThickness="0.7" CornerRadius="5" BorderBrush="Transparent">
                            <Border.Background>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="Transparent" Offset="0"/>
                                    <GradientStop Color="Transparent" Offset="1"/>
                                    <GradientStop Color="Transparent" Offset="0.847"/>
                                    <GradientStop Color="Transparent" Offset="0.928"/>
                                </LinearGradientBrush>
                            </Border.Background>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="20"/>
                                </Grid.RowDefinitions>
                                <Image Height="47" Source="Resource/Image/11.png"/>
                                <TextBlock Grid.Row="1" Height="15" Foreground="White" Text="日歷" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                            </Grid>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Trigger.ExitActions>
                                <RemoveStoryboard BeginStoryboardName="TabItemMouseOver_BeginStoryboard"/>
                            </Trigger.ExitActions>
                            <Trigger.EnterActions>
                                <BeginStoryboard x:Name="TabItemMouseOver_BeginStoryboard" Storyboard="{StaticResource TabItemMouseOver}"/>
                            </Trigger.EnterActions>
                        </Trigger>
                        <Trigger Property="Selector.IsSelected" Value="True">
                            <Trigger.ExitActions>
                                <RemoveStoryboard BeginStoryboardName="TabItemSelected_BeginStoryboard"/>
                            </Trigger.ExitActions>
                            <Trigger.EnterActions>
                                <BeginStoryboard x:Name="TabItemSelected_BeginStoryboard" Storyboard="{StaticResource TabItemSelected}"/>
                            </Trigger.EnterActions>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

我做的這個TabItem不可重用，意思就是你有多少個選項卡就復制出多少個，改圖片和文本，而不能在XAML代碼里分別引用相同的style來自定義圖片，只能在資源字典里整，可能比較麻煩吧，我也不知道有啥好辦法沒，反正這樣做我也方便后期修改不同選項卡的圖片或文本。

TabItem內包含的Grid，我設置了Margin=10，為了后期在Grid中嵌套Frame引用Page，並且做背景漸進透明效果，記得在Frame上加NavigationUIVisibility="Hidden" 屏蔽Page導航條。

Blend4會自動生成一些沒用的代碼，可以手動刪掉，修改調整后放到資源字典，熟悉代碼的也可以自己直接修改細節而不需要工具的輔助。