通过数据触发器将组合框选中的项值设置为null

时间:2018-04-25 15:56:06

标签: c# wpf xaml combobox

我试图通过控件模板将Combobox Selected Item属性设置为null我已经添加了Checkbox,因此当Checkbox isChecked为true时,我可以使用datatrigger并将SelectedItem设置为null。基本上我试图添加清除过滤器复选框,当SelectedItem有一些值时会显示,并且点击此复选框后所选项目将自动为空

PS.Initially我打算使用按钮代替复选框,但我不知道如何将它连接到Dictionary里面

<CheckBox Panel.ZIndex="2" Width="20" HorizontalAlignment="Left" Foreground="Red" FontWeight="Bold" Background="Red" Content="X" x:Name="chkBOX">
    <CheckBox.Style>
        <Style TargetType="CheckBox">
            <Style.Setters>
                <Setter Property="Visibility" Value="Visible"/>
                <Setter Property="IsEnabled" Value="True"/>
                <Setter Property="VerticalAlignment" Value="Center"/>
            </Style.Setters>
            <Style.Triggers>
                <!-- If selected item is null hide toggle button -->
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ComboBox}}, Path=SelectedItem}" Value="{x:Null}">
                    <Setter Property="Visibility" Value="Hidden"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </CheckBox.Style>
</CheckBox>

现在我正在寻找与它进行交互,因此当选中复选框时,所选项目将变为空 希望没关系:))

编辑: 我取得了一些进展 我可以用下面的所选项目为空                                                     但是这仅适用于选定项目未在我的窗体IE上绑定的情况 这工作

        <ComboBox Grid.Row="1" Margin="10,0,0,0" ItemsSource="{Binding Users}" Tag="Select Full Name" 
                  DisplayMemberPath="FullName" Template="{DynamicResource ComboBoxWithPlaceholder}"  />

这不起作用

        <ComboBox Grid.Row="1" Margin="10,0,0,0" ItemsSource="{Binding Users}" Tag="Select Full Name" 
                  DisplayMemberPath="FullName" SelectedItem="{Binding SelectedUserFullName}" Template="{DynamicResource ComboBoxWithPlaceholder}"  />

1 个答案:

答案 0 :(得分:0)

可安装组合框与安置孔

Link to gif

