WPF Template，ItemsPresenter，ItemContainerStyle，ItemsPanel，contentpresenter

来源：互联网发布：国产铁壶知乎编辑：程序博客网时间：2024/06/05 20:12

我现在有个需求，要求做个像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：就是每个项的样式，自己重写，就可以定制出每个项的样式了；

0 0