PopupButton example

Posted 2 months ago by Avatar John Lutz

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 2 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 2 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 2 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 2 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
Information The latest build of this product (2018.1 build 0671) was released 1 month ago, which was after the last post in this thread.

Add a Comment

Please log in to a validated account to post comments.