<ControlTemplate x:Key="ComboBoxWithPlaceholder" x:Name="cb" TargetType="{x:Type ComboBox}">

    <Grid x:Name="templateRoot" SnapsToDevicePixels="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="16"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0"/>
        </Grid.ColumnDefinitions>
        <ToggleButton Panel.ZIndex="2" Width="16" HorizontalAlignment="Left" Foreground="Red" ToolTip="Clear Selection" Opacity="0.5"
                      FontWeight="Bold" Background="Transparent" BorderThickness="0"  Content="X" x:Name="toggleB">
            <ToggleButton.Style>
                <Style TargetType="ToggleButton">
                    <Style.Setters>
                        <Setter Property="VerticalAlignment" Value="Center"/>
                    </Style.Setters>
                    <Style.Triggers>
                        <!-- If selected item is null hide toggle button -->
                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ComboBox}}, Path=SelectedItem}" Value="{x:Null}">
                            <Setter Property="Visibility" Value="Collapsed"/>
                            <!-- When hidden ensure its not checked -->
                            <Setter Property="IsChecked" Value="False"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </ToggleButton.Style>
        </ToggleButton>
        <!-- Placeholder textblock text is bound to tag property of combobox -->
        <TextBlock Grid.ColumnSpan="2" Grid.Column="0" x:Name="tb" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Foreground="DimGray"
                   IsHitTestVisible="False" Panel.ZIndex="1" Text="{Binding Tag,RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ComboBox}}}">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Style.Setters>
                        <Setter Property="Visibility" Value="Hidden"/>
                        <Setter Property="Margin" Value="5,0"/>
                        <Setter Property="VerticalAlignment" Value="{Binding VerticalContentAlignment,RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ComboBox}}}"/>
                    </Style.Setters>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ComboBox}}, Path=SelectedItem}" Value="{x:Null}">
                            <Setter Property="Visibility" Value="Visible"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>
        <Popup x:Name="PART_Popup" AllowsTransparency="True" Grid.ColumnSpan="2" IsOpen="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Margin="1" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom">
            <Themes:SystemDropShadowChrome x:Name="shadow" Color="Transparent" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding ActualWidth, ElementName=templateRoot}">
                <Border x:Name="DropDownBorder" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="1" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}">
                    <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>
            </Themes:SystemDropShadowChrome>
        </Popup>
        <ToggleButton x:Name="toggleButton" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" VerticalContentAlignment="Center"
                      Background="{TemplateBinding Background}" Grid.Column="0" Grid.ColumnSpan="3" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
            <ToggleButton.Style>
                <Style TargetType="{x:Type ToggleButton}">
                    <Setter Property="OverridesDefaultStyle" Value="True"/>
                    <Setter Property="IsTabStop" Value="False"/>
                    <Setter Property="Focusable" Value="False"/>
                    <Setter Property="ClickMode" Value="Press"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ToggleButton}">
                                <Border x:Name="templateRoot" BorderBrush="#FFACACAC" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True">
                                    <Border.Background>
                                        <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                            <GradientStop Color="#FFF0F0F0" Offset="0"/>
                                            <GradientStop Color="#FFE5E5E5" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Border.Background>
                                    <Border x:Name="splitBorder" BorderBrush="Transparent" BorderThickness="1" HorizontalAlignment="Right" Margin="0" SnapsToDevicePixels="True" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}">
                                        <Path x:Name="Arrow" Data="F1M0,0L2.667,2.66665 5.3334,0 5.3334,-1.78168 2.6667,0.88501 0,-1.78168 0,0z" Fill="#FF606060" HorizontalAlignment="Center" Margin="0" VerticalAlignment="Center"/>
                                    </Border>
                                </Border>
                                <ControlTemplate.Triggers>
                                    <MultiDataTrigger>
                                        <MultiDataTrigger.Conditions>
                                            <Condition Binding="{Binding IsEditable, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ComboBox}}}" Value="true"/>
                                            <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="false"/>
                                            <Condition Binding="{Binding IsPressed, RelativeSource={RelativeSource Self}}" Value="false"/>
                                            <Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="true"/>
                                        </MultiDataTrigger.Conditions>
                                        <Setter Property="Background" TargetName="templateRoot" Value="White"/>
                                        <Setter Property="BorderBrush" TargetName="templateRoot" Value="#FFABADB3"/>
                                        <Setter Property="Background" TargetName="splitBorder" Value="Transparent"/>
                                        <Setter Property="BorderBrush" TargetName="splitBorder" Value="Transparent"/>
                                    </MultiDataTrigger>
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter Property="Fill" TargetName="Arrow" Value="Black"/>
                                    </Trigger>
                                    <MultiDataTrigger>
                                        <MultiDataTrigger.Conditions>
                                            <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="true"/>
                                            <Condition Binding="{Binding IsEditable, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ComboBox}}}" Value="false"/>
                                        </MultiDataTrigger.Conditions>
                                        <Setter Property="Background" TargetName="templateRoot">
                                            <Setter.Value>
                                                <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                                    <GradientStop Color="#FFECF4FC" Offset="0"/>
                                                    <GradientStop Color="#FFDCECFC" Offset="1"/>
                                                </LinearGradientBrush>
                                            </Setter.Value>
                                        </Setter>
                                        <Setter Property="BorderBrush" TargetName="templateRoot" Value="#FF7EB4EA"/>
                                    </MultiDataTrigger>
                                    <MultiDataTrigger>
                                        <MultiDataTrigger.Conditions>
                                            <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="true"/>
                                            <Condition Binding="{Binding IsEditable, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ComboBox}}}" Value="true"/>
                                        </MultiDataTrigger.Conditions>
                                        <Setter Property="Background" TargetName="templateRoot" Value="White"/>
                                        <Setter Property="BorderBrush" TargetName="templateRoot" Value="#FF7EB4EA"/>
                                        <Setter Property="Background" TargetName="splitBorder">
                                            <Setter.Value>
                                                <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                                    <GradientStop Color="#FFEBF4FC" Offset="0"/>
                                                    <GradientStop Color="#FFDCECFC" Offset="1"/>
                                                </LinearGradientBrush>
                                            </Setter.Value>
                                        </Setter>
                                        <Setter Property="BorderBrush" TargetName="splitBorder" Value="#FF7EB4EA"/>
                                    </MultiDataTrigger>
                                    <Trigger Property="IsPressed" Value="True">
                                        <Setter Property="Fill" TargetName="Arrow" Value="Black"/>
                                    </Trigger>
                                    <MultiDataTrigger>
                                        <MultiDataTrigger.Conditions>
                                            <Condition Binding="{Binding IsPressed, RelativeSource={RelativeSource Self}}" Value="true"/>
                                            <Condition Binding="{Binding IsEditable, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ComboBox}}}" Value="false"/>
                                        </MultiDataTrigger.Conditions>
                                        <Setter Property="Background" TargetName="templateRoot">
                                            <Setter.Value>
                                                <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                                    <GradientStop Color="#FFDAECFC" Offset="0"/>
                                                    <GradientStop Color="#FFC4E0FC" Offset="1"/>
                                                </LinearGradientBrush>
                                            </Setter.Value>
                                        </Setter>
                                        <Setter Property="BorderBrush" TargetName="templateRoot" Value="#FF569DE5"/>
                                    </MultiDataTrigger>
                                    <MultiDataTrigger>
                                        <MultiDataTrigger.Conditions>
                                            <Condition Binding="{Binding IsPressed, RelativeSource={RelativeSource Self}}" Value="true"/>
                                            <Condition Binding="{Binding IsEditable, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ComboBox}}}" Value="true"/>
                                        </MultiDataTrigger.Conditions>
                                        <Setter Property="Background" TargetName="templateRoot" Value="White"/>
                                        <Setter Property="BorderBrush" TargetName="templateRoot" Value="#FF569DE5"/>
                                        <Setter Property="Background" TargetName="splitBorder">
                                            <Setter.Value>
                                                <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                                    <GradientStop Color="#FFDAEBFC" Offset="0"/>
                                                    <GradientStop Color="#FFC4E0FC" Offset="1"/>
                                                </LinearGradientBrush>
                                            </Setter.Value>
                                        </Setter>
                                        <Setter Property="BorderBrush" TargetName="splitBorder" Value="#FF569DE5"/>
                                    </MultiDataTrigger>
                                    <Trigger Property="IsEnabled" Value="False">
                                        <Setter Property="Fill" TargetName="Arrow" Value="#FFBFBFBF"/>
                                    </Trigger>
                                    <MultiDataTrigger>
                                        <MultiDataTrigger.Conditions>
                                            <Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="false"/>
                                            <Condition Binding="{Binding IsEditable, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ComboBox}}}" Value="false"/>
                                        </MultiDataTrigger.Conditions>
                                        <Setter Property="Background" TargetName="templateRoot" Value="#FFF0F0F0"/>
                                        <Setter Property="BorderBrush" TargetName="templateRoot" Value="#FFD9D9D9"/>
                                    </MultiDataTrigger>
                                    <MultiDataTrigger>
                                        <MultiDataTrigger.Conditions>
                                            <Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="false"/>
                                            <Condition Binding="{Binding IsEditable, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ComboBox}}}" Value="true"/>
                                        </MultiDataTrigger.Conditions>
                                        <Setter Property="Background" TargetName="templateRoot" Value="White"/>
                                        <Setter Property="BorderBrush" TargetName="templateRoot" Value="#FFBFBFBF"/>
                                        <Setter Property="Background" TargetName="splitBorder" Value="Transparent"/>
                                        <Setter Property="BorderBrush" TargetName="splitBorder" Value="Transparent"/>
                                    </MultiDataTrigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ToggleButton.Style>
        </ToggleButton>
        <ContentPresenter Grid.Column="1" x:Name="contentPresenter" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"  ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" 
                          Content="{TemplateBinding SelectionBoxItem}" ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                          IsHitTestVisible="False" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
        </ContentPresenter>
    </Grid>

    <ControlTemplate.Triggers>
        <!-- If selected set selected item to null-->
        <DataTrigger Binding="{Binding IsPressed, ElementName=toggleB}" Value="True">
            <Setter Property="SelectedValue" Value="{x:Null}"/>
            <Setter Property="SelectedValuePath" Value="{x:Null}"/>
            <Setter Property="SelectedItem" Value="{x:Null}"/>
        </DataTrigger>
        <Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="True">
            <Setter Property="Margin" TargetName="shadow" Value="0,0,5,5"/>
            <Setter Property="Color" TargetName="shadow" Value="#71000000"/>
        </Trigger>
        <Trigger Property="HasItems" Value="False">
            <Setter Property="Height" TargetName="DropDownBorder" Value="95"/>
        </Trigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsGrouping" Value="True"/>
                <Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping" Value="False"/>
            </MultiTrigger.Conditions>
            <Setter Property="ScrollViewer.CanContentScroll" Value="False"/>
        </MultiTrigger>
        <Trigger Property="CanContentScroll" SourceName="DropDownScrollViewer" Value="False">
            <Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="{Binding VerticalOffset, ElementName=DropDownScrollViewer}"/>
            <Setter Property="Canvas.Left" TargetName="OpaqueRect" Value="{Binding HorizontalOffset, ElementName=DropDownScrollViewer}"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

我缺少的是将SelectedValuePath和SelectedValue设置为null以及Selected item

    <DataTrigger Binding="{Binding IsPressed, ElementName=toggleB}" Value="True">
        <Setter Property="SelectedValue" Value="{x:Null}"/>
        <Setter Property="SelectedValuePath" Value="{x:Null}"/>
        <Setter Property="SelectedItem" Value="{x:Null}"/>
    </DataTrigger>