Ribbon PopupButton Font Chooser

Ribbon for WPF Forum

Posted 10 years ago by Clint David
Version: 14.2.0610
Avatar

Hi,

I am trying to create a Font Chooser using the PopupButton. The PopupButton PopupMenu is ribbon:ContextMenu. Here is the sample code.

<shared:PopupButton x:Name="popTitleTextIndicator" Grid.Column="1" Margin="0,0,5,0"
HorizontalAlignment="Stretch" HorizontalContentAlignment="Left"
VerticalAlignment="Center">
<shared:PopupButton.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="32" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border BorderBrush="LightGray" BorderThickness="1" Width="24" Height="16">
<TextBlock x:Name="txtTitleContentSize" Text="0.15&quot;" FontSize="8" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<TextBlock x:Name="txtTitleIndicatorText" Text="Segou UI" Foreground="Black" Grid.Column="1" Margin="2,0" />
</Grid>
</shared:PopupButton.Content>
<shared:PopupButton.PopupMenu>
<ribbon:ContextMenu x:Name="PbTitleContextMenu">
<ribbon:Menu>
<ribbon:Separator Label="Font Properties" />
<ribbon:PopupButton x:Name="menuTitleFace" Height="22" Label="Face">
<ribbon:Menu>
<ribbon:Menu.Resources>
<CollectionViewSource x:Key="myFonts" Source="{Binding Source={x:Static Fonts.SystemFontFamilies}}">
<CollectionViewSource.SortDescriptions>
<ComponentModel:SortDescription PropertyName="Source" />
</CollectionViewSource.SortDescriptions>
</CollectionViewSource>

<Style x:Key="FontStyle" TargetType="ribbon:Button">
<Setter Property="Control.FontFamily" Value="{Binding Source}" />
<Setter Property="Control.FontSize" Value="16" />
</Style>

<DataTemplate x:Key="FontTemplate">
<ribbon:Button Style="{StaticResource FontStyle}"
Label="{Binding Source}"
ToolTip="{Binding Source}">
</ribbon:Button>
</DataTemplate>
</ribbon:Menu.Resources>
<ribbon:Menu.ItemsSource>
<Binding Source="{StaticResource myFonts}" />
</ribbon:Menu.ItemsSource>
</ribbon:Menu>
</ribbon:PopupButton>
</ribbon:Menu>
</ribbon:ContextMenu>
</shared:PopupButton.PopupMenu>
</shared:PopupButton>

As you can see, i created a Binding to the System Fonts.

  • First problem is I want the text style of each item to be similar to MS Word where in if the FontFamily is Arial it will show up as Arial FontFamily and so on. I suppose this is just on the Style part.
  • Second, the list of Fonts is displayed in a very long list occupying the entire height of the screen (plus a scroll toggle). I want it at a certain reasonable height only.
  • Third, i want them to be behave like a menuitem (Hover, click) which in my case they aren't.

I can do this in a regular ComboBox but my requirements needs a ribbon PopupButton. How can I achieve it?


Regards,

Clint

Comments (2)

Posted 9 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar

Hi Clint,

We have a ribbon:FontComboBox which is nice but is a ComboBox.  If you can't use that then something like this might be easy to use:

<ribbon:PopupButton Label="Font">
	<ribbon:PopupGallery ItemsSource="{Binding Source={x:Static Fonts.SystemFontFamilies}}" MaxHeight="500" FontSize="20">
		<ribbon:PopupGallery.ItemTemplate>
			<DataTemplate>
				<TextBlock Width="300" Text="{Binding}" FontFamily="{Binding}" TextTrimming="CharacterEllipsis" />
			</DataTemplate>
		</ribbon:PopupGallery.ItemTemplate>
	</ribbon:PopupGallery>
</ribbon:PopupButton>

You can customize it as you need.


Actipro Software Support

Posted 9 years ago by Clint David
Avatar

This works as great! Thanks a lot.

The latest build of this product (v24.1.1) was released 1 month ago, which was after the last post in this thread.

Add Comment

Please log in to a validated account to post comments.