DropDownButton that stays open

6 posts, 1 answers
  1. Inger Marie
    Inger Marie avatar
    60 posts
    Member since:
    Nov 2010

    Posted 01 Jul 2011 Link to this post

    I've created a DropDownButton which has a sequence of checkboxes and a ok/cancel button pair in the dropdowncontent. The dropdowncontent is not supposed to close unless I click one of the buttons, hit escape, return or click outside the dropdowncontent.

    However, the dropdowncontent closes whenever I click the background on the dropdowncontent - which I do occationally because checkboxes are small and hard to hit when in a hurry.

    How do I prevent the DropDownContent from disappearing when I click it's background (that is, the grid which holds the entire thing)?

    Thanks!
  2. Answer
    Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 06 Jul 2011 Link to this post

    Hello Inger Marie,

    This cannot be achieved out of the box by setting only the KeepOpen property set to true - this way the DropDownContent will stay opened when you click outside it (clicking inside it will close the content in many scenarios). So I suggest you to  use the PreviewMouseLeftButtonDown event of the RadDropDownButton and check the OriginalSource. You have to se e.handled = true in the cases when you don't want to close the DropDownContent.
    Please let us know if this helped you or not.

    Kind regards,
    Petar Mladenov
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  3. UI for WPF is Visual Studio 2017 Ready
  4. Hubert
    Hubert avatar
    19 posts
    Member since:
    Feb 2012

    Posted 04 Apr 2012 Link to this post

    Hi,

    this post is a couples of months old, but i hit the same problem.

    As mentioned KeepOpen will not solve the problem, but if you look carefully at the
    WPF Controls Example, in my case it's WPF Q3 2011 SP1, for the DropDown Button,
    you can see that the first DropDown Button 'XAML Content' does not close if you hit
    empy space, because in the background is a ListBox.

    I figured three examples out to circumvent the problem. There's only one problem.
    How do you supress that the ListBoxItem is highlighted while selected?

    I think the first example is very easy and a good choice.
    <telerik:RadDropDownButton>
         <telerik:RadDropDownButton.DropDownContent>
              <ListBox>
            <ListBoxItem>
             <ListBoxItem.Style>
                <Style TargetType="ListBoxItem">
                   <Setter Property="IsTabStop"
                        Value="False" />
                   <Setter Property="Focusable"
                              Value="False" />
                 </Style>
              </ListBoxItem.Style>
             <my component as ListBoxItem />
               </ListBoxItem>
             </ListBox>
         </telerik:RadDropDownButton.DropDownContent>
    </telerik:RadDropDownButton>

    The second example is verbose and works with an ItemContainerStyle.
    <Style x:Key="ListBoxtemStyleNoHighlighting"
                   TargetType="ListBoxItem">
                <Setter Property="Padding"
                        Value="3" />
                <Setter Property="HorizontalContentAlignment"
                        Value="Left" />
                <Setter Property="VerticalContentAlignment"
                        Value="Top" />
                <Setter Property="Background"
                        Value="Transparent" />
                <Setter Property="BorderThickness"
                        Value="1" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListBoxItem">
                            <Grid Background="{TemplateBinding Background}">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="MouseOver" />
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="SelectionStates">
                                        <VisualState x:Name="Unselected" />
                                        <VisualState x:Name="Selected" />
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="FocusStates">
                                        <VisualState x:Name="Focused" />
                                        <VisualState x:Name="Unfocused" />
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Rectangle x:Name="fillColor"
                                           Fill="#FFBADDE9"
                                           IsHitTestVisible="False"
                                           Opacity="0"
                                           RadiusY="1"
                                           RadiusX="1" />
                                <Rectangle x:Name="fillColor2"
                                           Fill="#FFBADDE9"
                                           IsHitTestVisible="False"
                                           Opacity="0"
                                           RadiusY="1"
                                           RadiusX="1" />
                                <ContentPresenter x:Name="contentPresenter"
                                                  ContentTemplate="{TemplateBinding ContentTemplate}"
                                                  Content="{TemplateBinding Content}"
                                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                  Margin="{TemplateBinding Padding}" />
                                <Rectangle x:Name="FocusVisualElement"
                                           RadiusY="1"
                                           RadiusX="1"
                                           Stroke="#FF6DBDD1"
                                           StrokeThickness="1"
                                           Visibility="Collapsed" />
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

    <ListBox ItemContainerStyle="{StaticResource ListBoxtemStyleNoHighlighting}">
                            <ListBoxItem>
                                <my component as ListBoxItem />
                            </ListBoxItem>
                        </ListBox>

    The third example overrides brushes, but if you have a ListBox in the ListBoxItem you have to
    declare new colors for the overriden ones. I don't like to override SystemColors.
    <ListBox>
         <ListBox.Resources>
                      <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
                                        Color="Transparent" />
                      <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}"
                                        Color="Black" />
                      <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}"
                                        Color="Transparent" />
         </ListBox.Resources>
                            <ListBoxItem>
                                <my component as ListBoxItem />
                            </ListBoxItem>
     </ListBox>


    Maybe telerik introduces a new Property that will make this much easier. :-)
    If you have a less verbose solution do not hesitate to answer.

    regards,
    Hubert
  5. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 06 Apr 2012 Link to this post

    Hi,
    Thank you for the provided workarounds and code snippets I hope they will help other customers.
    As for another solution - I played around a little bit and found this:
    <telerik:RadDropDownButton Width="180"
                                     Height="30"
                                     Content="Text button">
        <telerik:RadDropDownButton.DropDownContent>
            <!--  The Background should not be {x:Null}  -->
            <Grid Width="200"
                        Background="Transparent"
                        MouseLeftButtonDown="Grid_MouseLeftButtonDown">
                <StackPanel>
                    <CheckBox Width="20"
                                    Height="20"
                                    HorizontalAlignment="Center" />
                    <CheckBox Width="20"
                                    Height="20"
                                    HorizontalAlignment="Center" />
                    <CheckBox Width="20"
                                    Height="20"
                                    HorizontalAlignment="Center" />
                    <CheckBox Width="20"
                                    Height="20"
                                    HorizontalAlignment="Center" />
                </StackPanel>
            </Grid>
        </telerik:RadDropDownButton.DropDownContent>
    </telerik:RadDropDownButton>
    Code behind:
    private void Grid_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        e.Handled = true;
    }
    Basically you just handle the MouseLeftButtonDown event of the main panel in the DropDownContent and the it won't close anymore.
    I've attached a sample project with this code so that anyone interested could test it. 

    Kind regards,
    Zarko
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  6. Hubert
    Hubert avatar
    19 posts
    Member since:
    Feb 2012

    Posted 11 Apr 2012 Link to this post

    Hi,
    Thank you for another solution.
    I try to keep code behind to a minimum, but a few lines are better than tons of XAML or ViewModel code, just
    to circumvent a tiny problem.

    Kind regards,
    Hubert
  7. Simon
    Simon avatar
    3 posts
    Member since:
    May 2012

    Posted 20 Jan 2013 Link to this post

    If you use an ItemsControl instead of a listbox you will not get any selection highlighting
Back to Top
UI for WPF is Visual Studio 2017 Ready