CODEWITHSUNDEEP
c#wpfxamlcombobox
Fishman
Fishman

Reputation: 73

ComboBox avoid popup close

I am trying to make a custom color picker which inherit from ComboBox.

This is the screenshot.

screenshot

As you can see, it's just a very normal color picker interface.

So far, almost everything is fine except the problem I write in the screenshot.

I can drag the spectrum slider, RGBA sliders and click those 2 buttons without problem.

If I click on empty space inside the ComboBoxItem, the popup disppears, this is also the behavior I need and it works.

Here are the codes of the canvas area.

XAML

<Canvas x:Name="colorPlatte" Width="175" Height="150" Grid.Row="0" Grid.Column="0" Margin="4" MouseLeftButtonDown="colorPlatte_MouseLeftButtonDown" MouseLeftButtonUp="colorPlatte_MouseLeftButtonUp" MouseMove="colorPlatte_MouseMove">
                <Rectangle x:Name="ColorShadingRectangle" 
                           Height="{Binding ElementName=colorPlatte, Path=Height}" 
                           Width="{Binding ElementName=colorPlatte, Path=Width}" 
                           Fill="{Binding ElementName=sliderSpectrum, Path=SelectedColor, Converter={StaticResource ColorToSolidBrush}}"/>
                <Rectangle x:Name="WhiteGradient" Width="{Binding ElementName=colorPlatte,Path=Width}" Height="{Binding ElementName=colorPlatte,Path=Height}">
                    <Rectangle.Fill>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                            <GradientStop Offset="0" Color="#ffffffff" />
                            <GradientStop Offset="1" Color="Transparent" />
                        </LinearGradientBrush>
                    </Rectangle.Fill>
                </Rectangle>
                <Rectangle x:Name="BlackGradient" Width="{Binding ElementName=colorPlatte,Path=Width}" Height="{Binding ElementName=colorPlatte,Path=Height}">
                    <Rectangle.Fill>
                        <LinearGradientBrush StartPoint="0,1" EndPoint="0, 0">
                            <GradientStop Offset="0" Color="#ff000000" />
                            <GradientStop Offset="1" Color="#00000000" />
                        </LinearGradientBrush>
                    </Rectangle.Fill>
                </Rectangle>

                <Canvas x:Name="colorSelector" Width="12" Height="12" IsHitTestVisible="False">
                    <Ellipse Width="12" Height="12" StrokeThickness="3" Stroke="#FFFFFFFF" IsHitTestVisible="False" />
                    <Ellipse Width="12" Height="12" StrokeThickness="1" Stroke="#FF000000" IsHitTestVisible="False" />
                </Canvas>
            </Canvas>

Code-behind related to the canvas

    private void colorPlatte_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        Point p = e.GetPosition(colorPlatte);
        UpdateColorSelectorPosColor(p);
        colorPlatte.CaptureMouse();
    }

    private void colorPlatte_MouseMove(object sender, MouseEventArgs e)
    {
        if (e.LeftButton == MouseButtonState.Pressed)
        {
            Point p = e.GetPosition(colorPlatte);
            UpdateColorSelectorPosColor(p);
            Mouse.Synchronize();
        }
    }

    private void colorPlatte_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        colorPlatte.ReleaseMouseCapture();
    }

So, how should I prevent the popup close after user drags the color selector?

Thanks.

Edit : 12/6

Sorry for not descript my question clearly and miss lead you, the previous screenshot was taken in design mode directly and might ignore too much.

ColorPicker2

I should not say inherit from ComboBox, the ColorPicker is actually an UserControl, and I place it in baseComboBoxItem(inherit from ComboBoxItem) which under a baseComboBox(inherit from ComboBox)

When user click the ComboBox, only one item in popup(the ColorPicker) for user to choose color.

But if user drag the color selector(please refer to previous screenshot), it cause the ComboBox popup(dropdown?) closed automatically.

My question is how should I do to stay the popup open after user drag the color selector(after user trigger MouseLeftButtonUp event)?

Upvotes: 2

Views: 1147

Answers (1)

Programmer
Programmer

Reputation: 2123

I think that if you want to do that (and use a combobox) you have to set the whole template of the combobox (described here), and in the popup set StayOpen to True.

But, as HighCore commented, you don't really need a combobx.

You should have a ToggleButton, and When it's Checked set the canvas visibility to visible, and when it's not checked set the canvas visibility to collapsed

Upvotes: 1

Related Questions