WPF 简易手风琴 (ListBox+Expander)

概述

之前听说很多大神的成长之路,几乎都有个习惯——写博文，可以有效的对项目进行总结、从而提高开发的经验。所以初学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=""/>
                    <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水平滚动条取消。

   <ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled" >
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapPanel  Orientation="Horizontal"  Background="Transparent" />
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Image Source="{Binding ImageUrl}"   />
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>

运行,效果不错吧。

这样一个简单的Expander完成了，实际工作中我们可能需要多个这样的Expander组合使用，很简单，ListBox嵌套Expander 进去就可以了。

完善功能

运行Demo,可能会发现一个问题，点击第一行的Expander时候 其它的并没有收起，怎么实现点击其中一个让其他自动收起呢？

方案一：RadioButton;  单选的效果是RadioButton被分配到相同的组中 GroupName ，结合Demo 我们可以将Expander封装到RadionButton中，然后给GroupName赋值 这样就可以实现效果。

方案二：ListBox的ListBoxItem.IsSelected 是否选中; Expander中IsExpanded属性的意思是内容窗口是否可见，当我们选择一个ListBoxItem时将IsDelected绑定到IsExpanded中就可以实现。

最初，我是使用RadionButton实现的，后大神提出建议为何不试试ListBoxItem呢？所以我修改了源码。

<ListBox x:Name="ItemBox"   ItemsSource="{Binding}"  Width="" >
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Expander   Width="{Binding Path=Width, ElementName=ItemBox}"  Tag="{Binding}"     IsExpanded="{Binding  RelativeSource ={ RelativeSource  Mode=FindAncestor, AncestorType=ListBoxItem},  Path=IsSelected}"  >
                        <Expander.Header>
                            <StackPanel Orientation="Horizontal" Background="#3399ff"  Width="{Binding Path=Width, ElementName=ItemBox}"  >
                                <Image Source="{Binding  RelativeSource ={ RelativeSource  Mode=FindAncestor, AncestorType=Expander},  Path=Tag.ImgUrl}" Height="" Width="" VerticalAlignment="Center"/>
                                <TextBlock   VerticalAlignment="Center"   Text="{Binding    RelativeSource ={ RelativeSource  Mode=FindAncestor, AncestorType=Expander},  Path=Tag.Title}"  />
                            </StackPanel>
                        </Expander.Header>
                        <Expander.Content  >
                            <ListBox ItemsSource="{Binding  RelativeSource ={ RelativeSource  Mode=FindAncestor, AncestorType=Expander},  Path=Tag.ImgLst}"   >
                                <ListBox.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <WrapPanel  Orientation="Horizontal"   HorizontalAlignment="Center" />
                                    </ItemsPanelTemplate>
                                </ListBox.ItemsPanel>
                                <ListBox.ItemTemplate>
                                    <DataTemplate>
                                        <Image Source="{Binding ImageUrl}" />
                                    </DataTemplate>
                                </ListBox.ItemTemplate>
                            </ListBox>
                        </Expander.Content>
                    </Expander>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

解析下数据绑定：

WPF基础Binding(绑定)这里用到两种方式(概念上的可以参考百度这里不再熬述)：

1、ElementName指定Source：在C#代码中可以直接把对象作为Source赋值给Binding，但是XAML无法访问对象，只能使用Name属性来找到对象。

 Width="{Binding Path=Width, ElementName=ItemBox}" 

2、RelataveSource:通过Binding的RelataveSource属性相对的指定Source：当控件需要关注自己的、自己容器的或者自己内部某个属性值就需要使用这种办法。

 IsExpanded="{Binding  RelativeSource ={ RelativeSource  Mode=FindAncestor, AncestorType=ListBoxItem},  Path=IsSelected}"

* 这里有个注意点，Expander.Header中并不能直接得到数据源 我这里是将数据源绑定到Expander.Tag中 然后通过 RelataveSource 向上查找的方式获取数据源

<TextBlock   VerticalAlignment="Center"   Text="{Binding    RelativeSource ={ RelativeSource  Mode=FindAncestor, AncestorType=Expander},  Path=Tag.Title}"  />

这样整体的数据绑定就完成了。

现在思考一下这样个需求：当我们点击按钮后更改背景图片，点击其他按钮后,点击过的按钮还原？

分析：根据需求分解两个动作效果.

1、按钮之间的切换并且还原样式：这里的效果类似于之前的Expander 之间的展开与闭合，所以这里依然使用 RadioButton 来实现，RadionButton改变样式成为图片按钮 。

2、点击按钮更改背景图片：根据RadionButton的IsChecked属性来实现，将Image 的Source 与IsChecked 关联起来，通过转换器根据相应的值返回不同的图片。

<RadioButton x:Name="rdoImg" GroupName="rdoImgGroup"  Cursor="Hand" Width="" Height="" >
    <RadioButton.Template>
        <ControlTemplate>
            <Image>
                <Image.Source>
                    <MultiBinding Converter="{StaticResource IsDataConverter}"  >
                        <Binding  Path="IsChecked"  ElementName="rdoImg"  />
                        <Binding  Path="ImageUrl" />
                    </MultiBinding>
                </Image.Source>
            </Image>
        </ControlTemplate>
    </RadioButton.Template>
</RadioButton>

MultiBinding：多番绑定

