停止关闭组合框

Question

I am using custom control, MultiSelectComboBox that is already placed on code project ( https://www.codeproject.com/Articles/563862/Multi-Select-ComboBox-in-WPF ). This combobox has checkboxes inside of it. I am trying to achieve following: When combobox opens, I want to close it by clicking only on Ok/Cancel button. Cancel will close it and none of the checkboxes will be checked. I don't want it to close when I click with my mouse on a window or anywhere else besides Ok/Cancel button. Here is the part of the code:

<ComboBox x:Name="cmbMultiSelect" Style="{StaticResource MultiSelectComboBoxStyler}">
<ComboBox.ToolTip >
    <ToolTip DataContext="{Binding Path=PlacementTarget.Parent, RelativeSource={x:Static RelativeSource.Self}}">
        <TextBlock TextWrapping="Wrap" Text="{Binding Path=Text, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource CommmaToNewLineConverter}}"/>
    </ToolTip>
</ComboBox.ToolTip>

<ComboBox.ItemTemplate>
    <DataTemplate>
        <CheckBox x:Name="cbSelector"
                  Content="{Binding Title, UpdateSourceTrigger=PropertyChanged}"
                  IsChecked="{Binding Path=IsSelected, Mode=TwoWay}"
                  Tag="{RelativeSource FindAncestor, AncestorType={x:Type ComboBox}}"
                  Click="cbSelector_OnClick"/>
    </DataTemplate>
</ComboBox.ItemTemplate>

Now, here it my style, MultiSelectComboBoxStyler:

<Style x:Key="MultiSelectComboBoxStyler" TargetType="{x:Type ComboBox}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="FocusVisualStyle" Value="{StaticResource ComboBoxFocusVisual}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"/>
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
<Setter Property="BorderBrush" Value="{StaticResource ListBorder}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
<Setter Property="ScrollViewer.PanningMode" Value="Both"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="IsSynchronizedWithCurrentItem" Value="True"/>
<Setter Property="ItemTemplate">
    <Setter.Value>
        <DataTemplate>
            <CheckBox/>
            <!-- Do not really need to specify in this instance, since the ItemTemplate is going to be overwritten -->
        </DataTemplate>
    </Setter.Value>
</Setter>
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="ComboBox">
            <Grid>
                <ToggleButton Name="ToggleButton"
                              Grid.Row="0"
                              Grid.Column="0"
                              Content="{Binding Path=Text, Mode=TwoWay, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}}"
                              IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}, UpdateSourceTrigger=PropertyChanged}"
                              Focusable="false"                        
                              ClickMode="Press"
                              HorizontalContentAlignment="Left">
                    <ToggleButton.Template>
                        <ControlTemplate>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="18"/>
                                </Grid.ColumnDefinitions>
                                <Border x:Name="Border" 
                                        Grid.ColumnSpan="2"
                                        CornerRadius="2"
                                        Background="White"
                                        BorderBrush="{StaticResource NormalBorderBrush}"
                                        BorderThickness="1,1,1,1" />
                                <Border x:Name="BorderComp" 
                                        Grid.Column="0"
                                        CornerRadius="2" 
                                        Margin="1" 
                                        Background="White"
                                        BorderBrush="{StaticResource NormalBorderBrush}"
                                        BorderThickness="0,0,0,0" >
                                    <TextBlock x:Name="txtOnToggleButton"
                                                   Background="White"
                                                   Text="{Binding Path=Text, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}}" 
                                                   TextTrimming="WordEllipsis"
                                                   TextWrapping="Wrap"
                                                   Padding="3" />
                                </Border>
                                <Path x:Name="Arrow"
                                      Grid.Column="1"
                                      Fill="{StaticResource GlyphBrush}"
                                      HorizontalAlignment="Center"
                                      VerticalAlignment="Center"
                                      Data="M 0 0 L 4 4 L 8 0 Z"/>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsEnabled" Value="False">
                                    <Setter TargetName="Arrow" Property="Fill" Value="{StaticResource DisabledForegroundBrush}" />
                                </Trigger>
                                <Trigger Property="ToggleButton.IsMouseOver" Value="true">
                                    <Setter TargetName="Border" Property="Background" Value="{StaticResource MouseHoverBrush}" />
                                    <Setter TargetName="txtOnToggleButton" Property="Background" Value="{StaticResource MouseHoverBrush}" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </ToggleButton.Template>
                </ToggleButton>
                <Popup Name="Popup"
                       Placement="Bottom"                        
                       AllowsTransparency="True" 
                       Focusable="False" IsOpen="{TemplateBinding IsDropDownOpen}"
                       PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}">
                    <theme:SystemDropShadowChrome Name="Shdw"
                                                     Color="Transparent"
                                                     MinWidth="{TemplateBinding ActualWidth}"
                                                     MaxHeight="{TemplateBinding MaxDropDownHeight}">
                        <Border x:Name="DropDownBorder"
                                    Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"
                                    BorderThickness="1"
                                    BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}">
                            <Grid Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding ActualWidth}" 
                                  MaxHeight="{TemplateBinding MaxDropDownHeight}">
                                <ScrollViewer Name="DropDownScrollViewer" Margin="4,0,4,30" SnapsToDevicePixels="True">
                                    <Grid RenderOptions.ClearTypeHint="Enabled">
                                        <Canvas Height="0" Width="0" HorizontalAlignment="Left" VerticalAlignment="Top">
                                            <Rectangle Name="OpaqueRect"
                                                           Height="{Binding ElementName=DropDownBorder,Path=ActualHeight}"
                                                           Width="{Binding ElementName=DropDownBorder,Path=ActualWidth}"
                                                           Fill="{Binding ElementName=DropDownBorder,Path=Background}" />
                                        </Canvas>
                                        <ItemsPresenter Name="ItemsPresenter"
                                                            KeyboardNavigation.DirectionalNavigation="Contained"
                                                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                                    </Grid>
                                </ScrollViewer>
                                <StackPanel Orientation="Horizontal">
                                    <Button Name="btnOk" Content="Ok" VerticalAlignment="Bottom" Margin="2, 0, 2, 2"
                                            Width="50" Height="25"
                                            Background="{StaticResource WindowBackgroundBrush}" 
                                            Command="{Binding OkCommand}">
                                        <Button.Style>
                                            <Style TargetType="Button">
                                                <Setter Property="Visibility" Value="Collapsed"/>
                                                <Style.Triggers>
                                                    <DataTrigger Binding="{Binding Path=ShowFilterButtons, 
                                        RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type controls:MultiSelectComboBox}}}" 
                                                                 Value="True">
                                                        <Setter Property="Visibility" Value="Visible"/>
                                                    </DataTrigger>
                                                </Style.Triggers>
                                            </Style>
                                        </Button.Style>
                                        </Button>
                                    <Button Name="btnCancel" Content="Cancel" VerticalAlignment="Bottom" Margin="2, 0, 2, 2" 
                                            Width="50" Height="25"
                                            Background="{StaticResource WindowBackgroundBrush}"
                                            Command="{Binding CancelCommand}">
                                        <Button.Style>
                                            <Style TargetType="Button">
                                                <Setter Property="Visibility" Value="Collapsed"/>
                                                <Style.Triggers>
                                                    <DataTrigger Binding="{Binding Path=ShowFilterButtons, 
                                        RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type controls:MultiSelectComboBox}}}" 
                                                                 Value="True">
                                                        <Setter Property="Visibility" Value="Visible"/>
                                                    </DataTrigger>
                                                </Style.Triggers>
                                            </Style>
                                        </Button.Style>
                                    </Button>
                                </StackPanel>
                            </Grid>
                        </Border>
                    </theme:SystemDropShadowChrome>
                </Popup>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="HasItems" Value="false">
                    <Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/>
                </Trigger>
                <Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true">
                    <Setter TargetName="DropDownBorder" Property="CornerRadius" Value="4"/>
                    <Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0"/>
                </Trigger>
                <Trigger SourceName="Popup" Property="Popup.HasDropShadow" Value="true">
                    <Setter TargetName="Shdw" Property="Margin" Value="0,0,5,5"/>
                    <Setter TargetName="Shdw" Property="Color" Value="#71000000"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Setter.Value>
</Setter>

This is how I use custom control in my view:

<controls:MultiSelectComboBox Width="200" Height="30" HorizontalAlignment="Left" DefaultText="All" ItemsSource="{Binding Chains}" SelectedItems="{Binding SelectedChains, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" ShowFilterButtons="True"/>

Although I am pretty new to WPF I was able to understand some things but again this issue is giving me headaches. I am stuck. I know that there is something to do with toggle button but no success in resolve it. I appreciate all the help I can get.

Answer 1

Since you are using multiselectbox control, you should add new dependencyproperty

Also, Popup tag should look like this

IsOpen="{Binding Path=IsChecked, ElementName=ToggleButton}"

While ToggleButton should look like:

IsChecked="{Binding Path=ControlComboBox, Mode=TwoWay,
                        RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl},
                        UpdateSourceTrigger=PropertyChanged}"
                                  Command="{Binding PressedCommand}"

And at the end you should use MultiSelectCombBox in this way:

ControlComboBox="{Binding ManageComboBox, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"