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
以上案例仅供学习参考，如有不足之处还请提出指正，谢谢！
效果图如下：
![Unity创建按钮点击实现菜单显示和隐藏[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)