WPF—QQ界面（二）：QQ状态切换效果的实现

状态切换效果的分析：

1，当鼠标左键单击图表，会弹出一个包含各种状态的下拉菜单；

2，每个下拉菜单的选项卡都由一个状态图标和一段对状态描述的文字组成；

3，左键单击任何一个选项卡，都能将该选项卡对应的状态图标替换到最上面的初始状态。

为了实现这种效果，我去了解了几个可能能做出类似效果的控件，包括comboBox，treeView等，最后发现还是Menu最能令我满意。

先贴代码：

前台xaml设计器代码：

<Menu Grid.Column="1"  Width="25" Height="25" Background="Transparent" Margin="2,0,-0.5,0">
                <MenuItem  Foreground="Green">
                    <MenuItem.Icon >
                        <Image Source="emotion/online2.png" Name="InitialPic"/>
                    </MenuItem.Icon>
                    <MenuItem Click="Online_Click" >
                        <MenuItem.Header>
                            <TextBlock Text="我在线上"/>
                        </MenuItem.Header>
                        <MenuItem.Icon>
                            <Image  Source="emotion/online2.png" />
                        </MenuItem.Icon>
                    </MenuItem>
                    <MenuItem Click="Smile_face_Click">
                        <MenuItem.Header>
                            <TextBlock Text="Q我吧"/>
                        </MenuItem.Header>
                        <MenuItem.Icon>
                            <Image Source="emotion/smile_face2.png" />
                        </MenuItem.Icon>
                    </MenuItem>
                    <MenuItem Click="away_Click">
                        <MenuItem.Header>
                            <TextBlock Text="离开"/>
                        </MenuItem.Header>
                        <MenuItem.Icon>
                            <Image Source="emotion/away2.png" />
                        </MenuItem.Icon>
                    </MenuItem>
                    <MenuItem Click="busy_Click">
                        <MenuItem.Header>
                            <TextBlock Text="忙碌"/>
                        </MenuItem.Header>
                        <MenuItem.Icon>
                            <Image Source="emotion/busy2.png" />
                        </MenuItem.Icon>
                    </MenuItem>
                    <MenuItem Click="not_disturb_Click">
                        <MenuItem.Header>
                            <TextBlock Text="请勿打扰"/>
                        </MenuItem.Header>
                        <MenuItem.Icon>
                            <Image Source="emotion/not_disturb2.png" />
                        </MenuItem.Icon>
                    </MenuItem >
                    <MenuItem Click="offline_Click">
                        <MenuItem.Header>
                            <TextBlock Text="离线"/>
                        </MenuItem.Header>
                        <MenuItem.Icon>
                            <Image Source="emotion/offline2.png" />
                        </MenuItem.Icon>
                    </MenuItem>
                </MenuItem>
            </Menu>

 

后台click事件处理的代码：

private void Online_Click(object sender, RoutedEventArgs e)
        {
            InitialPic.Source = new BitmapImage(new Uri("emotion/online2.png", UriKind.Relative));
        }

        private void Smile_face_Click(object sender, RoutedEventArgs e)
        {
            InitialPic.Source = new BitmapImage(new Uri("emotion/smile_face2.png", UriKind.Relative));
        }

        private void away_Click(object sender, RoutedEventArgs e)
        {
            InitialPic.Source = new BitmapImage(new Uri("emotion/away2.png", UriKind.Relative));
        }

        private void busy_Click(object sender, RoutedEventArgs e)
        {
            InitialPic.Source = new BitmapImage(new Uri("emotion/busy2.png", UriKind.Relative));
        }

        private void not_disturb_Click(object sender, RoutedEventArgs e)
        {
            InitialPic.Source = new BitmapImage(new Uri("emotion/not_disturb2.png", UriKind.Relative));
        }

        private void offline_Click(object sender, RoutedEventArgs e)
        {
            InitialPic.Source = new BitmapImage(new Uri("emotion/offline2.png", UriKind.Relative));
        }

选择Menu的理由：

因为一个Menu可以有多个MenuItem，一个MenuItem就对应于下拉菜单中的一个选项卡，

而MenuItem中的 Icon 和 Header 就对应于选项卡中的状态图标和文字描述两部分，非常符合我的想法。

接着再给每个MenuItem添加Click事件，

每个click事件就是用URI（统一资源标识）的相对路径将 “初始化状态图标的图片源” 替换成 “被单击的选项卡的状态图标的图片源”，“初始化状态图标的图片源” 我一直设置成“在线”状态。

最终效果如下：