之前听说很多大神的成长之路,几乎都有个习惯——写博文，可以有效的对项目进行总结、从而提高开发的经验。所以初学WPF的我想试试,顺便提高一下小学作文的能力。O(∩_∩)O哈哈~
读万卷书不如行万里路，实践是最好的导师！最近在学习WPF,也尝试着做了一些小Demo,但并没有真正的使用WPF的开发模式——数据推动UI,最近偶然的机会也是工作需求，就尝试着写了一个简易的手风琴控件，
因为初学的原因，可能在逻辑上，代码上有些欠缺，还请大神们多多指点，在这里先感谢各位！(下面是效果图)
剖析效果，拆分控件，我当时的想法是Grid容器+基本控件进行手绘、最后在添加一些展开收起的动画，想法很美好，现实很残酷！后来询问了一下大神，给出的建议是ListBox+Expander实现,就这样在大神们的指点下开始了。
数据结构ExpanderClass类：标题图片、标题名称、按钮图片集合 ； ImgUrlClass类：按钮图片。
public class DataSourceClass { /// <summary> /// 数据源 /// </summary> public static List<ExpanderClass> GetDateSource() { List<ExpanderClass> exLst = new List<ExpanderClass>(); List<ImgUrlClass> lst = new List<ImgUrlClass>(); for (int i = 1; i < 10; i++) { lst.Add(new ImgUrlClass() { ImageUrl = string.Format("Images/h{0}.png", i) }); } exLst.Add(new ExpanderClass() { Title = "我是第一行哦！", ImgUrl = "Images/Left.png", ImgLst = lst }); lst = new List<ImgUrlClass>(); for (int i = 1; i < 10; i++) { lst.Add(new ImgUrlClass() { ImageUrl = string.Format("Images/h1{0}.png", i) }); } exLst.Add(new ExpanderClass() { Title = "我是第二行哦！！", ImgUrl = "Images/Right.png", ImgLst = lst }); lst = new List<ImgUrlClass>(); for (int i = 1; i < 10; i++) { lst.Add(new ImgUrlClass() { ImageUrl = "Images/h10.png" }); } exLst.Add(new ExpanderClass() { Title = "我是第三行哦！！！", ImgUrl = "Images/Up.png", ImgLst = lst }); return exLst; } } public class ExpanderClass { /// <summary> /// 标题 /// </summary> public string Title { get; set; } /// <summary> /// 标题图片 /// </summary> public string ImgUrl { get; set; } /// <summary> /// 按钮图片集合 /// </summary> public List<ImgUrlClass> ImgLst { get; set; } public ExpanderClass() { Title = string.Empty; ImgUrl = string.Empty; } } public class ImgUrlClass { public ImgUrlClass() { ImageUrl = string.Empty; } /// <summary> /// 按钮图片 /// </summary> public string ImageUrl { get; set; } }
Expander 首先添加一个WPF用户控件AccordionControl 然后添加一个Expander控件，然后在里面添加个Image后运行看一下效果
<Expander x:Name="expander" Header="Expander" > <Grid Background="#FFE5E5E5"> <Image Source="Image/Button/h1.png" /> </Grid> </Expander>
这样一个展开收起的Expander 就OK了，接下里根据设计需求分析，我们需要修改Expander的 Header、Content 两部分。
Header(头部)：修改背景色、添加标题图片、标题。
Content(内容)：多个图片按钮组成(这里需要思考一下，结果集是多张图片,所以需要循环加载图片，所以这里使用了ListBox控件)。
<Expander> <Expander.Header> <StackPanel Orientation="Horizontal" Background="#3399ff" > <Image Source="Image/Button/h1.png" Height="16"/> <TextBlock Text="我是标题哦" VerticalAlignment="Center"/> </StackPanel> </Expander.Header> <Expander.Content > <ListBox ItemsSource={binding}> <ListBox.ItemTemplate> <DataTemplate> <Image Source="Image/Button/h1.png" /> </DataTemplate> </ListBox.ItemTemplate> </ListBox> </Expander.Content> </Expander>
绑定数据源运行后
距离我们的设计是不是进了一步，我们需要思考一下 设计图给出的内容中按钮是 横向 展示，并且根据宽度自动换行？ WPF中我知道的可以实现此功能的控件 WrapPanel、TextBlock,WrapPanel更好用，我们来修改下ListBox中ItemsPanel模板,并且将ListBox水平滚动条取消。