How to apply xaml vector images to tab controls?

Docking/MDI for WPF Forum

Posted 4 years ago by Michael Janulaitis - Corner Bowl Software
Version: 19.1.0684
Avatar

I am using xaml vector material design images from google and would like to apply the canvas to my tabs.  I only see an ImageSource option.  Is this possible?

Comments (5)

Posted 4 years ago by Michael Janulaitis - Corner Bowl Software
Avatar

I have successfully bound to a DrawingImage resource with an implementation of an IMultiValueConverter however my drawing image has a binding on the fill so the icon color can match the text.  I am unable to get the selected fill to work.  Here is the xaml:

    <Style x:Key="DockingWindowStyle" TargetType="docking:DockingWindow">
        <Setter Property="ImageSource" >
            <Setter.Value>
                <MultiBinding Converter="{StaticResource ImageConverter}">
                    <Binding RelativeSource="{RelativeSource Self}"/>
                    <Binding Path="ImageStyle"/>
                </MultiBinding>
            </Setter.Value>
        </Setter>        
    </Style>

    <DrawingImage x:Key="MyTreeNodeImage">
        <DrawingImage.Drawing>
            <GeometryDrawing Brush="{Binding RelativeSource={RelativeSource Self},Path=(TextElement.Foreground)}" 
                             Geometry="M11.53,2C11.53,4.4 13.5,6.35 15.88,6.35H17.66V8.05C17.66,10.45 19.6,12.39 22,12.4V2.84A0.84,0.84 0 0,0 21.16,2H11.53M6.77,6.8C6.78,9.19 8.72,11.13 11.11,11.14H12.91V12.86C12.92,15.25 14.86,17.19 17.25,17.2V7.63C17.24,7.17 16.88,6.81 16.42,6.8H6.77M2,11.6C2,14 3.95,15.94 6.35,15.94H8.13V17.66C8.14,20.05 10.08,22 12.47,22V12.43A0.84,0.84 0 0,0 11.63,11.59L2,11.6Z" />
        </DrawingImage.Drawing>
    </DrawingImage>

Then finally my ImageConverter:

    public class ImageConverter : IMultiValueConverter
    {
        public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            FrameworkElement targetElement = values[0] as FrameworkElement;
            string styleName = values[1] as string;

            if (styleName == null)
                return null;

            var result = targetElement.TryFindResource(styleName);
            return result;
        }

        public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

Is there another way to get my vector images to match the color of the text?

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

Hi Michael,

Vector images is where WPF could use improvements in general.  Even if you do this kind of simple example, the glyph doesn't end up rendering in red.

<Image TextElement.Foreground="Red" Width="200">
	<Image.Source>
		<DrawingImage>
			<DrawingImage.Drawing>
				<GeometryDrawing Brush="{Binding RelativeSource={RelativeSource Self}, Path=(TextElement.Foreground)}" 
                     		        Geometry="M11.53,2C11.53,4.4 13.5,6.35 15.88,6.35H17.66V8.05C17.66,10.45 19.6,12.39 22,12.4V2.84A0.84,0.84 0 0,0 21.16,2H11.53M6.77,6.8C6.78,9.19 8.72,11.13 11.11,11.14H12.91V12.86C12.92,15.25 14.86,17.19 17.25,17.2V7.63C17.24,7.17 16.88,6.81 16.42,6.8H6.77M2,11.6C2,14 3.95,15.94 6.35,15.94H8.13V17.66C8.14,20.05 10.08,22 12.47,22V12.43A0.84,0.84 0 0,0 11.63,11.59L2,11.6Z" />
			</DrawingImage.Drawing>
		</DrawingImage>
	</Image.Source>
</Image>

A lot of times when we use vector images, we tend to make a DataTemplate with a Path in it since you can easily bind the foreground in that case.  However that doesn't help in controls like DockingWindow that expect an ImageSource.

We are currently working on Themes enhancements for the 2020.1 version (see our blog) and trying to develop better ways to support vector images is one thing on our list, but we haven't started on that just yet.  I'm writing down this thread and logging it with the related TODO item.

Basically you want an easy way to support a vector image in some mono color that tracks the control foreground, right?

We may be able to do something with a custom value converter, or possibly adding other properties that allow for an image-oriented DataTemplate to be specified in addition to an ImageSource, and have the DataTemplate be used for a image display if there is no ImageSource.


Actipro Software Support

Posted 4 years ago by Michael Janulaitis - Corner Bowl Software
Avatar

After an all nighter I bailed on the the vector image to ImageSource.  I was able to covert the images, handle IsSelected but then I noticed the mouse over effect was missing to that put the nail in the coffin.  I am using Vectors throughout my application but have removed all images from the docking tool and document windows.  This is defeinetly something that I feel is important in the next version.  Even with my own code TreeView nodes were a little difficult but I was able to get it all to work as expected.  Yes I agree WPF vector support just isn't there but then that's expected since the technology was developed before vector images were the norm.  I will be looking forward to the next major release of you package. 

Please add a Blade Control so we all can run our software on pre Windows 10 systems with modern UI direction.

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

Keep an eye on our blog since we'll probably ask for image-related feedback in the coming weeks/months.  And I've got this thread written down too so we can refer to it.

For the Blade control, do you mean something like the one in the UWP Community Toolkit that replicates the Azure portal-like UI?  What kind of UI were you looking to put in that kind of control?


Actipro Software Support

Posted 4 years ago by Michael Janulaitis - Corner Bowl Software
Avatar

I develop and sell server management software.  My software runs everything from Windows Server 2019 Server to Server 2008 R2.  I am poping some dialogs when I initially configure objects.  The Blade control makes this process modalless which for me is ideal because I dislike focus being stolen and prefer not to run code behind to load and close dialogs.

[Modified 4 years ago]

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.