WPF deselect ComboBox with CheckBox - ComboBox with reset item

Question

I am using DataTrigger to deselect ComboBox with CheckBox (Unchecked == deselected). What i Need is:

when i select some item from ComboBox then CheckBox need to become Checked.
When i uncheck CheckBox then ComboBox need to deselect.
CheckBox cannot be checked if ComboBox is deselected (or if ComboBox is deselected after CheckBox is Checked ComboBox should be selected with first item)

Here is XAML (this is working version and need to be changed). Solution must be pure XAML (no C# code)!

 <CheckBox HorizontalContentAlignment="Stretch" VerticalContentAlignment="Center" Margin="90,519,13,0" VerticalAlignment="Top" Height="21" Width="Auto">


<CheckBox.Style>
    <Style TargetType="{x:Type CheckBox}" BasedOn="{StaticResource {x:Type CheckBox}}">
        <Style.Resources>
            <Style TargetType="Path">
                <Setter Property="FlowDirection" Value="LeftToRight" />
            </Style>
            <Style TargetType="TextBlock">
                <Setter Property="FlowDirection" Value="LeftToRight" />
            </Style>
        </Style.Resources>

        <Setter Property="FlowDirection" Value="RightToLeft" />
        <!--<Setter Property="IsChecked" Value="True" />
                                                            <Style.Triggers>
                                                                <DataTrigger Binding="{Binding SelectedItem, ElementName=comboBoxEventDevice, UpdateSourceTrigger=PropertyChanged}" Value="{x:Null}">
                                                                    <Setter Property="IsChecked" Value="False" />
                                                                </DataTrigger>
                                                            </Style.Triggers>-->
    </Style>
</CheckBox.Style>
<ComboBox x:Name="comboBoxEventDevice" FlowDirection="LeftToRight" SelectionChanged="comboBoxEventDevice_SelectionChanged" Width="Auto">
    <ComboBox.Style>
        <Style TargetType="{x:Type ComboBox}" BasedOn="{StaticResource {x:Type ComboBox}}">
            <Setter Property="SelectedIndex" Value="1" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding Path=IsChecked, RelativeSource={RelativeSource AncestorType={x:Type CheckBox}}}" Value="True">
                    <Setter Property="SelectedIndex" Value="0" />
                </DataTrigger>
                <!--<DataTrigger Binding="{Binding Path=IsChecked, RelativeSource={RelativeSource AncestorType={x:Type CheckBox}}}" Value="False">
                                                                        <Setter Property="SelectedIndex" Value="1" />
                                                                    </DataTrigger>-->
            </Style.Triggers>
        </Style>
    </ComboBox.Style>
</ComboBox>
</CheckBox>

UPDATE:

I try to not use nested controls (combobox inside checkbox) so i change XAML bu everything is same as before:

<CheckBox x:Name="checkBoxEventDevice" Margin="70,600,13,0" VerticalAlignment="Top" Height="21"/>
                                                <ComboBox x:Name="comboBoxEventDevice" Margin="90,519,10,0" VerticalAlignment="Top" SelectionChanged="comboBoxEventDevice_SelectionChanged">
                                                     <ComboBox.Style>
                                                        <Style TargetType="{x:Type ComboBox}" BasedOn="{StaticResource {x:Type ComboBox}}">
                                                            <Setter Property="SelectedIndex" Value="1" />
                                                            <Style.Triggers>
                                                                <!--<DataTrigger Binding="{Binding Path=IsChecked, ElementName=checkBoxEventDevice}" Value="True">
                                                                    <Setter Property="SelectedIndex" Value="0" />
                                                                </DataTrigger>-->
                                                                <DataTrigger Binding="{Binding Path=IsChecked, ElementName=checkBoxEventDevice}" Value="false">
                                                                    <Setter Property="SelectedIndex" Value="-1" />
                                                                </DataTrigger>
                                                            </Style.Triggers>
                                                        </Style>
                                                    </ComboBox.Style>
                                                </ComboBox>

Problem is in <Setter Property="SelectedIndex" Value="1" /> line. If i remove it then ComboBox is deselected when datatrigger is off but if i keep it then when datatrigger is off combobox is set to second item. So i need some line where i can tell: do nothing, do not deselect combobox, keep current state.

