content for RibbonButton

Ribbon for WPF Forum

Posted 6 years ago by Ilia Korjoukov
Avatar

Hello,

I have a suggestion for all rubbon classes that currently use ImageSource to show an icon. In many cases I prefer to use visual elements, like Path, to make a button icon. It's faster to define and more flexible than images. I can not do it for the RibbonButton because it has no Content property, and its control template includes only the Image element. I made a workaround, changing the RibbonButton templates to show a ContentControl which is binded to Tag property (can be an attached property):

<!-- Old template --> 
<Image
	x:Name="Image" 
	Margin="1" 
	VerticalAlignment="Center" 
	Stretch="Uniform" 
	Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ImageSourceSmallSize.Width}" 
	Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ImageSourceSmallSize.Height}" 
	Source="{TemplateBinding ImageSourceSmall}" 
	SnapsToDevicePixels="True" />
<!-- New template -->
<Viewbox x:Name="Image"
	 Margin="1" 
	VerticalAlignment="Center" 
	Stretch="Uniform" 
	Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ImageSourceSmallSize.Width}" 
	Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ImageSourceSmallSize.Height}" 
	SnapsToDevicePixels="True" > 
    <ContentPresenter Content="{TemplateBinding Tag}"/>
</Viewbox> 

 

Then I assign visual element that draws an icon to the Tag property in my XAML files . It works, but having a dedicated Content property would be better (it allows to use images as well).  

However, I've got a unexpected problem in my workaround. When any RibbonButton with 'Tag icon' is send to QAT (via a content menu), its icon on the button itself vanishes. Thus, the icon is copied to QAT but erased on the button in the ribbon tab. To get back the icon, I need to remove button from QAT and restart an application. I guess, it's related to control cloning for QAT.

Is there a fast solution for this problem?

Thanks in advance!

Ilia

 

 

 

 

Comments (3)

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

Hi Ilia,

That is because a visual can only be in one location at a time.  If you use a ContentTemplate instead of Content you can have your DataTemplate be replicated in multiple locations at the same time.


Actipro Software Support

Posted 6 years ago by Ilia Korjoukov
Avatar

Hello!

Thanks for this suggestion, the probem has been solved after I binded ContentTemplate the Tag property with a DataTemplate. A icon was shown in both locations normally.

However, the same approach did not work, when  I used a custom attached property instead of the Tag. When a datatemplate is assigned to the attached property, an icon is always shown on the button but does not appears in the QAT. So, it is a reverse error. As I may guess, attached properties are not cloned for QAT 

Anyway, I am fine with using the Tag property.

Cheers, Ilia

Posted 6 years ago by keepITcool - Amsterdam
Avatar

Ilia..

I may have an alternative. I'm using DrawingImage resources based on geometrygroups or pathgeometries. 

The rectangle acts as a clipping mask and is needed for positioning.. the drawingimage will then position, scale and size correctly.
In sample the imagesource is defined in button xaml, probably better to do so in the command binding definition.

I'm using Expression with xaml resource dictionary layout... and then copy the "geometry" strings into my geometry group template.. you'll have to remove the F0/F1 (fill rule directive) from the string... bit of a bother but it's getting routine :-) 

 

HTH, Jurgen

 

<GeometryGroup x:Key="geo_pane_horz">
<GeometryGroup.Children>
<PathGeometry Figures="M 3,8L 14, 8C 14.5, 8 15, 7.5 15, 7L 15, 2C 15,1.5 14.5,1 14,1L 3,1C 2.5,1 2,1.5 2, 2L 2, 7C 2, 7.5 2.5, 8 3, 8 Z M 3, 7L 14, 7L 14, 3L 3, 3L 3, 7 Z " />
<PathGeometry Figures="M 3,16L 14,16C 14.5,16 15,15.5 15,15L 15,10C 15,9.5 14.5,9 14,9L 3,9C 2.5,9 2,9.5 2,10L 2,15C 2,15.5 2.5,16 3,16 Z M 3,15L 14,15L 14,11L 3,11L 3,15 Z " />
</GeometryGroup.Children>
</GeometryGroup>

<RectangleGeometry x:Key="rect16"
Rect="0,0,16,16" />

<Pen x:Key="pen0"
Thickness="0"
Brush="Transparent" />

<DrawingImage x:Key="drw_pane_horz">
<DrawingImage.Drawing>
<DrawingGroup>
<GeometryDrawing Geometry="{StaticResource rect16}"
Pen="{StaticResource pen0}" />
<GeometryDrawing Geometry="{StaticResource geo_pane_horz}"
Brush="DarkSlateGray" />
</DrawingGroup>
</DrawingImage.Drawing>
</DrawingImage>

<ribbon:Button Name="btnHorz" Command="my:Commands.ArrangeWindowsHorizontal"
ImageSourceSmall="{StaticResource drw_pane_horz}" />

[Modified 6 years ago]

The latest build of this product (v2018.1 build 0675) 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.