如何在DataGrid中编写DataTrigger以在鼠标悬停或弹出窗口IsOpen中显示DataGrid中的过滤器图标？ [英] How to write DataTrigger to Visible the Filter Icon in the DataGrid While on Mouse Hover or Popup IsOpen?
本文介绍了如何在DataGrid中编写DataTrigger以在鼠标悬停或弹出窗口IsOpen中显示DataGrid中的过滤器图标？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何设置DataGrid中的过滤器图标，它应该在MouseOver上可见，并且过滤弹出IsOpen否则折叠。
注意： / p>
在一个XAML中设计Datagrid，过滤器弹出窗口应该在Main
中查看XAML，DataGrid XAML继承主视图XAML。
过滤器图标是在app.xaml中设计的按钮，并在
中调用DataGrid中的Style。
我需要显示（可见性：可见）过滤器图标按钮，同时在对应列的鼠标悬停事件或如果用户可以单击过滤器图标按钮，过滤器弹出窗口被打开，该图标应该显示 - Filter Popup IsOpen = True state。过滤器图标按钮应该在弹出窗口关闭时折叠，而图标按钮单击否则鼠标悬停不会发生。
主视图XAML：弹出式源代码
< Popup Name =popFilterPlacement =MouseStaysOpen =FalseWidth =200IsOpen ={Binding IsPopupFilterOpen，Mode = TwoWay}>
< Border Background =WhiteBorderBrush =GrayBorderThickness =1,1,1,1>
< StackPanel Margin =5,5,5,15>
< TextBlock Text =欢迎使用弹出窗口/>
< / StackPanel>
< / Border>
< / Popup>
儿童视图XAML：DataGrid
< DataGrid Name =EmpListColumnHeaderStyle ={StaticResource FilterDataGridColumnHeader}AutoGenerateColumns =FalseItemsSource ={Binding EmpList}>
< DataGrid.Columns>
< DataGridTextColumn Binding ={Binding Name}Header =Employee NameElementStyle ={StaticResource DataGridElementStyle}/>
< DataGridTextColumn Binding ={Binding Age}Header =Employee AgeElementStyle ={StaticResource DataGridElementStyle}/>
< /DataGrid.Columns>
< / DataGrid>
过滤器图标按钮：App.xaml
< Application.Resources>
< Style TargetType ={x：Type DataGridColumnHeader}x：Key =FilterDataGridColumnHeader>
< Setter Property =Template>
< Setter.Value>
< ControlTemplate TargetType ={x：Type DataGridColumnHeader}>
< Button Grid.Column =2Command ={Binding Path = DataContext.PopUpCommand，RelativeSource = {RelativeSource Mode = FindAncestor，AncestorType = {x：Type Window}}}Style ={StaticResource TransButtonStyleKey }>
< Button.CommandParameter>
< MultiBinding Converter ={StaticResource MultiValueConverterKey}>
< Binding RelativeSource ={RelativeSource Mode = FindAncestor，AncestorType = {x：Type cust：DataGrid}}/>
< Binding Path =ColumnRelativeSource ={RelativeSource Mode = TemplatedParent}/>
< / MultiBinding>
< /Button.CommandParameter>
< ContentControl Name =autofilterVisibility =CollapsedContentTemplate ={StaticResource FilterButtonStyleKey}Margin =0 0 3 0>< / ContentControl>
< / Button>
< / ControlTemplate>
< /Setter.Value>
< / Setter>
< / Style>
< /Application.Resources>
FilterButtonStyleKey：
code>< DataTemplate x：Key =FilterButtonStyleKey>
< Canvas Height =15.898Width =15.297HorizontalAlignment =CenterVerticalAlignment =CenterBackground =Transparent>
< Path Data =M16.0117,6.7368C18.3417,6.7368,20.6727,6.7358,23.0027,6.7378C23.5327,6.7378,23.5977,6.8308,23.6437,7.3438C23.7027,7.9958,23.4897,8.4748 ，23.0197,8.9548C21.4107,10.5968,19.8547,12.2888,18.2957,13.9788C18.1647,14.1208,18.1137,14.3828,18.1117,14.5898C18.0987,17.0608,18.1067,19.5308,18.0907,22.0018C18.0887,22.2158,18.0077 ，22.4968,17.8607,22.6158C17.7697,22.6878,17.4587,22.5408,17.2807,22.4368C16.3057,21.8718,15.3447,21.2788,14.3677,20.7148C14.0637,20.5408,13.9287,20.3278,13.9297,19.92828C13.9407,18.1778 ，13.9257,16.3848,13.9357,14.5908C13.9367,14.2698,13.8367,14.0388,13.6137,13.8058C12.1347,12.2548,10.6717,10.6898,9.2027,9.1298C9.0967,9.0168,8.9927,8.9018,8.8797,8.7958C8.4137 ，8.3608,8.2387,7.6118,8.4377,7.0158C8.5277,6.7478,8.7137,6.7358,8.9347,6.7368C10.0937,6.7388,11.2517,6.7378,12.4097,6.7378C13.6107,6.7378,14.8107,6.7378,16.0117,6.7368z Height =16.898Canvas.Left = - 0.5StrokeStartLineCap =RoundStretch =FillStrokeEndLineCap =RoundStroke =＃FF323232Stro keThickness =1StrokeLineJoin =RoundCanvas.Top = - 0.5Width =16.297/>
< Path Data =M14.2427,14.3921L17.9117,14.3921Height =1Canvas.Left =5.386StrokeStartLineCap =RoundStretch =FillStrokeEndLineCap =RoundStroke = ＃FF323232StrokeThickness =1StrokeLineJoin =RoundCanvas.Top =7.156Width =4.669/>
< / Canvas>
< / DataTemplate>
解决方案
在此我将Button命名为$ code> x：Name =autoFilterBtn我再添加一个命令参数< Binding RelativeSource ={RelativeSource Mode = Self}/> 按钮命令。
过滤器图标按钮：App.xaml
< Application.Resources>
< Style TargetType ={x：Type DataGridColumnHeader}x：Key =FilterDataGridColumnHeader>
< Setter Property =Template>
< Setter.Value>
< ControlTemplate TargetType ={x：Type DataGridColumnHeader}>
< Button x：Name =autoFilterBtnGrid.Column =2Command ={Binding Path = DataContext.PopUpCommand，RelativeSource = {RelativeSource Mode = FindAncestor，AncestorType = {x：Type Window}}} Style ={StaticResource TransButtonStyleKey}>
< Button.CommandParameter>
< MultiBinding Converter ={StaticResource MultiValueConverterKey}>
< Binding RelativeSource ={RelativeSource Mode = FindAncestor，AncestorType = {x：Type cust：DataGrid}}/>
< Binding Path =ColumnRelativeSource ={RelativeSource Mode = TemplatedParent}/>
< Binding RelativeSource ={RelativeSource Mode = Self}/>
< / MultiBinding>
< /Button.CommandParameter>
< ContentControl Name =autofilterVisibility =CollapsedContentTemplate ={StaticResource FilterButtonStyleKey}Margin =0 0 3 0>< / ContentControl>
< / Button>
< ControlTemplate.Triggers>
< DataTrigger Value =True>
< DataTrigger.Binding>
< MultiBinding Converter ={StaticResource FilterVisibilityCheckConverter}>
< Binding Path =IsMouseOverRelativeSource ={RelativeSource Self}/>
< Binding Path =DataContext.FilterButtonHashCodeRelativeSource ={RelativeSource Mode = FindAncestor，AncestorType = {x：Type Window}}/>
< Binding ElementName =autoFilterBtn/>
< / MultiBinding>
< /DataTrigger.Binding>
< Setter TargetName =autofilterProperty =VisibilityValue =Visible/>
< / DataTrigger>
< /ControlTemplate.Triggers>
< / ControlTemplate>
< /Setter.Value>
< / Setter>
< / Style>
< /Application.Resources>
在 PopUpCommand 时执行命令更新了int属性 FilterButtonHashCode
private Button _filterButton = new Button（） ;
public Button FilterButton
{
get {return _filterButton; }
set
{
_filterButton = value;
OnPropertyChanged（）;
}
}
private int _filterButtonHashCode = 0;
public int FilterButtonHashCode
{
get {return _filterButtonHashCode; }
set
{
_filterButtonHashCode = value;
OnPropertyChanged（）;
}
}
私人bool _isPopupFilterOpen = false;
public bool IsPopupFilterOpen
{
get {return _isPopupFilterOpen; }
set
{
_isPopupFilterOpen = value;
if（value == false）
FilterButtonHashCode = 0;
OnPropertyChanged（）;
}
}
public ICommand FilterPopUpCommand
{
get
{
return new DelegatingCommand（（param）=>
{
object [] obj = param as object [];
FilterButton = obj [2] as Button;
FilterButtonHashCode = FilterButton.GetHashCode（）;
//逻辑显示过滤弹出
}）;
}
}
MultiValue转换器类：
public class FilterVisibilityCheckConverter：IMultiValueConverter
{
#region IMultiValueConverter成员
public object Convert（object []值，类型targetType，对象参数，System.Globalization.CultureInfo文化）
{
bool isMouseHover = false;
int hasCode = 0;
按钮filterButton = new Button（）;
if（（values [0] ?? false）is bool）
{
isMouseHover = bool.Parse（（values [0] ?? false）.ToString（） ）;
}
if（values [1] is int）
{
hasCode = int.Parse（（values [1] ??0）ToString （））;
}
if（values [2]是Button）
{
filterButton = values [2] as Button;
}
if（values！= null&& values.Length == 3&& values [0]！= null&& values [1]！= null&& values [2]！= null&&（（isMouseHover == true）||（hasCode == filterButton.GetHashCode（））））
{
return true;
}
else
return false;
}
public object [] ConvertBack（object value，Type [] targetTypes，object parameter，System.Globalization.CultureInfo culture）
{
throw new NotImplementedException ）;
}
#endregion
}
转换器返回true IsMouseHover 是 True 或 FilterButtonHashCode 属性与 Button.GetHashCode（）匹配。基于这种具有多转换器参数的简单布尔返回多值转换器，我们可以在没有C＃行为的情况下实现上述任务
How to Set Filter Icon in the DataGrid, it should be Visible on MouseOver and Filter Popup IsOpen otherwise Collapsed.
Note:
Design the Datagrid in one XAML and the Filter Popup should be in Main View XAML, The DataGrid XAML inherits the Main View XAML.
The Filter Icon is a Button designed in app.xaml and call the Style in the DataGrid.
I need to show (Visibility:Visible) the Filter Icon Button while on Mouse Hover Event of the Corresponding Column or If user can click the Filter Icon Button then the Filter Popup gets opened and that time the Icon should show - Filter Popup IsOpen=True state. The Filter Icon Button should Collapsed while on Popup gets closed while on Icon Button Clicked otherwise Mouse Hover is not happened.
Main View XAML : Popup Source Code
<Popup Name="popFilter" Placement="Mouse" StaysOpen="False" Width="200" IsOpen="{Binding IsPopupFilterOpen, Mode=TwoWay}">
<Border Background="White" BorderBrush="Gray" BorderThickness="1,1,1,1">
<StackPanel Margin="5,5,5,15">
<TextBlock Text="Welcome to Popup Window" />
</StackPanel>
</Border>
</Popup>
Child View XAML : DataGrid
<DataGrid Name="EmpList" ColumnHeaderStyle="{StaticResource FilterDataGridColumnHeader}" AutoGenerateColumns="False" ItemsSource="{Binding EmpList}">
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding Name}" Header="Employee Name" ElementStyle="{StaticResource DataGridElementStyle}" />
<DataGridTextColumn Binding="{Binding Age}" Header="Employee Age" ElementStyle="{StaticResource DataGridElementStyle}" />
</DataGrid.Columns>
</DataGrid>
Filter Icon Button : App.xaml
<Application.Resources>
<Style TargetType="{x:Type DataGridColumnHeader}" x:Key="FilterDataGridColumnHeader">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Button Grid.Column="2" Command="{Binding Path=DataContext.PopUpCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}}" Style="{StaticResource TransButtonStyleKey}">
<Button.CommandParameter>
<MultiBinding Converter="{StaticResource MultiValueConverterKey}">
<Binding RelativeSource="{ RelativeSource Mode=FindAncestor, AncestorType={x:Type cust:DataGrid}}" />
<Binding Path="Column" RelativeSource="{ RelativeSource Mode=TemplatedParent}" />
</MultiBinding>
</Button.CommandParameter>
<ContentControl Name="autofilter" Visibility="Collapsed" ContentTemplate="{StaticResource FilterButtonStyleKey}" Margin="0 0 3 0"></ContentControl>
</Button>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
FilterButtonStyleKey :
<DataTemplate x:Key="FilterButtonStyleKey">
<Canvas Height="15.898" Width="15.297" HorizontalAlignment="Center" VerticalAlignment="Center" Background="Transparent">
<Path Data="M16.0117,6.7368C18.3417,6.7368,20.6727,6.7358,23.0027,6.7378C23.5327,6.7378,23.5977,6.8308,23.6437,7.3438C23.7027,7.9958,23.4897,8.4748,23.0197,8.9548C21.4107,10.5968,19.8547,12.2888,18.2957,13.9788C18.1647,14.1208,18.1137,14.3828,18.1117,14.5898C18.0987,17.0608,18.1067,19.5308,18.0907,22.0018C18.0887,22.2158,18.0077,22.4968,17.8607,22.6158C17.7697,22.6878,17.4587,22.5408,17.2807,22.4368C16.3057,21.8718,15.3447,21.2788,14.3677,20.7148C14.0637,20.5408,13.9287,20.3278,13.9297,19.9728C13.9407,18.1778,13.9257,16.3848,13.9357,14.5908C13.9367,14.2698,13.8367,14.0388,13.6137,13.8058C12.1347,12.2548,10.6717,10.6898,9.2027,9.1298C9.0967,9.0168,8.9927,8.9018,8.8797,8.7958C8.4137,8.3608,8.2387,7.6118,8.4377,7.0158C8.5277,6.7478,8.7137,6.7358,8.9347,6.7368C10.0937,6.7388,11.2517,6.7378,12.4097,6.7378C13.6107,6.7378,14.8107,6.7378,16.0117,6.7368z" Height="16.898" Canvas.Left="-0.5" StrokeStartLineCap="Round" Stretch="Fill" StrokeEndLineCap="Round" Stroke="#FF323232" StrokeThickness="1" StrokeLineJoin="Round" Canvas.Top="-0.5" Width="16.297"/>
<Path Data="M14.2427,14.3921L17.9117,14.3921" Height="1" Canvas.Left="5.386" StrokeStartLineCap="Round" Stretch="Fill" StrokeEndLineCap="Round" Stroke="#FF323232" StrokeThickness="1" StrokeLineJoin="Round" Canvas.Top="7.156" Width="4.669"/>
</Canvas>
</DataTemplate>
解决方案
In this I named the Button as x:Name="autoFilterBtn" I added one more Command Parameter <Binding RelativeSource="{RelativeSource Mode=Self}"/> within the Button Command.
Filter Icon Button : App.xaml
<Application.Resources>
<Style TargetType="{x:Type DataGridColumnHeader}" x:Key="FilterDataGridColumnHeader">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Button x:Name="autoFilterBtn" Grid.Column="2" Command="{Binding Path=DataContext.PopUpCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}}" Style="{StaticResource TransButtonStyleKey}">
<Button.CommandParameter>
<MultiBinding Converter="{StaticResource MultiValueConverterKey}">
<Binding RelativeSource="{ RelativeSource Mode=FindAncestor, AncestorType={x:Type cust:DataGrid}}" />
<Binding Path="Column" RelativeSource="{ RelativeSource Mode=TemplatedParent}" />
<Binding RelativeSource="{RelativeSource Mode=Self}"/>
</MultiBinding>
</Button.CommandParameter>
<ContentControl Name="autofilter" Visibility="Collapsed" ContentTemplate="{StaticResource FilterButtonStyleKey}" Margin="0 0 3 0"></ContentControl>
</Button>
<ControlTemplate.Triggers>
<DataTrigger Value="True">
<DataTrigger.Binding>
<MultiBinding Converter="{StaticResource FilterVisibilityCheckConverter}">
<Binding Path="IsMouseOver" RelativeSource="{RelativeSource Self}" />
<Binding Path="DataContext.FilterButtonHashCode" RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}" />
<Binding ElementName="autoFilterBtn" />
</MultiBinding>
</DataTrigger.Binding>
<Setter TargetName="autofilter" Property="Visibility" Value="Visible"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
At the time of PopUpCommand Command execution I updated the int Property FilterButtonHashCode
private Button _filterButton = new Button();
public Button FilterButton
{
get { return _filterButton; }
set
{
_filterButton = value;
OnPropertyChanged();
}
}
private int _filterButtonHashCode = 0;
public int FilterButtonHashCode
{
get { return _filterButtonHashCode; }
set
{
_filterButtonHashCode = value;
OnPropertyChanged();
}
}
private bool _isPopupFilterOpen = false;
public bool IsPopupFilterOpen
{
get { return _isPopupFilterOpen; }
set
{
_isPopupFilterOpen = value;
if (value == false)
FilterButtonHashCode = 0;
OnPropertyChanged();
}
}
public ICommand FilterPopUpCommand
{
get
{
return new DelegatingCommand((param) =>
{
object[] obj = param as object[];
FilterButton = obj[2] as Button;
FilterButtonHashCode = FilterButton.GetHashCode();
// Logic to Show Filter Popup
});
}
}
MultiValue Converter Class:
public class FilterVisibilityCheckConverter : IMultiValueConverter
{
#region IMultiValueConverter Members
public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
bool isMouseHover = false;
int hasCode = 0;
Button filterButton = new Button();
if ((values[0] ?? false) is bool)
{
isMouseHover = bool.Parse((values[0] ?? false).ToString());
}
if (values[1] is int)
{
hasCode = int.Parse((values[1] ?? "0").ToString());
}
if (values[2] is Button)
{
filterButton = values[2] as Button;
}
if (values != null && values.Length == 3 && values[0] != null && values[1] != null && values[2] != null && ((isMouseHover == true) || (hasCode == filterButton.GetHashCode())))
{
return true;
}
else
return false;
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
#endregion
}
This Converter returns true IsMouseHover is True OR the value of the FilterButtonHashCode property matches with the Button.GetHashCode(). Based on this simple Boolean return Multivalue Converter with Multiple Converter Parameter, we can achieve the above task without C# Behaviors
这篇关于如何在DataGrid中编写DataTrigger以在鼠标悬停或弹出窗口IsOpen中显示DataGrid中的过滤器图标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
