WPF—QQ介面（五）：QQ好友分組列表的效果實現 及 截稿

標籤：

效果分析：

1、滑鼠左鍵單擊 分組 的組名，能夠彈出一個下拉式清單，並且左邊的向右箭頭轉成向下；

2、彈出的下拉式清單中包含好友的頭像，好友的暱稱，還有好友的個性簽名或最新動向；

3、當滑鼠移到好友這一行，能夠將一行的背景色置藍或置橙；

4、當滑鼠移到好友的頭像上，能夠懸浮顯示好友的個人資訊。

除了這些基本的效果，還有很多效果蘊含其中。。。。感覺分組列表的效果最難做。

我大致做出了那樣的效果，很不美觀。沒達到一樣的效果，就不分析思路了，以免誤人子弟。

用的是ScrollViewer

前台：

<ScrollViewer VerticalScrollBarVisibility="Auto" Margin="8,0,10,10" Background="Transparent">                <ScrollViewer.Content>                    <StackPanel Width="230" Orientation="Vertical" HorizontalAlignment="Left" VerticalAlignment="Top" Name="FriendListControl"/>                </ScrollViewer.Content>            </ScrollViewer>

後台：

private void Window_Loaded(object sender,RoutedEventArgs e)        {            Test.GetGroupList().ToList().ForEach(s =>            {                Expander t = new Expander();                t.Header = s;                t.HeaderTemplate = this.FindResource("ExpanderHeaderTemplate") as DataTemplate;                ListView v = new ListView();                v.ItemsSource = s.Children;                v.Width = 280;                v.BorderThickness = new Thickness(0);                v.ItemTemplate = this.FindResource("FriendList") as DataTemplate;                v.SelectionMode = SelectionMode.Single;                t.Content = v;                FriendListControl.Children.Add(t);                //object obj = this.FindResource("TextBlockStateStyle");                            });        }

後台代碼中出現了幾個自訂的資源字典，包括 ExpanderHeaderTemplate  和  FriendList 。

資源字典 （ResourceDictionary）代碼如下：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">    <DataTemplate x:Key="FriendList">        <Grid>            <Grid.RowDefinitions>                <RowDefinition Height="20"/>                <RowDefinition Height="20"/>            </Grid.RowDefinitions>            <Grid.ColumnDefinitions>                <ColumnDefinition Width="40"/>                <ColumnDefinition Width="130"/>            </Grid.ColumnDefinitions>            <Image Grid.Column="0" Grid.RowSpan="2" Source="NewFolder/basicQQ.jpg"/>  <!--好友名單的頭像圖片-->            <TextBlock Text="{Binding Path=Name}" Margin="5,1,0,1" Grid.Column="1" Grid.Row="0" TextAlignment="Left"/>            <TextBlock Text="{Binding Path=Signature}" Margin="5,1,0,1" Grid.Column="1" Grid.Row="1" TextAlignment="Left"/>        </Grid>    </DataTemplate>    <DataTemplate x:Key="ExpanderHeaderTemplate">        <WrapPanel>            <TextBlock Text="{Binding Path=Name}" TextAlignment="Left"></TextBlock>            <TextBlock Text="[" TextAlignment="Left"></TextBlock>            <TextBlock Text="{Binding Path=OnlineFriendNum}" TextAlignment="Left"></TextBlock>            <TextBlock Text="/" TextAlignment="Left"></TextBlock>            <TextBlock Text="{Binding Path=TotalFriendNum}" TextAlignment="Left"></TextBlock>            <TextBlock Text="]" TextAlignment="Left"></TextBlock>        </WrapPanel>    </DataTemplate>    <Style x:Key="TextBlockStateStyle" TargetType="{x:Type TextBlock}">        <Setter Property="FontFamily" Value="宋體"/>        <Setter Property="FontSize" Value="18"/>        <Setter Property="Foreground" Value="#FF000000"/>        <Style.Triggers>            <Trigger Property="IsMouseOver" Value="True">                <Setter Property="BitmapEffect">                    <Setter.Value>                        <OuterGlowBitmapEffect GlowSize="3" GlowColor="#FFFFFF"/>                    </Setter.Value>                </Setter>            </Trigger>        </Style.Triggers>    </Style></ResourceDictionary>

最後那個 DataTemplate 多餘了，TextBlockStateStyle 請自行忽略。

 

最後附上我在github上的源碼地址：https://github.com/Danieldong0802/QQpresentation  

雖是半成品，也是花上我這個初學者的好多時間才完成的，很多不足之處，望各位前輩指教！

WPF—QQ介面（五）：QQ好友分組列表的效果實現 及 截稿