在开发的过程中遇到了一个很有意思的事情,我为了方便直接将整个实体绑定进去，然后在转换器中进行判断可以得到图片进行处理，运行后但图片没变化。难道转换器无效，IsChecked没变？

带着疑问我修改了一下，只绑定IsChecked 看看到底是否发生变化，运行，结果发生变化，图片也变了(这里修改了转换器 返回一个固定图片)。

我个人的理解 Binding 应该只针对一个属性才有效，可是我想把图片路径也传过去，这样更好的处理，那么MultiBinding就用到了 。

这里需要注意一点：MultiBinding 转换器 继承 IMultiValueConverter 接口，Binding 继承 IValueConverter 接口。

MultiBinding ： IMultiValueConverter
Binding       :  IValueConverter

这样需求就实现了，运行程序

当我们切换Expander时，发现个问题按钮并没有还原？

思路：在点击Expander时，将RadioButton的IsChecked改为False就可以了，这是因为我们已经将Image的Source与RadioButton的IsChecked关联。

所以只要将RadioButton的IsChecked 与 Expander的IsExpanded 关联就可以。

 <RadioButton x:Name="rdoImg" GroupName="rdoImgGroup"  Cursor="Hand" Width="" Height="" IsChecked="{Binding  Path=IsExpanded,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=Expander},Converter={StaticResoce IsCheckedConvert},Mode=OneWay}"    >

这里需要注意一点 IsChecked 与 IsExpanded 的绑定关系是单向的 Mode=OneWay，这样保证每次点击Expander 返回的都是False，不然会报错，因为RadionButton 同一组中不可能同时选中！

好了除了样式外功能实现完毕,当然还可以继续拓展O(∩_∩)O哈哈~！

样式

Expande样式模板分为三个部分：

Expander-Header:一个写好样式的 ToggleButton。

Expander-Content: Border是内容部分  <ContentPresenter /> 这句话千万不要遗忘，不然什么都不会显示！

Expander-Triggers: 动画效果。

*这里有个注意点，Header 与 Content 一定要放在 StackPanel 内，不然运行后Expander会重叠。

样式模板具体可以百度查询，或者用Blend查看样式源码,这里不再熬述。

        <!--ToggleButton样式代码：-->
        <Style x:Key="ToggleButtonStyle" TargetType="{x:Type ToggleButton}">
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="Width" Value="{Binding Path=Width, ElementName=ItemBox}"/>
            <Setter Property="Height" Value="" />
            <Setter Property="Background" Value="{StaticResource OrangeG}" />
            <Setter Property="FontWeight" Value="Bold" />
            <Setter Property="FontSize" Value="" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Canvas  Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"        Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                            <Image  Source="{Binding  RelativeSource ={ RelativeSource  Mode=FindAncestor, AncestorType=Expander},  Path=Tag.ImgUrl}"  Height="" Canvas.Left="" Canvas.Top=""  />
                            <TextBlock   Text="{Binding    RelativeSource ={ RelativeSource  Mode=FindAncestor, AncestorType=Expander},  Path=Tag.Title}"  Canvas.Left="" Canvas.Top="" Foreground="{TemplateBinding Foreground}"/>
                            <TextBlock Text="＋"  Foreground="White" Canvas.Top="" Canvas.Right="" FontSize="{TemplateBinding FontSize}" x:Name="txtSymbol"/>
                            <ContentPresenter />
                        </Canvas>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter Property="Background" Value="#3399ff"/>
                                <Setter Property="Text"  TargetName="txtSymbol" Value="－"/>
                            </Trigger>
                            <Trigger Property="IsChecked" Value="False">
                                <Setter Property="Background" Value="{StaticResource OrangeG}"/>
                                <Setter Property="Text"  TargetName="txtSymbol" Value="＋"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <!--Expander样式代码：-->
        <Style x:Key="ExpanderStyle" TargetType="{x:Type Expander}">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Expander}">
                        <StackPanel Background="{TemplateBinding Background}" >
                            <ToggleButton x:Name="HeaderSite"   Style="{DynamicResource ToggleButtonStyle}"
                               IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"  />
                            <Border x:Name="ExpandSite"   Visibility="Collapsed"   Canvas.Top=""   Focusable="false"
                               BorderThickness=""      Width="{Binding ElementName=HeaderSite,Path=Width}"
                                    HorizontalAlignment="Center" >
                                <ContentPresenter    />
                            </Border>
                        </StackPanel>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsExpanded" Value="true">
                                <Setter Property="Visibility" TargetName="ExpandSite" Value="Visible"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

最后调用样式

    <Expander    Style="{DynamicResource ExpanderStyle}" 

这样 简易的手风琴就完成了,但是这里还是有个小问题，就是内容模板的高度没有办法拉伸,以及WrapPanel内会出现左右边距没有办法居中,如果有知道解决办法的大神们请告知谢谢！！！

结束语

第一次写博文，终于体会其中的奥妙之处,重新梳理下思路，对自己进行一次总结，进而增加深刻的印象，这种感觉棒棒哒，在这里感谢为我指点的大神们，同时也希望大家为我指点其中的不足之处，进而改之，让我可以快速的成长，再次感谢各位，谢谢！！！

(PS:话说怎么样可以让博文的样式更好看一些？)

这里是源码：https://git.oschina.net/smile0905/AccordionClient.git