我现在有个需求,要求做个像360右上角的配置菜单的按钮,
用Botton和popup可以实现,可我不想写太多事件,这时候我想到了comboBox这个控件,点击出现下拉的内容,真是太符合我的需要了,于是,我就决定定制ComboBox。
首先,默认的ComboBox是一个两行两列的布局,(0,0)(第一行,第一列的位置)位置处是一个编辑控件,(0,1)是个按钮,(1,0)(1,1)是个popup,就是点击出现下拉的位置,popup的显示绑定按钮的状态,于是,我们点击按钮的时候,popup就显示出来,popup区域里面有<ItemsPresenter/>显示combobox的items;
1.默认的ComboBox分析完了,接下来就是定制我的ComBoBox了,首先,我只需要一个按钮,一个菜单,于是,把Combobox的Template定制成只有两行的Grid,第一行是一个Button,第二行是个Popup,显示items内容。默认的button这时候不是透明的,还需要进一步定义我的button,把我的Button变成无边框,透明背景的小图标,改写button的template就可以做到了。然后popup的显示要绑定button的press状态,这样,才能点一下按钮,显示Items;template定制如下:
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid x:Name="MainGrid" SnapsToDevicePixels="true">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0"/>
</Grid.ColumnDefinitions>
<Popup x:Name="PART_Popup" AllowsTransparency="true" Grid.ColumnSpan="2" IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" Margin="1" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom" VerticalOffset="10" HorizontalOffset="-60">
<Border CornerRadius="5" Background="White" Padding="10,5,5,5" Width="120" Height="100">
<StackPanel>
<ItemsPresenter/>
</StackPanel>
</Border>
</Popup>
<ToggleButton BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" >
<ToggleButton.Template>
<ControlTemplate TargetType="ToggleButton">
<Image Source="Images/Sys/start.png"/>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
2.这时候基本的模型已经出来了,可是,样式看起来不是很好看
这时候,就要修改每个items的显示方式,items的显示方式是ItemContainerStyle来管理的,所以,定制成如下:
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="ComboBoxItem">
<Setter Property="Background" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBoxItem">
<Border Padding="5" Background="{TemplateBinding Background}">
<TextBlock Text="{TemplateBinding Content}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="LightGray"/>
</Trigger>
</Style.Triggers>
</Style>
</Setter.Value>
</Setter>
这时候,控件就变成这样了
我这里只是简单的进行了边距的调整,没有对其他进行调整;
最后上整个style
<x:Array x:Key="items" Type="sys:String" xmlns:sys="clr-namespace:System;assembly=mscorlib">
<sys:String>系统设置</sys:String>
<sys:String>查看消息</sys:String>
<sys:String>消息订阅</sys:String>
</x:Array>
<Style x:Key="ComboBoxStyle1" TargetType="{x:Type ComboBox}">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="ItemsSource" Value="{StaticResource items}"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="Padding" Value="4,3"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid x:Name="MainGrid" SnapsToDevicePixels="true">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0"/>
</Grid.ColumnDefinitions>
<Popup x:Name="PART_Popup" AllowsTransparency="true" Grid.ColumnSpan="2" IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" Margin="1" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom" VerticalOffset="10" HorizontalOffset="-60">
<Border CornerRadius="5" Background="White" Padding="10,5,5,5" Width="120" Height="100">
<StackPanel>
<ItemsPresenter/>
</StackPanel>
</Border>
</Popup>
<ToggleButton BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" >
<ToggleButton.Template>
<ControlTemplate TargetType="ToggleButton">
<Image Source="Images/Sys/start.png"/>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="ComboBoxItem">
<Setter Property="Background" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBoxItem">
<Border Padding="5" Background="{TemplateBinding Background}">
<TextBlock Text="{TemplateBinding Content}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="LightGray"/>
</Trigger>
</Style.Triggers>
</Style>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsEditable" Value="true">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Padding" Value="3"/>
</Trigger>
</Style.Triggers>
</Style>
最后总结:
Template:控件模板,是指整个控件的展示和布局,如ComboBox这个控件,就是分为可编辑区域,点击下啦区域,items的popup区域,template就是管理这些位置的布局;
ItemsPresenter:可以简单理解为占位符,在样式中使用,标记着这个区域是展示该控件的Items;如:ComboBox的下拉列表的可选项。但是,只负责显示,而不能管理如何显示,如果我们要combobox的下啦内容横向排列,该怎么做呢,这时候就要用到ItemsPanel了;
ItemsPanel:就是管理Items的排列方式,如,ComboBox默认是竖直排列的,我们要横着排列,只需要定义ItemsPanel为WrapPanel,就可以了;这时候iTEMS的排列方式已经完成,可我还有特殊要求,比如,让ComboBox的每个项都定制,比如,背景啊,图标啊,这时候,ItemsPanel是无法完成的,就要用到ItemContainerStyle了;
ItemContainerStyle:就是每个项的样式,自己重写,就可以定制出每个项 的样式了;