四川龙网

  1. 首页 > 生活知识 > >

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><Popupx: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}}"><Borderx: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"><ScrollViewerx: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><ToggleButtonx: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}" /><ContentPresenterx: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="http://www.wokk.cn/false"><Setter TargetName="PART_Border" Property="Background" Value="http://www.wokk.cn/{DynamicResource {x:Static SystemColors.ControlBrushKey}}" /></Trigger><Trigger Property="VirtualizingPanel.IsVirtualizing" Value="http://www.wokk.cn/true"><Setter TargetName="_tv_scrollviewer_" Property="CanContentScroll" Value="http://www.wokk.cn/true" /></Trigger><MultiTrigger><MultiTrigger.Conditions><Condition Property="IsGrouping" Value="http://www.wokk.cn/true" /><Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping" Value="http://www.wokk.cn/false" /></MultiTrigger.Conditions><Setter Property="ScrollViewer.CanContentScroll" Value="http://www.wokk.cn/false" /></MultiTrigger></ControlTemplate.Triggers></ControlTemplate>以下为使用控件的代码 。
<TreeComboBoxWidth="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}"><TextBlockMargin="5,0,0,0"VerticalAlignment="Center"Text="{Binding Property1}" /></HierarchicalDataTemplate></TreeComboBox.ItemTemplate></TreeComboBox>三.运行效果
3.1 单选效果

wpf快速开发框架使用 wpf下拉框怎么做多语言

文章插图
单选效果
3.2 多选效果
wpf快速开发框架使用 wpf下拉框怎么做多语言

文章插图
多选效果
四.个性化外观
当控件默认外观无法满足需求时，我们可以通过编辑样式的方式来实现个性化外观，也可以引用第三方UI库样式 ， 以下为使用MaterialDesign的效果 。
4.1 单选效果
wpf快速开发框架使用 wpf下拉框怎么做多语言

文章插图
单选效果
4.2 多选效果
wpf快速开发框架使用 wpf下拉框怎么做多语言

文章插图
【wpf快速开发框架使用 wpf下拉框怎么做多语言】多选效果


    以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

    「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：


    上一篇：魔兽争霸3英雄介绍大全 魔兽世界找到古代英雄在哪里

    下一篇：pr用快捷键截屏的方法 pr截图在哪个文件夹