PopupButton example

Editors for WPF Forum

Posted 10 months ago by John Lutz
Version: 17.2.0665
Environment: Windows 10 (64-bit)

Can you point me to a PopupButton sample that has the button looking like a combo box with an Image and Text?


Comments (4)

Posted 10 months ago by Actipro Software Support - Cleveland, OH, USA

Hi John,

Are you referring to the PopupButton in the Shared Library?  If so, check out the "PopupButton Features" sample.  That shows how you can set a "Merged" display mode to make it look like a read-only ComboBox.  You can set the Content property to anything, including a StackPanel of Image and TextBlock if you want to show both image/text there.

Actipro Software Support

Posted 10 months ago by John Lutz

Thanks.  A corporate style was preventing my stackpanel content from working.  

Can you make the default drop arrow match WPF combo boxes?

<Path x:Name="arrow" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M 0,0 L 2.5,3 L 5,0 Z"/>

Posted 10 months ago by John Lutz

Actually,  our style makes the popup button behave a lot more like a combo box which is what I want.   For example, the arrow is the correct size and the hover highlighting only affects the arrow rectangle, not the whole button.   How would I add an image to the content when using this style or another one like it.   Not sure how to bind the image...

  <Style x:Key="ComboBoxPopup" TargetType="{x:Type ActiproShared:PopupButton}" BasedOn="{StaticResource {x:Type ActiproShared:PopupButton}}">
    <Setter Property="Template">
        <ControlTemplate  TargetType="{x:Type ActiproShared:PopupButton}">
          <Border Background="{TemplateBinding Background}" 
                  BorderBrush="{TemplateBinding BorderBrush}" 
                  BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0">
            <Grid VerticalAlignment="Center">
                <ColumnDefinition Width="Auto"/>
              <TextBlock x:Name="text" VerticalAlignment="Center"
                        Text="{TemplateBinding Content}" 
                        Foreground="{DynamicResource Gray145}" Margin="2,0,6,0"/>
              <Border x:Name="border" Grid.Column="1"
                  Background="{DynamicResource White}"  
                  BorderBrush="{DynamicResource Gray155}" 
                  Width="14" Height="16">
                <Path x:Name="arrow" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,1,0"
                  Data="M 0,0 L 2.5,3 L 5,0 Z" 
                  Fill="{DynamicResource Gray145}" />
            <Trigger Property="IsMouseOver" Value="True">
              <Setter Property="Background" TargetName="border" Value="{DynamicResource Blue1}"/>
              <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource Blue3}"/>
              <Setter TargetName="arrow" Property="Fill" Value="{DynamicResource Blue}"/>
            <Trigger Property="IsEnabled" Value="false">
              <Setter Property="Opacity" Value="0.4"/>
            <Trigger Property="IsPressed" Value="True">
              <Setter Property="Background" TargetName="border" Value="{DynamicResource Blue2}"/>
              <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource Blue}"/>
              <Setter TargetName="arrow" Property="Fill" Value="{DynamicResource BlueDark}"/>
Posted 10 months ago by Actipro Software Support - Cleveland, OH, USA

Hi John,

Actually our ComboBox style uses "M 0,0 L 2.5,3 L 5,0 Z".  We will update it to match that since it wasn't the same.

As for the image, you can use a ContentPresenter instead of TextBlock and have the content be a StackPanel of Image/TextBlock.

Actipro Software Support

The latest build of this product (v2018.1 build 0675) was released 13 days ago, which was after the last post in this thread.

Add Comment

Please log in to a validated account to post comments.