wpf快速开发框架使用(wpf下拉框怎么做多语言)-茶芙网

树形下拉菜单是许多WPF应用程序中常见的用户界面元素，它能够以分层的方式展示数据，提供更好的用户体验。本文将深入探讨如何基于WPF创建一个可定制的树形下拉菜单控件，涵盖从原理到实际实现的关键步骤。

一.需求分析

树形下拉菜单控件的核心是将ComboBox与TreeView结合起来，以实现下拉时的树状数据展示。在WPF中，可以通过自定义控件模板、样式和数据绑定来实现这一目标。

我们首先来分析一下ComboBox控件的模板。

<ControlTemplate x:Key=\"ComboBoxTemplate\" TargetType=\"{x:Type ComboBox}\">    <Grid x:Name=\"templateRoot\" 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, Mode=TwoWay, RelativeSource={RelativeSource Mode=TemplatedParent}}\" Margin=\"1\" Placement=\"Bottom\" PopupAnimation=\"{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}\">            <theme:SystemDropShadowChrome x:Name=\"shadow\" Color=\"Transparent\" MinWidth=\"{Binding ActualWidth, ElementName=templateRoot}\" MaxHeight=\"{TemplateBinding MaxDropDownHeight}\">                <Border x:Name=\"dropDownBorder\" Background=\"{DynamicResource {x:Static SystemColors.WindowBrushKey}}\" BorderBrush=\"{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}\" BorderThickness=\"1\">                    <ScrollViewer x:Name=\"DropDownScrollViewer\">                        <Grid x:Name=\"grid\" RenderOptions.ClearTypeHint=\"Enabled\">                            <Canvas x:Name=\"canvas\" HorizontalAlignment=\"Left\" Height=\"0\" VerticalAlignment=\"Top\" Width=\"0\">                                <Rectangle x:Name=\"opaqueRect\" Fill=\"{Binding Background, ElementName=dropDownBorder}\" Height=\"{Binding ActualHeight, ElementName=dropDownBorder}\" Width=\"{Binding ActualWidth, ElementName=dropDownBorder}\"/>                            </Canvas>                            <ItemsPresenter x:Name=\"ItemsPresenter\" KeyboardNavigation.DirectionalNavigation=\"Contained\" SnapsToDevicePixels=\"{TemplateBinding SnapsToDevicePixels}\"/>                        </Grid>                    </ScrollViewer>                </Border>            </theme:SystemDropShadowChrome>        </Popup>        <ToggleButton x:Name=\"toggleButton\" Background=\"{TemplateBinding Background}\" BorderBrush=\"{TemplateBinding BorderBrush}\" BorderThickness=\"{TemplateBinding BorderThickness}\" Grid.ColumnSpan=\"2\" IsChecked=\"{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource Mode=TemplatedParent}}\" Style=\"{StaticResource ComboBoxToggleButton}\"/>        <ContentPresenter x:Name=\"contentPresenter\" ContentStringFormat=\"{TemplateBinding SelectionBoxItemStringFormat}\" ContentTemplate=\"{TemplateBinding SelectionBoxItemTemplate}\" Content=\"{TemplateBinding SelectionBoxItem}\" ContentTemplateSelector=\"{TemplateBinding ItemTemplateSelector}\" HorizontalAlignment=\"{TemplateBinding HorizontalContentAlignment}\" IsHitTestVisible=\"false\" Margin=\"{TemplateBinding Padding}\" SnapsToDevicePixels=\"{TemplateBinding SnapsToDevicePixels}\" VerticalAlignment=\"{TemplateBinding VerticalContentAlignment}\"/>    </Grid></ControlTemplate>

从以上代码可以看出，其中的Popup控件就是下拉部分，那么按照常理，我们在Popup控件中放入一个TreeView控件即可实现该需求，但是现实情况远没有这么简单。我们开发一个控件，不仅要从外观上实现功能，还需要考虑数据绑定、事件触发、自定义模板等方面的问题，显然，直接放置一个TreeView控件虽然也能实现功能，但是从封装的角度看，它并不优雅，使用也不方便。那么有没有更好的方法满足以上需求呢？下面提供另一种思路，其核心思想就是融合ComboBox控件与TreeView控件模板，让控件既保留TreeView的特性，又拥有ComboBox的外观。

二.代码实现

2.1 编辑TreeView模板；

2.2 提取ComboBox的模板代码；

2.3 将ComboBox的模板代码移植到TreeView模板中；

2.4 将TreeView模板包含ItemsPresenter部分的关键代码放入ComboBox模板中的Popup控件内；

以下为融合后的xaml代码

