PopupButton example

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.

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"/>

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">
      <Setter.Value>
        <ControlTemplate  TargetType="{x:Type ActiproShared:PopupButton}">
          <Border Background="{TemplateBinding Background}" 
                  BorderBrush="{TemplateBinding BorderBrush}" 
                  BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0">
            <Grid VerticalAlignment="Center">
              <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition Width="Auto"/>
              </Grid.ColumnDefinitions>
              <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}" 
                  BorderThickness="0"                     
                  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" 
                  SnapsToDevicePixels="True" 
                  Fill="{DynamicResource Gray145}" />
              </Border>
            </Grid>
          </Border>
          <ControlTemplate.Triggers>
            <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>
            <Trigger Property="IsEnabled" Value="false">
              <Setter Property="Opacity" Value="0.4"/>
            </Trigger>
            <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}"/>
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

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.