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

发布时间:2014-10-22 19:12:57编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"WindowsPhone8 ListBox 实现手风琴折叠菜单效果",主要涉及到WindowsPhone8 ListBox 实现手风琴折叠菜单效果方面的内容,对于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> 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://download.csdn.net/download/yimiyuangguang/6945069 以上案例仅供学习参考,如有不足之处还请提出指正,谢谢! 效果图如下:


上一篇:
下一篇:黑马程序员_考核技术日志2_IO篇之字符流的处理进程及字符流的缓冲区

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款