<ControlTemplate TargetType=\"{x:Type local:TreeComboBox}\">    <Grid x:Name=\"templateRoot\" SnapsToDevicePixels=\"true\">        <Grid.ColumnDefinitions>            <ColumnDefinition Width=\"*\" />            <ColumnDefinition Width=\"0\" MinWidth=\"{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}\" />        </Grid.ColumnDefinitions>        <Popup                            x:Name=\"PART_Popup\"                            Grid.ColumnSpan=\"2\"                            MaxHeight=\"{TemplateBinding MaxDropDownHeight}\"                            Margin=\"1\"                            AllowsTransparency=\"true\"                            IsOpen=\"{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource Mode=TemplatedParent}}\"                            Placement=\"Bottom\"                            PopupAnimation=\"{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}\">            <Border                                x:Name=\"PART_Border\"                                Width=\"{Binding RelativeSource={RelativeSource AncestorType=local:TreeComboBox}, Path=ActualWidth}\"                                Background=\"{DynamicResource {x:Static SystemColors.WindowBrushKey}}\"                                BorderBrush=\"{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}\"                                BorderThickness=\"1\"                                SnapsToDevicePixels=\"true\">                <ScrollViewer                                    x:Name=\"_tv_scrollviewer_\"                                    Padding=\"{TemplateBinding Padding}\"                                    Background=\"{TemplateBinding Background}\"                                    CanContentScroll=\"false\"                                    Focusable=\"false\"                                    HorizontalScrollBarVisibility=\"{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}\"                                    SnapsToDevicePixels=\"{TemplateBinding SnapsToDevicePixels}\"                                    VerticalScrollBarVisibility=\"{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}\">                    <ItemsPresenter />                </ScrollViewer>            </Border>        </Popup>        <ToggleButton                            x:Name=\"toggleButton\"                            Grid.ColumnSpan=\"2\"                            Background=\"{TemplateBinding Background}\"                            BorderBrush=\"{TemplateBinding BorderBrush}\"                            BorderThickness=\"{TemplateBinding BorderThickness}\"                            IsChecked=\"{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource Mode=TemplatedParent}}\"                            Style=\"{StaticResource ComboBoxToggleButton}\" />        <ContentPresenter                            x:Name=\"contentPresenter\"                            Margin=\"{TemplateBinding Padding}\"                            HorizontalAlignment=\"{TemplateBinding HorizontalContentAlignment}\"                            VerticalAlignment=\"{TemplateBinding VerticalContentAlignment}\"                            Content=\"{TemplateBinding SelectionBoxItem}\"                            ContentTemplate=\"{TemplateBinding SelectionBoxItemTemplate}\"                            IsHitTestVisible=\"False\" />    </Grid>    <ControlTemplate.Triggers>        <Trigger Property=\"IsEnabled\" Value=\"false\">            <Setter TargetName=\"PART_Border\" Property=\"Background\" Value=\"{DynamicResource {x:Static SystemColors.ControlBrushKey}}\" />        </Trigger>        <Trigger Property=\"VirtualizingPanel.IsVirtualizing\" Value=\"true\">            <Setter TargetName=\"_tv_scrollviewer_\" Property=\"CanContentScroll\" Value=\"true\" />        </Trigger>        <MultiTrigger>            <MultiTrigger.Conditions>                <Condition Property=\"IsGrouping\" Value=\"true\" />                <Condition Property=\"VirtualizingPanel.IsVirtualizingWhenGrouping\" Value=\"false\" />            </MultiTrigger.Conditions>            <Setter Property=\"ScrollViewer.CanContentScroll\" Value=\"false\" />        </MultiTrigger>    </ControlTemplate.Triggers></ControlTemplate>

以下为使用控件的代码。

<TreeComboBox                Width=\"315\"                MinHeight=\"30\"                Padding=\"5\"                HorizontalAlignment=\"Center\"                VerticalAlignment=\"Top\"                VerticalContentAlignment=\"Stretch\"                IsAutoCollapse=\"True\"                ItemsSource=\"{Binding Collection}\">    <TreeComboBox.SelectionBoxItemTemplate>        <ItemContainerTemplate>            <Border>                <TextBlock VerticalAlignment=\"Center\" Text=\"{Binding Property1}\" />            </Border>        </ItemContainerTemplate>    </TreeComboBox.SelectionBoxItemTemplate>    <TreeComboBox.ItemTemplate>        <HierarchicalDataTemplate ItemsSource=\"{Binding Collection}\">            <TextBlock                            Margin=\"5,0,0,0\"                            VerticalAlignment=\"Center\"                            Text=\"{Binding Property1}\" />        </HierarchicalDataTemplate>    </TreeComboBox.ItemTemplate></TreeComboBox>