WindowsPhone8 ListBox 实现手风琴折叠菜单效果

WindowsPhone8 ListBox 实现手风琴折叠菜单效果

  XAML示例代码如下：

 <!--应用程序资源-->
    <application resources="">
        <local:localizedstrings xmlns:local="clr-namespace:WeatherApp" x:key="LocalizedStrings">


        <!-- 头部模板样式 -->
        <style x:key="HeadCss" targettype="TextBlock"><setter property="FontSize" value="40"/>
            <setter property="VerticalAlignment" value="Center"/></style>

        <!-- 内容面板样式 -->
        <style x:key="HeadContentCss" targettype="StackPanel"><setter property="Margin" value="0,-8,0,0"/></style>

        <!-- 天气图片样式 -->
        <style x:key="spTwoDaysCss_img" targettype="Image"><setter property="Width" value="125"/>
            <setter property="Height" value="90"/>
            <setter property="Stretch" value="UniformToFill"/></style>

        <!-- 文本样式 -->
        <style x:key="spTwoDaysCss_txt" targettype="TextBlock"><setter property="FontSize" value="25"/>
            <setter property="Foreground" value="White"/>
            <setter property="TextWrapping" value="Wrap"/></style>

        <!-- 底部菜单样式 -->
        <style x:key="MenuCss" targettype="Border"><setter property="Width" value="480"/>
            <setter property="Height" value="43.5"/>
            <setter property="Margin" value="0,0,2,0"/>
            <setter property="Opacity" value="0.85"/>
            <setter property="BorderBrush" value="Black"/>
            <setter property="BorderThickness" value="0,0,0,1"/></style>

        <!-- 底部菜单文本样式 -->
        <style x:key="MenuCssText" targettype="TextBlock"><setter property="Width" value="155"/>
            <setter property="FontSize" value="25"/>
            <setter property="Margin" value="10,2,0,0"/>
            <setter property="FontWeight" value="Bold"/>
            <setter property="Foreground" value="Black"/>
            <setter property="HorizontalAlignment" value="Left"/>
            <setter property="VerticalAlignment" value="Center"/></style>

        <!-- 底部菜单图片样式  -->
        <style x:key="MenuCssImage" targettype="Image"><setter property="Width" value="35"/>
            <setter property="Height" value="35"/>
            <setter property="Stretch" value="Uniform"/>
            <setter property="Margin" value="5,3,0,0"/>
            <setter property="Source" value="/Images/new.png"/>
            <setter property="VerticalAlignment" value="Center"/>
            <setter property="HorizontalAlignment" value="Right"/></style>

        <!-- 底部内容样式 -->
        <style x:key="ContentCss" targettype="ScrollViewer"><setter property="Opacity" value="1"/>
            <setter property="Height" value="350"/>
            <setter property="Width" value="480"/>
            <setter property="Background" value="Black"/>
            <setter property="Visibility" value="Collapsed"/>
            <setter property="VerticalScrollBarVisibility" value="Hidden"/>
            <setter property="HorizontalScrollBarVisibility" value="Disabled"/></style>

        <!-- 搜索面板样式 -->
        <style x:key="popSearchCss" targettype="Popup"><setter property="Width" value="450"/>
            <setter property="IsOpen" value="False"/>
            <setter property="Margin" value="-28,150,0,0"/>
            <setter property="VerticalAlignment" value="Top"/>
            <setter property="HorizontalAlignment" value="Center"/></style>

        <!-- 城市列表图片 更多 -->
        <style x:key="CityListImage" targettype="Image"><setter property="Width" value="35"/>
            <setter property="Height" value="35"/>
            <setter property="Stretch" value="Uniform"/>
            <setter property="Margin" value="5,3,0,0"/>
            <setter property="VerticalAlignment" value="Center"/>
            <setter property="HorizontalAlignment" value="Right"/></style>

        <!-- 城市列表文本 -->
        <style x:key="CityListText" targettype="TextBlock"><setter property="FontSize" value="25"/>
            <setter property="Margin" value="5,2,0,0"/>
            <setter property="FontWeight" value="Bold"/>
            <setter property="Foreground" value="White"/>
            <setter property="HorizontalAlignment" value="Left"/>
            <setter property="VerticalAlignment" value="Center"/></style>

<!-- 生活指数 -->
 <ListBox Name="lboLifeData">
         <!-- 内容由 MyLifeListBoxitem 数据绑定 -->
 </ListBox>