Is there a particular reason you are avoiding code? Solution would be infinitely simpler (not to mention unit testable) in a ViewModel. — benPearce
I want clean XAML because i want to make universal "copy-paste" solution for the future. So do you think this is possible. I have problem for example: if i set checkbox unchecked state to deselect combobox everything works fine but every time when i check checkbox it deselect combobox. Somehow when condition of datatrigger is true datatrigger works fine but when is false combobox is always set to deselected state (suppose it is default initial state of combobox). I need something to say in style triggers if condition is false dont do anything keep current state as is. — Milan Kocic
Is there a special reason, you placed the combobox inside the checkbox? A ControlTemplate would make much more sense here — lokusking
I just wanted to make nullable ComboBox so i can deselect it with CheckBox (i don't want to use MVVM templates for this purpose, it is too late for this project). But I don't think the problem will be solved if i move combobox outside checkbox. what is the differents. But i will try now to see what will happen and i will write my post here as a comment. — Milan Kocic
A reusable solution would be a UserControl which encapsulates the functionality you are trying to achieve and you could put the logic behind it in to the ViewModel. Just because MVVM hasn't been used elsewhere in your project doesn't mean that it is not the best solution for the problem. — benPearce

Milan Kocic Milan Kocic · Accepted Answer · 2016-07-23T11:28:54

I found solution and these features are satisfied :

When i select some item from ComboBox then CheckBox need to become Checked.
When i uncheck CheckBox then ComboBox need to deselect.
If ComboBox is in deselected state, and when CheckBox is Checked ComboBox should be selected with first item (if items exist elsewhere CheckBox stays checked and ComboBox deselected).

Here is XAML:

                                                <CheckBox HorizontalContentAlignment="Stretch" VerticalContentAlignment="Center" Margin="90,519,13,0" VerticalAlignment="Top" Height="21">
                                                    <CheckBox.Style>
                                                        <Style TargetType="{x:Type CheckBox}" BasedOn="{StaticResource {x:Type CheckBox}}">
                                                            <Style.Resources>
                                                                <Style TargetType="Path">
                                                                    <Setter Property="FlowDirection" Value="LeftToRight" />
                                                                </Style>
                                                                <Style TargetType="TextBlock">
                                                                    <Setter Property="FlowDirection" Value="LeftToRight" />
                                                                </Style>
                                                            </Style.Resources>
                                                            <Setter Property="FlowDirection" Value="RightToLeft" />
                                                            <Setter Property="IsChecked" Value="True" />
                                                            <Style.Triggers>   
                                                                <DataTrigger Binding="{Binding Path=SelectedIndex, ElementName=comboBoxEventDevice}" Value="-1">
                                                                    <Setter Property="IsChecked" Value="False" />
                                                                </DataTrigger>
                                                            </Style.Triggers>
                                                        </Style>
                                                    </CheckBox.Style>
                                                    <ComboBox x:Name="comboBoxEventDevice" FlowDirection="LeftToRight" SelectionChanged="comboBoxEventDevice_SelectionChanged">
                                                        <ComboBox.Style>
                                                            <Style TargetType="{x:Type ComboBox}" BasedOn="{StaticResource {x:Type ComboBox}}">
                                                                <Setter Property="SelectedIndex" Value="0" />
                                                                <Style.Triggers>
                                                                    <DataTrigger Binding="{Binding Path=IsChecked, RelativeSource={RelativeSource AncestorType={x:Type CheckBox}}}" Value="False">
                                                                        <Setter Property="SelectedIndex" Value="-1" />
                                                                    </DataTrigger>
                                                                </Style.Triggers>
                                                            </Style>
                                                        </ComboBox.Style>
                                                    </ComboBox>
                                                </CheckBox>

Now if someone need WPF nullable ComboBox all what need to do is to simple replace existing Combobox tag in its XAML code with XAML above and change x:Name and ElementName of ComboBox to original ComboBox in these lines:

<DataTrigger Binding="{Binding Path=SelectedIndex, ElementName=comboBoxEventDevice}" Value="-1">

<ComboBox x:Name="comboBoxEventDevice" FlowDirection="LeftToRight" SelectionChanged="comboBoxEventDevice_SelectionChanged">

Also callback for SelectionChanged="comboBoxEventDevice_SelectionChanged" should be changed or removed depending do you need event handling or not. Margins of CheckBox need to be changed to your margins (and maybe you will need to add Width property but that depends on your project) in line:

<CheckBox HorizontalContentAlignment="Stretch" VerticalContentAlignment="Center" Margin="90,519,13,0" VerticalAlignment="Top" Height="21">

WPF deselect ComboBox with CheckBox - ComboBox with reset item

1 Answers