WPF 简易手风琴 (ListBox+Expander)

2017-05-13 09:47:19来源:cnblogs.com作者:oО壞χιǎō孒oo人点击

概述

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

   <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="400" >            <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="16" Width="16" 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="80" Height="80" >    <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="80" Height="80" 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="35" />            <Setter Property="Background" Value="{StaticResource OrangeG}" />            <Setter Property="FontWeight" Value="Bold" />            <Setter Property="FontSize" Value="16" />            <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="16" Canvas.Left="5" Canvas.Top="8"  />                            <TextBlock   Text="{Binding    RelativeSource ={ RelativeSource  Mode=FindAncestor, AncestorType=Expander},  Path=Tag.Title}"  Canvas.Left="25" Canvas.Top="8" Foreground="{TemplateBinding Foreground}"/>                            <TextBlock Text="+"  Foreground="White" Canvas.Top="6" Canvas.Right="10" 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="40"   Focusable="false"                                                 BorderThickness="1"      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 

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台