CS示例代码如下：

               //生活指数
                String[] lift = _currentApp._address.lifeInfo.Split('\n').ToArray();
                Dictionary<String, String> dic = new Dictionary<string, string>() { };
                if (lift != null)
                {
                    for (int i = 0, len = lift.Length; i < len; i++)
                    {
                        String[] lift2 = lift[i].Split('：').ToArray();
                        if (lift2.Length == 2 && !dic.Keys.Contains(lift2[0].Trim()))
                        {
                            dic[lift2[0].Trim()] = lift2[1].Trim();
                        }
                    }
                }
                if (dic != null)
                {
                    //清空
                    this.lboLifeData.Items.Clear();

                    int i = 0;
                    foreach (var item in dic)
                    {
                        MyLifeListBoxitem lbitem = new MyLifeListBoxitem(item.Key, item.Value, i);
                        this.lboLifeData.Items.Add(lbitem);
                        i++;
                    }
                }




 public class MyLifeListBoxitem : ListBoxItem
    {
        #region 全局变量
        private int j = new int();

        //定义文本
        private TextBlock tbk = new TextBlock();

        //定义图片
        private Image img = new Image();

        //定义边框 Border
        private Border bd = new Border();

        //定义父面板
        private StackPanel spFather = new StackPanel();

        //定义表头面板
        private StackPanel spHead = new StackPanel();

        //定义内容视图
        private ScrollViewer svContent = new ScrollViewer();
        #endregion


         /// <summary>
        /// 构造函数
        /// </summary>
        /// <param name="key">key</param>
        /// <param name="value">value</param>
        /// <param name="i"></param><param name="i" />
        public MyLifeListBoxitem(String key, String value, int i)
        {
            j = i;

            //填充数据
            if (!String.IsNullOrEmpty(key))
            {
                /***** 表头 *****/
                tbk = new TextBlock();
                tbk.Text = key;
                tbk.Style = (System.Windows.Style)Application.Current.Resources["MenuCssText"];

                img = new Image();
                img.Style = (System.Windows.Style)Application.Current.Resources["MenuCssImage"];
                img.ManipulationStarted += img_ManipulationStarted;

                spHead = new StackPanel();
                spHead.Orientation = Orientation.Horizontal;
                spHead.Children.Add(img);
                spHead.Children.Add(tbk);

                /***** 内容 *****/
                tbk = new TextBlock();
                tbk.Text = value;
                tbk.TextWrapping = TextWrapping.Wrap;
                tbk.Style = (System.Windows.Style)Application.Current.Resources["spTwoDaysCss_txt"];

                svContent = new ScrollViewer();
                svContent.Name = "sv_" + i;
                svContent.Style = (System.Windows.Style)Application.Current.Resources["ContentCss"];
                svContent.Content = tbk;

                /***** 父面板 *****/
                spFather = new StackPanel();
                spFather.Background = new SolidColorBrush(Colors.Orange);
                spFather.Orientation = Orientation.Vertical;
                spFather.Opacity = 0.85;
                spFather.Children.Add(spHead);
                spFather.Children.Add(svContent);

                /***** 边框 *****/
                bd = new Border();
                bd.Style = (System.Windows.Style)Application.Current.Resources["MenuCss"];
                bd.Child = spFather;

                this.Content = bd;
            }
        }


        /// <summary>
        /// 选项卡伸展/收缩事件
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        public void img_ManipulationStarted(object sender, System.Windows.Input.ManipulationStartedEventArgs e)
        {
            Image img = (Image)sender;

            if (img != null)
            {
                Border bd = (Border)((StackPanel)((StackPanel)img.Parent).Parent).Parent;
                ScrollViewer sv = (ScrollViewer)bd.FindName("sv_" + j);

                if (((System.Windows.Media.Imaging.BitmapImage)(img.Source)).UriSource.ToString() == "/Images/new.png")
                {
                    img.Source = new BitmapImage(new Uri("/Images/minus.png", UriKind.Relative));
                    bd.Height += 350;
                    sv.Visibility = System.Windows.Visibility.Visible;
                }
                else
                {
                    img.Source = new BitmapImage(new Uri("/Images/new.png", UriKind.Relative));
                    bd.Height -= 350;
                    sv.Visibility = System.Windows.Visibility.Collapsed;
                }
            }

            e.Complete();
            e.Handled = true;
        }
    }

源码下载地址： http://pan.baidu.com/s/1je2n0

以上案例仅供学习参考，如有不足之处还请提出指正，谢谢！

效果图如下：